Создание пролистываемых представлений с вкладками с помощью ViewPager

Представления с перелистыванием позволяют переходить между однородными экранами, например вкладками, с помощью горизонтального жеста пальца или смахивания . Этот шаблон навигации также называется горизонтальным пейджингом . В этом разделе вы узнаете, как создать макет вкладок с режимами пролистывания для переключения между вкладками, а также как отображать полосу заголовка вместо вкладок.

Реализовать просмотр с помощью пролистывания

Вы можете создавать пролистываемые представления с помощью виджета ViewPager в AndroidX. Чтобы использовать ViewPager и вкладки, вам необходимо добавить в проект зависимости для ViewPager и компонентов материала .

Чтобы настроить макет с помощью ViewPager , добавьте элемент <ViewPager> в макет XML. Например, если каждая страница в режиме пролистывания использует весь макет, ваш макет будет выглядеть следующим образом:

<androidx.viewpager.widget.ViewPager
   
xmlns:android="http://schemas.android.com/apk/res/android"
   
android:id="@+id/pager"
   
android:layout_width="match_parent"
   
android:layout_height="match_parent" />

Чтобы вставить дочерние представления, представляющие каждую страницу, вам необходимо подключить этот макет к PagerAdapter . Вы можете выбрать один из двух типов встроенных адаптеров:

  • FragmentPagerAdapter : используйте это при навигации между небольшим фиксированным количеством одноуровневых экранов.
  • FragmentStatePagerAdapter : используйте это при перелистывании неизвестного количества страниц. FragmentStatePagerAdapter оптимизирует использование памяти, уничтожая фрагменты по мере ухода пользователя.

В качестве примера можно использовать FragmentStatePagerAdapter для перемещения по коллекции объектов Fragment :

class CollectionDemoFragment : Fragment() {
   
// When requested, this adapter returns a DemoObjectFragment
   
// representing an object in the collection.
   
private lateinit var demoCollectionPagerAdapter: DemoCollectionPagerAdapter
   
private lateinit var viewPager: ViewPager

   
override fun onCreateView(inflater: LayoutInflater,
            container
: ViewGroup?,
            savedInstanceState
: Bundle?): View? {
       
return inflater.inflate(R.layout.collection_demo, container, false)
   
}

   
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        demoCollectionPagerAdapter
= DemoCollectionPagerAdapter(childFragmentManager)
        viewPager
= view.findViewById(R.id.pager)
        viewPager
.adapter = demoCollectionPagerAdapter
   
}
}

// Since this is an object collection, use a FragmentStatePagerAdapter,
// NOT a FragmentPagerAdapter.
class DemoCollectionPagerAdapter(fm: FragmentManager) : FragmentStatePagerAdapter(fm) {

   
override fun getCount(): Int  = 100

   
override fun getItem(i: Int): Fragment {
       
val fragment = DemoObjectFragment()
        fragment
.arguments = Bundle().apply {
           
// Our object is just an integer :-P
            putInt
(ARG_OBJECT, i + 1)
       
}
       
return fragment
   
}

   
override fun getPageTitle(position: Int): CharSequence {
       
return "OBJECT ${(position + 1)}"
   
}
}

private const val ARG_OBJECT = "object"

// Instances of this class are fragments representing a single
// object in the collection.
class DemoObjectFragment : Fragment() {

   
override fun onCreateView(inflater: LayoutInflater,
           container
: ViewGroup?,
           savedInstanceState
: Bundle?): View {
       
return inflater.inflate(R.layout.fragment_collection_object, container, false)
   
}

   
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        arguments
?.takeIf { it.containsKey(ARG_OBJECT) }?.apply {
           
val textView: TextView = view.findViewById(android.R.id.text1)
            textView
.text = getInt(ARG_OBJECT).toString()
       
}
   
}
}
public class CollectionDemoFragment extends Fragment {
   
// When requested, this adapter returns a DemoObjectFragment
   
// representing an object in the collection.
   
DemoCollectionPagerAdapter demoCollectionPagerAdapter;
   
ViewPager viewPager;

   
@Nullable
   
@Override
   
public View onCreateView(@NonNull LayoutInflater inflater,
           
@Nullable ViewGroup container,
           
@Nullable Bundle savedInstanceState) {
       
return inflater.inflate(R.layout.collection_demo, container, false);
   
}

   
@Override
   
public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
        demoCollectionPagerAdapter
= new DemoCollectionPagerAdapter(getChildFragmentManager());
        viewPager
= view.findViewById(R.id.pager);
        viewPager
.setAdapter(demoCollectionPagerAdapter);
   
}
}

