Android開發 Tablayout的學習

前言

　　Tablayout通常作主頁底下的導航欄開發或者上面的選擇欄開發,就我的感受Tablayout用於主頁導航欄會比BottomNavigationView更好,自定義方面也更容易.缺點是沒有動畫也不是Material Design設計模式的一部分.下面就講解用於有導航欄的主頁開發:

　　通常主頁導航欄與內容用Tablayout與Fragment配合使用

　　1.第一種Tablayout+ViewPager+Fragment,好處是能夠左右滑動不須要本身實現滑動,而且能夠有動畫出現

　　2.第二種Tablayout+Fragment,若是你不須要左右滑動就能夠輕鬆的選擇這個模式.

在xml裏

　　由於有2種添加Item的方式,因此寫法也能夠是2個種

　　第一種,這種方法能夠直接配置Item的名稱屬性

<com.google.android.material.tabs.TabLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        
        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        
    </com.google.android.material.tabs.TabLayout>

第二種,這種須要本身在代碼裏添加子Item,而且能夠實現自定義佈局和View的Item(下面會說明在代碼裏添加Item)

<com.google.android.material.tabs.TabLayout
        android:id="@+id/tablayout"
        android:layout_width="0dp"
        android:layout_height="56dp"
        app:tabIndicatorHeight="0dp"
        app:tabBackground="@android:color/transparent"
        app:tabRippleColor="@android:color/transparent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent">
    </com.google.android.material.tabs.TabLayout>

介紹一些關鍵的xml屬性

若是你不須要選中下劃線,能夠使用這個屬性取消

app:tabIndicatorHeight="0dp"

若是你不須要點擊後的陰影加漣漪動畫效果,能夠使用下面2個屬性取消

app:tabBackground="@android:color/transparent"
app:tabRippleColor="@android:color/transparent"

代碼部分講解

若是你須要與ViewPager配合使用,那麼你須要知道下面的關鍵代碼

ContentFragment fragment1 = new ContentFragment(); 
ContentFragment fragment2 = new ContentFragment(); 
ContentFragment fragment3 = new ContentFragment(); 
ContentFragment fragment4 = new ContentFragment(); fragments.add(fragment1); fragments.add(fragment2); fragments.add(fragment3); fragments.add(fragment4); 
adapter = new FragmentAdapter(getSupportFragmentManager(),fragments); 
viewpager.setAdapter(adapter); 
tablayout.setupWithViewPager(viewpager);

tablayout.setupWithViewPager(viewpager);是關鍵,負責鏈接ViewPager與Tablayout,固然選擇的適配器FragmentAdapter也是關鍵

若是你是須要自定義Item(下面用建立Tab的方式添加到TabLayout裏,就前面說的代碼裏添加Item)

private void addTabData() {
　　　mTablayout = findViewById(R.id.tablayout);
        String[] tabContentArray = {"首頁", "通知", "圈子", "個人"};
        int[] tabIconArray = {R.drawable.ic_home_homepage, R.drawable.ic_home_notice, R.drawable.ic_home_circle, R.drawable.ic_home_my};
        for (int i = 0; i < 4; i++) {
            TabLayout.Tab tab = mTablayout.newTab();//關鍵的建立一個Tab,注意這裏使用的是已經實例的mTablayout建立的Tab,很容易疏忽使用new Tablayout().new Tab()的方式建立,這個是會報錯的.
            View view = LayoutInflater.from(this).inflate(R.layout.home_tab_item,mTablayout,false);
            ImageView icon = view.findViewById(R.id.icon);
            TextView content = view.findViewById(R.id.content);
            icon.setImageResource(tabIconArray[i]);
            content.setText(tabContentArray[i]);
            tab.setCustomView(view);
            if (i == 0){
                mTablayout.addTab(tab,0,true);//設置選擇的item
            }else {
                mTablayout.addTab(tab);
            }
        }
    }

home_tab_item.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="35dp"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/red_dot"
        android:layout_width="10dp"
        android:layout_height="10dp"
        android:background="@drawable/bg_reddot"
        app:layout_constraintTop_toTopOf="@id/icon"
        app:layout_constraintLeft_toRightOf="@id/icon"
        app:layout_constraintRight_toRightOf="@id/icon"/>

    <ImageView
        android:id="@+id/icon"
        android:layout_width="24dp"
        android:layout_height="24dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>

    <TextView
        android:id="@+id/content"
        android:textColor="@color/fontColorMain2"
        android:textSize="@dimen/font_size_11"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="2dp"
        app:layout_constraintTop_toBottomOf="@id/icon"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

ic_home_homepage.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true" android:drawable="@mipmap/ic_home_page_select"/>
    <item android:state_selected="false" android:drawable="@mipmap/ic_home_page"/>

</selector>

實現圖片的選中變化

Tablayout選中回調

private void initTablayoutListener(){
        mTablayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                //選中某個tab

            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
                //當tab從選擇到未選擇

            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {
                //已經選中tab後的重複點擊tab

            }
        });
    }

 

 

end