tags: 耳朵_android

本節最終效果:

步驟

創建ui分包，并在ui包下添加一個新的Activity:

選擇Empty Activity，創建一個名叫MainTabActivity，并修改繼承自BaseMainActivity：

class MainTabActivity : BaseMainActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main_tab)
    }
}

其中onCreate這段代碼可以省略，上面的代碼可以簡寫為，不明白的同學一樣請穩步github：

    class MainTabActivity(
        override var layoutResID: Int = R.layout.activity_main_tab) : BaseMainActivity() {}

接著添加arrays.xml, 在里面設置首頁的4個導航:

<resources>

    <!-- 首頁導航 -->
    <string-array name="bottom_bar_labels">
        <item>"妙筆"</item>
        <item>"純音"</item>
        <item>"自然"</item>
        <item>"愛聽"</item>
    </string-array>
    <!-- 對應的圖標,只需要未選中時的顏色 -->
    <string-array name="bottom_bar_icons">
        <item>@drawable/ic_menu_article</item>
        <item>@drawable/ic_menu_music</item>
        <item>@drawable/ic_menu_nature</item>
        <item>@drawable/ic_menu_iting</item>
    </string-array>

</resources>

然后去布局文件activity_main_tab,

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
          xmlns:att="http://schemas.android.com/apk/res-auto"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:background="#ffffff"
          android:orientation="vertical">
          
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:background="@color/colorPrimary">
    
            <TextView
                android:id="@+id/tv_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:text="妙筆"
                android:textColor="@color/white"
                android:textSize="18sp"/>
        </RelativeLayout>

    <com.hm.library.resource.view.SViewPager
        android:id="@id/main_viewpager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom">

        <com.hm.library.resource.tabindicator.TabPageIndicatorEx
            android:id="@id/main_tabpage"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:background="@drawable/tabbg"
            att:tabTextSize="12sp"
            att:tabIcons="@array/bottom_bar_icons"
            att:tabLabels="@array/bottom_bar_labels"
            att:tabSelectedColor="#00bb9c"
            att:tabUnselectedColor="#a9b7b7"
            att:tabItemPadding="8dp"/>/>
    </FrameLayout>

</LinearLayout>

tabIcons: 對應的圖標icon
tabLabels: 對應的文字Label
tabSelectedColor: 當前選中的顏色
tabUnselectedColor: 未選中時的顏色

接著回到MainTabActivity,有源碼的同學可以看看BaseMainActivity, 嫌麻煩的可以直接訪問:BaseMainActivity.md
這里我們暫時添加一個空白的Fragment來演示:

    class MainTabActivity(override var layoutResID: Int = R.layout.activity_main_tab) : BaseMainActivity() {
    
        override fun setUIParams() {
            mTabs.add(BlankFragment())
            mTabs.add(BlankFragment())
            mTabs.add(BlankFragment())
            mTabs.add(BlankFragment())
        }
    
    }

現在直接運行的話已經可以看到一個簡單的效果了,但主題的配色我們還沒設置,所以修改一下顏色應該會好看得多,colors.xml:

    <?xml version="1.0" encoding="utf-8"?>
    <resources>
        <color name="colorPrimary">#00bb9c</color>
        <color name="colorPrimaryDark">#00bb9c</color>
        <color name="colorAccent">#FF4081</color>
    </resources>

現在再次運行,可以看到一個主流的APP框架雛形已經搭建起來了,

修改Title響應,并為某一個item延時添加一個小紅點:

class MainTabActivity(override var layoutResID: Int = R.layout.activity_main_tab) : BaseMainActivity() {

    lateinit var titles: Array<String>

    override fun setUIParams() {
        titles = resources.getStringArray(R.array.bottom_bar_labels)
        titles.forEach { mTabs.add(BlankFragment()) }
    }

    override fun initComplete() {
        //三秒后執行
        runDelayed({
            //模擬紅點
            main_tabpage.setIndicateDisplay(3, true)
        }, 3000)

        //是否可以滑動，滑動是否有漸變效果
        main_tabpage.setStyle(true, true)
    }

    override fun onTabSelected(index: Int) {
        tv_title.text = titles[index]
    }
}

最終效果:

github: https://github.com/bxcx/ear
本節分支: https://github.com/bxcx/ear/tree/main