自定义View

前言

本篇文章主要讲解的有关Android开发中常用的自定义View实现TitleBar的处理方式以及应用。

---

下面主要讲解具体的使用方法

一、初始化

1.初始化view布局

fun init(context : Context?){
        val view = LayoutInflater.from(context).inflate(R.layout.custom_top_title_bar_white,this,true)
        bgRll = view.findViewById(R.id.bg_rll)
        imgLeft = view.findViewById(R.id.img_left)
        imgRight = view.findViewById(R.id.img_right)
        tvLeft = view.findViewById(R.id.tv_left)
        tvRight = view.findViewById(R.id.tv_right)
        tvCenter = view.findViewById(R.id.tv_title_center)
        titleLine = view.findViewById(R.id.title_line)
    }

2.获取xml文件中的自定义属性并赋值

val typedArray : TypedArray = context.obtainStyledAttributes(attrs,R.styleable.CustomTopTitleBar)

        //设置背景色
        val titleBack = typedArray.getColor(R.styleable.CustomTopTitleBar_ctb_back, Color.parseColor("#FFFFFF"))
        bgRll.setBackgroundColor(titleBack)
        
        //设置底部分割线(默认不显示)
        val isShowLine = typedArray.getBoolean(R.styleable.CustomTopTitleBar_ctb_show_line,true)
        titleLine.visibility = if (isShowLine) View.GONE else View.VISIBLE

        //设置标题内容
        val strTitle = typedArray.getString(R.styleable.CustomTopTitleBar_ctb_title)
        tvCenter.text = strTitle ?: resources.getString(R.string.app_name)

         //左侧
         //设置左边图片(默认显示)
         //隐藏-false 显示-true
        val isShowLeftImg = typedArray.getBoolean(R.styleable.CustomTopTitleBar_ctb_show_img_left,true)
        imgLeft.visibility = if(isShowLeftImg) View.VISIBLE else View.GONE

        //设置左侧文本(默认隐藏)
        //隐藏-false 显示-true
        val isShowLeftTv = typedArray.getBoolean(R.styleable.CustomTopTitleBar_ctb_show_text_left,false)
        tvLeft.visibility = if (isShowLeftTv) View.VISIBLE else View.GONE

        //设置左侧图片背景
        val drawableLeft = typedArray.getDrawable(R.styleable.CustomTopTitleBar_ctb_img_left)
        if(drawableLeft != null){
            imgLeft.setImageDrawable(drawableLeft)
        }

        //设置左侧文本内容
        val strLeft = typedArray.getString(R.styleable.CustomTopTitleBar_ctb_text_left)
        if(strLeft.isNullOrBlank()){
            tvLeft.text = resources.getString(R.string.def_back_left_con)
        }else{
            tvLeft.text = strLeft
        }

//右侧
        //设置右侧图片(默认隐藏)
        //隐藏-false 显示-true
        val isShowRightImg = typedArray.getBoolean(R.styleable.CustomTopTitleBar_ctb_show_img_right,false)
        imgRight.visibility = if (isShowRightImg) View.VISIBLE else View.GONE

        //设置右侧文本(默认隐藏)
        //隐藏-false 显示-true
        val isShowRightTv = typedArray.getBoolean(R.styleable.CustomTopTitleBar_ctb_show_text_right,false)
        tvRight.visibility = if (isShowRightTv) View.VISIBLE else View.GONE

        //设置右侧图片背景
        val drawableRight = typedArray.getDrawable(R.styleable.CustomTopTitleBar_ctb_img_right)
        if(drawableRight != null){
            imgRight.setImageDrawable(drawableRight)
        }

        //设置右侧文本内容
        val strRight = typedArray.getString(R.styleable.CustomTopTitleBar_ctb_text_right)
        if(strRight.isNullOrBlank()){
            tvRight.text = resources.getString(R.string.def_back_right_con)
        }else{
            tvRight.text = strRight
        }

        //释放回收
        typedArray.recycle()

---

二、设置方法调用

1.设置左侧文本、图片监听

 fun setLeftClickListener(onClickListener: View.OnClickListener):DefaultTopTitleBarWhite{
        imgLeft.setOnClickListener(onClickListener)
        tvLeft.setOnClickListener(onClickListener)
        return this
    }

2.设置左侧图片背景

 fun setLeftImg(leftImg : Drawable):DefaultTopTitleBarWhite{
        imgLeft.visibility = View.VISIBLE
        imgLeft.setImageDrawable(leftImg)
        return this
    }

3.设置左侧文本内容

 fun setLeftImg(leftImg : Drawable):DefaultTopTitleBarWhite{
        imgLeft.visibility = View.VISIBLE
        imgLeft.setImageDrawable(leftImg)
        return this
    }

4.设置左侧文本颜色

