5.Android support design TabLayout

最新推荐文章于 2020-05-25 15:13:05 发布
最新推荐文章于 2020-05-25 15:13:05 发布
阅读量5.9k 收藏 4
点赞数
分类专栏： Android Support Design 文章标签： android support design TabLayout gradle
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_16430735/article/details/49404537
版权

5.Android support design TabLayout

TabLayout介绍

Google 官方的 Android support design Library 也推出了 滑动标签页。它的名字叫TabLayout ，其实还是有些地方有Bug。

如果涉及到 icon + text 的滑动标签页，建议不要用TabLayout 。推荐用我的 EasySlidingTabs ，哈哈。

gradle配置

compile 'com.android.support:design:23.0.1' 或者更高版本

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:23.0.1'
    compile 'com.android.support:design:23.0.1'
}

TabLayout属性

我们可以找到sdk/extras/android/support/design/res/values/attrs.xml，打开可以看到关于TabLayout的属性

    <declare-styleable name="TabLayout">
        <attr name="tabIndicatorColor" format="color"/>
        <attr name="tabIndicatorHeight" format="dimension"/>
        <attr name="tabContentStart" format="dimension"/>

        <attr name="tabBackground" format="reference"/>

        <attr name="tabMode">
            <enum name="scrollable" value="0"/>
            <enum name="fixed" value="1"/>
        </attr>

        <!-- Standard gravity constant that a child supplies to its parent.
             Defines how the child view should be positioned, on both the X and Y axes,
             within its enclosing layout. -->
        <attr name="tabGravity">
            <enum name="fill" value="0"/>
            <enum name="center" value="1"/>
        </attr>

        <attr name="tabMinWidth" format="dimension"/>
        <attr name="tabMaxWidth" format="dimension"/>

        <attr name="tabTextAppearance" format="reference"/>
        <attr name="tabTextColor" format="color"/>
        <attr name="tabSelectedTextColor" format="color"/>

        <attr name="tabPaddingStart" format="dimension"/>
        <attr name="tabPaddingTop" format="dimension"/>
        <attr name="tabPaddingEnd" format="dimension"/>
        <attr name="tabPaddingBottom" format="dimension"/>
        <attr name="tabPadding" format="dimension"/>
    </declare-styleable>

如果实现不行，直接打开TabLayout的源码：

    public TabLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        this.mTabs = new ArrayList();
        this.mTabMaxWidth = 2147483647;
        this.setHorizontalScrollBarEnabled(false);
        this.setFillViewport(true);
        this.mTabStrip = new TabLayout.SlidingTabStrip(context);
        this.addView(this.mTabStrip, -2, -1);
        TypedArray a = context.obtainStyledAttributes(attrs, styleable.TabLayout, defStyleAttr, style.Widget_Design_TabLayout);
        this.mTabStrip.setSelectedIndicatorHeight(a.getDimensionPixelSize(styleable.TabLayout_tabIndicatorHeight, 0));
        this.mTabStrip.setSelectedIndicatorColor(a.getColor(styleable.TabLayout_tabIndicatorColor, 0));
        this.mTabTextAppearance = a.getResourceId(styleable.TabLayout_tabTextAppearance, style.TextAppearance_Design_Tab);
        this.mTabPaddingStart = this.mTabPaddingTop = this.mTabPaddingEnd = this.mTabPaddingBottom = a.getDimensionPixelSize(styleable.TabLayout_tabPadding, 0);
        this.mTabPaddingStart = a.getDimensionPixelSize(styleable.TabLayout_tabPaddingStart, this.mTabPaddingStart);
        this.mTabPaddingTop = a.getDimensionPixelSize(styleable.TabLayout_tabPaddingTop, this.mTabPaddingTop);
        this.mTabPaddingEnd = a.getDimensionPixelSize(styleable.TabLayout_tabPaddingEnd, this.mTabPaddingEnd);
        this.mTabPaddingBottom = a.getDimensionPixelSize(styleable.TabLayout_tabPaddingBottom, this.mTabPaddingBottom);
        this.mTabTextColors = this.loadTextColorFromTextAppearance(this.mTabTextAppearance);
        if(a.hasValue(styleable.TabLayout_tabTextColor)) {
            this.mTabTextColors = a.getColorStateList(styleable.TabLayout_tabTextColor);
        }

        if(a.hasValue(styleable.TabLayout_tabSelectedTextColor)) {
            int selected = a.getColor(styleable.TabLayout_tabSelectedTextColor, 0);
            this.mTabTextColors = createColorStateList(this.mTabTextColors.getDefaultColor(), selected);
        }

        this.mTabMinWidth = a.getDimensionPixelSize(styleable.TabLayout_tabMinWidth, 0);
        this.mRequestedTabMaxWidth = a.getDimensionPixelSize(styleable.TabLayout_tabMaxWidth, 0);
        this.mTabBackgroundResId = a.getResourceId(styleable.TabLayout_tabBackground, 0);
        this.mContentInsetStart = a.getDimensionPixelSize(styleable.TabLayout_tabContentStart, 0);
        this.mMode = a.getInt(styleable.TabLayout_tabMode, 1);
        this.mTabGravity = a.getInt(styleable.TabLayout_tabGravity, 0);
        a.recycle();
        this.applyModeAndGravity();
    }

