kotlin 底部导航栏（tabLayout + fragment）

准备工作

在build.grale中添加

compile "com.android.support:design:$support_version"

1.编辑main_activity.xml

确定主页面布局FrameLayout +TabLayout

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.zyqzyq.eyepetizer.activities.MainActivity">

<FrameLayout
android:id="@+id/main_container"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</FrameLayout>
<View
android:layout_width="match_parent"
android:layout_height=".5dp"
android:alpha=".6"
android:background="@android:color/darker_gray"/>
<android.support.design.widget.TabLayout
android:id="@+id/bottom_tab_layout"
android:layout_width="match_parent"
android:layout_height="50dp"
app:tabIndicatorHeight="0dp"
app:tabSelectedTextColor="@android:color/black"
app:tabTextColor="@android:color/darker_gray">
</android.support.design.widget.TabLayout>
</LinearLayout>

2.创建tabView.xml

因为默认的tablayout添加icon显示后图片显得较小（选择了setCustomView方法，需要自定义view）

<?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">
<ImageView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:id="@+id/tab_content_image"
android:scaleType="fitCenter"
android:layout_weight="1"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/tab_content_text"
android:textSize="@dimen/tabTextSize"
android:textColor="@android:color/darker_gray"/>

</LinearLayout>

3.编辑MainActivity.kt

信息存在了object中,方便修改

“`

object MainData {

val mainFragmentList = arrayOf(HomeFragment(), FindFragment(), FollowFragment(), MineFragment())

val mainTabRes = listOf(R.mipmap.ic_tab_home,R.mipmap.ic_tab_find,

R.mipmap.ic_tab_follow,R.mipmap.ic_tab_mine)

val mainTabResPressed = listOf(R.mipmap.ic_tab_home_selected,R.mipmap.ic_tab_find_selected,

R.mipmap.ic_tab_follow_selected,R.mipmap.ic_tab_mine_selected)

val mainTabStr = listOf(“首页”,”发现”,”关注”,”我的”)

}

默认添加了4个tab，并设置Tab 选中之后，改变各个Tab的状态

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

setContentView(R.layout.activity_main)

initView()

}

private fun initView(){

bottom_tab_layout.addOnTabSelectedListener(object : TabLayout.OnTabSelectedListener {

override fun onTabSelected(tab: TabLayout.Tab) {

onTabItemSelected(tab.position)

// Tab 选中之后，改变各个Tab的状态

for (i in 0 until bottom_tab_layout.tabCount ) {

val view = bottom_tab_layout.getTabAt(i)!!.customView

if (i == tab.position) { // 选中状态
view?.tab_content_image?.setImageResource(MainData.mainTabResPressed[i])
view?.tab_content_text?.setTextColor(resources.getColor(android.R.color.black))

} else {// 未选中状态
view?.tab_content_image?.setImageResource(MainData.mainTabRes[i])
view?.tab_content_text?.setTextColor(resources.getColor(android.R.color.darker_gray))
}
}
}

override fun onTabUnselected(tab: TabLayout.Tab) {

}

override fun onTabReselected(tab: TabLayout.Tab) {

}
})

for(i in 0..3) {
bottom_tab_layout.addTab(bottom_tab_layout.newTab().setCustomView(getTabView(this, i)))
}
}

private fun getTabView(context: Context,position: Int): View{
val view = LayoutInflater.from(context).inflate(R.layout.tabview, null)
view.tab_content_image.setImageResource(MainData.mainTabRes[position])
view.tab_content_text.text = MainData.mainTabStr[position]
return view
}

#添加fragment
新建home_framgment.kt
代码如下

class HomeFragment: Fragment(){

override fun onCreateView(inflater: LayoutInflater?, container: ViewGroup?, savedInstanceState: Bundle?): View {

return inflater!!.inflate(R.layout.fragment_home,container,false)

}

override fun onActivityCreated(savedInstanceState: Bundle?) {
super.onActivityCreated(savedInstanceState)
}

}

新建fragment_home.xml
```<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">

<TextView
android:text="home fragment"
android:layout_width="match_parent"
android:layout_height="wrap_content" android:id="@+id/textView"/>
</LinearLayout>

<div class="se-preview-section-delimiter"></div>

重复上述操作新建4个fragment。

5.在MainActivity.kt添加fragment的更新

添加函数onTabItemSelected

fun onTabItemSelected(position: Int){
val transaction = fragmentManager.beginTransaction()
transaction.replace(R.id.main_container, MainData.mainFragmentList[position]).commit()
}

并在onTabSelected中调用。

6.最终效果图如下

6.最终效果图如下

个人博客地址：https://zyqzyq.github.io/