Как вы создаете Android View Pager с индикатором точек?

Возможно, многие из вас (как я), имеют проблемы с созданием ViewPager с нижними точками, например: Введите описание изображения здесь

Как вы создаете такой Android ViewPager?

Solutions Collecting From Web of "Как вы создаете Android View Pager с индикатором точек?"

Все, что нам нужно: ViewPager , TabLayout и 2 drawables для выбранных и стандартных точек.

Во-первых, мы должны добавить TabLayout к нашему экрану и подключить его к ViewPager . Мы можем сделать это двумя способами:


Вложенная TabLayout в ViewPager

 <android.support.v4.view.ViewPager android:id="@+id/photos_viewpager" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.design.widget.TabLayout android:layout_width="match_parent" android:layout_height="wrap_content"/> </android.support.v4.view.ViewPager> 

В этом случае TabLayout будет автоматически подключаться к ViewPager , но TabLayout будет рядом с ViewPager , а не над ним.


Отдельный TabLayout

 <android.support.v4.view.ViewPager android:id="@+id/photos_viewpager" android:layout_width="match_parent" android:layout_height="match_parent"/> <android.support.design.widget.TabLayout android:id="@+id/tab_layout" android:layout_width="match_parent" android:layout_height="wrap_content"/> 

В этом случае мы можем поместить TabLayout любом месте, но мы должны подключить TabLayout с помощью ViewPager программно

 ViewPager pager = (ViewPager) view.findViewById(R.id.photos_viewpager); PagerAdapter adapter = new PhotosAdapter(getChildFragmentManager(), photosUrl); pager.setAdapter(adapter); TabLayout tabLayout = (TabLayout) view.findViewById(R.id.tab_layout); tabLayout.setupWithViewPager(pager, true); 

Как только мы создали наш макет, мы должны подготовить наши точки. Поэтому мы создаем три файла: selected_dot.xml , default_dot.xml и tab_selector.xml .


selected_dot.xml

 <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item> <shape android:innerRadius="0dp" android:shape="ring" android:thickness="8dp" android:useLevel="false"> <solid android:color="@color/colorAccent"/> </shape> </item> </layer-list> 

default_dot.xml

 <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item> <shape android:innerRadius="0dp" android:shape="ring" android:thickness="8dp" android:useLevel="false"> <solid android:color="@android:color/darker_gray"/> </shape> </item> </layer-list> 

tab_selector.xml

 <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/selected_dot" android:state_selected="true"/> <item android:drawable="@drawable/default_dot"/> </selector> 

Теперь нам нужно добавить только 3 строки кода в TabLayout в нашем макете xml.

 app:tabBackground="@drawable/tab_selector" app:tabGravity="center" app:tabIndicatorHeight="0dp" 

Документация по переполнению стека

Сначала создайте макет, в котором вы получите один LinerLayout для точек, которые отображаются над вашим плейером View

 <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content" > <android.support.v4.view.ViewPager android:id="@+id/view_pager" android:layout_width="match_parent" android:layout_height="wrap_content"/> <LinearLayout android:id="@+id/pager_dots" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:background="@android:color/transparent" android:gravity="center_horizontal" android:orientation="horizontal" android:layout_marginBottom="10dp"> </LinearLayout> </RelativeLayout> **After that create 2 drawables** **1. Unselected Drawable** <?xml version="1.0" encoding="utf-8"?> <shape android:shape="oval" xmlns:android="http://schemas.android.com/apk/res/android"> <solid android:color="@android:color/transparent"/> <size android:width="12dp" android:height="12dp"/> <stroke android:width="1dp" android:color="#ffffff"/> </shape> **2. Selected Drawable** <?xml version="1.0" encoding="utf-8"?> <shape android:shape="oval" xmlns:android="http://schemas.android.com/apk/res/android"> <solid android:color="@android:color/transparent"/> <size android:width="12dp" android:height="12dp"/> <stroke android:width="1dp" android:color="#000000"/> </shape> 

После этого установочный адаптер

  private LinearLayout llPagerDots; private ViewPager viewPager; private ArrayList<String> eventImagesUrl; private HomeViewPagerAdapter homeViewPagerAdapter; private ImageView[] ivArrayDotsPager; viewPager=(ViewPager)findViewById(R.id.view_pager); llPagerDots = (LinearLayout)findViewById(R.id.pager_dots); homeViewPagerAdapter = new HomeViewPagerAdapter(mContext, eventImagesUrl); viewPager.setAdapter(homeViewPagerAdapter); setupPagerIndidcatorDots(); ivArrayDotsPager[0].setImageResource(R.drawable.page_indicator_selected); viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } @Override public void onPageSelected(int position) { for (int i = 0; i < ivArrayDotsPager.length; i++) { ivArrayDotsPager[i].setImageResource(R.drawable.page_indicator_unselected); } ivArrayDotsPager[position].setImageResource(R.drawable.page_indicator_selected); } @Override public void onPageScrollStateChanged(int state) { } }); 

Создайте метод setupPagerIndidcatorDots (): –

 private void setupPagerIndidcatorDots() { ivArrayDotsPager = new ImageView[eventImagesUrl.size()]; for (int i = 0; i < ivArrayDotsPager.length; i++) { ivArrayDotsPager[i] = new ImageView(getActivity()); LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT); params.setMargins(5, 0, 5, 0); ivArrayDotsPager[i].setLayoutParams(params); ivArrayDotsPager[i].setImageResource(R.drawable.page_indicator_unselected); //ivArrayDotsPager[i].setAlpha(0.4f); ivArrayDotsPager[i].setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { view.setAlpha(1); } }); llPagerDots.addView(ivArrayDotsPager[i]); llPagerDots.bringToFront(); } } 

Вы можете проверить мою библиотеку для обработки вашего запроса: https://github.com/tommybuonomo/dotsindicator

В вашем XML-макете

  <com.tbuonomo.viewpagerdotsindicator.DotsIndicator android:id="@+id/dots_indicator" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" app:dotsColor="@color/colorPrimary" app:dotsSize="16dp" app:dotsWidthFactor="3" /> 

В коде Java

 dotsIndicator = (DotsIndicator) findViewById(R.id.dots_indicator); viewPager = (ViewPager) findViewById(R.id.view_pager); adapter = new ViewPagerAdapter(); viewPager.setAdapter(adapter); dotsIndicator.setViewPager(viewPager);