美文网首页Android
自定义TopBarLayout标题栏

自定义TopBarLayout标题栏

作者: 儿歌八万首 | 来源:发表于2019-08-29 10:55 被阅读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)
    }

相关文章

  • 自定义TopBarLayout标题栏

    集成 ConstraintLayout 实现通用标题栏控件,目前里面比较简陋,一个返回键ImageView,两个文...

  • Android Dialog自定义去除标题

    style 无标题,有标题栏 无标题,无标题栏 自定义Dialog Activity调用

  • Android自定义标题栏

    Android自定义标题栏思路:1.在layout中添加标题栏的布局文件title(具体布局自己设置)2.自定义控...

  • UI-ToolBar 标题栏

    在开发中经常需要使用到标题栏,很多时候我们会自自定义一个标题栏,因为自定义标题栏基本上就只需要使用个Relativ...

  • android 自定义标题栏 状态栏颜色设置

    隐藏标题栏 自定义的nav标题栏, 可以自己完善 自定义的nav属性 在布局文件中使用 全局设置状态栏颜色 使用提...

  • appcompatactivity 去除标题栏

    appcompat本身就是无标题栏的,因为SupportActionBar本来就是自定义的标题栏。可以在Andro...

  • requestWindowFeature(Window.FEAT

    今天学习Android,需要将系统自带的标题栏隐藏掉,使用自定义的标题栏,结果发现,requestWindowFe...

  • Android自定义标题栏控件(补充)

    在上一篇文章Android 自定义复合控件之通用标题栏中记录了自定义标题栏控件的整个过程,不过如果直接拿来在别的项...

  • 安卓View

    【Android 自定义 View 实战】之自定义项目通用的标题栏 CustomTitleBar 【Android...

  • Material Design

    AppbBarLayout.Behavior自定义 CollapsingToolbarLayout折叠式标题栏 C...

网友评论

    本文标题:自定义TopBarLayout标题栏

    本文链接:https://www.haomeiwen.com/subject/sswbectx.html