美文网首页
Android 自定义Toolbar

Android 自定义Toolbar

作者: 折剑游侠 | 来源:发表于2020-07-27 20:13 被阅读0次

封装下基本功能:返回键,title,功能键等。

CustomToolbar

class CustomToolbar @JvmOverloads constructor(
    context: Context,
    attributeSet: AttributeSet? = null,
    defStyleAttr: Int = 0,
    defStyleRes: Int = 0
) : RelativeLayout(context, attributeSet, defStyleAttr, defStyleRes) {
    private val view = LayoutInflater.from(context).inflate(R.layout.toolbar, this, true)
    private var back: ImageView
    private var title: TextView
    private var feature: TextView
    private var icon: ImageView
    private var separate: View
    private var backListener: Callback? = null
    private var featureListener: Callback? = null
    private var iconListener: Callback? = null

    init {
        back = view.findViewById(R.id.toolbarBack)
        title = view.findViewById(R.id.toolbarContent)
        feature = view.findViewById(R.id.toolbarFeature)
        icon = view.findViewById(R.id.toolbarIcon)
        separate = view.findViewById(R.id.toolbarSeparate)

        val typedArray = context.obtainStyledAttributes(attributeSet, R.styleable.CustomToolbar)
        val content = typedArray.getString(R.styleable.CustomToolbar_barContent)
        val contentColor = typedArray.getColor(
            R.styleable.CustomToolbar_barContentColor,
            context.resources.getColor(R.color.textBlack)
        )
        val featureText = typedArray.getString(R.styleable.CustomToolbar_featureText)
        val featureTextColor = typedArray.getColor(
            R.styleable.CustomToolbar_featureTextColor,
            context.resources.getColor(R.color.blue_266EFF)
        )
        val iconVisible = typedArray.getBoolean(R.styleable.CustomToolbar_barIcon, false)
        val separateVisible = typedArray.getBoolean(R.styleable.CustomToolbar_barSeparate, true)

        typedArray.recycle()

        title.text = content
        title.setTextColor(contentColor)
        feature.text = featureText
        feature.setTextColor(featureTextColor)
        icon.visibility = if (iconVisible) View.VISIBLE else View.GONE
        separate.visibility = if (separateVisible) View.VISIBLE else View.GONE

        back.setOnClickListener {
            if (backListener == null) {
                (context as Activity).finish()
            } else {
                backListener?.invoke()
            }
        }
        feature.setOnClickListener {
            featureListener?.invoke()
        }
        icon.setOnClickListener {
            iconListener?.invoke()
        }
    }

    fun backListener(callback: Callback): CustomToolbar {
        backListener = callback
        return this
    }

    fun featureListener(callback: Callback): CustomToolbar {
        featureListener = callback
        return this
    }

    fun iconListener(callback: Callback): CustomToolbar {
        iconListener = callback
        return this
    }

    fun setContent(content: String): CustomToolbar {
        title.text = content
        return this
    }

    fun setContentColor(color: Int): CustomToolbar {
        title.setTextColor(color)
        return this
    }

    fun setFeatureText(text: String): CustomToolbar {
        feature.text = text
        return this
    }

    fun setFeatureTextColor(color: Int): CustomToolbar {
        feature.setTextColor(color)
        return this
    }

    fun setIconVisible(boolean: Boolean): CustomToolbar {
        icon.visibility = if (boolean) View.VISIBLE else View.GONE
        return this
    }

    fun setSeparateVisible(boolean: Boolean): CustomToolbar {
        separate.visibility = if (boolean) View.VISIBLE else View.GONE
        return this
    }
}

Alias

internal typealias Callback = () -> Unit

toolbar.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="50dp">

    <ImageView
        android:id="@+id/toolbarBack"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_centerVertical="true"
        android:layout_marginStart="16dp"
        android:contentDescription="@null"
        android:src="@drawable/toolbar_back" />

    <TextView
        android:id="@+id/toolbarContent"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:gravity="center"
        android:textColor="@color/textBlack"
        android:textSize="20sp"
        tools:ignore="RelativeOverlap" />

    <TextView
        android:id="@+id/toolbarFeature"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_centerVertical="true"
        android:layout_marginEnd="16dp"
        android:gravity="center"
        android:textColor="@color/blue_266EFF"
        android:textSize="18sp"
        tools:ignore="RelativeOverlap" />

    <ImageView
        android:id="@+id/toolbarIcon"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_alignParentEnd="true"
        android:layout_centerVertical="true"
        android:layout_marginEnd="16dp"
        android:contentDescription="@null"
        android:src="@drawable/toolbar_menu" />

    <View
        android:id="@+id/toolbarSeparate"
        android:layout_width="match_parent"
        android:layout_height="0.5dp"
        android:layout_alignParentBottom="true"
        android:background="@color/separate" />
</RelativeLayout>

自定义属性attr.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="CustomToolbar">
        <attr name="barContent" format="string" />
        <attr name="barContentColor" format="color" />
        <attr name="featureText" format="string" />
        <attr name="featureTextColor" format="color" />
        <attr name="barIcon" format="boolean" />
        <attr name="barSeparate" format="boolean" />
    </declare-styleable>
</resources>

使用

    <com.chenxuan.widget.CustomToolbar
        android:id="@+id/loginToolbar"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        app:barContent="登录"
        app:barIcon="true"
        app:barSeparate="false"
        app:featureText="更多"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

ToolbarKtx

inline fun CustomToolbar.init(block: CustomToolbar.() -> Unit) {
    block()
}

写个init方法语义更强

Activity中调用

        toolbar.init {
            setContent("title")
            setFeatureText("更多")
            setIconVisible(true)
            setSeparateVisible(true)
            backListener {
                finish()
            }
            featureListener {

            }
            iconListener {

            }
        }

相关文章

网友评论

      本文标题:Android 自定义Toolbar

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