集成 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)
}
网友评论