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

目录
相关文章
|
6月前
自定义tablayout,好用
自定义tablayout,好用
32 0
|
4月前
自定义Toolbar以及使用
自定义Toolbar以及使用
|
XML 数据格式
自定义Toolbar的一些小技巧
1、改变Toolbar高度(解决图标不垂直居中) 背景:实际使用中,toolbar默认高度有些大,会挤压内容。想将toolbar高度改小,将layout_height从wrap_content改为固定值。 情况:toolbar的layout_height比默认高度小的时候,发现标题是居中的,但是两侧的图标不垂直居中而偏下了 调查:网上有很多方法,基本都是无效的。甚至有人利用反射直接修改图标的imageview的gravity,非常复杂且右侧图标无法实现。
245 0
|
XML Java Android开发
Android自定义标题栏替代复杂的Actionbar
组合控件,顾名思义就是将一些小的控件组合起来形成一个新的控件,这些小的控件多是系统自带的控件。比如很多应用中普遍使用的标题栏控件,其实用的就是组合控件,那么下面将通过实现一个简单的标题栏自定义控件来说说组合控件的用法。
183 0
|
Android开发 容器
Android自定义TabLayout后ViewPager与TabLayout互相控制切换
Android自定义TabLayout后ViewPager与TabLayout互相控制切换 正常的Android原生TabLayout与ViewPager搭配使用,当TabLayout调用setupWithViewPager与ViewPager互相捆绑以后,就实现了原生的TabLayout与ViewPager的互相控制。
2147 0
|
Android开发 开发者
Android RecyclerView单击、长按事件标准实现:基于OnItemTouchListener + GestureDetector
 Android RecyclerView单击、长按事件:基于OnItemTouchListener + GestureDetector标准实现 Android RecyclerView虽然拥有ListView绝大多数...
1037 0