【Android】自定义简单可重用组件

效果

其中个人信息，修改密码，切换账户，登录/注册四个item都是重用的一个自定义小组件。

虽然这样的布局很简单，不需要自定义组件也能实现，但是如果这样的item过多，每个item的布局又基本相同，而且属性也不少，什么padding啊margin啊gravity啊随便设置几个，代码看起来就很杂，所以布局重用就很必要了，这就涉及到自定义组件。
但是每个item又不会完全相同，比如上图每个item的图标和文字需要不一样，所以还涉及到定义属性。
下面看下这个简单小组件怎么实现的。

一、建item布局文件作为重用

item_fragment_myself.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/white"
    android:orientation="horizontal">

    <ImageView
        android:id="@+id/iv_item_icon"
        android:layout_gravity="center_vertical"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_marginLeft="20dp"
        android:background="@null" />

    <TextView
        android:id="@+id/tv_item_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="20dp"
        android:textColor="@color/black"
        android:textSize="16sp"
        android:layout_weight="1"
        android:text="item_title"/>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:gravity="right|center_vertical">

        <ImageView
            android:layout_width="18dp"
            android:layout_height="18dp"
            android:layout_marginRight="20dp"
            android:background="@drawable/ic_row_right" />

    </LinearLayout>
</LinearLayout>

布局效果如上面两个图

二、在values下建attrs文件

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <declare-styleable name="MyselfItemLayoutAttrs">
        <attr name="item_icon" format="reference"/>
        <attr name="item_title" format="string"/>
    </declare-styleable>

</resources>

item_icon 是item左边的图标resource
item_title是item的名称

三、自定义组件

MyselfItemLayout.java

package com.example.bisheapp.utils;

import android.content.Context;
import android.content.res.TypedArray;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

import androidx.annotation.Nullable;

import com.example.bisheapp.R;

/**
 * @FileName: MyselfItemLayout
 * @Author: LeslieD
 * @CreateDate: 2021/4/11 20:10
 * @UpdateUser:
 * @UpdateDate:
 * @UpdateRemark:
 * @Description:
 */
public class MyselfItemLayout extends LinearLayout {

    private TextView itemTitle;
    private ImageView itemIcon;

    private String str_item_title;
    private int int_item_icon;

    public MyselfItemLayout(Context context) {
        super(context);
    }

    public MyselfItemLayout(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        LayoutInflater.from(context).inflate(R.layout.item_fragment_myself, this);

        itemTitle = (TextView) findViewById(R.id.tv_item_title);
        itemIcon = (ImageView) findViewById(R.id.iv_item_icon);

        TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.MyselfItemLayoutAttrs);
        str_item_title = ta.getString(R.styleable.MyselfItemLayoutAttrs_item_title);
        int_item_icon = ta.getResourceId(R.styleable.MyselfItemLayoutAttrs_item_icon,R.drawable.icon_login);

        ta.recycle();

        itemTitle.setText(str_item_title);
        itemIcon.setImageResource(int_item_icon);
    }

    public void setItemTitle(String s){
        itemTitle.setText(s);
    }
}

下面三行代码用了获取属性名称，这样才能在xml文件中直接引用并进行设置。

TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.MyselfItemLayoutAttrs);
str_item_title = ta.getString(R.styleable.MyselfItemLayoutAttrs_item_title);
int_item_icon = ta.getResourceId(R.styleable.MyselfItemLayoutAttrs_item_icon,R.drawable.icon_login);

四、在布局中引用上面的自定义组件

<com.example.bisheapp.utils.MyselfItemLayout
    android:id="@+id/mil_login"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="2dp"
    app:item_title="登录 / 注册"
    app:item_icon="@drawable/icon_login"/>

最终效果


是不是有点像微信的个人界面，没错，就是照着wechat的样子设计的hhhhhhhhh。