Android SlidingTabLayout con iconos

android-layout android-tabs

Question

Estoy usando SlidingTabLayout de google en mi opinión, pero quiero agregar iconos a las pestañas. Estoy usando este http://developer.android.com/samples/SlidingTabsBasic/src/com.example.android.common/view/SlidingTabLayout.html ¿Alguien puede ayudarme?

void setUpPager(View view){
mViewPager = (ViewPager) view.findViewById(R.id.viewpager);
mViewPager.setAdapter(new TabsPagerAdapter(getActivity()));
mSlidingTabLayout = (SlidingTabLayout) view.findViewById(R.id.sliding_tabs);
mSlidingTabLayout.setViewPager(mViewPager);
}

Aquí está mi xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.common.view.SlidingTabLayout
android:id="@+id/sliding_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="0px"
android:layout_weight="1"
android:background="@android:color/white"/>
</LinearLayout>

Answer 1

Use mSlidingTabLayout.setCustomTabView(int layoutResId, int textViewId) para inflar un diseño personalizado para las vistas de la pestaña SlidingTabLayout .

Cuando SlidingTabLayout intenta rellenar las SlidingTabLayout , inicialmente busca cualquier recurso de diseño especificado para inflar. De lo contrario, se infla la vista de pestaña predeterminada.

Answer 2

Para personalizar SlidingTabLayout de la manera que desee, solo necesita modificar el método populateTabStrip (). Con este enfoque, no necesitas preocuparte por ningún TextView.

public void populateTabStrip() {
final PagerAdapter adapter = mViewPager.getAdapter();
final View.OnClickListener tabClickListener = new TabClickListener();
for (int i = 0; i < adapter.getCount(); i++) {
View tabView = null;
tabView = LayoutInflater.from(getContext()).inflate(R.layout.tab_layout, mTabStrip,
false);
ImageView iconImageView = (ImageView) tabView.findViewById(R.id.tab_layout_icon);
iconImageView.setImageDrawable(getContext().getResources().getDrawable(getIconResourceArray()[i]));
tabView.setOnClickListener(tabClickListener);
mTabStrip.addView(tabView);
}
}

Tu diseño podría ser algo como eso:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="75dp"
android:paddingTop="15dp"
android:layout_height="50dp"
android:orientation="vertical">
<ImageView
android:id="@+id/tab_layout_icon"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_gravity="center" />
</LinearLayout>

La forma de implementar el método getResourceArray () depende de usted. Así es como lo hice:

public class IconSlidingTabLayout extends HorizontalScrollView {
private Integer[] mIconResourceArray;
...
public Integer[] getIconResourceArray() {
return mIconResourceArray;
}
public void setIconResourceArray(Integer[] mIconResourceArray) {
this.mIconResourceArray = mIconResourceArray;
}
}

En la actividad:

mSlidingTabLayout = (IconSlidingTabLayout) findViewById(R.id.icon_sliding_tab_layout);
Integer[] iconResourceArray = { R.drawable.news_tab_icon,
R.drawable.challenges_tab_icon, R.drawable.trophies_tab_icon,
R.drawable.leaderboard_tab_icon };
mSlidingTabLayout.setIconResourceArray(iconResourceArray);

Tenga en cuenta que para tener acceso a R.layout.tab_layout *, debe importar su paquete.R en lugar de android.R como está predeterminado en SlidingTabStrip.

Answer 3

Solo quiero dar un ejemplo para la respuesta correcta y aceptada. :)
En primer lugar, agregue las pestañas y configure su vista personalizada cuando agregue el adaptador a su Viewpager. Por ejemplo, vea las siguientes líneas:

mViewpager = (ViewPager) view.findViewById(R.id.pager);
//Do something with your view before setting up adapter
ViewPager.setAdapter(mSectionsPagerAdapter);
mSlidingTabLayout = (SlidingTabLayout) View().findViewById(R.id.sliding_tabs);
mSlidingTabLayout.setCustomTabView(R.layout.custom_tab_title, R.id.tabtext);
mSlidingTabLayout.setViewPager(mViewPager);

Donde sliding_tabs son los tabuladores_títulos que se agregarán y están definidos en el archivo xml del viewpager como:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<com.packagename.SlidingTabLayout
android:id="@+id/sliding_tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
<android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/sliding_tabs"
tools:context=".ActivityUser"
android:fitsSystemWindows="true"
android:textStyle="bold"
android:textSize="20dp"/>
</RelativeLayout>

y donde custom_tab_title es un archivo xml separado en su carpeta de layout Por ejemplo:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/titletab">
<ImageView
android:id="@+id/tabimage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:layout_marginLeft="2dp"
/>
<TextView
android:id="@+id/tabtext"
android:layout_width="match_parent"
android:layout_height="50dp"
android:gravity="bottom"
android:paddingBottom="15dp"
android:paddingLeft="4dp"
android:paddingRight="4dp"/>
</LinearLayout>

y puede configurar la imagen para una pestaña en particular de la siguiente manera:

Drawable tab_image = getResources().getDrawable(getResources().getIdentifier("image_name_in_drawable", "drawable", "com.packagename"));
tab_image.setBounds(0, 0, 40, 40); //Setting up the resolution for image
ImageSpan imageSpanresource = new ImageSpan(tab_image);
//Notice the additional space at the end of the String
resourcesstring = "Tab1 ";
//here we are setting up the position to display image..
SpannableString viewpager_tab_title = new SpannableString(resourcesstring );
viewpager_tab_title.setSpan(imageSpanresource, resourcesstring.length()-1, resourcesstring.length(), 0);

Tenga en cuenta que he agregado un espacio adicional al viewpager_tab_title y estoy configurando la imagen en esa posición, para que la cadena real se muestre por completo.