ViewPager가 ViewPager2 로 업데이트되면서 사용하는 방법이 바뀌었다.
상단에 탭 메뉴가 있어서 메뉴 클릭 또는 컨텐트를 좌우 슬라이드하며 다른 페이지로 변경한다.
- TabLayout을 쓰기 위해 Dependency에 별다르게 추가하지 않아도 기본으로 material이 들어가있다.
'com.google.android.material:material:1.7.0'
- main activity layout에 tab layout 과 viewpager2 를 추가
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<com.google.android.material.tabs.TabLayout
android:id="@+id/tablayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Monday" />
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tuesday" />
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Wednesday" />
</com.google.android.material.tabs.TabLayout>
<androidx.viewpager2.widget.ViewPager2
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
/>
</LinearLayout>
- 각 탭별로 fragment xml 생성
frag_monday.xml, frag_tuesday.xml, frag_wednesday.xml 약간씩 바꿔서 확인.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="170dp"
android:layout_marginTop="349dp"
android:layout_marginEnd="170dp"
android:text="Monday"
android:textSize="20sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
- 각 fragment 클래스 생성. 이것도 이름만 약간씩 다르게..
public class FragMonday extends Fragment {
private View view ;
public static FragMonday newInstance() {
FragMonday fragMonday = new FragMonday();
return fragMonday;
}
@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
view = inflater.inflate(R.layout.frag_monday, container, false) ;
return view ;
}
}
- Adapter를 만들어야 한다. ViewPagerAdapter class
public class ViewPagerAdapter extends FragmentStateAdapter {
private final List<Fragment> fragmnets = new ArrayList<Fragment>() ;
private final List<String> titles = new ArrayList<>() ;
public ViewPagerAdapter(@NonNull FragmentActivity fragmentActivity) {
super(fragmentActivity);
}
@NonNull
@Override
public Fragment createFragment(int position) {
return fragmnets.get(position) ;
}
@Override
public int getItemCount() {
return fragmnets.size() ;
}
public void addFragment(@NonNull Fragment frag, String title) {
fragmnets.add(frag) ;
titles.add(title) ;
}
@NonNull
public String getTitle(int position) {
return titles.get(position) ;
}
}
- 이제 MainActivity에서 모두 연결시킨다.
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ViewPagerAdapter viewPagerAdapter = new ViewPagerAdapter(this);
viewPagerAdapter.addFragment(FragMonday.newInstance(), "Monday");
viewPagerAdapter.addFragment(FragTuesday.newInstance(), "Tuesday");
viewPagerAdapter.addFragment(FragWednesday.newInstance(), "Wednesday");
ViewPager2 viewPager = findViewById(R.id.viewpager);
viewPager.setAdapter(viewPagerAdapter);
TabLayout tabLayout = findViewById(R.id.tablayout);
TabLayoutMediator tm = new TabLayoutMediator(tabLayout, viewPager, (tab, position) -> {
tab.setText(viewPagerAdapter.getTitle(position)) ;
}) ;
tm.attach();
}
}
끝.
