版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
日常生活中我们使用微信、QQ、微博等都会看到很多条目item，效果如下：
其实它是通过组合控件将textView和ImgView组合起来作为一个新的view:
1.在value文件夹下的attr文件加入我们自定义的属性声明
<declare-styleable name="MenuItemView">
<!--布局中左边的icon-->
<attr name="leftIcon" format="reference"/>
<!--布局中右边的icon-->
<attr name="rightIcon" format="reference"/>
<!--布局中的文字-->
<attr name="text"/>
<!--文字的大小-->
<attr name="textSize"/>
<!--文字的颜色-->
<attr name="leftTextColor" format="color"/>
<attr name="rightTextColor" format="color"/>
</declare-styleable>2.自定义我们的view
public class MenuItemView extends RelativeLayout {
ImageView iconLeft;
ImageView iconRight;
TextView menuTextLeft;
public MenuItemView(Context context, AttributeSet attrs) {
super(context, attrs);
init(context, attrs);
}
public MenuItemView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init(context, attrs);
}
private void init(Context context, AttributeSet attrs) {
inflate(context, R.layout.menuitem_layout, this);
iconLeft = getView(R.id.icon_left);
iconRight = getView(R.id.icon_right);
menuTextLeft = getView(R.id.menu_text_left);
//解析attr文件
TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.MenuItemView);
//获取文字颜色
int rightTextColor = ta.getColor(R.styleable.MenuItemView_rightTextColor, Color.GRAY);
int leftTextColor = ta.getColor(R.styleable.MenuItemView_leftTextColor, Color.BLACK);
menuTextLeft.setTextColor(leftTextColor);
float textSize = ta.getDimension(R.styleable.MenuItemView_textSize, getResources().getDimension(R.dimen.default_text_size));
menuTextLeft.setTextSize(TypedValue.COMPLEX_UNIT_PX, textSize);
//获取左侧图标
int leftIconId = ta.getResourceId(R.styleable.MenuItemView_leftIcon, R.mipmap.icon0);
iconLeft.setImageResource(leftIconId);
//获取右侧图标
int rightIconId = ta.getResourceId(R.styleable.MenuItemView_rightIcon, R.mipmap.icon_right);
iconRight.setImageResource(rightIconId);
String text = ta.getString(R.styleable.MenuItemView_text);
if (text != null) {
menuTextLeft.setText(text);
}
ta.recycle();
}
public CharSequence getMenuTextLeft() {
return menuTextLeft.getText();
}
public void setMenuTextLeft(String text) {
menuTextLeft.setText(text);
}
public <T extends View> T getView(int id) {
return (T) findViewById(id);
}
}
view对应的xml文件，很简单的布局
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="54dp"
android:orientation="vertical"
android:padding="4dp">
<ImageView
android:id="@+id/icon_left"
android:layout_width="50dp"
android:layout_height="50dp"
android:contentDescription="iconLeft"
android:padding="8dp"
android:scaleType="fitCenter"
android:src="@mipmap/icon1" />
<TextView
android:id="@+id/menu_text_left"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginLeft="4dp"
android:layout_toRightOf="@id/icon_left"
android:ellipsize="end"
android:ems="10"
android:gravity="center_vertical"
android:lines="1"
tools:text="蚂蚁花呗" />
<ImageView
android:id="@+id/icon_right"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:contentDescription="iconRight"
android:padding="10dp"
android:src="@mipmap/icon_right" />
</RelativeLayout>3. 最后在我们的Activity.xml中引入我们的view
<?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"
android:divider="@drawable/divider"
android:orientation="vertical"
android:showDividers="middle|end"
tools:context="com.example.fdm.customviewdemo.MainActivity">
<com.example.administrator.myapplication.MenuItemView
android:id="@+id/menu"
android:layout_width="match_parent"
android:layout_height="44dp"
app:leftIcon="@mipmap/one"
app:text="个人信息"
app:textSize="18sp" />
<com.example.administrator.myapplication.MenuItemView
android:id="@+id/menu1"
android:layout_width="match_parent"
android:layout_height="44dp"
app:leftIcon="@mipmap/two"
app:text="问题反馈"
app:textSize="18sp" />
<com.example.administrator.myapplication.MenuItemView
android:id="@+id/menu2"
android:layout_width="match_parent"
android:layout_height="44dp"
app:leftIcon="@mipmap/three"
app:text="联系客服"
app:textSize="18sp" />
<com.example.administrator.myapplication.MenuItemView
android:id="@+id/menu3"
android:layout_width="match_parent"
android:layout_height="44dp"
app:leftIcon="@mipmap/four"
app:rightTextColor="@color/colorAccent"
app:text="我的留言"
app:textSize="18sp" />
<com.example.administrator.myapplication.MenuItemView
android:id="@+id/menu4"
android:layout_width="match_parent"
android:layout_height="44dp"
app:leftIcon="@mipmap/five"
app:text="滴水公益"
app:textSize="18sp" />
<com.example.administrator.myapplication.MenuItemView
android:id="@+id/menu5"
android:layout_width="match_parent"
android:layout_height="44dp"
app:leftIcon="@mipmap/six"
app:text="今日话题 "
app:textSize="18sp" />
</LinearLayout>
至于图标的话可以去阿里巴巴矢量图标库找