反正都是Easy的英文，慢慢看，不难，真的！

TabLayout布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <!--
        文字未选中的颜色 app:tabTextColor
        文字选中的颜色 app:tabSelectedTextColor
        指示器的颜色 app:tabIndicatorColor
     -->
    <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout_tl"
        app:tabBackground="@color/tabLayoutBackground"
        app:tabTextColor="@color/black"
        app:tabSelectedTextColor="@color/red"
        app:tabIndicatorColor="@color/yellow"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager_vp"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

</LinearLayout>

正常版TabLayout FragmentPagerAdapter

public class NormalTabLayoutFragmentAdapter extends FragmentPagerAdapter {

    private String[] tabTitles;
    private Fragment[] fragments;

    public NormalTabLayoutFragmentAdapter(FragmentManager fm, Fragment[] fragments, String[] tabTitles) {
        super(fm);
        this.fragments = fragments;
        this.tabTitles = tabTitles;
    }

    /**
     * Return the Fragment associated with a specified position.
     *
     * @param position
     */
    @Override
    public Fragment getItem(int position) {
        return this.fragments[position];
    }

    /**
     * Return the number of views available.
     */
    @Override
    public int getCount() {
        return this.fragments.length;
    }

    /**
     * This method may be called by the ViewPager to obtain a title string
     * to describe the specified page. This method may return null
     * indicating no title for this page. The default implementation returns
     * null.
     *
     * @param position The position of the title requested
     * @return A title for the requested page
     */
    @Override
    public CharSequence getPageTitle(int position) {
        return this.tabTitles[position];
    }

}

正常版TabLayout Activity

public class NormalTabLayoutActivity extends AppCompatActivity {

    private TabLayout tabLayout;
    private ViewPager viewPager;

    private NormalTabLayoutFragmentAdapter fragmentAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        this.setContentView(R.layout.tablayout_normal_activity);

        this.viewPager = (ViewPager) this.findViewById(R.id.view_pager_vp);
        this.tabLayout = (TabLayout) this.findViewById(R.id.tab_layout_tl);
        this.initData();
    }

    private void initData() {
        String[] tabTitles = {"一次元", "二次元", "三次元", "四次元"};
        Fragment[] fragments = {
                TabLayoutFirstFragment.getInstance(),
                TabLayoutSecondFragment.getInstance(),
                TabLayoutThirdFragment.getInstance(),
                TabLayoutFourthFragment.getInstance()
        };
        this.fragmentAdapter = new NormalTabLayoutFragmentAdapter(this.getSupportFragmentManager(), fragments, tabTitles);
        this.viewPager.setAdapter(this.fragmentAdapter);
        this.tabLayout.setupWithViewPager(this.viewPager);
    }

}

正常版TabLayout 效果图

NormalTabLayout

正常版TabLayout 总结

正常版呢，纯String的title，说实话，是无与伦比的选择，确实要比第三方库要好。

但是有想过吗？？？？

