Android開發——自定義控制元件

一、創建一個XML布局檔案用于存放自定義控制元件的布局

layout_item.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/layout_item"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:background="#000">

    <ImageView

        android:id="@+id/im_1"
        android:layout_width="0dp"
        android:layout_height="40dp"
        android:layout_weight="1"
        android:src="@drawable/btn_menu"
        android:gravity="center_vertical"
        android:scaleType="centerInside"
        android:layout_gravity="center_vertical"
        />

    <TextView
        android:id="@+id/tv_1"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="5"
        android:text="ITEM_1"
        android:textColor="#fff"
        android:textSize="30sp"
        android:gravity="center_vertical"
        />



</LinearLayout>

二、創建一個attrs.xml檔案，用于設定自定義屬性，之后系結到自定義控制元件上，可以在呼叫自定義控制元件時候，通過自定義屬性直接設定自定義控制元件的屬性

attrs.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="ItemLaydout">
        <attr name="text" format="string"/> 
        <attr name="icon" format="reference"/>
    </declare-styleable>
</resources>

三、創建自定義控制元件類ItemLayout.java

ItemLayout.java

import android.content.Context;
import android.content.res.TypedArray;
import android.util.AttributeSet;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.TextView;


import androidx.annotation.NonNull;
import androidx.annotation.Nullable;


public class ItemLayout extends FrameLayout {

    private View mView; //界面控制元件

    private TextView textView;
    private ImageView imageView;



    public ItemLayout(@NonNull Context context) {
        this(context,null);
    }

    public ItemLayout(@NonNull Context context, @Nullable AttributeSet attrs) {
        this(context, attrs,0);
    }

    public ItemLayout(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context,attrs);
        Log.d("ItemLayout","ItemLayout");
    }

    //初始化界面
    private void init(Context context,AttributeSet attrs)
    {

        LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        mView = inflater.inflate(R.layout.layout_item, this, true);//加載布局檔案

        //獲取布局中的控制元件
        textView = (TextView)mView.findViewById(R.id.tv_1);
        imageView = (ImageView)mView.findViewById(R.id.im_1);


        //加載屬性檔案
        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.ItemLaydout);

        //從屬性檔案中獲取資源值，設定到布局中的控制元件上
        setImageView(a.getResourceId(R.styleable.ItemLaydout_icon,10000));
        setTextView(a.getString(R.styleable.ItemLaydout_text));




    }


    public void setImageView(int im_id) {
        this.imageView.setImageResource(im_id);
    }

    public void setTextView(String tv_str) {
        this.textView.setText(tv_str);
    }



}

至此，自定義控制元件已經設定完成

四、使用自定義控制元件，在MainActivity的xml檔案中呼叫

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:orientation="vertical"
    android:background="#333333"
  >

  <com.skypan.customviewpro.ItemLayout

      android:layout_width="match_parent"
      android:layout_height="55dp"
      app:text = "Item1"
      app:icon = "@drawable/btn_menu"
      android:background="#000"
      />

  <Space
      android:layout_width="match_parent"
      android:layout_height="10dp"
      />

  <com.skypan.customviewpro.ItemLayout
      android:layout_width="match_parent"
      android:layout_height="55dp"
      app:text = "Item2"
      app:icon = "@drawable/btn_search"
      android:background="#000"
      />

  <com.skypan.customviewpro.ItemLayout
      android:layout_width="match_parent"
      android:layout_height="55dp"
      app:text = "Item3"
      app:icon = "@drawable/find"
      android:background="#000"
      />

  <com.skypan.customviewpro.ItemLayout
      android:layout_width="match_parent"
      android:layout_height="55dp"
      app:text = "Item4"
      app:icon = "@drawable/friend"
      android:background="#000"
      />

  <com.skypan.customviewpro.ItemLayout
      android:layout_width="match_parent"
      android:layout_height="55dp"
      app:text = "Item5"
      app:icon = "@drawable/wechat"
      android:background="#000"
      />
</LinearLayout>

五、運行結果如下：