fun setLeftTextColor(color: Int):DefaultTopTitleBarWhite{
        tvLeft.setTextColor(color)
        return this
    }

5.设置左侧图片是否可见

 fun setLeftImgVisible(visible : Boolean):DefaultTopTitleBarWhite{
        imgLeft.visibility = if(visible) View.VISIBLE else View.GONE
        return this
    }

6.设置底部线是否可见

 fun setBottomLineVisible(visible : Boolean):DefaultTopTitleBarWhite{
        titleLine.visibility = if(visible) View.VISIBLE else View.GONE
        return this
    }

7.设置左侧文本是否可见

 fun setLeftTextVisible(visible: Boolean):DefaultTopTitleBarWhite{
        tvLeft.visibility = if(visible) View.VISIBLE else View.GONE
        return this
    }

8.设置右侧属性

/**
     * 设置右侧文本、图片监听
     */
    fun setRightClickListener(onClickListener: View.OnClickListener):DefaultTopTitleBarWhite{
        imgRight.setOnClickListener(onClickListener)
        tvRight.setOnClickListener(onClickListener)
        return this
    }

    /**
     * 设置右侧图片背景
     */
    fun setRightImg(rightImg : Drawable):DefaultTopTitleBarWhite{
        imgRight.visibility = View.VISIBLE
        imgRight.setImageDrawable(rightImg)
        return this
    }

    /**
     * 设置右侧文本内容
     */
    fun setRightText(rightTitle : String):DefaultTopTitleBarWhite{
        tvRight.text = rightTitle
        return this
    }

    /**
     * 设置右侧文本颜色
     */
    fun setRightTextColor(color: Int):DefaultTopTitleBarWhite{
        tvRight.setTextColor(color)
        return this
    }

    /**
     * 设置右侧图片是否可见
     */
    fun setRightImgVisible(visible: Boolean):DefaultTopTitleBarWhite{
        imgRight.visibility = if (visible) View.VISIBLE else View.GONE
        return this
    }

    /**
     * 设置右侧文本是否可见
     */
    fun setRightTextVisible(visible: Boolean):DefaultTopTitleBarWhite{
        tvRight.visibility = if (visible) View.VISIBLE else View.GONE
        return this
    }

9.设置中间属性

/**
     * 设置中间标题文本内容
     */
    fun setCenterTitleText(title : String):DefaultTopTitleBarWhite{
        tvCenter.text = title
        return this
    }

    /**
     * 设置中间文本颜色
     */
    fun setCenterTitleTextColor(color: Int):DefaultTopTitleBarWhite{
        tvCenter.setTextColor(color)
        return this
    }

    /**
     * 获取标题文本内容
     */
    fun getCenterTitleText() : String {
        var title = ""
        if(tvCenter != null){
            title = tvCenter.text.toString().trim()
        }
        return title
    }

    /**
     * 设置标题栏背景色
     */
    fun setTitleBackColor(color: Int):DefaultTopTitleBarWhite{
        bgRll.setBackgroundColor(color)
        return this
    }

10.对应的布局和属性

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:background="@color/back03">

    <RelativeLayout
        android:id="@+id/bg_rll"
        android:layout_width="match_parent"
        android:layout_height="44dp"
        android:background="@color/back03"
        android:gravity="center_vertical">

        <ImageButton
            android:id="@+id/img_left"
            android:layout_width="22dp"
            android:layout_height="22dp"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true"
            android:layout_marginLeft="10dp"
            android:src="@drawable/ic_back"
            android:background="@null"
            android:scaleType="centerCrop"
            android:visibility="visible" />



        <ImageButton
            android:id="@+id/img_right"
            android:layout_width="22dp"
            android:layout_height="22dp"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:visibility="gone" />

        <TextView
            android:id="@+id/tv_left"
           android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:text="111"
            android:textColor="@color/white"
            android:textSize="18sp"
            android:visibility="gone" />

        <TextView
            android:id="@+id/tv_right"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:text="预约"
            android:textColor="@color/white"
            android:textSize="16sp" />

        <TextView
            android:id="@+id/tv_title_center"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:layout_marginLeft="80dp"
            android:layout_marginRight="80dp"
            android:ellipsize="end"
            android:gravity="center"
            android:singleLine="true"
            android:textColor="@color/white"
            android:textSize="18sp"
            tools:text="舒适控制" />

    </RelativeLayout>

    <View
        android:id="@+id/title_line"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="@color/color_E0E0E0"
        android:visibility="gone"/>

</LinearLayout>

