Pestañas de diseño de material de Android (diseño de pestaña) con deslizar

El diseño de las pestañas se puede ver debajo de la barra de herramientas con el Buscapersonas, que se utiliza para crear vistas deslizables Las pestañas están diseñadas para trabajar con fragmentos. Úselos para deslizar fragmentos en el buscapersonas. En este artículo, le mostraremos cómo implementar pestañas de diseño de materiales en su aplicación de Android.

Después de crear un nuevo proyecto, abra build.gradle del nivel de aplicación y agregue la biblioteca de soporte de diseño porque Tablayout es parte de la Biblioteca de soporte de diseño de Android:

compile 'com.android.support:design:27.0.2'

Agregue diseño de pestaña y vea el localizador en su diseño activity_main.xml


app_bar.xml para barra de herramientas


style.xml

Cree un adaptador de pestaña que se extienda a FragmentStatePagerAdapter. Cree dos listas para la lista de fragmentos y la lista de títulos. Cree un método para pasar el fragmento y el título que desea agregar.

TabAdapter.java

paquete com.example.demoproject;
importar android.support.annotation.Nullable;
importar android.support.v4.app.Fragment;
importar android.support.v4.app.FragmentManager;
importar android.support.v4.app.FragmentStatePagerAdapter;
import java.util.ArrayList;
import java.util.List;
La clase pública TabAdapter extiende FragmentStatePagerAdapter {
Lista final privada  mFragmentList = new ArrayList <> ();
Lista final privada  mFragmentTitleList = new ArrayList <> ();
TabAdapter (FragmentManager fm) {
super (fm);
}
@Anular
Fragmento público getItem (posición int) {
return mFragmentList.get (posición);
}
public void addFragment (Fragment fragment, String title) {
mFragmentList.add (fragmento);
mFragmentTitleList.add (título);
}
@Nullable
@Anular
public CharSequence getPageTitle (int position) {
return mFragmentTitleList.get (posición);
}
@Anular
public int getCount () {
return mFragmentList.size ();
}
}

Crear fragmentos para ver el localizador. Agregaremos fragmentos en el adaptador de la actividad.

Tab1Fragment.java

paquete com.example.demoproject;
importar android.os.Bundle;
importar android.support.v4.app.Fragment;
importar android.view.LayoutInflater;
importar android.view.View;
importar android.view.ViewGroup;
clase pública Tab1Fragment extiende Fragment {
@Anular
 Public view onCreateView (inflador LayoutInflater, contenedor ViewGroup, Bundle savedInstanceState) {
 return inflater.inflate (R.layout.fragment_one, container, false);
 }
}

Diseño para Tab1Fragment fragment_one.xml



 

Del mismo modo, cree más fragmentos que desee agregar, Tab2Fragment, Tab3Fragment, etc. con sus diseños.

Defina el diseño de pestaña y vea el localizador desde el diseño, defina el adaptador, agregue sus fragmentos con título, configure el adaptador para ver la configuración del localizador y tablayout con view pager como deslizador de visor con tablayout.

MainActivity.java

paquete com.example.demoproject;
importar android.os.Bundle;
importar android.support.design.widget.TabLayout;
importar android.support.v4.view.ViewPager;
importar android.support.v7.app.AppCompatActivity;
clase pública MainActivity extiende AppCompatActivity {
adaptador privado TabAdapter;
tabLayout privado tabLayout;
ViewPager privado viewPager;
@Anular
vacío protegido onCreate (Bundle savedInstanceState) {
super.onCreate (savedInstanceState);
setContentView (R.layout.activity_demo);
viewPager = (ViewPager) findViewById (R.id.viewPager);
tabLayout = (TabLayout) findViewById (R.id.tabLayout);
adaptador = nuevo TabAdapter (getSupportFragmentManager ());
adapter.addFragment (new Tab1Fragment (), "Tab 1");
adapter.addFragment (new Tab2Fragment (), "Tab 2");
adapter.addFragment (new Tab3Fragment (), "Tab 3");
viewPager.setAdapter (adaptador);
tabLayout.setupWithViewPager (viewPager);
}
}

Ejecute este código y encontrará el siguiente resultado:

Algunas opciones para personalizar la apariencia de las pestañas:
app: tabGravity = "fill" para la gravedad de la pestaña Navegación. Otro es el centro para colocar pestañas de navegación desde el centro
aplicación: tabIndicatorColor = ”@ color / white” para el indicador en pestañas. Aquí puedes ver el indicador blanco.
aplicación: tabIndicatorHeight = ”4dp” para la altura del indicador.
app: tabMode = "fixed" para el modo tab. Otro es desplazable para muchas más pestañas.
app: tabTextColor = ”@ color / semi_yellow” para el color del texto de la pestaña no seleccionado.
aplicación: tabSelectedTextColor = ”@ color / yellow” para el color del texto de la pestaña seleccionada.

