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