11.对应的styleable属性

    <!-- 自定义top标题栏 -->
    <declare-styleable name="CustomTopTitleBar">
        <attr name="ctb_title" format="string" /> <!-- 标题栏文字描述 -->
        <attr name="ctb_text_left" format="string" /> <!-- 左侧文字描述 -->
        <attr name="ctb_text_right" format="string" /> <!-- 右侧文字描述 -->
        <attr name="ctb_show_text_left" format="boolean" /> <!-- 是否显示左侧文字-->
        <attr name="ctb_show_text_right" format="boolean" /> <!-- 是否显示右侧文字-->
        <attr name="ctb_img_left" format="reference" /> <!-- 左侧IMG背景 -->
        <attr name="ctb_img_right" format="reference" /> <!-- 右侧IMG背景-->
        <attr name="ctb_show_img_left" format="boolean" /> <!-- 是否显示左侧IMG-->
        <attr name="ctb_show_img_right" format="boolean" /> <!-- 是否显示右侧IMG-->
        <attr name="ctb_back" format="color|reference" /> <!-- 标题栏背景色 -->
        <attr name="ctb_show_line" format="boolean" /> <!-- 是否显示底部分割线-->
    </declare-styleable>

附上全部代码

class DefaultTopTitleBarWhite : RelativeLayout{

    private lateinit var bgRll : RelativeLayout
    private lateinit var imgLeft : ImageButton
    private lateinit var imgRight : ImageButton
    private lateinit var tvLeft : TextView
    private lateinit var tvRight : TextView
    private lateinit var tvCenter : TextView

    private lateinit var titleLine : View

    constructor(context : Context?, attrs : AttributeSet?) : super(context, attrs){
        dp2px(2)
        //init(context)要在retrieveAttributes(attrs)前调用
        //因为属性赋值，会直接赋值到控件上去。
        init(context)

        //retrieveAttributes(attrs: AttributeSet)方法只接受非空参数
        attrs?.let { retrieveAttributes(attrs) }
    }

    /**
     * 初始化view布局
     */
    fun init(context : Context?){
        val view = LayoutInflater.from(context).inflate(R.layout.custom_top_title_bar_white,this,true)
        bgRll = view.findViewById(R.id.bg_rll)
        imgLeft = view.findViewById(R.id.img_left)
        imgRight = view.findViewById(R.id.img_right)
        tvLeft = view.findViewById(R.id.tv_left)
        tvRight = view.findViewById(R.id.tv_right)
        tvCenter = view.findViewById(R.id.tv_title_center)
        titleLine = view.findViewById(R.id.title_line)
    }

    /**
     * 获取xml文件中的自定义属性并赋值
     */
    private fun retrieveAttributes(attrs: AttributeSet?){
        val typedArray : TypedArray = context.obtainStyledAttributes(attrs,R.styleable.CustomTopTitleBar)

//        //设置背景色
//        val titleBack = typedArray.getColor(R.styleable.CustomTopTitleBar_ctb_back, Color.parseColor("#FFFFFF"))
//        bgRll.setBackgroundColor(titleBack)

        //设置底部分割线(默认不显示)
        val isShowLine = typedArray.getBoolean(R.styleable.CustomTopTitleBar_ctb_show_line,true)
        titleLine.visibility = if (isShowLine) View.GONE else View.VISIBLE


        //设置标题内容
        val strTitle = typedArray.getString(R.styleable.CustomTopTitleBar_ctb_title)
        tvCenter.text = strTitle ?: resources.getString(R.string.app_name)

        //左侧
        //设置左边图片(默认显示)
        //隐藏-false 显示-true
        val isShowLeftImg = typedArray.getBoolean(R.styleable.CustomTopTitleBar_ctb_show_img_left,true)
        imgLeft.visibility = if(isShowLeftImg) View.VISIBLE else View.GONE

        //设置左侧文本(默认隐藏)
        //隐藏-false 显示-true
        val isShowLeftTv = typedArray.getBoolean(R.styleable.CustomTopTitleBar_ctb_show_text_left,false)
        tvLeft.visibility = if (isShowLeftTv) View.VISIBLE else View.GONE

        //设置左侧图片背景
        val drawableLeft = typedArray.getDrawable(R.styleable.CustomTopTitleBar_ctb_img_left)
        if(drawableLeft != null){
            imgLeft.setImageDrawable(drawableLeft)
        }

        //设置左侧文本内容
        val strLeft = typedArray.getString(R.styleable.CustomTopTitleBar_ctb_text_left)
        if(strLeft.isNullOrBlank()){
            tvLeft.text = resources.getString(R.string.def_back_left_con)
        }else{
            tvLeft.text = strLeft
        }


        //右侧
        //设置右侧图片(默认隐藏)
        //隐藏-false 显示-true
        val isShowRightImg = typedArray.getBoolean(R.styleable.CustomTopTitleBar_ctb_show_img_right,false)
        imgRight.visibility = if (isShowRightImg) View.VISIBLE else View.GONE

        //设置右侧文本(默认隐藏)
        //隐藏-false 显示-true
        val isShowRightTv = typedArray.getBoolean(R.styleable.CustomTopTitleBar_ctb_show_text_right,false)
        tvRight.visibility = if (isShowRightTv) View.VISIBLE else View.GONE

        //设置右侧图片背景
        val drawableRight = typedArray.getDrawable(R.styleable.CustomTopTitleBar_ctb_img_right)
        if(drawableRight != null){
            imgRight.setImageDrawable(drawableRight)
        }

        //设置右侧文本内容
        val strRight = typedArray.getString(R.styleable.CustomTopTitleBar_ctb_text_right)
        if(strRight.isNullOrBlank()){
            tvRight.text = resources.getString(R.string.def_back_right_con)
        }else{
            tvRight.text = strRight
        }

        //释放回收
        typedArray.recycle()

    }

