带有图标的 Android SlidingTabLayout

Posted

技术标签:

【中文标题】带有图标的 Android SlidingTabLayout【英文标题】:Android SlidingTabLayout with icons 【发布时间】:2014-06-18 16:11:42 【问题描述】:

我在视图中使用谷歌的 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_
              android:layout_
              android:orientation="vertical">

  <android.common.view.SlidingTabLayout
      android:id="@+id/sliding_tabs"
      android:layout_
      android:layout_ />

  <android.support.v4.view.ViewPager
      android:id="@+id/viewpager"
      android:layout_
      android:layout_
      android:layout_weight="1"
      android:background="@android:color/white"/>

</LinearLayout>

【问题讨论】:

***.com/questions/28125794/… 我需要它,所以我稍微更改了 SlidingTabLayout 的代码以使其易于使用标签图标github.com/kimkevin/SlidingIconTabLayout 【参考方案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,并在viewpagerxml 文件中定义,例如:

<?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_
    android:layout_
    android:fitsSystemWindows="true">

    <com.packagename.SlidingTabLayout
        android:id="@+id/sliding_tabs"
        android:layout_
        android:layout_
        />

    <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_
        android:layout_
        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_
android:layout_
android:id="@+id/titletab">

    <ImageView
    android:id="@+id/tabimage"
    android:layout_
    android:layout_
    android:layout_gravity="top"
    android:layout_marginLeft="2dp"
    />

    <TextView
    android:id="@+id/tabtext"
    android:layout_
    android:layout_
    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 中添加了一个额外的空间,并将图像设置到该位置,以便完整显示实际字符串。

【讨论】:

+1,您的答案是完美的并且工作正常,但是,您最终使用的是resourcesstring,这可能会让其他人感到困惑(它让我感到困惑;))。所以,我正在稍微修改你的答案。 是的,这可能会混淆其他人。感谢您指出这一点:)【参考方案2】:

使用mSlidingTabLayout.setCustomTabView(int layoutResId, int textViewId)SlidingTabLayout 选项卡视图扩展自定义布局。

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

【讨论】:

我是否需要为每个选项卡创建一个带有图标和 textView 的 LinearLayout? 只需创建一个布局并将其资源 id 和标题 textview 提供给该方法,SlidingTabLayout 将为您的所有选项卡本身充气。 我已经在设置 ​​ViewPager 适配器,现在也在设置这个 customTabView。但我仍然只看到旧标签 但是如果我只想要图标怎么办?为什么我需要设置一个textview 我需要它,所以我稍微更改了 SlidingTabLayout 的代码,以使其易于使用标签图标github.com/kimkevin/SlidingIconTabLayout【参考方案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_
    android:paddingTop="15dp"
    android:layout_
    android:orientation="vertical">

    <ImageView
        android:id="@+id/tab_layout_icon"
        android:layout_
        android:layout_
        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*,您必须导入 yourpackage.R 而不是 android.R,因为它在 SlidingTabStrip 中是默认的。

【讨论】:

也为我工作。谢谢!对于那些想要这样做的人,请注意,您不必创建一个名为 IconSlidingTabLayout 的单独类。如果您愿意,只需将这 3 个方法添加到 Google 的 SlidingTabLayout java 文件中即可。 我一次又一次收到HorizontalScrollView 的错误。 我们如何设置tab_layout_icon的高宽,均匀分布而不是硬编码呢?

以上是关于带有图标的 Android SlidingTabLayout的主要内容,如果未能解决你的问题,请参考以下文章

带有旋转图标的 Android 材质按钮

文本顶部带有图标的 Android 材质按钮

带有 MaterialComponents 主题的 Android FAB 图标始终为黑色

带有图标/按钮的 Android EditText

带有矢量资产图标的 android 谷歌地图中的自定义标记

Fab按钮带有显示阴影的图标(Android 4.1)