Question

我在我的视图中使用谷歌的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时添加选项卡并设置其自定义视图。例如，请参阅以下行：

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，并在xml的{{1}}文件中定义，如：

viewpager

并且<?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文件夹中单独的xml文件。例如：

layout

您可以通过以下方式设置特定标签的图像：

<?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);添加了额外的空间，并将图像设置到该位置，以便完全显示实际字符串。

Answer 2

使用mSlidingTabLayout.setCustomTabView(int layoutResId, int textViewId)为SlidingTabLayout标签视图的自定义布局进行充气。

当SlidingTabLayout尝试填充选项卡条时，最初会查找任何指定的布局资源以进行膨胀。否则，它会膨胀默认选项卡视图。

Answer 3

要以您希望的方式自定义SlidingTabLayout，您只需要修改方法populateTabStrip（）。使用这种方法，您不需要关心任何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);
        }
}

您的布局可能是这样的：

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

实现getResourceArray（）方法的方式取决于您。我是这样做的：

public class IconSlidingTabLayout extends HorizontalScrollView {
    private Integer[] mIconResourceArray;

    ...

    public Integer[] getIconResourceArray() {
        return mIconResourceArray;
    }

    public void setIconResourceArray(Integer[] mIconResourceArray) {
        this.mIconResourceArray = mIconResourceArray;
    }
}

在活动中：

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

请注意，为了能够访问R.layout.tab_layout *，您必须在SlidingTabStrip中默认导入yourpackage.R而不是android.R。

Android SlidingTabLayout带图标

3 个答案: