tags: 耳朵_android

本節(jié)最終效果:

步驟

創(chuàng)建ui分包，并在ui包下添加一個(gè)新的Activity:

選擇Empty Activity，創(chuàng)建一個(gè)名叫MainTabActivity，并修改繼承自BaseMainActivity：

class MainTabActivity : BaseMainActivity() {

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

其中onCreate這段代碼可以省略，上面的代碼可以簡(jiǎn)寫為，不明白的同學(xué)一樣請(qǐng)穩(wěn)步github：

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

接著添加arrays.xml, 在里面設(shè)置首頁(yè)的4個(gè)導(dǎo)航:

<resources>

    <!-- 首頁(yè)導(dǎo)航 -->
    <string-array name="bottom_bar_labels">
        <item>"妙筆"</item>
        <item>"純音"</item>
        <item>"自然"</item>
        <item>"愛(ài)聽(tīng)"</item>
    </string-array>
    <!-- 對(duì)應(yīng)的圖標(biāo),只需要未選中時(shí)的顏色 -->
    <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: 對(duì)應(yīng)的圖標(biāo)icon
tabLabels: 對(duì)應(yīng)的文字Label
tabSelectedColor: 當(dāng)前選中的顏色
tabUnselectedColor: 未選中時(shí)的顏色

接著回到MainTabActivity,有源碼的同學(xué)可以看看BaseMainActivity, 嫌麻煩的可以直接訪問(wèn):BaseMainActivity.md
這里我們暫時(shí)添加一個(gè)空白的Fragment來(lái)演示:

    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())
        }
    
    }

現(xiàn)在直接運(yùn)行的話已經(jīng)可以看到一個(gè)簡(jiǎn)單的效果了,但主題的配色我們還沒(méi)設(shè)置,所以修改一下顏色應(yīng)該會(huì)好看得多,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>

現(xiàn)在再次運(yùn)行,可以看到一個(gè)主流的APP框架雛形已經(jīng)搭建起來(lái)了,

修改Title響應(yīng),并為某一個(gè)item延時(shí)添加一個(gè)小紅點(diǎn):

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() {
        //三秒后執(zhí)行
        runDelayed({
            //模擬紅點(diǎn)
            main_tabpage.setIndicateDisplay(3, true)
        }, 3000)

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

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

最終效果:

github: https://github.com/bxcx/ear
本節(jié)分支: https://github.com/bxcx/ear/tree/main