TabLayout的自定义

简介: TabLayout的自定义,主要是通过setCustomView方法来添加自定义布局实现。自定义TabLayout的实现主要包含以下几个步骤●创建自定义布局(这里我加了一个动画控件,可以替换成其他控件) ...

TabLayout的自定义,主要是通过setCustomView方法来添加自定义布局实现。

自定义TabLayout的实现主要包含以下几个步骤

●创建自定义布局(这里我加了一个动画控件,可以替换成其他控件)

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <LinearLayout
        android:layout_width="wrap_content"
        android:orientation="horizontal"
        android:gravity="center_vertical"
        android:layout_centerInParent="true"
        android:layout_height="wrap_content">
        <com.airbnb.lottie.LottieAnimationView
            android:layout_width="40dp"
            android:id="@+id/lottanim"
            app:lottie_autoPlay="true"
            app:lottie_loop="true"
            app:lottie_fileName="infinity.json"
            android:layout_height="20dp" />
        <TextView
            android:layout_width="wrap_content"
            android:text="标题"
            android:id="@+id/tv"
            android:layout_height="wrap_content" />
    </LinearLayout>
</RelativeLayout>

●创建Activity布局

<?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:orientation="vertical"
    android:layout_height="match_parent">
    <android.support.design.widget.TabLayout
        android:layout_width="match_parent"
        android:id="@+id/tablayout"
        app:tabMode="scrollable"
        android:layout_height="wrap_content">
    </android.support.design.widget.TabLayout>
</LinearLayout>

●在Activity中动态添加tab

 tabLayout=findViewById(R.id.tablayout);
 for (int x=0;x<8;x++){
            TabLayout.Tab tab = tabLayout.newTab();
            View inflate = View.inflate(this, R.layout.customtablayout, null);
            TextView textView = inflate.findViewById(R.id.tv);
            textView.setText("标题"+x);
            tab.setCustomView(inflate);
            tabLayout.addTab(tab);
}

此时就已经实现了自定义tab了

img_a9a0053490da5dca6e4860d3f90a2c68.gif

接下来实现绑定ViewPager

viewPager.setAdapter(new PagerAdapter() {
            @Override
            public int getCount() {
                return 8;
            }

            @Override
            public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {
                return view==object;
            }

            @NonNull
            @Override
            public Object instantiateItem(@NonNull ViewGroup container, int position) {
                TextView textView=new TextView(CustomTablayout.this);
                textView.setText(position+"");
                textView.setTextSize(50);
                container.addView(textView);
                return textView;
            }

            @Override
            public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
                container.removeView((View) object);
            }
        });
tabLayout.setupWithViewPager(viewPager);

这里发现自定义的tab不见了,这里是因为当Tablayout绑定ViewPager的时候TabLayout会采用默认的tab布局所以才看不到效果。

img_58c3a3596b06298db89144bebce60b45.gif

解决方法:不采用setupWithViewPager方法来进行手动绑定,这里注意tab的数量要和PagerAdapter的getCount方法返回的数量一致。

tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                viewPager.setCurrentItem(tab.getPosition());
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {

            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });
        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                tabLayout.setScrollPosition(position, 0f, true);
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
img_e8c866ec0c7ad6fda8cca89c281168d6.gif

个人博客:https://myml666.github.io

目录
相关文章
|
7月前
自定义tablayout,好用
自定义tablayout,好用
39 0
|
Android开发
Android自定义ListView和GridView解决滑动冲突和显示不全
Android自定义ListView和GridView解决滑动冲突和显示不全
175 0
|
XML Java Android开发
Android自定义标题栏替代复杂的Actionbar
组合控件,顾名思义就是将一些小的控件组合起来形成一个新的控件,这些小的控件多是系统自带的控件。比如很多应用中普遍使用的标题栏控件,其实用的就是组合控件,那么下面将通过实现一个简单的标题栏自定义控件来说说组合控件的用法。
191 0
|
Android开发
1-VVI-材料设计之-TabLayout上标签
[1].既然ViewPager和Fragment都总结完了,那就插一个材料设计中的TabLayout控件吧,这三者关系挺好 [2].TabLayout在上面就是曾经的ViewPager指示器,想当年都是自己封装来用,现在条件好了,安卓给了。
1160 0
|
Android开发
2-VVI-材料设计之TabLayout下标签
[1].将下面线去掉,自定义条目样式,就可以实现下图效果 [2].以前实现这种效果一般用按钮组,有点麻烦 [3].Fragment同上篇 效果图 二、代码实现: 1.
1220 0
|
XML Android开发 数据格式
Android自定义底部带有动画的Dialog
Android自定义底部带有动画的Dialog 效果图 先看效果图,是不是你想要的呢 自定义Dialog package …….
882 0
|
Android开发
Android 自定义View修炼-打造完美的自定义侧滑菜单/侧滑View控件(转)
一、概述   在App中,经常会出现侧滑菜单,侧滑滑出View等效果,虽然说Android有很多第三方开源库,但是实际上 咱们可以自己也写一个自定义的侧滑View控件,其实不难,主要涉及到以下几个要点: 1.对Android中Window类中的DecorView有所了解 2.对Scroller类实现平滑移动效果 3.自定义ViewGroup的实现 首先来看看效果图吧:        下面现在就来说说这里咱们实现侧滑View的基本思路吧,这里我采用的是自定义一个继承于RelativeLayout的控件叫做XCSlideView类吧。
1706 0