Android tabLayout选择字体大小更改 tablayout设置文字大小

转载

mob64ca14116c53 2023-09-27 18:57:51

文章标签 android xml ide 文章分类 Android 移动开发

如果你没有特别的要求，不需要点击后动态的改变tab中每个字体的样式和大小的话，用第一种方案就可以满足你的需求。如果有特殊的需求你就应该参考第二种和第三种自定义tablayout中的每一个tab的方案了。

第一种方案：改变TabLayout中tab的字体默认大小，仅需要两步：

步骤1. 自定义 Style 在values.xml文件中：
<style name="MyTabText" parent="TextAppearance.Design.Tab">
    <item name="android:textSize">12sp</item>
</style>
步骤2.在xml布局中引用的时候加上我们自定义的字体样式的teyle：
<android.support.design.widget.TabLayout
    android:id="@+id/tabLayout"
    app:tabTextAppearance="@style/MyTabText" 
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

第二种方案：自定义tablayout中的每一个tab的tabItem和代码里面动态控制每一个tab选中和未选中时的tabtext的字体样式和字体大小，透明度等：

效果图如下：

Android tabLayout选择字体大小更改 tablayout设置文字大小_xml

步骤1：先一下主布局代码：

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout 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:id="@+id/custom_drawable_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
   >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <android.support.design.widget.AppBarLayout
            android:id="@+id/custom_appbarlayout"
            android:layout_width="match_parent"
            android:layout_height="110dp"
            >

            <android.support.v7.widget.Toolbar
                android:layout_width="match_parent"
                android:layout_height="50dp"
                app:contentInsetStart="0dp"
                app:layout_collapseMode="pin">


                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">

                    <ImageView
                        android:id="@+id/article_custom_btn_mean"
                        android:layout_width="20dp"
                        android:layout_height="20dp"
                        android:layout_marginLeft="10dp"
                        android:src="@mipmap/ic_launcher"
                        android:layout_centerVertical="true"
                        android:scaleType="fitXY"
                         />
                    <TextView
                        android:id="@+id/article_title_tv"
                        android:layout_width="wrap_content"
                        android:layout_toRightOf="@+id/article_custom_btn_mean"
                        android:layout_centerVertical="true"
                        android:layout_marginLeft="25dp"
                        android:layout_height="wrap_content"
                        android:gravity="center"
                        android:text="Articles"
                        android:textColor="#ffffff"
                        android:textSize="21sp"
                        android:textStyle="bold" />

                </RelativeLayout>

            </android.support.v7.widget.Toolbar>
            <!--选项卡-->
            <android.support.design.widget.TabLayout
                android:id="@+id/article_tablayout"
                android:layout_width="match_parent"
                android:layout_height="57dp"
                android:layout_gravity="bottom"
                app:tabIndicatorColor="#99ffffff"
                app:tabIndicatorHeight="2dp"
                app:tabMode="scrollable"
                app:tabSelectedTextColor="#FFF"
                app:tabTextColor="#e1dcdc"
                />


        </android.support.design.widget.AppBarLayout>


        <android.support.v4.view.ViewPager
            android:id="@+id/article_viewpager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    </LinearLayout>

</android.support.v4.widget.DrawerLayout>

步骤2：再自定义一个tabitem.xml布局来定义这个自定义的tabItem（可以自定很多你喜欢的类型，textview或者imageview或者其他）：

tabitem.xml布局代码：

<?xml version="1.0" encoding="utf-8"?>
<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="vertical">

    <TextView
        android:id="@+id/tab_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:gravity="center"
        android:textColor="@color/white"
        android:textSize="24sp" />
</LinearLayout>

步骤3：如果tabllayout要与viewpager联动的话，再自定义一个CustomTabPagerAdapter类

CustomTabPagerAdapter.java类代码如下：

import android.content.Context;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.PagerAdapter;
import android.view.ViewGroup;

import java.util.List;

/**
 * Created by wjj on 2018/4/10
 * 自定义tablayout的tab样式时，联动的viewpager需要用到的apapter
 */

public class CustomTabPagerAdapter extends FragmentPagerAdapter {
    List<Fragment> list;
    Context con;
    private FragmentManager fm;
//    private String[] strs;

    public CustomTabPagerAdapter(FragmentManager fm, List<Fragment> list, Context con, String[] strs) {
        super(fm);
        this.list = list;
        this.con = con;
        this.fm = fm;
//        this.strs = strs;
    }

    @Override
    public int getItemPosition(Object object) {

        return PagerAdapter.POSITION_NONE;
    }

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

    @Override
    public Object instantiateItem(ViewGroup vg, int position) {

        return super.instantiateItem(vg, position);
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        super.destroyItem(container, position, object);
    }

    @Override
    public Fragment getItem(int position) {
        return list.get(position);
    }

//    @Override
//    public CharSequence getPageTitle(int position) {
//        if (strs == null)
//            return super.getPageTitle(position);
//        else
//            return strs[position];
//    }
}

其实你会发现和平常的适配器写的时候只有一点区别，唯一的区别就是把下面这个方法注释掉了

//    @Override
//    public CharSequence getPageTitle(int position) {
//        if (strs == null)
//            return super.getPageTitle(position);
//        else
//            return strs[position];
//    }

这里需要注意的一点就是是setupWithViewPager这个方法会先将tab清除然后再根据ViewPager的adapter里的count去取pagetitle，这也就是有些同学遇到用addTab方法添加tab不起作用的问题。

