Android

自定义TopBarLayout标题栏

2019-08-29  本文已影响0人  儿歌八万首

集成 ConstraintLayout 实现通用标题栏控件,目前里面比较简陋,一个返回键ImageView,两个文本控件TextView(一个返回文本,通常默认代替返回按钮,一个是页面标题),如果有其他需求可以自己扩展,这里只是作个参考。
首先,写一个xml布局文件 topbar_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:background="@drawable/qmui_list_item_bg_with_border_bottom"
        android:orientation="vertical"
        android:paddingTop="30dp">

    <ImageView
            android:id="@+id/ivBack"
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:paddingStart="15dp"
            android:paddingTop="10dp"
            android:paddingEnd="15dp"
            android:paddingBottom="10dp"
            android:src="@drawable/iv_back"
            android:visibility="visible"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

    <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="取消"
            android:textSize="20sp"
            android:visibility="gone"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="@+id/ivBack"
            app:layout_constraintRight_toRightOf="@+id/ivBack"
            app:layout_constraintTop_toTopOf="parent" />

    <TextView
            android:id="@+id/tvTittle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="标题"
            android:textColor="@color/qmui_config_color_pure_black"
            android:textSize="25sp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

然后继承ConstraintLayout ,重写两个构造方法 constructor(context: Context, attrs: AttributeSet) ,constructor(context: Context) ,在包含两个参数的构造方法中,加载刚刚上面的xml布局。可以在attrs.xml中定义一些属性在改构造方法中接收,然后在 onFinishInflate() 函数中设置给具体对应控件:具体代码如下:

 constructor(context: Context, attrs: AttributeSet) : this(context) {
        //加载视图的布局
        LayoutInflater.from(context).inflate(R.layout.topbar_laout, this, true)

        //自定义属性
        val typedArray = context.obtainStyledAttributes(attrs, R.styleable.TopBar)
        tittleText = typedArray.getString(R.styleable.TopBar_titleText).toString()
        tittleSize = typedArray.getDimension(R.styleable.TopBar_titleTextSize, 25f)
        tittleColor = typedArray.getColor(
            R.styleable.TopBar_titleTextColor,
            context.resources.getColor(R.color.qmui_config_color_pure_black)
        )
        imgBackColor = typedArray.getColor(
            R.styleable.TopBar_imgBackColor,
            resources.getColor(R.color.qmui_config_color_pure_black)
        )

        typedArray.recycle()
    }
    /**
     * 控件加载完成后调用此方法
     */
    override fun onFinishInflate() {
        super.onFinishInflate()
       //避免tittleText为null
        if (tittleText.isNotEmpty())
            setBarTittleText(tittleText)
        setBarTittleColor(tittleColor)
        setBarTittleSize(tittleSize)
        setBarImgBackColor(imgBackColor)
    }

最后通过设置一些修改相关属性的方法,可以在java代码中调用。具体如下,也可以自己根据项目需求进行自定义:

   //设置标题文本
    fun setBarTittleText(text: String) {
        this.tvTittle.text = text
    }

    //设置标题颜色
    fun setBarTittleColor(tittleColor: Int) {
        this.tvTittle.setTextColor(tittleColor)
    }

    //设置标题颜色
    fun setBarTittleSize(tittleSize: Float) {
        this.tvTittle.textSize = tittleSize
    }

    //设置返回键箭头颜色
    fun setBarImgBackColor(imgBackColor: Int) {
        this.ivBack.setColorFilter(imgBackColor)
    }
上一篇 下一篇

猜你喜欢

热点阅读