android 指示器 tablatyout

Posted 2020-08-24 奶霸000

<android.support.design.widget.TabLayout/>
android 材料设计中新出的控件

package com.weavey.loadinglayout;

import android.os.Bundle;
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.content.ContextCompat;
import android.support.v4.view.ViewCompat;
import android.support.v4.view.ViewPager;

import com.weavey.fragment.TabContentFragment1;

import java.util.ArrayList;

/**
 * Android TabLayout  一个滑动标签页
 */

public class TabLayoutActivity extends FragmentActivity {
    private TabLayout mTabTl;
    private ViewPager mContentVp;
    private ArrayList<String> tabIndicators;
    private ArrayList<Fragment> tabFragments;
    private ContentPagerAdapter contentAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.layout_tablyout);
        setView();
        setListener();
        //设置内容
        setContent();
        //设置TAB 选项卡
        setTab();
    }

    private void setTab() {
        mTabTl.setTabMode(TabLayout.MODE_FIXED);
        mTabTl.setTabTextColors(ContextCompat.getColor(this, android.R.color.holo_red_dark), ContextCompat.getColor(this, android.R.color.white));
        //设置线条的颜色
//        mTabTl.setSelectedTabIndicatorColor(ContextCompat.getColor(this, android.R.color.holo_green_dark));
        //设置 tab之间的间距 px
        ViewCompat.setElevation(mTabTl, 10);
        //关联相对应的viewPager
        mTabTl.setupWithViewPager(mContentVp);
    }

    private void setContent() {
        tabIndicators = new ArrayList<>();
        for (int i = 0; i < 3; i++) {
            tabIndicators.add("Tab " + i);
        }
        tabFragments = new ArrayList<>();
        for (String s : tabIndicators) {
            tabFragments.add(TabContentFragment1.newInstance(s));
        }
        contentAdapter = new ContentPagerAdapter(getSupportFragmentManager());
        mContentVp.setAdapter(contentAdapter);
    }

    private void setView() {
        mTabTl = (TabLayout) findViewById(R.id.tl_tab);
        mContentVp = (ViewPager) findViewById(R.id.vp_content);
    }

    private void setListener() {

    }

    class ContentPagerAdapter extends FragmentPagerAdapter {

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

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

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

        //设置标签指示器的标题
        @Override
        public CharSequence getPageTitle(int position) {
            return tabIndicators.get(position);
        }

    }
}


详见：http://www.jianshu.com/p/39a66373498c    
 
更加详细  http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0731/3247.html   包括自定义封装tablayout

可以进行很多的设置  

<style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">
    <item name="tabMaxWidth">80dp</item>   tablayout 最大的宽度
    <item name="tabIndicatorColor">?attr/colorAccent</item> 指示器的颜色
    <item name="tabIndicatorHeight">12dp</item> 指示器的高度
    <item name="tabPaddingStart">12dp</item> tab 左边距
    <item name="tabPaddingEnd">12dp</item> 右边距
    <item name="tabBackground">@android:color/holo_blue_bright</item> tablayout 背景颜色
    <item name="tabTextAppearance">@style/MyCustomTabTextAppearance</item> 设置字体样式
    <item name="tabSelectedTextColor">?android:textColorPrimary</item>
</style>
<style name="MyCustomTabTextAppearance" parent="TextAppearance.Design.Tab">
    <item name="android:textSize">14sp</item> 设置指示器中字体的大小
    <item name="android:textColor">?android:textColorSecondary</item> 设置指示器中字体的颜色

    <item name="textAllCaps">true</item>  是否强制将字体变成大写
</style>