步骤4：写Actiivity或者fragment中的关键实现代码（没有细致封装，有一些重复代码，这样更直观明了看懂原理，代码优化封装自己进行就行，这里不再细讲）：
MainActivity.class类的代码

import android.graphics.Typeface;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.widget.TextView;

import com.mytestapplication.R;
import com.mytestapplication.adapter.MyPagerAdapter;
import com.mytestapplication.fragment.TestFragemnt;

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

public class MainActivity extends AppCompatActivity {
    private ViewPager article_viewpager;
    private TabLayout tab_layout;

	    @Override
	    protected void onCreate(@Nullable Bundle savedInstanceState) {
	        super.onCreate(savedInstanceState);
	        setContentView(R.layout.activity_main5);
	        initViews();
	        initFragment();
	
	    }
	
	    private void initViews() {
	        article_viewpager = findViewById(R.id.article_viewpager);
	        tab_layout = findViewById(R.id.article_tablayout);
	    }
	
	    private void initFragment() {
	        tab_layout.addTab(tab_layout.newTab());
	        tab_layout.addTab(tab_layout.newTab());
	        tab_layout.addTab(tab_layout.newTab());
	        tab_layout.addTab(tab_layout.newTab());
	        tab_layout.addTab(tab_layout.newTab());
	        tab_layout.setupWithViewPager(article_viewpager);
	
	        List<Fragment> fragmentList = new ArrayList<>();
	        String[] strs = {"aaa","bbb","ccc","ddd","fff"};
	        for (int i = 0;i<5;i++){
	            fragmentList.add(new TestFragemnt());
	        }
	
	        MyPagerAdapter adapter = new MyPagerAdapter(getSupportFragmentManager(), fragmentList, this, strs);
	        article_viewpager.setAdapter(adapter);
	        for (int i = 0; i < adapter.getCount(); i++) {
	            TabLayout.Tab tab = tab_layout.getTabAt(i);//获得每一个tab
	            tab.setCustomView(R.layout.tab_item);//给每一个tab设置view
	            Typeface font = Typeface.createFromAsset(this.getAssets(), "fonts/ARJULIAN.ttf");
	            TextView textView = (TextView) tab.getCustomView().findViewById(R.id.tab_text);
	            textView .setTypeface(font);
	            textView.setText(strs[i]);//设置tab上的文字
	            if (i == 0) {
	                // 设置第一个tab的TextView是被选择的样式
	                tab.getCustomView().findViewById(R.id.tab_text).setSelected(true);//第一个tab被选中
	                textView.setTextSize(19);
	                textView.setAlpha(0.9f);
	            }else {
	                tab.getCustomView().findViewById(R.id.tab_text).setSelected(false);//第一个tab被选中
	                textView.setTextSize(15);
	                textView.setAlpha(0.5f);
	            }
	        }
	        tab_layout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
	            @Override
	            public void onTabSelected(TabLayout.Tab tab) {
	                tab.getCustomView().findViewById(R.id.tab_text).setSelected(true);
	                TextView tv = (TextView)tab.getCustomView().findViewById(R.id.tab_text);
	                tv.setTextSize(19);
	                tv.setAlpha(0.9f);
	                tv.invalidate();
	                article_viewpager.setCurrentItem(tab.getPosition());
	            }
	
	            @Override
	            public void onTabUnselected(TabLayout.Tab tab) {
	                tab.getCustomView().findViewById(R.id.tab_text).setSelected(false);
	                TextView tv = (TextView)tab.getCustomView().findViewById(R.id.tab_text);
	                tv.setTextSize(15);
	                tv.setAlpha(0.5f);
	                tv.invalidate();
	            }
	
	            @Override
	            public void onTabReselected(TabLayout.Tab tab) {
	
	            }
	        });
	
	    }

}

第三种方案是一个外国人的思路，思路很好，但是我照着做并没有实现了，下面把它也贴出来，供有兴趣的小伙伴继续深入探索，

原文如下：如果你不想使用style.xml，并且通过在你的xml布局中使用这个方法来实现。

<android.support.design.widget.TabLayout
                android:id="@+id/tab_Layout_dashboard"
                android:layout_below="@id/ll_profile"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="0.15"
                style="@style/Base.Widget.Design.TabLayout"
                android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
                />

            <android.support.v4.view.ViewPager
                android:layout_below="@id/tab_Layout_dashboard"
                android:id="@+id/pager_tutor"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="0.85"
                />

在activity或者fragment中调用下面方法

private void changeTabsFont() {
        Typeface font = Typeface.createFromAsset(getActivity().getAssets(), "fonts/"+ Constants.FontStyle);
        ViewGroup vg = (ViewGroup) tab_layout.getChildAt(0);
        int tabsCount = vg.getChildCount();
        for (int j = 0; j < tabsCount; j++) {
            ViewGroup vgTab = (ViewGroup) vg.getChildAt(j);
            int tabChildsCount = vgTab.getChildCount();
            for (int i = 0; i < tabChildsCount; i++) {
                View tabViewChild = vgTab.getChildAt(i);
                if (tabViewChild instanceof TextView) {
                    ((TextView) tabViewChild).setTypeface(font);
                    ((TextView) tabViewChild).setTextSize(15);

                }
            }
        }
    }
此段代码适用于Tablayout更改文本颜色，类型面（字体样式）以及文本字号大小。

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。