TabLayout+ViewPager+Fragment实现顶部导航+处理tab下划线长度和选中tab的字体粗细

TabLayout+ViewPager+Fragment实现顶部导航+处理tab下划线长度和选中tab的字体粗细

1. 先写布局

<?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="wrap_content"
    android:layout_height="580px"
    android:background="@color/white">
    <ImageView
        android:id="@+id/img_close"
        android:layout_width="40px"
        android:layout_height="40px"
        android:src="@mipmap/ic_close"
        android:layout_alignParentRight="true"
        android:layout_marginTop="10px"
        android:layout_marginRight="20px"/>

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

        <!-- tabIndicatorColor 选中的下划线颜色 -->
        <!-- tabSelectedTextColor 选中的tab的字体颜色 -->
        <!-- tabTextColor 未选中的tab的字体颜色 -->
        <!-- tabTextAppearance 字体大小和风格自定义 -->
        <android.support.design.widget.TabLayout
            android:id="@+id/tab_layout"
            android:layout_width="330px"
            android:layout_height="80px"
            app:tabGravity="center"
            app:tabMode="fixed"
            app:tabIndicatorHeight="1px"
            app:tabBackground="@color/white"
            app:tabIndicatorColor="@color/text_color_selected"
            app:tabSelectedTextColor="@color/text_color_selected"
            app:tabTextAppearance="@style/TabLayoutTextStyle"
            app:tabTextColor="@color/tab_text"
            style="@style/MyTabLayoutStyle"/>

        <View
            android:layout_width="match_parent"
            android:layout_height="1px"
            android:background="@color/divide_line"/>

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

    </LinearLayout>

</RelativeLayout>
布局中用了两个style分别如下：
<style name="TabLayoutTextStyle">
	<item name="android:textSize">22px</item><!--设置Tablayout字体大小-->
	<!--<item name="android:textStyle">bold</item>-->
</style>
<style name="MyTabLayoutStyle" parent="Widget.Design.TabLayout">
	<item name="tabPaddingStart">64px</item>
	<item name="tabPaddingEnd">64px</item>
</style>

2. 实现导航条用的Activity

import android.content.Intent;
import android.graphics.Typeface;
import android.net.Uri;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.view.WindowManager;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

import java.lang.reflect.Field;
import java.util.ArrayList;
import java.util.List;

