¿Cómo se crea un Buscapersonas de Android con un indicador de puntos?

Probablemente muchos de ustedes (como yo) tengan problemas para crear ViewPager con puntos bajos, como este: enter image description here

¿Cómo se crea una ViewPager para Android?

Todo lo que necesitamos es: ViewPager , TabLayout y 2 diseños para puntos seleccionados y predeterminados.

En primer lugar, debemos agregar TabLayout a nuestro diseño de pantalla y conectarlo con ViewPager . Podemos hacer esto de dos maneras:


Anidado TabLayout en ViewPager

    

En este caso, TabLayout se conectará automáticamente con ViewPager , pero TabLayout estará junto a ViewPager , no sobre él.


TabLayout separado

   

En este caso, podemos poner TabLayout cualquier lugar, pero tenemos que conectar TabLayout con ViewPager progtwigción

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

Una vez que creamos nuestro diseño, tenemos que preparar nuestros puntos. Así que creamos tres archivos: selected_dot.xml , default_dot.xml y tab_selector.xml .


selected_dot.xml

         

default_dot.xml

         

tab_selector.xml

      

Ahora necesitamos agregar solo 3 líneas de código a TabLayout en nuestro diseño XML.

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

Primero crea un diseño, en el cual obtienes un LinerLayout for Dots que se muestra sobre tu Buscapersonas.

      

Después de eso crea 2 drawables

1. Sin seleccionar Drawable

       

2. Selected Drawable

       

Después de eso, configure el adaptador

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

Cree un método 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(); } 

Puede consultar mi biblioteca para gestionar su solicitud: https://github.com/tommybuonomo/dotsindicator

En tu diseño XML

   

En tu código de Java

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

Tu xml

      

crea un dibujable haga clic derecho en drawable -> new -> Drawable file resource name that file

tab_selector.xml

   

Ahora hay dos archivos xml más. crea dos archivos xml más con nombre respetado. estos son el indicador de selección y el indicador no seleccionado

selected_tab.xml

         

unselected_tab.xml

         

Coloque ViewFlipper y viewFlipper_linear_dot_lay (Linearlayout) en samebaseline y siga el siguiente

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

Y OnRight & OnLeft getsures colocan el siguiente código

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