带icon会怎样？那么来看不正常版！一路解析到底

ImageSpan版TabLayout FragmentPagerAdapter

public class ImageSpanTabLayoutFragmentAdapter extends FragmentPagerAdapter {

    private Context context;
    private int[] icons;
    private String[] tabTitles;
    private Fragment[] fragments;

    public ImageSpanTabLayoutFragmentAdapter(Context context, FragmentManager fm, Fragment[] fragments, String[] tabTitles, int[] icons) {
        super(fm);
        this.context = context;
        this.icons = icons;
        this.fragments = fragments;
        this.tabTitles = tabTitles;
    }

    /**
     * Return the Fragment associated with a specified position.
     *
     * @param position
     */
    @Override
    public Fragment getItem(int position) {
        return this.fragments[position];
    }

    /**
     * Return the number of views available.
     */
    @Override
    public int getCount() {
        return this.fragments.length;
    }

    /**
     * This method may be called by the ViewPager to obtain a title string
     * to describe the specified page. This method may return null
     * indicating no title for this page. The default implementation returns
     * null.
     *
     * @param position The position of the title requested
     * @return A title for the requested page
     */
    @Override
    public CharSequence getPageTitle(int position) {
        Drawable drawable;
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            drawable = this.context.getResources().getDrawable(this.icons[position], null);
        } else {
            drawable = this.context.getResources().getDrawable(this.icons[position]);
        }
        if (drawable == null) return "";
        drawable.setBounds(0, 0, drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight());
        // 这里多设置5个空格
        SpannableString spannableString = new SpannableString("     " + this.tabTitles[position]);
        ImageSpan imageSpan = new ImageSpan(drawable, ImageSpan.ALIGN_BOTTOM);
        //这里图片的开始和结束设置为0-3，根据上述的5个空格减去3个，然后有2个空格之间距离
        spannableString.setSpan(imageSpan, 0, 3, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
        return spannableString;
    }

}

在getPageTitle里，实例了对应的Drawable，然后通过Drawable再实例ImageSpan，最后放入到SpannableString里。在实例SpannableString的时候，多加了几个空格，作为paddingLeft的作用。

ImageSpan版TabLayout Activity

public class ImageSpanTabLayoutActivity extends AppCompatActivity {

    private TabLayout tabLayout;
    private ViewPager viewPager;

    private ImageSpanTabLayoutFragmentAdapter fragmentAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        this.setContentView(R.layout.tablayout_image_span_activity);

        this.viewPager = (ViewPager) this.findViewById(R.id.view_pager_vp);
        this.tabLayout = (TabLayout) this.findViewById(R.id.tab_layout_tl);
        this.initData();
    }

    private void initData() {
        int[] icons = {R.mipmap.icon_msg_unread, R.mipmap.icon_remark, R.mipmap.icon_time, R.mipmap.icon_feedback};
        String[] tabTitles = {"一次元", "二次元", "三次元", "四次元"};
        Fragment[] fragments = {
                TabLayoutFirstFragment.getInstance(),
                TabLayoutSecondFragment.getInstance(),
                TabLayoutThirdFragment.getInstance(),
                TabLayoutFourthFragment.getInstance()
        };
        this.fragmentAdapter = new ImageSpanTabLayoutFragmentAdapter(this, this.getSupportFragmentManager(), fragments, tabTitles, icons);
        this.viewPager.setAdapter(this.fragmentAdapter);
        this.tabLayout.setupWithViewPager(this.viewPager);
    }

}

ImageSpan版TabLayout 效果图

ImageSpanTabLayout

ImageSpan版TabLayout 总结

细心的同学都能发现，图片是不对齐的。

其实这就是这种方法实现的坑处。

哎，这涉及到ImageSpan实例化时的

ImageSpan构造方法

    /**
     * @param verticalAlignment one of {@link DynamicDrawableSpan#ALIGN_BOTTOM} or
     * {@link DynamicDrawableSpan#ALIGN_BASELINE}.
     */
    public ImageSpan(Drawable d, int verticalAlignment) {
        super(verticalAlignment);
        mDrawable = d;
    }