Si desea agregar iconos a la pestaña, debe llamar al método setIcon () de la pestaña. Cree una matriz de iconos y asigne cada uno para cada pestaña de esta manera:

private int [] tabIcons = {
 R.drawable.home,
 R.drawable.notification,
 R.drawable.star
};
tabLayout.getTabAt (0) .setIcon (tabIcons [0]);
tabLayout.getTabAt (1) .setIcon (tabIcons [1]);
tabLayout.getTabAt (2) .setIcon (tabIcons [2]);

Si desea colocar solo íconos en la pestaña, modifique el método getPageTitle () en la clase de adaptador de la siguiente manera:

@Anular
public CharSequence getPageTitle (int position) {
 volver nulo;
}

Salida:

Aquí puede ver que no hay más personalización después de esto. Para obtener más pestañas personalizadas, debe crear una vista de pestañas personalizada para las pestañas de navegación manualmente.

Diseño de pestaña de navegación personalizada:
Crear un diseño personalizado para la pestaña custom_tab.xml



Agregue el siguiente método en su TabAdapter:

vista pública getTabView (posición int) {
View view = LayoutInflater.from (context) .inflate (R.layout.custom_tab, null);
TextView tabTextView = view.findViewById (R.id.tabTextView);
tabTextView.setText (mFragmentTitleList.get (position));
vista de retorno;
}

Elimine el siguiente código de su actividad:

tabLayout.getTabAt (0) .setIcon (tabIcons [0]);
tabLayout.getTabAt (1) .setIcon (tabIcons [1]);
tabLayout.getTabAt (2) .setIcon (tabIcons [2]);

Agregue el siguiente código en su actividad después de llamar al método setAdapter ():

