- Viewpager
- 스와이프 이벤트로 화면을 전환할 때 사용
- FragmentStateAdapter : 각 항목을 프래그먼트로 작성했을 때 사용
- Indicator : 화면 하단에 화면 전환시 몇 번째 화면인지를 표시하는 뷰
step 1 : MainAct ) ViewPagerFragment를 띄워주는 역할만 수행
LinearLayout을 전체화면으로 지정 > 해당 Layout에 ViewPagerFragment를 띄움
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
// ViewPagerFragment를 fragmentFrame(linearLayout의 id)에 끼움
val transaction = supportFragmentManager.beginTransaction()
transaction.add(
R.id.fragmentFrame,
ViewPagerFragment()
)
.commit()
}
}
step 2 : ViewPagerFragment 만들기 > .xml에 ViewPager을 추가한다.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ViewPagerFragment">
<androidx.viewpager.widget.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent">
</androidx.viewpager.widget.ViewPager>
</androidx.constraintlayout.widget.ConstraintLayout>
step 3 : 2개의 Fragment 생성
step 4 : FragmntStartPagerAdapter 생성
class ViewPagerAdapter(activity : FragmentManager) : FragmentStatePagerAdapter(activity){
val fragments : ArrayList<Fragment> = ArrayList()
// 항목의 개수 구하기
override fun getCount(): Int = fragments.size
// 반환하는 프래그먼트 객체가 각 항목에 출력
override fun CreateFragment(position: Int): Fragment = fragments[position]
fun addItems(fragment : Fragment){
fragments.add(fragment)
}
}
Fragment를 담고 있는 배열리스트 타입의 변수를 만들어서 ViewPager에서 사용될 화면들 모두 담는다.
그 다음 변수를 가져와서 getCount(), CreateFragment() 함수를 통해 넘겨준다.
- TabLayout
- 탭으로 구분하는 화면에서 탭 버튼을 배치하는 레이아웃
<com.google.android.material.tabs.TabLayout android:id="@+id/locker_content_tb" android:layout_width="260dp" android:layout_height="wrap_content" app:tabIndicatorFullWidth="false" app:tabIndicatorColor="#3f3fff" app:tabTextColor="#3f3fff" app:tabRippleColor="#00ff0000" app:layout_constraintTop_toBottomOf="@id/locker_title2_tv" app:layout_constraintStart_toStartOf="parent" /> <androidx.viewpager2.widget.ViewPager2 android:id="@+id/locker_content_vp" android:layout_width="match_parent" android:layout_height="0dp" android:layout_marginTop="10dp" app:layout_constraintVertical_bias="1.0" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@id/locker_btn_playlist_select_off_iv"/>
- TabLayoutMediator
: 뷰 페이저 연동하기 (탭 레이아웃과 뷰 페이저 연동)step 1 : XML 파일에 TabLayout과 ViewPager2를 등록 > step 2 : 코드에서 TabLayoutMediator 사용하여 둘을 연공하기private val information = arrayListOf("저장한 곡","음악파일", "저장앨범") //코드에서 탭 버튼 정의한 배열 입력 TabLayoutMediator(binding.lockerContentTb, binding.lockerContentVp){ tab, position -> tab.text = information[position] }.attach()
- Indicator
- 탭으로 구분하는 화면에서 탭 버튼을 배치하는 레이아웃
- Bottom Navigation
- 사용 준비 ) build.gradle에 정의 추가
implementation 'com.android.support:design:29.0.0' implementation 'com.google.android.material:material:1.2.0'
- 사용법 ) XML 코드 작성 > 코드 작성(선택한 id마다 다른 fragment를 보여줌)
- Fragment 전환
- menu : 선택될 때의 색과 선택되지 않았을 때의 색 적용
step 1) Resource File (Resource type : Color) 을 만들어서 위와 같은 코드 작성app:itemIconTint="@color/bottom_navigation_item_selector" app:itemTextColor="@color/bottom_navigation_item_selector"<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_checked="true" android:color="@android:color/black" /> <item android:color="@android:color/darker_gray" /> </selector>
- step 2) color 지정 코드 수정
- 사용 준비 ) build.gradle에 정의 추가
- Adapter
: 뷰 홀도의 뷰에 데이터를 출력해 각 항목을 만들어 주는 역할 수행
: 어댑터에 재정의해야 하는 함수 ) getItemCount() : 항목의 개수 판단하려고 자동 호출
onCreateViewHolder() : 항목의 뷰를 가지는 뷰 홀더를 준비하려고 자동으로 호출
onBindViewHolder() ; 뷰 홀더의 뷰에 데이터를 출력하려고 자동으로 호출
'안드로이드' 카테고리의 다른 글
[UMC] 6주차 - ListView/ RecyclerView / 데이터 렌더링 (0) | 2022.01.05 |
---|---|
[UMC] 5주차 - 액티비티 생명주기 / MediaPlayer / GSON,JSON (0) | 2022.01.05 |
[UMC] 4주차 - Thread(스레드) 개념 및 사용법 (0) | 2022.01.05 |
[UMC] 2주차 - 화면 전환 (0) | 2022.01.05 |
[UMC] 1주차 - 앱의 기본 기능 구현 (0) | 2022.01.05 |