// Since this is an object collection, use a FragmentStatePagerAdapter,
// NOT a FragmentPagerAdapter.
public class DemoCollectionPagerAdapter extends FragmentStatePagerAdapter {
   
public DemoCollectionPagerAdapter(FragmentManager fm) {
       
super(fm);
   
}

   
@Override
   
public Fragment getItem(int i) {
       
Fragment fragment = new DemoObjectFragment();
       
Bundle args = new Bundle();
       
// Our object is just an integer :-P
        args
.putInt(DemoObjectFragment.ARG_OBJECT, i + 1);
        fragment
.setArguments(args);
       
return fragment;
   
}

   
@Override
   
public int getCount() {
       
return 100;
   
}

   
@Override
   
public CharSequence getPageTitle(int position) {
       
return "OBJECT " + (position + 1);
   
}
}

// Instances of this class are fragments representing a single
// object in the collection.
public class DemoObjectFragment extends Fragment {
   
public static final String ARG_OBJECT = "object";

   
@Override
   
public View onCreateView(LayoutInflater inflater,
           
ViewGroup container, Bundle savedInstanceState) {
       
return inflater.inflate(R.layout.fragment_collection_object, container, false);
   
}

   
@Override
   
public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
       
Bundle args = getArguments();
       
((TextView) view.findViewById(android.R.id.text1))
               
.setText(Integer.toString(args.getInt(ARG_OBJECT)));
   
}
}

В следующих разделах показано, как можно добавлять вкладки для облегчения навигации между страницами.

Добавляйте вкладки с помощью TabLayout

TabLayout позволяет отображать вкладки горизонтально. При использовании вместе с ViewPager TabLayout предоставляет знакомый интерфейс для навигации между страницами в режиме пролистывания.

Рисунок 1. TabLayout с четырьмя вкладками.

Чтобы включить TabLayout в ViewPager , добавьте элемент <TabLayout> внутри элемента <ViewPager> , как показано ниже:

<androidx.viewpager.widget.ViewPager
   
xmlns:android="http://schemas.android.com/apk/res/android"
   
android:id="@+id/pager"
   
android:layout_width="match_parent"
   
android:layout_height="match_parent">

   
<com.google.android.material.tabs.TabLayout
       
android:id="@+id/tab_layout"
       
android:layout_width="match_parent"
       
android:layout_height="wrap_content" />

</androidx.viewpager.widget.ViewPager>

Затем используйте setupWithViewPager() чтобы связать TabLayout с ViewPager . Отдельные вкладки в TabLayout автоматически заполняются заголовками страниц из PagerAdapter :

class CollectionDemoFragment : Fragment() {
   
...
   
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
       
val tabLayout = view.findViewById(R.id.tab_layout)
        tabLayout
.setupWithViewPager(viewPager)
   
}
   
...
}

class DemoCollectionPagerAdapter(fm: FragmentManager) : FragmentStatePagerAdapter(fm) {

   
override fun getCount(): Int  = 4

   
override fun getPageTitle(position: Int): CharSequence {
       
return "OBJECT ${(position + 1)}"
   
}
   
...
}
public class CollectionDemoFragment extends Fragment {
   
...
   
@Override
   
public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
       
TabLayout tabLayout = view.findViewById(R.id.tab_layout);
        tabLayout
.setupWithViewPager(viewPager);
   
}
   
...
}

public class DemoCollectionPagerAdapter extends FragmentStatePagerAdapter {
   
...
   
@Override
   
public int getCount() {
       
return 4;
   
}

   
@Override
   
public CharSequence getPageTitle(int position) {
       
return "OBJECT " + (position + 1);
   
}

   
...
}

Дополнительные рекомендации по проектированию макетов вкладок см. в документации Material Design для вкладок .