for (int i = 0; i 

Ahora, si desea mostrar texto grande en la pestaña seleccionada o cambiar el color del texto, puede hacerlo creando un método separado en su adaptador como getSelectedTabView () como se muestra a continuación:

vista pública getSelectedTabView (posición int) {
View view = LayoutInflater.from (context) .inflate (R.layout.custom_tab, null);
TextView tabTextView = view.findViewById (R.id.tabTextView);
tabTextView.setText (mFragmentTitleList.get (position));
tabTextView.setTextSize (26); // para texto grande, aumente el tamaño del texto
tabTextView.setTextColor (ContextCompat.getColor (contexto, R.color.yellow));
vista de retorno;
}

Modifique su código DemoActivity.java de la siguiente manera:

paquete com.example.demoproject;
importar android.os.Bundle;
importar android.support.design.widget.TabLayout;
importar android.support.v4.view.ViewPager;
importar android.support.v7.app.AppCompatActivity;
importar android.view.LayoutInflater;
importar android.view.View;
importar android.widget.TextView;
DemoActivity de clase pública extiende AppCompatActivity {
adaptador privado TabAdapter;
tabLayout privado tabLayout;
ViewPager privado viewPager;
@Anular
vacío protegido onCreate (Bundle savedInstanceState) {
super.onCreate (savedInstanceState);
setContentView (R.layout.activity_demo);
viewPager = (ViewPager) findViewById (R.id.viewPager);
tabLayout = (TabLayout) findViewById (R.id.tabLayout);
adaptador = nuevo TabAdapter (getSupportFragmentManager (), esto);
adapter.addFragment (new Tab1Fragment (), "Tab 1");
adapter.addFragment (new Tab2Fragment (), "Tab 2");
adapter.addFragment (new Tab3Fragment (), "Tab 3");
viewPager.setAdapter (adaptador);
tabLayout.setupWithViewPager (viewPager);
highLightCurrentTab (0); // para la vista de pestaña seleccionada inicialmente
viewPager.addOnPageChangeListener (nuevo ViewPager.OnPageChangeListener () {
@Anular
public void onPageScrolled (int position, float positionOffset, int positionOffsetPixels) {
 }
@Anular
public void onPageSelected (posición int) {
highLightCurrentTab (posición); // para cambio de pestaña
}
@Anular
public void onPageScrollStateChanged (int state) {
}
});
}
private void highLightCurrentTab (posición int) {
for (int i = 0; i 
TabLayout.Tab tab = tabLayout.getTabAt (posición);
afirmar pestaña! = nulo;
tab.setCustomView (nulo);
tab.setCustomView (adapter.getSelectedTabView (posición));
}
}

Salida:

Ahora igual que TextView, agregue ImageView al diseño de la pestaña:


Cambie a su código DemoActivity.java:

paquete com.example.demoproject;
importar android.os.Bundle;
importar android.support.design.widget.TabLayout;
importar android.support.v4.view.ViewPager;
importar android.support.v7.app.AppCompatActivity;
importar android.view.LayoutInflater;
importar android.view.View;
importar android.widget.TextView;
DemoActivity de clase pública extiende AppCompatActivity {
adaptador privado TabAdapter;
 tabLayout privado tabLayout;
 ViewPager privado viewPager;
 private int [] tabIcons = {
 R.drawable.home,
 R.drawable.notification,
 R.drawable.star
 };
@Anular
 vacío protegido onCreate (Bundle savedInstanceState) {
 super.onCreate (savedInstanceState);
 setContentView (R.layout.activity_demo);
 viewPager = (ViewPager) findViewById (R.id.viewPager);
 tabLayout = (TabLayout) findViewById (R.id.tabLayout);
adaptador = nuevo TabAdapter (getSupportFragmentManager (), esto);
 adapter.addFragment (new Tab1Fragment (), “Tab 1”, tabIcons [0]);
 adapter.addFragment (new Tab2Fragment (), “Tab 2”, tabIcons [1]);
 adapter.addFragment (new Tab3Fragment (), “Tab 3”, tabIcons [2]);
viewPager.setAdapter (adaptador);
 tabLayout.setupWithViewPager (viewPager);
highLightCurrentTab (0);
viewPager.addOnPageChangeListener (nuevo ViewPager.OnPageChangeListener () {
 @Anular
 public void onPageScrolled (int position, float positionOffset, int positionOffsetPixels) {
 }
@Anular
 public void onPageSelected (posición int) {
 highLightCurrentTab (posición);
 }
@Anular
 public void onPageScrollStateChanged (int state) {
 }
 });
 }
private void highLightCurrentTab (posición int) {
 for (int i = 0; i 
TabLayout.Tab tab = tabLayout.getTabAt (posición);
 afirmar pestaña! = nulo;
 tab.setCustomView (nulo);
 tab.setCustomView (adapter.getSelectedTabView (posición));
 }
}

Cambios en su clase de Adaptador de pestañas:

paquete com.example.demoproject;
importar android.content.Context;
importar android.graphics.PorterDuff;
importar android.support.annotation.Nullable;
importar android.support.v4.app.Fragment;
importar android.support.v4.app.FragmentManager;
importar android.support.v4.app.FragmentStatePagerAdapter;
importar android.support.v4.content.ContextCompat;
importar android.view.LayoutInflater;
importar android.view.View;
importar android.widget.ImageView;
importar android.widget.TextView;
import java.util.ArrayList;
import java.util.List;
La clase pública TabAdapter extiende FragmentStatePagerAdapter {
Lista final privada  mFragmentList = new ArrayList <> ();
Lista final privada  mFragmentTitleList = new ArrayList <> ();
Lista final privada  mFragmentIconList = new ArrayList <> ();
contexto de contexto privado;
TabAdapter (FragmentManager fm, Context context) {
super (fm);
this.context = contexto;
}
@Anular
Fragmento público getItem (posición int) {
return mFragmentList.get (posición);
}
public void addFragment (Fragmento de fragmento, Título de cadena, int tabIcon) {
mFragmentList.add (fragmento);
mFragmentTitleList.add (título);
mFragmentIconList.add (tabIcon);
}
@Nullable
@Anular
public CharSequence getPageTitle (int position) {
// devuelve mFragmentTitleList.get (position);
volver nulo;
}
@Anular
public int getCount () {
return mFragmentList.size ();
}
vista pública getTabView (posición int) {
View view = LayoutInflater.from (context) .inflate (R.layout.custom_tab, null);
TextView tabTextView = view.findViewById (R.id.tabTextView);
tabTextView.setText (mFragmentTitleList.get (position));
ImageView tabImageView = view.findViewById (R.id.tabImageView);
tabImageView.setImageResource (mFragmentIconList.get (position));
vista de retorno;
}
vista pública getSelectedTabView (posición int) {
View view = LayoutInflater.from (context) .inflate (R.layout.custom_tab, null);
TextView tabTextView = view.findViewById (R.id.tabTextView);
tabTextView.setText (mFragmentTitleList.get (position));
tabTextView.setTextColor (ContextCompat.getColor (contexto, R.color.yellow));
ImageView tabImageView = view.findViewById (R.id.tabImageView);
tabImageView.setImageResource (mFragmentIconList.get (position));
tabImageView.setColorFilter (ContextCompat.getColor (contexto, R.color.yellow), PorterDuff.Mode.SRC_ATOP);
vista de retorno;
}
}

Aquí está su salida para la pestaña de navegación personalizada.

Puede cambiar el estilo del texto de la pestaña usando tipo de letra, negrita, cursiva, color, tamaño del texto, etc., así como el icono de la pestaña.

Aquí hay más ejemplos para probarlo usted mismo.