android實作tabbar（導航欄切換）效果

一、實作的效果圖

二、總體的目錄結構

三、編碼前的部分思路

四、進行編碼

4.1 創建一個空Activity專案，這個就不贅述了

4.2 在build.gradle中匯入相關的依賴（后續可能會用到的我也添加了）

    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'androidx.constraintlayout:constraintlayout:2.0.1'
    implementation 'androidx.work:work-runtime:2.4.0'
    testImplementation 'junit:junit:4.+'
    implementation("com.squareup.okhttp3:okhttp:4.9.1")
    implementation('com.squareup.retrofit2:retrofit:2.9.0')
    androidTestImplementation 'androidx.test.ext:junit:1.1.2'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.3.0'
    implementation 'androidx.appcompat:appcompat:1.2.0'
    implementation 'com.google.android.material:material:1.2.1'
    implementation 'com.jakewharton:butterknife:10.2.3'
    annotationProcessor 'com.jakewharton:butterknife-compiler:10.2.3'
    implementation 'com.squareup.retrofit2:converter-gson:2.7.0'
    implementation 'com.blankj:utilcodex:1.30.6'
    implementation 'com.github.bumptech.glide:glide:4.12.0'
    annotationProcessor 'com.github.bumptech.glide:compiler:4.12.0'
    implementation 'com.google.zxing:android-core:3.3.0'
    implementation 'com.google.zxing:core:3.3.2'
    implementation 'com.scwang.smartrefresh:SmartRefreshLayout:1.1.3'
    implementation 'com.scwang.smartrefresh:SmartRefreshHeader:1.1.3'

4.3撰寫activity_main.xml檔案以及menu.xml檔案

以下是activity_main.xml檔案

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".ui.activity.MainActivity">

    <FrameLayout
        android:id="@+id/main_page_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@color/white"
        android:layout_alignParentBottom="true"
        android:id="@+id/tabbar"
        app:menu="@menu/menu"
        app:itemIconTint="@drawable/navigation_bar_color"
        app:itemTextColor="@drawable/navigation_bar_color"/>

</RelativeLayout>

以下是menu,xml檔案(其中的圖片素材可以用系統自帶的或者去阿里的矢量圖示庫)

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@+id/home"
        android:icon="@mipmap/home_normal"
        android:title="首頁"/>

    <item android:id="@+id/selected"
        android:icon="@mipmap/select_normal"
        android:title="精選"/>

    <item android:id="@+id/red_packet"
        android:icon="@mipmap/red_packet_normal"
        android:title="特惠"/>
    <!--  android:id="@+id/search"  -->
    <item android:id="@+id/search"
        android:icon="@mipmap/search_normal"
        android:title="搜索"/>
</menu>

4.4 建包(mvp架構的包結構)

4.5 撰寫BaseFragment(本來不是這樣想的，后來代碼優化抽取出了BaseFragment)

這是一個抽象類，其中有一個回傳id的抽象方法，子類繼承它，就必須實作這個抽象方法，回傳不同的頁面id

package com.example.mallagain.base;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.FrameLayout;

import com.example.mallagain.R;

import androidx.fragment.app.Fragment;
import butterknife.ButterKnife;
import butterknife.Unbinder;

public abstract class BaseFragment extends Fragment {

    private FrameLayout mBaseContainer;
    private Unbinder bind;
    private View successView;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

