Android tablayout 从右左 android tablayout自定义

转载

ghpsyn 2023-08-04 10:11:07

文章标签 自定义tab 自定义指示器 tablayout android 自定义 文章分类 Android 移动开发

安卓Tablayout自定义文字、指示器长度和颜色

废话不多说，先上效果图。没有效果图的文章都是扯淡：

安卓Tablayout自定义文字、指示器长度和颜色

新的改变
以上就是所有的代码
附上demo源码。
**如果有什么问题，欢迎大家指导。并相互联系，希望能够通过文章互相学习。**

废话不多说，先上效果图。没有效果图的文章都是扯淡：

Android tablayout 从右左 android tablayout自定义_tablayout

安卓Tablayout自定义文字、指示器长度和颜色

之前写过一篇博客是tablayout+viewpager的基本实现，类似今日头条的界面。随着需求和UI的不断提升，Android端需要自定义的功能越来越多，tablayout的使用越来越频繁，自定义指示器和自定义tab字体的需求就越来越多，自己做的时候也找了好多资料去参考，但基本上都达不到我的需求，所以还是自食其力、自力更生吧。借此记录一下，也希望能够帮助到你。

新的改变

1.自定义tab可以实现呢字体加粗，字体大小设置等；
2.自定义指示器支持各式各样的图片或文字；

OK 贴代码吧：

先来xml文件：

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tablayout"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        app:tabGravity="center"
        app:tabMode="scrollable"
        app:tabIndicatorFullWidth="false"
        app:tabIndicatorColor="@color/tra"
        app:tabBackground="@color/tra"
        app:tabRippleColor="@color/tra"
        app:tabTextColor="#000000"
        app:tabSelectedTextColor="#38A9FF"/>
    
    <androidx.viewpager.widget.ViewPager
        android:id="@+id/vierpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</LinearLayout>

activity.class

package com.edu.demo8;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentPagerAdapter;
import androidx.viewpager.widget.ViewPager;

import android.graphics.Color;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.TextView;

import com.google.android.material.tabs.TabLayout;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    String[] title = {"热门","外语","舞蹈","音乐","篮球","主播","游泳","电竞","首富"};

    List<Fragment> fragments = new ArrayList<>();

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

        TabLayout tableLayout = findViewById(R.id.tablayout);
        ViewPager viewPager = findViewById(R.id.vierpager);

        //设置tablayout+viewpager
        for (int i = 0; i < title.length; i++){
            fragments.add(ItemFragment.newInstance(title[i]));
        }
        //加适配器
        viewPager.setAdapter(adapter);
        //绑定联动
        tableLayout.setupWithViewPager(viewPager);

        //设置自定义tab
        for (int i = 0; i < tableLayout.getTabCount(); i++){
            TabLayout.Tab tab = tableLayout.getTabAt(i);
            if (tab != null) {
                tab.setCustomView(getTabView(i));
            }
        }
        //监听滑动
        tableLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                if(tab!= null){
                    changeTabTextView(tab, true);
                }
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
                if(tab!= null){
                    changeTabTextView(tab, false);
                }
            }

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

            }
        });

        //默认选中第一个
        changeTabTextView(tableLayout.getTabAt(0), true);

    }

    /**
     * 修改选中时的状态
     * @param tab
     * @param b
     */
    private void changeTabTextView(TabLayout.Tab tab, boolean b) {
        TextView tablayout_item_txt = tab.getCustomView().findViewById(R.id.tablayout_item_txt);
        TextView tablayout_item_ind = tab.getCustomView().findViewById(R.id.tablayout_item_ind);
        if(b){
            tablayout_item_ind.setBackgroundColor(Color.parseColor("#39AAFE"));
            tablayout_item_txt.getPaint().setFakeBoldText(true);
            tablayout_item_txt.setTextColor(Color.parseColor("#39AAFE"));
        }else{
            tablayout_item_ind.setBackgroundColor(Color.parseColor("#00000000"));
            tablayout_item_txt.getPaint().setFakeBoldText(false);
            tablayout_item_txt.setTextColor(Color.parseColor("#000000"));
        }
    }

    //获取每一个tab的view
    public View getTabView(int position) {
        View view = LayoutInflater.from(this).inflate(R.layout.tablayout_item, null);
        TextView textView = view.findViewById(R.id.tablayout_item_txt);
        textView.setText(title[position]);
        return view;
    }


    /**
     * 添加fragment的适配器
     */
    FragmentPagerAdapter adapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
        @NonNull
        @Override
        public Fragment getItem(int position) {
            return fragments.get(position);
        }

        @Override
        public int getCount() {
            return fragments.size();
        }

        @Nullable
        @Override
        public CharSequence getPageTitle(int position) {
            return title[position];
        }
    };

}

item的xml：

<?xml version="1.0" encoding="utf-8"?>

<TextView
    android:id="@+id/tablayout_item_txt"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:text="自定义"
    android:background="?selectableItemBackgroundBorderless"
    android:gravity="center"
    android:textColor="#000000"
    android:textSize="14dp" />

<TextView
    android:id="@+id/tablayout_item_ind"
    android:layout_width="10dp"
    android:layout_height="5dp"
    android:layout_marginTop="1dp"
    android:background="#00000000"/>

ItemFragment：

package com.edu.demo8;

import android.os.Bundle;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;

public class ItemFragment extends Fragment {

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view4 = inflater.inflate(R.layout.sele_fragment_item4, container, false);
        return view4;
    }

    public static Fragment newInstance(String i) {
        ItemFragment fragment = new ItemFragment();
        Bundle bundle = new Bundle();
        bundle.putSerializable("TABLAYOUT_FRAGMENT", i);
        fragment.setArguments(bundle);
        return fragment;
    }
}

sele_fragment_item4.xml：

<?xml version="1.0" encoding="utf-8"?>
<TextView
    xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:textSize="30dp"
    android:textColor="#000000"
    android:text="123321">

</TextView>

我的思路是在设置每一个tab的时候去添加一个自定义的指示器。随着tab的状态的改变去显现自定义的指示器就好，可以解决我的需求。