Android中Design庫之TabLayout

時間 2019-11-21

標籤 android design tablayout 欄目 Android 简体版

原文原文鏈接

簡介

TabLayout就是用一個水平的佈局用來展現Tabsjavascript

使用

首先在build.gradle的dependencies中加入依賴java

compile 'com.android.support:design:25.0.0'複製代碼

給application從新指定themeandroid

android:theme="@style/MyTheme"git

<style name="MyTheme" parent="Theme.AppCompat.Light.NoActionBar">
</style>複製代碼

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.zhoujian.tablayout" >

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/MyTheme" >
        <activity android:name=".MainActivity" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>複製代碼

佈局文件中github

默認狀況下，沒有設置任何屬性app

<android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>複製代碼

在代碼中ide

package com.zhoujian.tablayout;

import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v7.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {



    public static final String[] titles = new String[]{"精選","訓練","飲食","商城"};

    private TabLayout mTabLayout;

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

    private void initView()
    {
        mTabLayout = (TabLayout) findViewById(R.id.tabLayout);
        mTabLayout.addTab(mTabLayout.newTab().setText(titles[0]));
        mTabLayout.addTab(mTabLayout.newTab().setText(titles[1]));
        mTabLayout.addTab(mTabLayout.newTab().setText(titles[2]));
        mTabLayout.addTab(mTabLayout.newTab().setText(titles[3]));
    }
}複製代碼

顯示效果佈局

改變選中字體的顏色和未選中字體的顏色

<?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:layout_height="match_parent" android:orientation="vertical"> <android.support.design.widget.TabLayout android:id="@+id/tabLayout" android:layout_width="match_parent" android:layout_height="wrap_content" app:tabTextColor="@color/black" app:tabSelectedTextColor="@color/red"/> </LinearLayout>複製代碼

未選中的顏色:黑色字體

app:tabTextColor="@color/black"複製代碼

選中的顏色:紅色gradle

app:tabSelectedTextColor="@color/red"複製代碼

顯示效果：

改變指示器下標橫線的高度和顏色、改變TabLayout的背景色

改變指示器下標的顏色：黑色

app:tabIndicatorColor="@color/black"複製代碼

改變指示器下標的高度：2dp

app:tabIndicatorHeight="2dp"複製代碼

改變TabLayout的背景色：黃色

顯示效果：

改變TabLayout內部字體大小

app:tabTextAppearance="@style/TabLayoutTextStyle"複製代碼

styles.xml文件中

<style name="TabLayoutTextStyle">
        <item name="android:textSize">10sp</item>
 </style>複製代碼

顯示效果：

添加圖標

mTabLayout.addTab(mTabLayout.newTab().setText(titles[0]).setIcon(R.mipmap.circle1));  
mTabLayout.addTab(mTabLayout.newTab().setText(titles[1]).setIcon(R.mipmap.circle2));
mTabLayout.addTab(mTabLayout.newTab().setText(titles[2]).setIcon(R.mipmap.circle3));
mTabLayout.addTab(mTabLayout.newTab().setText(titles[3]).setIcon(R.mipmap.circle4));複製代碼

顯示效果:

顯示模式

填充模式

app:tabGravity="fill"複製代碼

居中模式

app:tabGravity="center"複製代碼

點擊事件

mTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
            //選中 

            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
            //未選中 
            }

            @Override
            public void onTabReselected(TabLayout.Tab tab)
            {
            //再次選中 

            }
        });複製代碼

ViewPager聯動

activity_main.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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">


    <android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabBackground="@color/yellow"
        app:tabGravity="fill"
        app:tabIndicatorColor="@color/black"
        app:tabIndicatorHeight="2dp"
        app:tabSelectedTextColor="@color/red"
        app:tabTextAppearance="@style/TabLayoutTextStyle"
        app:tabTextColor="@color/black"/>


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


</LinearLayout>複製代碼

MainActivity.java

package com.zhoujian.tablayout;

import android.os.Bundle;
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 java.util.ArrayList;
import java.util.Arrays;

public class MainActivity extends AppCompatActivity {



    public static final String[] titles = new String[]{"精選","訓練","飲食","商城"};
    private ArrayList<Fragment> fragmentList = new ArrayList<Fragment>();
    private  TabLayout mTabLayout;
    private ViewPager mViewPager;

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

    private void initView() {
        mTabLayout = (TabLayout) findViewById(R.id.tabLayout);

        mViewPager = (ViewPager) findViewById(R.id.view_pager);
        mTabLayout.addTab(mTabLayout.newTab().setText(titles[0]));
        mTabLayout.addTab(mTabLayout.newTab().setText(titles[1]));
        mTabLayout.addTab(mTabLayout.newTab().setText(titles[2]));
        mTabLayout.addTab(mTabLayout.newTab().setText(titles[3]));

        mTabLayout.setupWithViewPager(mViewPager);

        fragmentList.add(FirstFragment.newInstance());
        fragmentList.add(SecondFragment.newInstance());
        fragmentList.add(ThirdFragment.newInstance());
        fragmentList.add(FourthFragment.newInstance());

        FragmentAdapter adapter = new FragmentAdapter(getSupportFragmentManager(),fragmentList, Arrays.asList(titles));
        mViewPager.setAdapter(adapter);
        mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener()
        {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels)
            {

            }
            @Override
            public void onPageSelected(int position)
            {
            }
            @Override
            public void onPageScrollStateChanged(int state)
            {

            }
        });

    }
}複製代碼