public class DaoHangActivity extends FragmentActivity implements MoreAFragment.OnFragmentInteractionListener,
        MoreBFragment.OnFragmentInteractionListener,
        View.OnClickListener {
    private static final String TAG = DaoHangActivity.class.getName();

    private ViewPager view_pager;
    private TabLayout tab_layout;
    private ImageView img_close;
    private TabAdapter tabAdapter;
    private List<Fragment> fragments = new ArrayList<>();
    private String[] titles;

    private void init()
    {
        img_close = (ImageView) findViewById(R.id.img_close);
        view_pager = (ViewPager) findViewById(R.id.view_pager);
        tab_layout = (TabLayout) findViewById(R.id.tab_layout);

        img_close.setOnClickListener(this);
        tab_layout.addOnTabSelectedListener(mOnTabSelectedListener);

        fragments.add(MoreAFragment.newInstance("A_fragment", "A"));
        fragments.add(MoreBFragment.newInstance("B_fragment", "B"));

        tabAdapter = new TabAdapter(getSupportFragmentManager());
        tabAdapter.setFragments(fragments);
        view_pager.setAdapter(tabAdapter);
        view_pager.addOnPageChangeListener(mOnPageChangeListener);

        tab_layout.setupWithViewPager(view_pager);

        setTabWidth(tab_layout, 31);

        Intent intent = getIntent();
        int pos = 0;
        if (intent != null)
        {
            pos = intent.getIntExtra("pos", 0);
        }
        Log.i(TAG, "init() exit. pos="+pos);
        if (pos == 0)
        {
            view_pager.setCurrentItem(0);
        }
        else
        {
            view_pager.setCurrentItem(1);
        }
    }

    @Override
    public void onFragmentInteraction(Uri uri)
    {

    }

    @Override
    public void onClick(View v)
    {
        int v_id = v.getId();
        if (v_id == R.id.img_close)
        {
            finish();
        }
    }

    public class TabAdapter extends FragmentPagerAdapter
    {

        private List<Fragment> fragments;

        public TabAdapter(FragmentManager fm)
        {
            super(fm);
        }

        public void setFragments(List<Fragment> fragments)
        {
            this.fragments = fragments;
        }

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

        @Override
        public int getCount()
        {
            return fragments != null ? fragments.size() : 0;
        }

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

    private TabLayout.OnTabSelectedListener mOnTabSelectedListener = new TabLayout.OnTabSelectedListener()
    {

        @Override
        public void onTabSelected(TabLayout.Tab tab)
        {
            //Log.e(TAG, "setTabTextViewStyle() onTabSelected");
        }

        @Override
        public void onTabUnselected(TabLayout.Tab tab)
        {
            //Log.e(TAG, "setTabTextViewStyle() onTabUnselected");
        }

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

        }
    };

    private ViewPager.OnPageChangeListener mOnPageChangeListener = new ViewPager.OnPageChangeListener()
    {

        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels)
        {
            setTabTextViewStyle(tab_layout, position);
            //Log.e(TAG, "setTabTextViewStyle() onPageScrolled() position="+position+"; positionOffset="+positionOffset+"; positionOffsetPixels="+positionOffsetPixels);
        }

        @Override
        public void onPageSelected(int position)
        {
            //Log.e(TAG, "setTabTextViewStyle() onPageSelected() position="+position);
        }

        @Override
        public void onPageScrollStateChanged(int state)
        {
            //Log.e(TAG, "setTabTextViewStyle() onPageScrollStateChanged() state="+state);
        }
    };

    //处理tab下划线长度,百度搜到的
    public void setTabWidth(final TabLayout tabLayout, final int padding)
    {
        tabLayout.post(new Runnable()
        {
            @Override
            public void run()
            {
                try
                {
                    
                    LinearLayout mTabStrip = (LinearLayout) tabLayout.getChildAt(0);

                    for (int i = 0; i < mTabStrip.getChildCount(); i++)
                    {
                        View tabView = mTabStrip.getChildAt(i);
                        if (tabView == null) continue;

                        
                        Field mTextViewField = tabView.getClass().getDeclaredField("mTextView");
                        if (mTextViewField == null) continue;
                        mTextViewField.setAccessible(true);
                        TextView mTextView = (TextView) mTextViewField.get(tabView);
                        if (mTextView == null) continue;
                        tabView.setPadding(0, 0, 0, 0);

                        
                        int width = mTextView.getWidth();
                        Log.e(TAG, "setTabWidth() mTextView_width="+width);
                        if (width == 0)
                        {
                            mTextView.measure(0, 0);
                            width = mTextView.getMeasuredWidth();
                            Log.e(TAG, "setTabWidth() 111 mTextView_width="+width);
                        }

                        
                        LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) tabView.getLayoutParams();
                        params.width = width ;
                        params.leftMargin = padding;
                        params.rightMargin = padding;
                        tabView.setLayoutParams(params);

                        tabView.invalidate();
                    }

                }
                catch (NoSuchFieldException e)
                {
                    e.printStackTrace();
                }
                catch (IllegalAccessException e)
                {
                    e.printStackTrace();
                }
            }
        });
    }

    //修改选中tab的TextView的字体粗细
    public void setTabTextViewStyle(final TabLayout tabLayout, int position)
    {
        tabLayout.post(new Runnable()
        {
            @Override
            public void run()
            {
                try
                {
                    LinearLayout mTabStrip = (LinearLayout) tabLayout.getChildAt(0);
                    for (int i = 0; i < mTabStrip.getChildCount(); i++)
                    {
                        View tabView = mTabStrip.getChildAt(i);
                        if (tabView == null) continue;

                        Field mTextViewField = tabView.getClass().getDeclaredField("mTextView");
                        if (mTextViewField == null) continue;
                        mTextViewField.setAccessible(true);
                        TextView mTextView = (TextView) mTextViewField.get(tabView);
                        if (mTextView == null) continue;
                        if (i == position)
                        {
                            mTextView.setTypeface(Typeface.DEFAULT_BOLD);
                        }
                        else
                        {
                            mTextView.setTypeface(Typeface.DEFAULT);
                        }

                        tabView.invalidate();
                    }
                }
                catch (NoSuchFieldException e)
                {
                    e.printStackTrace();
                }
                catch (IllegalAccessException e)
                {
                    e.printStackTrace();
                }
            }
        });
    }

    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);

        WindowManager.LayoutParams lp = getWindow().getAttributes();
        lp.width = (int) getResources().getDimension(R.dimen.916);
        lp.height = (int) getResources().getDimension(R.dimen.580);
        Log.i(TAG, "onCreate() width="+lp.width+"; height="+lp.height);
        getWindow().setAttributes(lp);

        setContentView(R.layout.activity_more_step);
        titles = getResources().getStringArray(R.array.fragment_tab_title);
		/** fragment_tab_title定义
		<string-array name="fragment_tab_title">
			<item>A_fragment</item>
			<item>B_fragment</item>
		</string-array>
		*/
        init();

        Log.i(TAG, "onCreate()");
    }
    protected void onResume()
    {
        super.onResume();
        Log.i(TAG, "onResume()");
    }

    protected void onPause()
    {
        super.onPause();
        Log.i(TAG, "onPause()");
    }

    protected void onStop()
    {
        super.onStop();
        Log.i(TAG, "onStop()");
    }

    protected void onDestroy()
    {
        super.onDestroy();
        Log.i(TAG, "onDestroy()");
    }
}
这样就可以了，MoreAFragment和MoreBFragment就不在这里写了，自己可以随意添加。