Comment créez-vous un Pager de vue Android avec un indicateur de points?

Probablement beaucoup d'entre vous (comme moi), ont du ViewPager créer ViewPager avec des points inférieurs, comme ceci: Entrez la description de l'image ici

Comment créez-vous un tel ViewPager Android?

  • Comment faire passer l'indicateur de la page Circle vers l'avant dans Android
  • Android - Comment puis-je localiser l'indicateur de tabulation entre les deux onglets TextViews?
  • 3 Solutions collect form web for “Comment créez-vous un Pager de vue Android avec un indicateur de points?”

    Tout ce dont nous avons besoin sont: ViewPager , TabLayout et 2 drawables pour les points sélectionnés et par défaut.

    Tout d'abord, nous devons ajouter TabLayout à notre disposition de l'écran et le connecter à ViewPager . Nous pouvons le faire de deux façons:


    TabLayout dans 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> 

    Dans ce cas, TabLayout sera automatiquement connecté avec ViewPager , mais TabLayout sera à côté de ViewPager , pas sur lui.


    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"/> 

    Dans ce cas, nous pouvons placer TabLayout n'importe où, mais nous devons connecter TabLayout avec ViewPager programme

     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); 

    Une fois que nous avons créé notre mise en page, nous devons préparer nos points. Nous créons donc trois fichiers: selected_dot.xml , default_dot.xml et 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> 

    Maintenant, nous devons ajouter seulement 3 lignes de code à TabLayout dans notre mise en page xml.

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

    Documentation de débordement d'empilement

    Créez d'abord une mise en page, en donnant un LinerLayout pour les points qui s'affiche sur votre Pager de vue

     <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> 

    Après cet adaptateur

      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) { } }); 

    Créer une méthode 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(); } } 

    Vous pouvez consulter ma bibliothèque pour gérer votre demande: https://github.com/tommybuonomo/dotsindicator

    Dans votre mise en page 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" /> 

    Dans votre code Java

     dotsIndicator = (DotsIndicator) findViewById(R.id.dots_indicator); viewPager = (ViewPager) findViewById(R.id.view_pager); adapter = new ViewPagerAdapter(); viewPager.setAdapter(adapter); dotsIndicator.setViewPager(viewPager); 
    coAndroid est un fan Android de Google, tout sur les téléphones Android, Android Wear, Android Dev et Android Games Apps.