int verticalAlignment涉及到DynamicDrawableSpan里的两个常量

    /**
     * A constant indicating that the bottom of this span should be aligned
     * with the bottom of the surrounding text, i.e., at the same level as the
     * lowest descender in the text.
     */
    public static final int ALIGN_BOTTOM = 0;

    /**
     * A constant indicating that the bottom of this span should be aligned
     * with the baseline of the surrounding text.
     */
    public static final int ALIGN_BASELINE = 1;

两种常量设置后，要么偏高要么偏低。总之，有居中强迫症的可以Over了。

SetIcon版TabLayout FragmentPagerAdapter

public class SetIconTabLayoutFragmentAdapter extends FragmentPagerAdapter {

    private Context context;
    private int[] icons;
    private String[] tabTitles;
    private Fragment[] fragments;

    public SetIconTabLayoutFragmentAdapter(Context context, FragmentManager fm, Fragment[] fragments, String[] tabTitles, int[] icons) {
        super(fm);
        this.context = context;
        this.icons = icons;
        this.fragments = fragments;
        this.tabTitles = tabTitles;
    }

    /**
     * Return the Fragment associated with a specified position.
     *
     * @param position
     */
    @Override
    public Fragment getItem(int position) {
        return this.fragments[position];
    }

    /**
     * Return the number of views available.
     */
    @Override
    public int getCount() {
        return this.fragments.length;
    }

    /**
     * This method may be called by the ViewPager to obtain a title string
     * to describe the specified page. This method may return null
     * indicating no title for this page. The default implementation returns
     * null.
     *
     * @param position The position of the title requested
     * @return A title for the requested page
     */
    @Override
    public CharSequence getPageTitle(int position) {
        // 多返回三个空格，作为padding的作用，挤开图片
        return "  "+this.tabTitles[position];
    }

}

getPageTitle里面也多比正常版多了几个空格，作为paddingLeft的作用。

SetIcon版TabLayout Activity

public class SetIconTabLayoutActivity extends AppCompatActivity {

    private TabLayout tabLayout;
    private ViewPager viewPager;

    private SetIconTabLayoutFragmentAdapter fragmentAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        this.setContentView(R.layout.tablayout_set_icon_activity);

        this.viewPager = (ViewPager) this.findViewById(R.id.view_pager_vp);
        this.tabLayout = (TabLayout) this.findViewById(R.id.tab_layout_tl);
        this.initData();
    }

    private void initData() {
        int[] icons = {R.mipmap.icon_msg_unread, R.mipmap.icon_remark, R.mipmap.icon_time, R.mipmap.icon_feedback};
        String[] tabTitles = {"一次元", "二次元", "三次元", "四次元"};
        Fragment[] fragments = {
                TabLayoutFirstFragment.getInstance(),
                TabLayoutSecondFragment.getInstance(),
                TabLayoutThirdFragment.getInstance(),
                TabLayoutFourthFragment.getInstance()
        };
        this.fragmentAdapter = new SetIconTabLayoutFragmentAdapter(this, this.getSupportFragmentManager(), fragments, tabTitles, icons);
        this.viewPager.setAdapter(this.fragmentAdapter);
        this.tabLayout.setupWithViewPager(this.viewPager);
        for (int i = 0; i < tabLayout.getTabCount(); i++) {
            TabLayout.Tab tab = tabLayout.getTabAt(i);
            if (tab == null) continue;
            tab.setIcon(icons[i]);
        }
    }

}

Google官方的TabLayout封装是很有意思的，每个标签页就是一个TabView，TabView的逐个生成是依赖于TabLayout.Tab这个类的所有数据，有兴趣的可以看看，解耦了数据与View之间的过度依赖。所以我们可以通过TabLayout.Tab拿到数据，并改变数据

SetIcon版TabLayout 效果图

SetIconTabLayout

SetIcon版TabLayout 总结

我个人认为，通过设置TabLayout.Tab.icon去实现 icon + text 的标签页是 TabLayout最合理的办法。只需要偏历每个TabLayout.Tab，设置icon就好了。

主要，还是居中对齐的。

CustomView版TabLayout 介绍

