带有图标的 Android 滑动 TabLayout

Question

我在我的 View 中使用谷歌的 SlidingTabLayout，但我想向选项卡添加图标。我正在使用这个 http://developer.android.com/samples/SlidingTabsBasic/src/com.example.android.common/view/SlidingTabLayout.html有人可以帮忙吗？

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

这是我的 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

只是想举例说明正确且被接受的答案。 :)
首先，在将适配器添加到 viewpager 时添加选项卡并设置它们的自定义 View 。例如，请参阅以下行:

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

sliding_tabs 是要添加的 tabs_titles，在 viewpager 的 xml 文件中定义如下:

<?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>

custom_tab_title 是 layout 文件夹中的一个单独的 xml 文件。例如:

<?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>

您可以通过以下方式为特定选项卡设置图像:

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

请注意，我在 viewpager_tab_title 中添加了一个额外的空间，并将图像设置到该位置，以便完整显示实际的字符串。