support last android tabs android-support-library appcompat android-actionbar-compat

last - com.android.support:design 26



Use la pestaƱa con la nueva barra de herramientas(AppCompat v7-21) (2)

Estaba usando SupportActionBar con pestañas y un tema personalizado de ActionBar (creado con http://jgilfelt.github.io/android-actionbarstylegenerator/ ), que muestra las pestañas solo cuando el usuario expande la vista de búsqueda.

public boolean onMenuItemActionExpand(MenuItem item) { actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS); return true; } }

Migré de ActionBar a la barra de herramientas. Mi aplicación realmente necesita ser compatible con API 9.

¿Hay alguna forma de usar este código para volver a agregar las pestañas ?:

Toolbar toolbar = (Toolbar) findViewById(R.id.new_actionbar); setSupportActionBar(toolbar); getSupportActionBar().setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

Si es posible, ¿cómo puedo usar mi tema personalizado o estilo en la barra de herramientas?

La documentación dice que esto está en desuso y sugiere usar un tipo diferente de navegación. Pero no conozco ningún otro componente en Android que tenga la misma funcionalidad.

¿Un poco de ayuda?


Aunque probablemente sea un poco tarde para responder esta pregunta ahora, me di cuenta de que escribí una respuesta sobre una pregunta similar que abarca tanto el uso de la Biblioteca de soporte de diseño como antes de Google I / O.

He incluido las partes esenciales a continuación:

El uso de un TabLayout con la Toolbar ha vuelto mucho más simple desde el anuncio de la Biblioteca de soporte de diseño de Android, lo que significa que ya no es necesario descargar clases de vista personalizada.

Desde la publicación Blogspot de los desarrolladores de Android en la Biblioteca de soporte de diseño de Android :

Pestañas :

Alternar entre diferentes vistas en tu aplicación mediante pestañas no es un concepto nuevo para el diseño de materiales y se encuentran igualmente en tu hogar como un patrón de navegación de nivel superior o para organizar diferentes agrupaciones de contenido dentro de tu aplicación (por ejemplo, diferentes géneros de música).

El TabLayout la biblioteca de TabLayout implementa pestañas fijas, donde el ancho de la vista se divide por igual entre todas las pestañas, así como las pestañas desplazables, donde las pestañas no tienen un tamaño uniforme y se pueden desplazar horizontalmente. Las pestañas se pueden agregar mediante programación:

TabLayout tabLayout = ...;
tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));

Sin embargo, si está utilizando un ViewPager para paginación horizontal entre pestañas, puede crear pestañas directamente desde getPageTitle() de su PagerAdapter y luego conectar las dos juntas usando setupWithViewPager() . Esto garantiza que los eventos de selección de pestañas actualicen ViewPager y los cambios de página actualicen la pestaña seleccionada.

Si no está utilizando la biblioteca de soporte de diseño, en su lugar tendrá que hacer lo siguiente:

1. Descargue los archivos Java y SlidingTabStrip.java de la aplicación de conferencias de E / S de Google en GitHub. Estas serían las vistas que se usarían en el diseño de pestañas, así que creé una carpeta con mis otras actividades de Java llamada ''ver'' y las coloqué allí.

2. Edite su diseño para incluir SlidingTabLayout :

<LinearLayout android:orientation="vertical" ... > <!-- This is the Toolbar with the tabs underneath --> <LinearLayout android:orientation="vertical" ... > <include android:id="@+id/my_toolbar" layout="@layout/toolbar" /> <com.mycompany.myapp.SlidingTabLayout android:id="@+id/sliding_tabs" android:background="?attr/colorPrimary" android:layout_width="match_parent" android:layout_height="wrap_content" /> </LinearLayout> <!-- This is the ViewPager (which you already should have if you have used tabs before) --> <android.support.v4.view.ViewPager android:id="@+id/view_pager" android:layout_width="match_parent" android:layout_height="wrap_content" /> ... </LinearLayout>

