Android 自定義View之底部導航欄

概述

封裝一個通用的底部導航欄控件。

代碼

定義TabIndex

@Retention(AnnotationRetention.SOURCE)
@IntDef(ONE_INDEX, TWO_INDEX, THREE_INDEX, FOUR_INDEX)
annotation class TabIndex {companion object {const val ONE_INDEX = 0const val TWO_INDEX = 1const val THREE_INDEX = 2const val FOUR_INDEX = 3}
}

定義Tab

data class Tab(@TabIndex val index: Int,val label: String,@DrawableRes val tabIconDefault: Int,@DrawableRes val tabIconSelected: Int,@ColorRes val tabTextColorDefault: Int = R.color.tab_unselect_color,@ColorRes val tabTextColorSelected: Int = R.color.tab_selected_color
)

定義TabView

class TabView @JvmOverloads constructor(context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : LinearLayout(context, attrs, defStyleAttr) {private val paddingVertical = context.resources.getDimension(R.dimen.tab_padding_vertical).toInt()private val iconSize = context.resources.getDimension(R.dimen.tab_icon_size).toInt()private val fontSize = context.resources.getDimension(R.dimen.tab_text_size)init {layoutParams = LayoutParams(0, LayoutParams.WRAP_CONTENT).apply {weight = 1Forientation = VERTICAL}gravity = Gravity.CENTERsetPadding(0, paddingVertical, 0, paddingVertical)}fun setData(tab: Tab) {removeAllViews()addViews(tab)}private fun addViews(tab: Tab) {addView(createIcon(tab.tabIconDefault, tab.tabIconSelected))addView(createText(tab.label, tab.tabTextColorDefault, tab.tabTextColorSelected))}private fun createIcon(@DrawableRes tabIconDefault: Int,@DrawableRes tabIconSelected: Int): ImageView {val drawable = StateListDrawable().apply {addState(intArrayOf(android.R.attr.state_selected),ContextCompat.getDrawable(context, tabIconSelected))addState(StateSet.NOTHING, ContextCompat.getDrawable(context, tabIconDefault))}return ImageView(context).apply {layoutParams = LayoutParams(iconSize, iconSize)setImageDrawable(drawable)isSelected = false}}private fun createText(text: String,@ColorRes textColorDefault: Int,@ColorRes textColorSelected: Int): TextView {val states = arrayOf(intArrayOf(android.R.attr.state_selected),intArrayOf())val colors = intArrayOf(ContextCompat.getColor(context, textColorSelected),ContextCompat.getColor(context, textColorDefault))val colorStateList = ColorStateList(states, colors)return TextView(context).apply {layoutParams = LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT)setText(text)setTextSize(TypedValue.COMPLEX_UNIT_PX, fontSize)setTextColor(colorStateList)isSelected = false}}fun selected(isSelected: Boolean) {children.forEach {it.isSelected = isSelected}}
}

定義NavigationBar

class NavigationBar @JvmOverloads constructor(context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : FrameLayout(context, attrs, defStyleAttr), View.OnClickListener {private val lineView by lazy { createLine() }private val containerView by lazy { createContainer() }private var onItemSelectedListener: ((Int) -> Unit)? = nullprivate var onItemReselectListener: ((Int) -> Unit)? = nullprivate var currentIndex: Int = ONE_INDEXinit {addView(containerView, 0)addView(lineView, 1)}fun setData(tabs: List<Tab>, defaultIndex: Int = ONE_INDEX) {containerView.removeAllViews()addViews(tabs)currentIndex = defaultIndex(containerView.getChildAt(currentIndex) as TabView).selected(true)}private fun addViews(tabs: List<Tab>) {tabs.let {for (tab in it) {containerView.addView(createTabView(tab))}}}private fun createTabView(tab: Tab): TabView {return TabView(context).apply {tag = tab.indexsetData(tab)setOnClickListener(this@NavigationBar)}}private fun createContainer(): LinearLayout {return LinearLayout(context).apply {layoutParams =LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT).apply {orientation = HORIZONTAL}gravity = Gravity.CENTER}}private fun createLine(): View {return View(context).apply {setBackgroundColor(ContextCompat.getColor(context, R.color.tab_line))layoutParams = FrameLayout.LayoutParams(FrameLayout.LayoutParams.MATCH_PARENT, 1.dp, Gravity.TOP)}}override fun onClick(view: View) {if (view is TabView) {clickTabView(view)}}private var lock = falseprivate fun clickTabView(view: View) {if (lock) {return}lock = trueval selectIndex = view.tag as Intif (selectIndex == currentIndex) {onItemReselectListener?.invoke(selectIndex)} else {(containerView.getChildAt(currentIndex) as TabView).selected(false)(containerView.getChildAt(selectIndex) as TabView).selected(true)onItemSelectedListener?.invoke(selectIndex)currentIndex = selectIndex}lock = false}fun setOnItemSelectedListener(onItemSelectedListener: ((Int) -> Unit)) {this.onItemSelectedListener = onItemSelectedListener}fun setOnItemReselectListener(onItemReselectListener: ((Int) -> Unit)) {this.onItemReselectListener = onItemReselectListener}}

