带有图标的Android滑动选项卡布局

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>

- user1159517

---

https://dev59.com/tofca4cB1Zd3GeqPfjXh - Daniel

我需要它，所以我稍微改了一下SlidingTabLayout的代码，使其更容易使用图标来制作选项卡 https://github.com/kimkevin/SlidingIconTabLayout - kimkevin

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 是要添加的标签标题，定义在 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中添加了一个额外的空格，并将图像设置到该位置，这样实际字符串就可以完整显示。

- sahil shekhawat

---

+1，你的答案非常完美且可行，但是你最后使用了 resourcesstring，这可能会让其他人感到困惑（我也被搞糊涂了;)）。因此，我稍微编辑了你的答案。 - Rohan Kandwal

是的，那可能会让其他人感到困惑。谢谢你指出来 :) - sahil shekhawat

Answer 2

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

当 SlidingTabLayout 尝试填充选项卡时，首先查找任何指定的布局资源以充气。否则，将充气默认选项卡视图。

- Nikola Despotoski

---

如果我只想要图标，为什么需要设置一个TextView？ - Adifyr

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - kimkevin

@NikolaDespotoski 我们可以使用这个方法来为每个选项卡显示不同的图标吗？ - Mornor

我想在选项卡中显示两个文本视图，但是这不起作用。@user1159517 - Erum

@NikolaDespotoski
我想在选项卡中显示两个TextView，但是这不起作用。 - Erum

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

请注意，在SlidingTabStrip中，默认情况下使用的是android.R而不是yourpackage.R，因此要访问R.layout.tab_layout*，您需要导入yourpackage.R。

- Samuel

---

我也试过了，谢谢！对于那些想要做同样事情的人，请注意您不必创建一个名为IconSlidingTabLayout的单独类。如果您愿意，您可以将这三个方法添加到Google的SlidingTabLayout Java文件中，然后就可以开始使用了。 - Simon

我一遍又一遍地收到“HorizontalScrollView”的错误。 - Anshul Tyagi

我们如何设置tab_layout_icon的高度和宽度，使其均匀分布而不是硬编码？ - lionelmessi