Android 自定义控件实现个人中心选项列表

很多app都需要展示个人中心界面, 这个界面往往有许多选项需要展示, 就像下面这样
Android 自定义控件实现个人中心选项列表
这样的选项如果一个一个单独添加并设置显示效果可就太费事了, 这时候可以使用自定义控件实现一个通用的view格式, 然后自定义属性值来设置内容, 具体步骤如下:

在layout文件夹新建item_personal_menu.xml作为布局格式:

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

    <ImageView
        android:id="@+id/icon"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:layout_centerVertical="true"
        android:layout_marginStart="20dp"
        android:src="@drawable/setting"
        />

    <TextView
        android:id="@+id/name"
        android:textColor="#000"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_toEndOf="@id/icon"
        android:layout_marginStart="10dp"/>

    <ImageView
        android:id="@+id/more"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:layout_alignParentEnd="true"
        android:layout_centerVertical="true"
        android:src="@drawable/more"
        android:layout_marginEnd="10dp"
        android:visibility="gone"/>

    <TextView
        android:id="@+id/data"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_toStartOf="@id/more"
        android:layout_marginEnd="10dp"
        />

    <ImageView
        android:id="@+id/line"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#c2c2c2"
        android:layout_alignParentBottom="true"
        android:visibility="gone"/>

</RelativeLayout>

在values文件夹下的attrs文件（如果没有的话可以新建一个）中新建一项declare-styleable用来控制自定义控件的属性:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="PersonaltemView">
        <attr name="icon" format="reference"/>//设置左侧图标
        <attr name="name" format="string"/>//左侧标题文字
        <attr name="data" format="string"/>//右侧描述文字
        <attr name="show_more" format="boolean"/>//是否显示右侧小箭头
        <attr name="show_line" format="boolean"/>//是否显示下划线
    </declare-styleable>
</resources>

新建类PersonalItemView继承上面布局文件的最外层布局, 在其中实现对自定义控件属性的设置:

/**
 * 自定义个人中心选项控件
 */
public class PersonalItemView extends RelativeLayout {
    private TextView data;

    public PersonalItemView(final Context context, AttributeSet attrs){
        super(context, attrs);
        LayoutInflater.from(context).inflate(R.layout.item_personal_menu, this);
        @SuppressLint("CustomViewStyleable") TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.PersonaltemView);

        ImageView icon = findViewById(R.id.icon);
        ImageView more = findViewById(R.id.more);
        ImageView line = findViewById(R.id.line);
        TextView name = findViewById(R.id.name);
        data = findViewById(R.id.data);

        icon.setImageDrawable(typedArray.getDrawable(R.styleable.PersonaltemView_icon));
        name.setText(typedArray.getText(R.styleable.PersonaltemView_name));

        if (typedArray.getBoolean(R.styleable.PersonaltemView_show_more, false)){
            more.setVisibility(VISIBLE);
        }
        if (typedArray.getBoolean(R.styleable.PersonaltemView_show_line, false)){
            line.setVisibility(VISIBLE);
        }
        typedArray.recycle();
    }

    // 提供设置控件的描述数据
    public void setData(String data){
        this.data.setText(data);
    }
}

在主布局文件中引入自定义控件, 就像这样:

<com.example.shenshen1.PersonalItemView
        android:id="@+id/item_personal"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        app:icon="@drawable/people"
        app:name="用户名"
        android:background="#fff"
        app:show_more="true"
        app:show_line="true"/>

这里需要注意由于使用了自定义控件, 需要指定新的命名空间: xmlns:app="http://schemas.android.com/apk/res-auto"

Android 自定义控件实现个人中心选项列表

相关推荐