android-tabhost - iconos - tabs android studio material design
¿Cómo crear una barra de aplicaciones con iconos usando TabLayout Android Design? (4)
Estoy tratando de usar el nuevo TabLayout en la biblioteca de diseño de Android para crear la barra de aplicaciones con iconos.
public void setupTabLayout(TabLayout tabLayout) {
tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
tabLayout.setTabGravity(TabLayout.GRAVITY_CENTER);
tabLayout.setupWithViewPager(mViewpager);
tabLayout.getTabAt(0).setIcon(R.drawable.ic_tabbar_library);
tabLayout.getTabAt(1).setIcon(R.drawable.ic_tabbar_recents);
tabLayout.getTabAt(2).setIcon(R.drawable.ic_tabbar_favorites);
tabLayout.getTabAt(3).setIcon(R.drawable.ic_tabbar_notifications);
tabLayout.getTabAt(4).setIcon(R.drawable.ic_tabbar_settings);
}
Resultado:
Por favor, ayúdame a crear una barra de aplicaciones similar:
Lo siento, mi inglés no es bueno. ¡Gracias por adelantado!
Como se indica en la documentation , puede agregar elementos a TabLayout través del xml mediante el uso de TabItem . Un ejemplo de uso es como:
<android.support.design.widget.TabLayout
android:layout_height="wrap_content"
android:layout_width="match_parent">
<android.support.design.widget.TabItem
android:text="@string/tab_text"/>
<android.support.design.widget.TabItem
android:icon="@drawable/ic_android"/>
</android.support.design.widget.TabLayout>
Cuando utilice vectores dibujables como iconos, es posible que desee reutilizar uno solo para diferentes estados, simplemente tintándolo de forma diferente. De esta manera puede reducir el tamaño de apk y la asignación de recursos. Primero defina un FragmentPagerAdapter personalizado (estoy usando kotlin en lugar de Java aquí)
class TabPagerAdapter(fm: FragmentManager) : FragmentPagerAdapter(fm) {
override fun getCount(): Int = 2
override fun getItem(position: Int): Fragment = when (position) {
0 -> FirstFragment.newInstance()
else -> SecondFragment.newInstance()
}
fun getPageIcon(context: Context, position: Int): Drawable = when (position) {
0 -> ContextCompat.getDrawable(context, R.drawable.ic_whatshot)
else -> ContextCompat.getDrawable(context, R.drawable.ic_face)
}
}
En lugar de implementar getPageTitle , creamos un método getPageIcon , que devuelve un dibujo para una pestaña específica. A continuación creamos un TabLayout personalizado:
class IconTabLayout : TabLayout {
private var viewPager: ViewPager? = null
constructor(context: Context) : super(context)
constructor(context: Context, attributeSet: AttributeSet) : super(context, attributeSet)
constructor(context: Context, attributeSet: AttributeSet, defStyleAttr: Int) : super(context, attributeSet, defStyleAttr)
override fun onAttachedToWindow() {
if (viewPager == null) {
if (parent is ViewPager) viewPager = parent as ViewPager
}
super.onAttachedToWindow()
}
override fun setupWithViewPager(viewPager: ViewPager?, autoRefresh: Boolean) {
this.viewPager = viewPager
super.setupWithViewPager(viewPager, autoRefresh)
}
override fun addTab(@NonNull tab: Tab, position: Int, setSelected: Boolean) {
if (viewPager != null && viewPager!!.adapter is TabPagerAdapter) {
val icon: Drawable = DrawableCompat.wrap((viewPager!!.adapter as TabPagerAdapter).getPageIcon(context, position))
DrawableCompat.setTintList(icon.mutate(), ContextCompat.getColorStateList(context, R.color.tab_color))
tab.icon = icon
}
super.addTab(tab, position, setSelected)
}
}
Entonces, la magia ocurre en el método addTab , donde se establecen el icono y la lista de estados de color. La lista de estados de color tiene la siguiente estructura:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Non focused states -->
<item android:color="@color/tab_not_active" android:state_focused="false" android:state_pressed="false" android:state_selected="false" />
<item android:color="@color/tab_active" android:state_focused="false" android:state_pressed="false" android:state_selected="true" />
<!-- Focused states -->
<item android:color="@color/tab_not_active" android:state_focused="true" android:state_pressed="false" android:state_selected="false" />
<item android:color="@color/tab_active" android:state_focused="true" android:state_pressed="false" android:state_selected="true" />
<!-- Pressed -->
<item android:color="@color/tab_not_active" android:state_pressed="true" />
</selector>
De la documentación:
Establezca una vista personalizada que se utilizará para esta pestaña. Esto anula los valores establecidos por setText (CharSequence) y setIcon (Drawable).
Tendrá que establecer los valores de título usted mismo
De tu ejemplo:
public void setupTabLayout(TabLayout tabLayout) {
tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
tabLayout.setTabGravity(TabLayout.GRAVITY_CENTER);
tabLayout.setupWithViewPager(mViewpager);
TextView tab = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
tab.setText("Library");
tab.setCompoundDrawablesWithIntrinsicBounds(0, R.drawable.ic_tabbar_library, 0, 0);
tabLayout.getTabAt(0).setCustomView(tab);
//..
}
custom_tab.xml
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/tab" />
Actualizar
La API ha cambiado para permitirle establecer una identificación personalizada para que no tenga que configurar el texto / dibujable manualmente. Utilizará los valores del adaptador.
Si la vista proporcionada contiene un TextView con un ID de texto1, entonces se actualizará con el valor dado a setText (CharSequence). De manera similar, si este diseño contiene un icono de ImageView con ID, se actualizará con el valor dado a setIcon (Drawable).
Puede usar el atributo android:layout de TabItem para establecer una vista personalizada. En el archivo xml de vista personalizada, recuerde configurar el id del ícono y la vista de texto en @android:id/icon y android:id="@android:id/text1" , luego la biblioteca se ocupará del resto.
Aquí hay un ejemplo:
. custom_tab_item.xml
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="@android:id/icon"
android:layout_width="16dp"
android:layout_height="16dp"
android:layout_marginTop="4dp"
android:scaleType="centerInside"/>
<TextView
android:id="@android:id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:textSize="16dp"/>
</LinearLayout>
. main.xml
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.TabItem
android:id="@+id/ti_activities"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:icon="@drawable/ic_question"
android:layout="@layout/custom_tab_item"
android:text="@string/activities"/>
<android.support.design.widget.TabItem
android:id="@+id/ti_profile"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:icon="@drawable/ic_question"
android:layout="@layout/custom_tab_item"
android:text="@string/Profile"/>
</android.support.design.widget.TabLayout>
Espero que esto ayude.