如果觉得 纯text 或者 icon + text 无法满足要求，那么可以自定义View作为标签页的标签

TabLayout.Tab是提供setCustomView(@Nullable View view)这个方法的。

CustomView版TabLayout FragmentPagerAdapter

public class CustomViewTabLayoutFragmentAdapter extends FragmentPagerAdapter {

    private Fragment[] fragments;

    public CustomViewTabLayoutFragmentAdapter(FragmentManager fm, Fragment[] fragments) {
        super(fm);
        this.fragments = fragments;
    }

    /**
     * Return the Fragment associated with a specified position.
     *
     * @param position
     */
    @Override
    public Fragment getItem(int position) {
        return this.fragments[position];
    }

    /**
     * Return the number of views available.
     */
    @Override
    public int getCount() {
        return this.fragments.length;
    }

}

CustomView版TabLayout的FragmentPagerAdapter连getPageTitle方法也不用覆写。

CustomView版TabLayout TabItem布局

item_icon_tab_layout.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="horizontal">

    <ImageView
        android:id="@+id/tab_layout_title_left_iv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/tab_layout_title_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@color/color_icon_tab_layout"
        android:layout_marginRight="5dp"
        android:layout_marginEnd="5dp"
        android:layout_marginStart="5dp"
        android:layout_marginLeft="5dp" />

    <ImageView
        android:id="@+id/tab_layout_title_right_iv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />


</LinearLayout>

自定义View的话，TextView的颜色还要自己设置 T T。

color_icon_tab_layout.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true" android:color="#ffFF4081" />
    <item android:state_focused="true" android:color="#ffFF4081" />
    <item android:state_pressed="true" android:color="#ffFF4081" />

    <item android:color="#FF000000" />
</selector>

CustomView版TabLayout Activity

public class CustomViewTabLayoutActivity extends AppCompatActivity {

    private TabLayout tabLayout;
    private ViewPager viewPager;

    private CustomViewTabLayoutFragmentAdapter fragmentAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        this.setContentView(R.layout.tablayout_image_span_activity);

        this.viewPager = (ViewPager) this.findViewById(R.id.view_pager_vp);
        this.tabLayout = (TabLayout) this.findViewById(R.id.tab_layout_tl);
        this.initData();
    }

    private void initData() {
        int[] icons = {R.mipmap.icon_clean, R.mipmap.icon_remark, R.mipmap.icon_time, R.mipmap.icon_feedback};
        String[] tabTitles = {"一次元", "二次元", "三次元", "四次元"};
        Fragment[] fragments = {
                TabLayoutFirstFragment.getInstance(),
                TabLayoutSecondFragment.getInstance(),
                TabLayoutThirdFragment.getInstance(),
                TabLayoutFourthFragment.getInstance()
        };
        this.fragmentAdapter = new CustomViewTabLayoutFragmentAdapter(this.getSupportFragmentManager(), fragments);
        this.viewPager.setAdapter(this.fragmentAdapter);
        this.tabLayout.setupWithViewPager(this.viewPager);
        for (int i = 0; i < tabLayout.getTabCount(); i++) {
            View view = LayoutInflater.from(this).inflate(R.layout.item_icon_tab_layout, null);
            TextView tabTV = (TextView) view.findViewById(R.id.tab_layout_title_tv);
            ImageView tabLeftIV = (ImageView) view.findViewById(R.id.tab_layout_title_left_iv);
            ImageView tabRightIV = (ImageView) view.findViewById(R.id.tab_layout_title_right_iv);
            tabTV.setText(tabTitles[i]);
            tabLeftIV.setImageResource(icons[i]);
            tabRightIV.setImageResource(icons[i]);
            TabLayout.Tab tab = tabLayout.getTabAt(i);
            if (tab == null) continue;
            tab.setCustomView(view);
        }
    }

}

CustomView版TabLayout 效果图

这样的话，一开始没滑动的时候，没触发事件是没有颜色，是没颜色。如果要改进的话，肯定是在事件出发后，设置当前选中标签为选中颜色，同时，还要设置其他没选中的标签为没选中的颜色，这就有点恶心了。

