下导航栏3-封装实例讲解

效果图：

1：先分析里面要的组合方式，是上面一个图片，下面一个文本，我们可以用自定义LInearLayout来实现是比较容易的：

自定义的方法看上两篇前，

我们需要的属性，但是系统又没有提供的，或者系统没能够满足我们的就可以自己去添加，添加的方法看上两篇前的，

这个是对每一个按钮的自定义的属性：当点下一个按钮是上一个按钮的选中状态就需要恢复为未选中状态，在这我是用两

组不同的照片来进行交换实现的，就是正常时的图片normalIcon,和选中时的图片selectedIcon，同样文本（title）的颜色的变化也有两种，

misselected是记录按钮是否被点击时的状态，

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="Bottom_bar">
        <attr name="normalIcon" format="reference"/>
        <attr name="selectedIcon" format="reference"/>
        <attr name="title" format="string"/>
        <attr name="hightlighttitle" format="string"/>
        <attr name="color" format="color"/>
        <attr name="hightlightcolor" format="color"/>
        <attr name="misselected" format="boolean"/>
    </declare-styleable>
    <declare-styleable name="myViewGroup">
        <attr name="number" format="integer"/>
    </declare-styleable>
</resources>

2：解析属性以得到自定义的属性，在解析属性之后就可以将属性取出应用了，我们需要xml的配置，

也需要代码的配置，所以在两个构造方法中都需要初始化：方法看上两篇

constructor(context: Context):super(context){
    Log.v("lfl","代码")
    initView()   初始化图片与文本
}
constructor(context: Context,attributeSet: AttributeSet?):super(context,attributeSet){

   //获取自定义的属性
    var typedArray  = context.obtainStyledAttributes(attributeSet,
        R.styleable.Bottom_bar)
    //获取单个的属性
    normalIconID = typedArray.getResourceId(R.styleable.Bottom_bar_normalIcon,
        R.drawable.home)
    selectedIconID = typedArray.getResourceId(R.styleable.Bottom_bar_selectedIcon,
         R.drawable.home_selected)
   title = typedArray.getString(R.styleable.Bottom_bar_title).toString()
    Log.v("lfl","xml")
    //初始化视图
    initView()
    //要改变的值
    misselected = typedArray.getBoolean(R.styleable.Bottom_bar_misselected,false)
    textColor = typedArray.getColor(R.styleable.Bottom_bar_color,Color.BLACK)
    //释放
   typedArray.recycle()

}

3：将解析出来的各种属性用起来，初始化图片与文本

用到的方法有：

（1）：转换像素：

//获取手机的像素
fun dpTopx(dp:Int):Int = dp*(context.resources.displayMetrics.density).toInt()

（2）：更新图片与文本 ，我们需要在多个地方更新，所以将其抽出

private fun UpdateUI(){

    Log.v("lfl","******************************")
    if (misselected){
        //切换成没有被选中的状态
        image?.setImageResource(selectedIconID)
        textView?.setTextColor(Color.RED)
    }else{
        //选中状态
        image?.setImageResource(normalIconID)
        textView?.setTextColor(Color.BLACK)
    }
}

//初始化
fun initView(){
    orientation = VERTICAL 设置内容的填充方向
    gravity = Gravity.CENTER_VERTICAL  
    //添加图片
    image = ImageView(context).apply {
        var layoutParams = LinearLayout.LayoutParams(dpTopx(32),dpTopx(32)) 设置图片的大小，
        addView(this,layoutParams)
    }
    
    //添加文字
 textView =  TextView(context).apply {
     //setText(title)
        //text = title
    }.also {
       val layoutParams = LayoutParams(LayoutParams.WRAP_CONTENT,
           LayoutParams.WRAP_CONTENT)
       addView(it,layoutParams)
   }
    
    UpdateUI()
}

4：改变按钮的点击状态，当我们点击一个按钮时，若该按钮是点击状态则不响应，若该按钮没有被点击时

则将该按钮设置为被点击状态，并且更新图片与文本，对于一个按钮而言只需要这样，点击事件可以在点下去时

实现，也可以在手离开屏幕那一刻时实现，这是在点下去时实现的，并且这个事件已经被消费了，所以返回true

override fun onTouchEvent(event: MotionEvent?): Boolean {
    if (event?.action == MotionEvent.ACTION_DOWN){
        if (!misselected){
            //改变状态
            misselected = !misselected
            selectCallback?.let {
                it(index)    //调用高阶函数，点下去时改变状态的同时要将上一个被点击
的按钮还原
            }
        }

    }
    //事件已经被消费了就返回true
    return true
}

只要状态改变，那么就更新数据，因此可以重写misselected的set方法，

//记录按钮被点击的状态
var misselected:Boolean = false
set(value) {
    field = value
    Log.v("lfl","misselected")
    UpdateUI()
}

一个按钮实现，接下来就实现多个按钮，多个按钮也可以通过自定义linearLayout来实现，一个按钮里面初始化的是图片和文本，
多个按钮的实现，就是将多个按钮放在一个容器里面，初始化按钮即可
（1）xml里面的应用：

<com.example.myapplication.myViewGroup
    android:id="@+id/myviewGroup"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:number="3"  有多少个按钮，是个自定义属性
    />
（2）初始化按钮，代码，xml皆要初始化

 constructor(context: Context):super(context){
        //初始化
        initView()
    }
    constructor(context: Context,attributeSet: AttributeSet):super(context,attributeSet){
//解析
        val typedArray = context.obtainStyledAttributes(attributeSet,
            R.styleable.myViewGroup)
        number = typedArray.getInteger(R.styleable.myViewGroup_number,4)
        typedArray.recycle()
        initView()
    }

    //初始化每一个视图
    private fun initView() {
        orientation = HORIZONTAL
        gravity = Gravity.CENTER_VERTICAL
        for (i in 0 until number){
            Bottom_bar(context).also {
                val lp = LinearLayout.LayoutParams(
                    ViewGroup.LayoutParams.WRAP_CONTENT,
                    ViewGroup.LayoutParams.WRAP_CONTENT
                ).apply {
                    weight = 1f
                }
                addView(it,lp)
                Bottom_bar_array.add(it)

                //为每一个按钮添加监听事件
                it.selectCallback = {index->
                        //还原之前选中的栏目的状态
                       Bottom_bar_array[current].misselected = false
                        //保存索引
                        current = index

                }
    }
        }
    }
（3）：通过一个模型将数据从外部传进来
       a：需要先定义一个模型，模型里面放的全是属性，模型就作为传输数据的中间人，外部将数据给模型，模型在将数据传给对象

data class Bottom_bar_model (
    var normalIconID:Int,
    var selectedIconID:Int,
    var title:String,
    var misselected:Boolean
)

b:将通过模型的传输进来的数据给到每一个按钮

//更新每一个视图
private fun initBottom_bar(){
    for ((i,iteam) in Bottom_bar_array.withIndex()){
        iteam.index = i
           iteam.title = model[i].title
            iteam.normalIconID = model[i].normalIconID
            iteam.selectedIconID = model[i].selectedIconID
            iteam.misselected = model[i].misselected
    }


在外部调用时就只需要将数据给模型就好了

myviewGroup.model = arrayOf(
    Bottom_bar_model(
        R.drawable.home,
        R.drawable.home_selected,
        "主页",
        true
    ),
    Bottom_bar_model(
        R.drawable.home,
        R.drawable.home_selected,
        "主页",
        false
    ),
    Bottom_bar_model(
        R.drawable.home,
        R.drawable.home_selected,
        "主页",
        false
    )
)


GitHub连接：https://github.com/luofangli/Bottom_bar