Android x Kotlin : 简易实作第一堂-自定义customView与在xml中设定属性预设值

简介

在一个专案中，有时候会有一组view在很多地方都会用到，在每个地方都重刻一遍会很麻烦。这时候可以自己做customView。那customView最简单的方式就是在layout里面用include加进来，但这样就不能直接在layout设定预设值。没辍今天94要教大家怎麽制作customView以及在layout里面直接设定属性的预设值。

1.customview_editxt.xml

刻一个客制化的view模板
title(下图黑字的"帐号")
hint(下图灰字的"帐号")
跟右方小三角形都是固定值，会在layout里预设好
而editText中的text为变动值，会用code里手动给值。(这里还没显示)

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginEnd="16dp"
    android:layout_marginStart="16dp">

    <TextView
        android:id="@+id/tv_title_custom_editxt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/account"
        style="@style/EditextTitleStyle"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <EditText
        android:id="@+id/et_custom_editxt"
        android:layout_width="match_parent"
        android:layout_height="36dp"
        android:layout_marginTop="6dp"
        android:background="@color/colorf8f8f8"
        android:hint="@string/account"
        android:paddingStart="16dp"
        style="@style/EditTextStyle"
        android:singleLine="true"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/tv_title_custom_editxt" />

    <ImageView
        android:id="@+id/imgv_drawable_end"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="@id/et_custom_editxt"
        app:layout_constraintBottom_toBottomOf="@id/et_custom_editxt"
        app:layout_constraintEnd_toEndOf="@id/et_custom_editxt"
        android:layout_marginEnd="16dp"
        tools:src="@drawable/ic_triangle_down"/>


    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="@color/color222222"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@id/et_custom_editxt" />


</androidx.constraintlayout.widget.ConstraintLayout>

2.styles.xml

在这里设定我们的customView有哪些属性，设一个title，让我们可以直接在layout里设定title的预设值。

<declare-styleable name="CustomEditxtView">
        <attr name="title_editxt" format="string" />
        <attr name="et_hint" format="string" />
        <attr name="drawable_end" format="integer" />
    </declare-styleable>
        

3.CustomEditxtView.kt

写一个class，并连结客制化的view。
待会就可以透过这个class去动态设定layout的值
注意: class的名称必须跟上面style的名称相同!

class CustomEditxtView@JvmOverloads constructor(
    context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) :ConstraintLayout(context, attrs, defStyleAttr) {

    
    val view = View.inflate(context, R.layout.customview_editxt, this)

    init {
        if (attrs != null) {
            val attributes = context.theme.obtainStyledAttributes(
                attrs,
                R.styleable.CustomEditxtView,
                0, 0
            )

            //取得预设值
            view.tv_title_custom_editxt.text = attributes.getString(R.styleable. CustomEditxtView_title_editxt) ?: ""
            view.et_custom_editxt.hint = attributes.getString(R.styleable.CustomEditxtView_et_hint) ?:""

            //getRescource的第二个参数是  如果到时候没指定Image 则回传R.drawable.blank
            view.imgv_drawable_end.setImageResource(attributes.getResourceId(R.styleable.CustomEditxtView_drawable_end,R.drawable.blank))

        }
    }

    //待会可以在code里动态设定edittext的text
    open fun setEtText(text: String){
        view.et_custom_editxt.setText(text)
    }
}

4.activity_main.xml

加入我们客制的view，并设定title、hint与小三角形(也就是title_editxt、et_hint与drawable_end)

            <com.tcb.official.util.customView.CustomEditxtView
                android:id="@+id/et_advisory_item"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:et_hint="请选择谘询项目"
                app:title_editxt="谘询项目"
                app:drawable_end="@drawable/ic_triangle_down"
                app:layout_constraintTop_toBottomOf="@id/btn_on_line"/>

            <com.tcb.official.util.customView.CustomEditxtView
                android:id="@+id/et_advisory_content"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="24dp"
                app:title_editxt="谘询内容"
                app:et_hint="谘询内容"
                app:drawable_end="@drawable/ic_triangle_down"
                app:layout_constraintTop_toBottomOf="@id/et_advisory_item"
                />

4.MainActivity.kt

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        
        et_advisory_content.setEtText("我有病呜呜呜")
        

完成!