刚进Activity，什么都没做，第一个是没颜色的

CustomViewTabLayout_1

滑动后开始有颜色

CustomViewTabLayout_2

CustomView版TabLayout 总结

CustomView版TabLayout，建议还是不要使用了

可以使用EasySlidingTabs

全部版本总结

1.如果是纯Text，可以选择正常版。
2.如果是 icon + text ，可以选择SetIcon版。
3.再复杂版本，请选择EasySlidingTabs。

初心始终钰
关注
专栏目录
TabLayout源码解析及相关问题解决
巴啦啦的博客
04-17 566
一、内部组成元素及分析 TabLayout的三个基本组成元素：Tab、TabView、SlidingTabStrip TabLayoutOnPageChangeListener和ViewPagerOnTabSelectedListener实现了ViewPager类的两个接口，作用是监听ViewPager页面改变和Tab选中状态。 PagerAdapterObserver为观察者监控Pager...
Android Support Design库之TabLayout
上辈子作恶多端，这辈子写前端。
09-13 2090
TabLayout作用：用于显示可切换的标签效果替代PagerTabStrip的效果，且比PagerTabStrip要好看，TabLayout的效果要优良与Tab导航模式。（其实就是我们用的最多的导航栏）1.需要引入degisn库的支持compile 'com.android.support:design:23.2.0'2.布局引入，这里使用了两个上面的自定义了Tab<?xml version="1
android.support.design.widget.TabLayout的使用
会飞的小驴粪蛋
02-22 1356
现在非常流行的是TabLayout+ViewPager+Fragment 1：首先sdk的版本必须是22，要想使用这个控件，你必须下载或更新sdk的版本，你要更新的22也就是5.1的版本，才会有这个控件的出现。 布局文件如下： <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="ht...
Android 5.0 之TabLayout
万物weiyi
09-02 348
为了使用Tab，必须使用TabHost和TabWidget，TabHost必须是布局文件中的根节点，它包含了tabWidget显示tabs，以及FrameLayout来显示tab的内容。 你可以用以下两种方式实现你的tab内容：A．在同一个Acitivity里交换不同的View。B．每一个Tab使用一个不同的Activity。在这里先介绍第2种的实现方式，具体步骤如下：1.创建一个项目HelloT
AndroidSupportDesign之TabLayout使用详解
热门推荐
Loader's Blog
07-23 2万+
在上一篇博客《高逼格UI-ASD(Android Support Design)》中，我们大体的对TabLayout进行了一些初步的了解，这篇博客，单独拿出TabLayout来继续讲解是因为：纵观Android Support Design库的几个控件，除了诸如：FAB、SnackBar等几个小控件常用以外，也就TabLayout还ok了，其他的例如CollapsingToolbarLayout，这
android.support.design.widget.TabLayout示例
11-20
在Android开发中，`android.support.design.widget.TabLayout`是一个非常重要的组件，它是Google引入的用于实现Material Design设计规范的一部分。这个组件主要用于展示可滑动的标签页，为用户提供清晰的导航选项，...
android.support.design.widget.TabLayout 用法解析
背负苍穹
10-21 4517
参考文章：android.support.design.widget兼容库 TabLayout可以用来在ActionBar的下方添加一行横向导航栏，通过点击导航栏上的按钮来操作窗口主要内容区域的切换，所以往往和viewPager一起使用。 新的TabLayout和ViewPager绑定到一起不再需要在设置TabListener和onPagerChangedListener，并且当Tab比较多的时
Android API24以上Error inflating class android.support.design.widget.TabLayout
梦江月
09-17 6766
在API23中使用了TabLayout，在升级到API24进行编译后，程序运行时出现了如下错误： 　　java.lang.RuntimeException: Unable to start activity ComponentInfo{com.example.demo/com.example.demo.activity.ViewPagerActivity}: android.view.Inflat
android项目迁移到androidX：类映射（android.support.design*）
攻城狮for Android
05-25 5772
支持库类 AndroidX 类 android.support.design.animation.AnimationUtils com.google.android.material.animation.AnimationUtils android.support.design.animation.AnimatorSetCompat com.google.android.material.animation.AnimatorSetCompat android.support.d
内含各个版本的android-support-design包
08-21
Android Support Design库是Android开发中的一个重要组件，它为开发者提供了许多现代UI元素和工具，使得在Android应用中实现 Material Design风格变得更加便捷。这个压缩包包含了多个版本的`android-support-design`...
Design库-TabLayout控件用法
qq_32783295的博客
02-28 316
类似下面效果之前 一直用 自定义控件（第三方库），RadioGroup等等来实现类似效果 ，谷歌官方出了TabHost来实现使用方法：<android.support.design.widget.TabLayout android:id="@+id/tablayout" android:layout_width="match_parent" andr
MaterialDesign学习篇(四)，如何使用TabLayout
Chay_Chan的博客
07-30 1307
什么是TabLayout上图中，我们可以看到，该页面分成三个页签，每个页签对应不同的内容，如果让我们来实现布局的话，我们会很容易地想到布局为一个页签指示器+ViewPager，以前，相信各位大多使用的是GitHub上的开源框架PagerSlidingTabTrip来实现指示器的效果，而如今，Android中也有自带这种指示器的控件TabLayout,TabLayout存在于Android Desig
超强自定义TabLayout
wuwei6的博客
08-02 1320
最近在项目中遇到了TabLayout，android有自带的TabLayout控件，对于一般需求不大，不需要太大的自定义要求的来说android自带的也就够用了。但是我项目上遇到的需要自定义TabLayout的Indicator的样式，我的需求是需要圆角的，结果研究了大半天也没有发现xml中哪儿可以直接改，然后也百度了许久也并没有这方面的说法，被逼无赖之后就去看了TabLayout的源码，在源码中
android 自带的design包中tablayout使用
陈陈陈晨旭的博客
04-17 2801
在studio的Project Structure=>app=>dependencies ==>搜索design的依赖，如下： compile 'com.android.support:design:26.0.0-alpha1' 先看实现的效果
史上最简便系列 自定义TabLayout下划线的长度
a821265960的博客
01-23 2193
最近公司有需求， 让TabLayout下划线统一固定宽度。，不根据内容大小设定宽度。。。 很多博客都提供了方案，但是侵入感都太高，一想干脆直接改源码吧。 本着探索字节的精神，撸起袖子就干。 注：为了方便大家阅读  图的左侧截屏到了行数。     首先阅读源码，TabLayout其实就是一个可以横向滑动的自定义LinearLayout。 所以，我们就要找到他的子条目。  可以看到就是Ta...
Android 使用TabLayout遇到的一些问题，及TabLayout的使用
小白新人
12-17 1686
TabLayout提供了一个水平的布局用来展示Tabs Design库：AS有直接的引用 现在就可以直接使用 1.最简单的demo &lt;android.support.design.widget.TabLayout android:id="@+id/tablayout" android:layout_width="match_parent" android...
谷歌官方Android最新滑动选项导航卡SlidingTabLayout和SlidingTabStrip
Zhang Phil
09-14 1万+
 谷歌官方Android最新滑动选项导航卡SlidingTabLayout和SlidingTabStrip 在最新版的谷歌官方Android SDK（Android 5.0+以上的SDK）中，已经废弃过往过选项导航卡的支持，取而代之以最新的SlidingTabLayout和SlidingTabStrip结合ViewPager实现选项导航卡滑动切换的样式。 SlidingTabLa
史上最全的TabLayout源码分析
s1120080286的专栏
02-12 5429
TabLayout在Android开发中十分重要，其关键元素如下所示：Tab类和TabView类和SlidingTabStrip类为TabLayout提供了三个基本的元素。对于Tab类：还有一个TagView的mView成员变量，可以通过setIcon()和setCustomView()方法设置tab的mView参数，public static final class Tab {     publ...
android.support.design.widget.tablayout
最新发布
03-16
android.support.design.widget.tablayout是Android支持库中的一个控件，用于创建选项卡布局。它可以与ViewPager一起使用，实现滑动切换不同的页面。TabLayout可以自定义样式和布局，支持添加图标和文字，还可以设置...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值