标题栏是每个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)
}
代码比较简单就不解释了,最后的使用方式如下:
扫描二维码关注公众号,回复:
8836419 查看本文章
<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标题栏就完成了。