FragmentSwitchHelper管理類

class FragmentSwitchHelper(private val fragmentManager: FragmentManager,@IdRes private val containerId: Int
) {private var currentFragment: Fragment? = nullprivate var currentIndex: Int? = nullfun switchTo(@TabIndex index: Int) {if (currentIndex == index) {return}val transaction = fragmentManager.beginTransaction()currentFragment?.let {transaction.hide(it)}val fragment = Factory.getOrCreateFragment(index, fragmentManager)if (fragment.isAdded) {transaction.show(fragment)} else {transaction.add(containerId,fragment,index.toString())}transaction.commit()currentIndex = indexcurrentFragment = fragment}fun getCurrentIndex() = currentIndexfun getCurrentFragment() = currentFragmentobject Factory {fun getOrCreateFragment(@TabIndex index: Int, fragmentManager: FragmentManager) =when (index) {ONE_INDEX -> fragmentManager.findFragmentByTag(index.toString())?: SimpleFragment.newInstance("ONE")TWO_INDEX -> fragmentManager.findFragmentByTag(index.toString())?: SimpleFragment.newInstance("TWO")THREE_INDEX -> fragmentManager.findFragmentByTag(index.toString())?: SimpleFragment.newInstance("THREE")FOUR_INDEX -> fragmentManager.findFragmentByTag(index.toString())?: SimpleFragment.newInstance("FOUR")else -> throw IllegalStateException("非法參數")}}
}

使用

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"tools:context=".navigationbar.NavigationBarActivity"><androidx.fragment.app.FragmentContainerViewandroid:id="@+id/fragment_container"android:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="1" /><com.example.widgets.navigationbar.NavigationBarandroid:id="@+id/navigation_bar"android:layout_width="match_parent"android:layout_height="wrap_content" />
</LinearLayout>

class NavigationBarActivity : BaseActivity() {private lateinit var navigationBar: NavigationBarprivate val fragmentHelper by lazy {FragmentSwitchHelper(supportFragmentManager,R.id.fragment_container)}override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)setContentView(R.layout.activity_navigation_bar)navigationBar = findViewById(R.id.navigation_bar)val tabs = listOf<Tab>(Tab(ONE_INDEX,"ONE",R.drawable.tab_home_unselect,R.drawable.tab_home_selected),Tab(TWO_INDEX,"TWO",R.drawable.tab_friends_unselect,R.drawable.tab_friends_selected),Tab(THREE_INDEX,"THREE",R.drawable.tab_find_unselect,R.drawable.tab_find_selected),Tab(FOUR_INDEX,"FOUR",R.drawable.tab_setting_unselect,R.drawable.tab_setting_selected))navigationBar.setData(tabs)navigationBar.setOnItemSelectedListener {Log.e("TAG", "點擊：$it")fragmentHelper.switchTo(it)}navigationBar.setOnItemReselectListener {Log.e("TAG", "重復點擊：$it")}fragmentHelper.switchTo(ONE_INDEX)}
}

源碼下載