Kotlin自定义一个简单实用的标题栏

标题栏是每个APP必不可少的一部分，通过它我们可以实现导航以及添加一些操作事件等等。下面分享一个我常用的标题栏控件。

先来说一下大概的思路吧，考虑到标题栏一般具有比较多的控件，例如左右的图标按钮或者文字，以及最重要的标题等，这里我选择了RelativeLayout来作为所继承的父类，当然也可以使用LinearLayout甚至是ViewGroup等等，这些都是可以的，只是可能会相对来说麻烦一点。废话不多说，下面开始动工。

最基础的部分，首先我们定义一个TitleBar类，让它继承自RelativeLayout，然后重载它的3个构造方法：

class TitleBar @JvmOverloads constructor(context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0) :
    RelativeLayout(context, attrs, defStyleAttr) 

然后通过init关键字，在里面实现一些初始化的操作

    init {
        //通过布局解释器获取布局
        LayoutInflater.from(context).inflate(R.layout.titlebar, this)
        //通过attrs设置相关属性
        setStyle(context, attrs)
        //设置默认背景颜色
        setDefaultColor()
    }

    private fun setDefaultColor() {
        this.setBackgroundResource(R.color.colorPrimary)
        titlebar_title!!.setTextColor(Color.WHITE)
        titlebar_righttext!!.setTextColor(Color.WHITE)
    }

    private fun setStyle(context: Context, attrs: AttributeSet?) {
        if (attrs != null) {
            val array = context.obtainStyledAttributes(attrs, R.styleable.TitleBar)
            //            获取title
            val title = array.getString(R.styleable.TitleBar_titleBar_title)
            titlebar_title!!.text = title
            //            获取左侧图片
            val lDrawable = array.getDrawable(R.styleable.TitleBar_titleBar_leftImage)
            if (lDrawable != null) {
                titlebar_leftimage!!.setImageDrawable(lDrawable)
            }
            //            获取右侧图片
            val rDrawable = array.getDrawable(R.styleable.TitleBar_titleBar_rightImage)
            if (rDrawable != null) {
                titlebar_rightimage!!.setImageDrawable(rDrawable)
                titlebar_righttext!!.visibility = GONE//有图片则不显示文字
            }
            //            获取右侧文字
            //            当图片为空才显示文字
            val right_text = array.getString(R.styleable.TitleBar_titleBar_rightText)
            if (rDrawable == null && right_text != null) {
                titlebar_righttext!!.text = right_text
            }
            //            获取背景图片
            val bgDrawable = array.getDrawable(R.styleable.TitleBar_titleBar_background)
            if (bgDrawable != null) {
                titlebar_root!!.setBackgroundDrawable(bgDrawable)
            }
            array.recycle()
        }
        titlebar_leftlayout!!.setOnClickListener {
            val activity = context as Activity
            activity.onBackPressed()
        }
    }

其中，布局文件如下：

titlebar.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:id="@+id/titlebar_root"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:background="@drawable/titlebar_shape_bg"
                android:gravity="center_vertical" >

    <RelativeLayout
        android:id="@+id/titlebar_leftlayout"
        android:layout_width="50dip"
        android:layout_height="match_parent"
        android:gravity="center"
        android:clickable="true" >

        <ImageView
            android:id="@+id/titlebar_leftimage"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:layout_alignParentEnd="true"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:layout_marginEnd="30dp"
            android:layout_marginRight="30dp"
            />
    </RelativeLayout>

    <TextView
        android:id="@+id/titlebar_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:textColor="#ffffff"
        android:textSize="20sp" />

    <RelativeLayout
        android:id="@+id/titlebar_rightlayout"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_alignParentEnd="true">

        <TextView
            android:id="@+id/titlebar_righttext"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:gravity="center"
            android:scaleType="centerInside"
            android:textSize="16sp"/>

        <ImageView
            android:id="@+id/titlebar_rightimage"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:layout_alignParentStart="true"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true"
            android:layout_marginStart="30dp"
            android:layout_marginLeft="30dp" />
    </RelativeLayout>

</RelativeLayout>

布局里面的内容相对比较简单，左侧布局由一个imageview组成，中间使用textview作为标题的显示，右侧使用imageview和textview显示，读者也可以自行定义。

下面来说说setStyle方法，通过该方法，我们可以在xml中设置控件的一些基本属性。首先，我们要在values文件夹下新建一个attrs.xml文件，内容如下：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!--标题栏-->
    <!--format="reference" 表示参考资源id-->
    <!--可同时设置标题栏右侧为图片或者文字，二者只能选择其一 默认图片优先-->
    <declare-styleable name="TitleBar">
        <attr name="titleBar_title" format="string"/>
        <attr name="titleBar_leftImage" format="reference"/>
        <attr name="titleBar_rightImage" format="reference"/>
        <attr name="titleBar_rightText" format="string"/>
        <attr name="titleBar_background" format="reference|color"/>
    </declare-styleable>
</resources>

然后在setStyle方法中获取这些属性的值，将其显示在控件上。还可以在此方法中设置一些默认的点击事件。

最后就是设置一下标题栏的点击事件了：

    //    左侧布局监听
    fun setLeftLayoutClickListener(listener: OnClickListener) {
        titlebar_leftlayout!!.setOnClickListener(listener)
    }
    //   通过资源id设置左侧图片样式
    fun setLeftImageResource(resId: Int) {
        titlebar_leftimage!!.setImageResource(resId)
    }
    //   右侧布局监听
    fun setRightLayoutClickListener(listener: OnClickListener) {
        titlebar_rightlayout!!.setOnClickListener(listener)
    }
    //   通过资源id设置右侧图片样式
    fun setRightImageResource(resId: Int) {
        titlebar_rightimage!!.setImageResource(resId)
    }
    //    设置title
    fun setTitle(title: String) {
        titlebar_title!!.text = title
    }
    //    设置跟布局背景颜色
    override fun setBackgroundColor(color: Int) {
        titlebar_root!!.setBackgroundColor(color)
    }

代码比较简单就不解释了，最后的使用方式如下：

    <com.example.demo.view.TitleBar
        android:id="@+id/print_titlebar"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        app:layout_constraintTop_toTopOf="parent"
        app:titleBar_leftImage="@drawable/app_titlebar_back"
        app:titleBar_title="这是一个标题栏">
    </com.example.demo.view.TitleBar>

显示效果如下：

至此，一个简单的Android标题栏就完成了。