La línea que hace referencia a la Toolbar ( <include android:id="@+id/detail_toolbar" layout="@layout/toolbar" /> ) hace referencia a otro archivo XML que utilicé para crear la Toolbar .

3. Cambie los nombres de los paquetes en SlidingTabLayout.java y SlidingTabStrip.java correspondientes a donde fueron colocados. En mi caso, utilicé algo similar a: package com.mycompany.myapp.view; para ambos de estos archivos. Organice las importaciones y agregue las necesarias, como lo indica el IDE que está utilizando.

4. En su Activity (que extendía AppCompatActivity ), configure la Toolbar de Toolbar en el método onCreate :

Toolbar toolbar = (Toolbar) findViewById(R.id.detail_toolbar); setSupportActionBar(toolbar);

5. Configure las partes de ViewPager y SlidingTabLayout :

mViewPager = (ViewPager) findViewById(R.id.view_pager); mViewPager.setAdapter(new ViewPagerAdapter(getSupportFragmentManager())); mSlidingTabLayout = (SlidingTabLayout) findViewById(R.id.sliding_tabs); mSlidingTabLayout.setSelectedIndicatorColors(getResources().getColor(R.color.tab_line)); mSlidingTabLayout.setDistributeEvenly(true); mSlidingTabLayout.setViewPager(mViewPager);

El color '' tab_line '' era un color que había declarado en color.xml que sería el color del indicador de línea de pestañas. También tenga en cuenta que las variables anteriores son globales que he definido previamente en esta actividad:

SlidingTabLayout mSlidingTabLayout; ViewPager mViewPager;

6. Finalmente, configure el ViewPagerAdapter que había llamado anteriormente. Esto sería responsable de cambiar la página según la pestaña que se haya seleccionado. Use el siguiente código:

public class ViewPagerAdapter extends FragmentPagerAdapter { public ViewPagerAdapter(FragmentManager fm) { super(fm); } @Override public int getCount() { // Returns the number of tabs return 3; } @Override public Fragment getItem(int position) { // Returns a new instance of the fragment switch (position) { case 0: return new FragmentOne(); case 1: return new FragmentTwo(); case 2: return new FragmentThree(); } return null; } @Override public CharSequence getPageTitle(int position) { Locale l = Locale.getDefault(); switch (position) { case 0: return getString(R.string.title_section1).toUpperCase(l); case 1: return getString(R.string.title_section2).toUpperCase(l); case 2: return getString(R.string.title_section3).toUpperCase(l); } return null; } }

Como mencioné anteriormente, hay más detalles sobre estas soluciones disponibles en otra pregunta que respondí sobre el uso de las pestañas deslizantes con la barra de herramientas .


Con la API 21, el método setNavigationMode(ActionBar.NAVIGATION_MODE_TABS) está en deprecated .

Puedes usar un patrón diferente. Por ejemplo, puede usar el mismo ejemplo que puede ver en googleio14.

Utiliza un SlidingTabLayout que funciona con un ViewPager .

Aquí puede encontrar el ejemplo (está en su ejemplo de SDK)

Aquí puede encontrar el ejemplo de Google io14:

ACTUALIZACIÓN 29/05/2015

Con la nueva biblioteca de soporte de diseño ahora puede usar el nuevo TabLayout .

Solo agrega esta dependencia a tu build.gradle

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

El código es muy simple:

TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs); tabLayout.setupWithViewPager(viewPager);

Para implementar muchas de las características de los diseños de material, debe usarlo en un CoordinatorLayout y en un AppBarLayout .

Algo como esto:

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.design.widget.AppBarLayout android:layout_height="wrap_content" android:layout_width="match_parent"> <android.support.v7.widget.Toolbar ... app:layout_scrollFlags="scroll|enterAlways"/> <android.support.design.widget.TabLayout ... app:layout_scrollFlags="scroll|enterAlways"/> </android.support.design.widget.AppBarLayout> <android.support.v4.view.ViewPager android:id="@+id/viewpager" app:layout_behavior="@string/appbar_scrolling_view_behavior" /> </android.support.design.widget.CoordinatorLayout>