Comment créez-vous un téléavertisseur Android View avec un indicateur de points?

Beaucoup d’entre vous (comme moi) ont ViewPager créer ViewPager avec des points bas, comme ceci: entrer la description de l'image ici

Comment créez-vous un tel ViewPager Android?

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

    Tout d’abord, nous devons append TabLayout à notre disposition d’écran et le connecter à ViewPager . Nous pouvons le faire de deux manières:


    TabLayout nestedMise en TabLayout dans ViewPager

        

    Dans ce cas, TabLayout sera automatiquement connecté à ViewPager , mais TabLayout sera à côté de ViewPager , pas au-dessus.


    TabLayout séparé

       

    Dans ce cas, nous pouvons mettre TabLayout n’importe où, mais nous devons connecter TabLayout avec ViewPager programmation

     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 .


    sélectionné_dot.xml

             

    default_dot.xml

             

    tab_selector.xml

          

    Maintenant, nous devons append seulement 3 lignes de code à TabLayout dans notre présentation XML.

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

    Commencez par créer une mise en page, en donnant un LinerLayout pour les points qui s’affichent sur votre pagineur de vue

          

    Après cela créer 2 tirables

    1. non sélectionné

           

    2. Tirable sélectionné

           

    Après cet ensemble d’adaptateur

     private LinearLayout llPagerDots; private ViewPager viewPager; private ArrayList eventImagesUrl; private HomeViewPagerAdapter homeViewPagerAdapter; private ImageView[] ivArrayDotsPager; public void setUpViewPager() { 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éez 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

       

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

    Votre xml

          

    créer un dessinable. clic droit sur le tirable -> nouveau -> nom de ressource de fichier pouvant être dessiné ce fichier

    tab_selector.xml

       

    Maintenant, il y a deux autres fichiers XML. créer deux fichiers XML supplémentaires avec un nom respecté. ce sont l’indicateur de sélection et l’indicateur non sélectionné

    selected_tab.xml

             

    unselected_tab.xml

             

    Placez ViewFlipper et viewFlipper_linear_dot_lay (Linearlayout) sur la même ligne de base et suivez celle ci-dessous

     viewFlipper_linear_dot_lay= (LinearLayout) findViewById(R.id.dots_lay); setupDotsOnViewPager(images_viewFlipper); for (int i = 0; i < images_viewFlipper.size(); i++) { //Add Images to ViewFlipper } private void setupDotsOnViewPager(ArrayList images_viewFlipper) { images_linear = new ImageView[images_viewFlipper.size()]; for (int i = 0; i < images_linear.length; i++) { images_linear[i] = new ImageView(this); LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT); params.setMargins(5, 0, 5, 0); params.gravity = Gravity.BOTTOM | Gravity.CENTER; images_linear[i].setLayoutParams(params); images_linear[i].setImageResource(R.drawable.unselected); viewFlipper_linear_dot_lay.addView(images_linear[i]); viewFlipper_linear_dot_lay.bringToFront(); } } 

    Et OnRight & OnLeft obtient le code ci-dessous

     for (int i = 0; i < images_linear.length; i++) { images_linear[i].setImageResource(R.drawable.unselected); } images_linear[viewFlipper.getDisplayedChild()].setImageResource(R.drawable.selected);