利用HomeTabModeHelper2分鐘快速搭建Tab+Fragment主頁框架

前言

在如今各種App模式如出一轍、各個程式設計師們卻各式各樣花式實現效果的環境下，每接手一個專案，就能看到專案程式碼又不一樣，分分鐘想統一。同時為了加速後續新應用的開發，封裝搭建了這麼一個初步的簡易框架，實現兩分鐘快速無腦構建首頁。

話不多說，先看實現的效果：

簡介

實現功能：

tab+fragment模式首頁搭建
支援ViewPager
支援小紅點展示（可選是否展示數量）
支援突出展示某一個tab
動態隱藏tab

使用

匯入庫

implementation 'com.moore.lib:homeTabModeHelper:1.0.0'

若沒有新增jcenter()倉庫地址記得新增～

設定tab

我們使用.json檔案進行設定，然後該檔案存放於assets中。設定參考如下：

{
  "textColorNormal": "#A4A3A3",
  "textColorSelected": "#C02221",
  "textSizeNormal": 14,
  "textSizeSelected": 14,
  "backgroundColor": "#e9e9e9",
  "isNameResId": false,
  "isTitleVisible": true,
  "tabs": [
    {
      "tabName": "首頁",
      "tabTag": "key_index_fragment",
      "iconNormal": "main_home_tab_index_normal",
      "iconSelected": "main_home_tab_index_selected"
    },
    {
      "tabName": "發現",
      "tabTag": "key_discover_fragment",
      "iconNormal": "main_home_tab_discovery_normal",
      "iconSelected": "main_home_tab_discovery_selected",
      "isOverSide": true,
      "itemBg": "home_tab_center_bg"
    },
    {
      "tabName": "我的",
      "tabTag": "key_user_fragment",
      "iconNormal": "main_home_tab_mine_normal",
      "iconSelected": "main_home_tab_mine_selected"
    }
  ]
}

這裡解釋一下各個設定的作用：

首先是tab文字描述的2個屬性，2種狀態textColorNormal，textColorSelected，textSizeNormal，textSizeSelected，這幾個屬性作用於tab標題的文字顏色和大小。
isNameResId：表示標題是否為string中資源id，為false的時候直接取設定的tabName，否則獲取對應id的資原始檔。預設為true
isTitleVisible：標題是否可見。預設為true
tabs：tab列表

每一個tab的設定中：
tabName：tab標題，若使用string.xml設定，則為string對應的id
tabTag：重要，用於區分每個tab對應的Fragment的tag，不能重複
iconNormal，iconSelected：兩種狀態對應的圖示，請放在drawable而不是mipmap中
可選項：
isOverSide：Boolean型，如果需要凸出展示，可設定該屬性，樣式參考上面效果圖
itemBg：設定凸起展示後，可設定背景，一般是個半圓、原型背景之類的

首頁使用

在主頁對應的xml檔案中，只要簡單的進行如下使用就可以了：
關鍵引數設定：
container_id：指定Fragment展示的佈局id
config_file_name：assets中組態檔名稱，全名
viewPager_id：和container_id二選一，設定這個的話則為ViewPager可滑動模式，對應的id關聯的是ViewPager佈局

<androidx.constraintlayout.widget.ConstraintLayout 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"
    android:background="#999999">

    <FrameLayout
        android:id="@+id/main_content_layout"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@id/main_tab_layout"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_weight="1" />

    <com.moore.bottomtab.HomeBottomTabLayout
        android:id="@+id/main_tab_layout"
        android:layout_width="match_parent"
        android:layout_height="58dp"
        android:background="#ffffff"
        app:config_file_name="tab.json"
        app:container_id="@id/main_content_layout"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toBottomOf="@id/main_content_layout" />

</androidx.constraintlayout.widget.ConstraintLayout>

主頁程式碼

class MainActivity : AppCompatActivity(), HomeBottomTabLayout.HomeBottomTabLayoutCallback {

    //每個tab對應的tag，和json組態檔中保持一致
    val TAG_INDEX = "key_index_fragment"
    val TAG_NAME = "key_name_fragment"
    val TAG_DISCOVERY = "key_discover_fragment"
    val TAG_COLLECT = "key_collect_fragment"
    val TAG_USER = "key_user_fragment"

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        //設定回撥
        main_tab_layout.setHomeBottomTabLayoutCallback(this)
        //初始化，引數為預設展示第幾個tab
        main_tab_layout.initFirstTab(2)
        //如果需要展示未讀訊息，通過該方法展示
        main_tab_layout.setUnreadTip(TAG_USER, "12")
        main_tab_layout.setUnreadTip(TAG_INDEX, "99+")
        main_tab_layout.setUnreadTip(TAG_COLLECT, null, false)
    }

    override fun getFragmentByTag(tabTag: String): Fragment? {
        //根據對應Tag名稱，返回具體的Fragment物件
        when (tabTag) {
            TAG_INDEX -> return Fragment1()
            TAG_NAME -> return Fragment2()
            TAG_DISCOVERY -> return Fragment3()
            TAG_COLLECT -> return Fragment4()
            TAG_USER -> return Fragment5()
        }
        return null
    }

    override fun onClickChangeTab(selectedIndex: Int, selectedTag: String?) {
        //點選tab回撥，可在此進行統計事件、隱藏訊息提示等操作
    }
}

至此，您可以執行您的app試一下，可以看到一個Tab+Fragment的結構已經出來了，非常簡單方便，再也不需要各種xml排版、程式碼中點選回撥、Fragment切換等等複雜操作，程式碼也很清晰明瞭。

結語

該框架主要還是針對日常開發中經常遇到的一些功能的封裝，不涉及太多複雜的邏輯和處理，旨在幫助提升我們的開發效率，如有用到覺得還不錯的小夥伴，也請點個贊哦～

Github傳送：https://github.com/lizebinbin/HomeTabModeHelper

利用HomeTabModeHelper2分鐘快速搭建Tab+Fragment主頁框架

前言

簡介

使用

匯入庫

設定tab

首頁使用

主頁程式碼

更多方法

結語