    /**
     * 设置左侧文本、图片监听
     */
    fun setLeftClickListener(onClickListener: View.OnClickListener):DefaultTopTitleBarWhite{
        imgLeft.setOnClickListener(onClickListener)
        tvLeft.setOnClickListener(onClickListener)
        return this
    }

    /**
     * 设置左侧图片背景
     */
    fun setLeftImg(leftImg : Drawable):DefaultTopTitleBarWhite{
        imgLeft.visibility = View.VISIBLE
        imgLeft.setImageDrawable(leftImg)
        return this
    }

    /**
     * 设置左侧文本内容
     */
    fun setLeftText(leftTitle : String):DefaultTopTitleBarWhite{
        tvLeft.text = leftTitle
        return this
    }

    /**
     * 设置左侧文本颜色
     */
    fun setLeftTextColor(color: Int):DefaultTopTitleBarWhite{
        tvLeft.setTextColor(color)
        return this
    }

    /**
     * 设置左侧图片是否可见
     */
    fun setLeftImgVisible(visible : Boolean):DefaultTopTitleBarWhite{
        imgLeft.visibility = if(visible) View.VISIBLE else View.GONE
        return this
    }

    /**
     * 设置左侧图片是否可见
     */
    fun setBottomLineVisible(visible : Boolean):DefaultTopTitleBarWhite{
        titleLine.visibility = if(visible) View.VISIBLE else View.GONE
        return this
    }

    /**
     * 设置左侧文本是否可见
     */
    fun setLeftTextVisible(visible: Boolean):DefaultTopTitleBarWhite{
        tvLeft.visibility = if(visible) View.VISIBLE else View.GONE
        return this
    }


    /**
     * 设置右侧文本、图片监听
     */
    fun setRightClickListener(onClickListener: View.OnClickListener):DefaultTopTitleBarWhite{
        imgRight.setOnClickListener(onClickListener)
        tvRight.setOnClickListener(onClickListener)
        return this
    }

    /**
     * 设置右侧图片背景
     */
    fun setRightImg(rightImg : Drawable):DefaultTopTitleBarWhite{
        imgRight.visibility = View.VISIBLE
        imgRight.setImageDrawable(rightImg)
        return this
    }

    /**
     * 设置右侧文本内容
     */
    fun setRightText(rightTitle : String):DefaultTopTitleBarWhite{
        tvRight.text = rightTitle
        return this
    }

    /**
     * 设置右侧文本颜色
     */
    fun setRightTextColor(color: Int):DefaultTopTitleBarWhite{
        tvRight.setTextColor(color)
        return this
    }

    /**
     * 设置右侧图片是否可见
     */
    fun setRightImgVisible(visible: Boolean):DefaultTopTitleBarWhite{
        imgRight.visibility = if (visible) View.VISIBLE else View.GONE
        return this
    }

    /**
     * 设置右侧文本是否可见
     */
    fun setRightTextVisible(visible: Boolean):DefaultTopTitleBarWhite{
        tvRight.visibility = if (visible) View.VISIBLE else View.GONE
        return this
    }

    /**
     * 设置中间标题文本内容
     */
    fun setCenterTitleText(title : String):DefaultTopTitleBarWhite{
        tvCenter.text = title
        return this
    }

    /**
     * 设置中间文本颜色
     */
    fun setCenterTitleTextColor(color: Int):DefaultTopTitleBarWhite{
        tvCenter.setTextColor(color)
        return this
    }

    /**
     * 获取标题文本内容
     */
    fun getCenterTitleText() : String {
        var title = ""
        if(tvCenter != null){
            title = tvCenter.text.toString().trim()
        }
        return title
    }

    /**
     * 设置标题栏背景色
     */
    fun setTitleBackColor(color: Int):DefaultTopTitleBarWhite{
        bgRll.setBackgroundColor(color)
        return this
    }

}

总结

以上就是今天要讲的内容，本文仅仅简单介绍了Android自定义View实现titleBar，如需改进尽情留言。