效果
其中个人信息,修改密码,切换账户,登录/注册四个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。