簡介

在一個專案中，有時候會有一組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("我有病嗚嗚嗚")
        

完成!