        View rootView = loadRootView(inflater, container);
        mBaseContainer = rootView.findViewById(R.id.base_container);
        //系結的是一個binder
        bind = ButterKnife.bind(this, rootView);
        //加載狀態的view
        loadStateView(inflater,container);
        //初始化presenter
        initPresenter();
        //初始化根頁面
        initView(rootView);
        //初始化事件監聽器
        initListener();
        //加載資料
        loadData();
        return rootView;
    }

    protected void loadData() {

    }

    protected void initListener() {

    }

    protected void initView(View rootView) {

    }

    protected void initPresenter() {

    }

    protected void loadStateView(LayoutInflater inflater, ViewGroup container) {
        successView = loadSuccessView(inflater, container);
        mBaseContainer.addView(successView);
    }

    protected View loadSuccessView(LayoutInflater inflater, ViewGroup container) {
        int id = getSubId();
        return inflater.inflate(id,container,false);
    }
    //子類進行復寫，來具體決定頁面
    protected abstract int getSubId();

    protected View loadRootView(LayoutInflater inflater, ViewGroup container) {
        View view = inflater.inflate(R.layout.base_fragment_container, container, false);
        return view;
    }
    @Override
    public void onDestroyView() {
        super.onDestroyView();
        release();
        if (bind != null) {
            bind.unbind();
        }
    }

    protected void release() {
    }
}

BaseFragment中布局檔案是base_fragment_container.xml，如下

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/base_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

</FrameLayout>

4.6 撰寫子Fragment,比如HomeFragment,其他Fragment類似

每一個都繼承自BaseFragment，實作其抽象方法

package com.example.mallagain.ui.fragment;

import com.example.mallagain.R;
import com.example.mallagain.base.BaseFragment;

public class HomeFragment extends BaseFragment {
    @Override
    protected int getSubId() {
        return R.layout.fragment_home;
    }
}

4.7 撰寫每個Fragment對應的布局檔案

比如fragment_home.xml,其他的也是一樣

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:gravity="center"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="首頁"
        android:textSize="20sp"/>
</LinearLayout>

4.8 撰寫MainActivity，撰寫tabbar的點擊事件，創建不同的Fragment進行頁面的渲染

package com.example.mallagain.ui.activity;

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentTransaction;
import butterknife.BindView;
import butterknife.ButterKnife;

import android.os.Bundle;
import android.view.MenuItem;

import com.example.mallagain.R;
import com.example.mallagain.base.BaseFragment;
import com.example.mallagain.ui.fragment.HomeFragment;
import com.example.mallagain.ui.fragment.RedpacketFragment;
import com.example.mallagain.ui.fragment.SearchFragment;
import com.example.mallagain.ui.fragment.SelectFragment;
import com.google.android.material.bottomnavigation.BottomNavigationView;

import org.jetbrains.annotations.NotNull;

public class MainActivity extends AppCompatActivity {
    @BindView(R.id.tabbar)
    BottomNavigationView tabbar;
    private BaseFragment fragment;
    private FragmentManager fragmentManager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);
        initView(0);
        initEvent();
    }

    private void initEvent() {
        tabbar.setOnNavigationItemSelectedListener(item -> {
            switch (item.getItemId()) {
                case R.id.home:
                    initView(0);
                    break;
                case R.id.selected:
                    initView(1);
                    break;
                case R.id.red_packet:
                    initView(2);
                    break;
                case R.id.search:
                    initView(3);
                    break;
                default:
                    break;
            }
            return true;
        });
    }

    private void initView(int i) {
        switch (i) {
            case 0:
                fragment = new HomeFragment();
                break;
            case 1:
                fragment = new SelectFragment();
                break;
            case 2:
                fragment = new RedpacketFragment();
                break;
            case 3:
                fragment = new SearchFragment();
                break;
            default:
                break;
        }
        //定義一個切換fragment的方法
        checkFragment(fragment);
    }

    private void checkFragment(BaseFragment fragment) {
        //獲取fragment管理器
        fragmentManager = getSupportFragmentManager();
        //開啟事務
        FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
        fragmentTransaction.replace(R.id.main_page_container,fragment);
        fragmentTransaction.commit();
    }
}

4.9 不出意外的話，應該已經實作了，點擊tabbar進行頁面的切換了不過我們還可以做一些細節上的調整

設定被點擊item高亮的效果

這個drawable檔案如下

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="#FF8C00" android:state_checked="true"/>
    <item android:color="@color/colorPrimaryDark" />
</selector>

去除檔案創建時自帶的頭部

按住command鍵點擊進去進行設定

五、有什么學習的心得與體會，還望大家能夠一起交流,respect