Android開發之最簡單的佈局點擊Tab和Fragment切換源碼(特別適合初學者)

老套路看效果圖：

說實話這個佈局實現的思路太多了，自己寫以及第三方都特別多，不過對於初學者還是從一點一滴開始學起比較簡單也容易理解。直接上源碼吧，我這個是用的最新的AndroidX庫和Kotlin寫的。

MainActivity.kt

package com.xiayiye.takeout.ui.activity

import android.os.Bundle
import android.view.View
import android.view.ViewGroup
import androidx.appcompat.app.AppCompatActivity
import androidx.fragment.app.Fragment
import com.xiayiye.takeout.R
import com.xiayiye.takeout.ui.fragment.HomeFragment
import com.xiayiye.takeout.ui.fragment.MoreFragment
import com.xiayiye.takeout.ui.fragment.OrderFragment
import com.xiayiye.takeout.ui.fragment.UserFragment
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {
    //添加所有頁面的fragment
    val list = listOf<Fragment>(HomeFragment(), OrderFragment(), UserFragment(), MoreFragment())

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        //下面是Kotlin語言查找id的方法
//        val mainBottomBar = findViewById<LinearLayout>(R.id.main_bottom_bar)
        initBottomBar()
        //默認選中第一個
        changeIndex(0)
    }

    private fun initBottomBar() {
        for (index in 0 until main_bottom_bar.childCount) {
            main_bottom_bar.getChildAt(index).setOnClickListener(object : View.OnClickListener {
                override fun onClick(p0: View?) {
                    changeIndex(index)
                }
            })
        }
    }

    private fun changeIndex(index: Int) {
        for (position in 0 until main_bottom_bar.childCount) {
            val childView = main_bottom_bar.getChildAt(position)
            if (index == position) {
                senEnable(childView, false)
            } else {
                senEnable(childView, true)
            }
        }
        //點擊哪個切換哪個fragment
        //Android的app包下
//        fragmentManager.beginTransaction().replace(R.id.main_content, list[index])
        //AndroidX的app包下
        supportFragmentManager.beginTransaction().replace(R.id.main_content, list[index]).commit()
    }

    private fun senEnable(childView: View, isEnabled: Boolean) {
        childView.isEnabled = isEnabled
        if (childView is ViewGroup) {
            for (position in 0 until childView.childCount) {
                childView.getChildAt(position).isEnabled = isEnabled
            }
        }
    }
}

再看下XML

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".ui.activity.MainActivity">

    <FrameLayout
        android:id="@+id/main_content"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="@null" />

    <LinearLayout
        android:id="@+id/main_bottom_bar"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_marginBottom="2dp"
        android:baselineAligned="false"
        android:orientation="horizontal">

        <FrameLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="30dp"
                android:contentDescription="@string/text_home"
                android:src="@drawable/main_home_selector" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="20dp"
                android:layout_gravity="bottom|center"
                android:text="@string/text_home"
                android:textColor="@drawable/main_bottom_text_color" />
        </FrameLayout>

        <FrameLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="30dp"
                android:contentDescription="@string/text_order"
                android:src="@drawable/main_order_selector" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="20dp"
                android:layout_gravity="bottom|center"
                android:text="@string/text_order"
                android:textColor="@drawable/main_bottom_text_color" />
        </FrameLayout>

        <FrameLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="30dp"
                android:contentDescription="@string/text_personal"
                android:src="@drawable/main_me_selector" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="20dp"
                android:layout_gravity="bottom|center"
                android:text="@string/text_personal"
                android:textColor="@drawable/main_bottom_text_color" />
        </FrameLayout>

        <FrameLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="30dp"
                android:contentDescription="@string/text_more"
                android:src="@drawable/main_more_selector" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="20dp"
                android:layout_gravity="bottom|center"
                android:text="@string/text_more"
                android:textColor="@drawable/main_bottom_text_color" />
        </FrameLayout>
    </LinearLayout>
</LinearLayout>

簡單說下思路：

就是下面放四個FrameLayout。然後每個FrameLayout裏面放圖片和文字總共四組，然後分別設置圖片和文字的enable屬性爲selector選擇器，設置好了後，在mainactivity裏面通過拿到四個FrameLayout的父佈局LinearLayout然後遍歷它的子佈局，設置每個子佈局的點擊事件，點擊哪個子佈局切換哪個fragment，然後判斷子佈局是否還有子佈局，如果有就根據父佈局是否可enable設置相應的enable屬性即可。

需要源碼的點擊下載即可：源碼下載