Android组合布局

项目开发中个人中心和设置界面基本都类似图1和图2这种布局。这里可能很多人会采用ctrl + c或者ctrl+v的方式实现每个item。这样的代码臃肿，是不易维护。对于这类布局建议采用Recycleview或者组合布局的方式实现。

pic1.png pic2.png

这里讲下组合布局的实现方式。

开始

组合布局是自定义View里面最简单的一种实现方式了。首先当然还是画下item的布局文件了

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:background="@color/theme_white"
    android:gravity="center_vertical"
    android:paddingLeft="@dimen/theme_padding">

    <ImageView
        android:id="@+id/left_iv"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:src="@mipmap/icon_left_iv" />

    <TextView
        android:id="@+id/name_tv"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_marginLeft="@dimen/theme_pad"
        android:layout_toRightOf="@+id/left_iv"
        android:gravity="center"
        android:text="我的客户"
        android:textColor="@color/theme_text" />

    <ImageView
        android:id="@+id/right_iv"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_alignParentRight="true"
        android:layout_marginRight="@dimen/theme_padding_big"
        android:src="@mipmap/icon_enter" />

    <TextView
        android:id="@+id/info_tv"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_toLeftOf="@+id/right_iv"
        android:gravity="center"
        android:text="小王子"
        android:textSize="@dimen/theme_text_small"
        android:layout_marginRight="@dimen/theme_padding"
        android:textColor="@color/theme_text_grey" />
    <View
        android:id="@+id/bottom_line"
        style="@style/ViewStyle"
        android:layout_alignParentBottom="true" />


</RelativeLayout>

预览图如下：

pic3.png

接下来就是自定义一些属性了，这里我们主要使用的属性如下：

<declare-styleable name="SetEnterView">
    <attr name="left_text" format="string" />
    <attr name="left_text_color" format="color" />
    <attr name="left_icon" format="reference" />
    <attr name="right_icon" format="reference" />
    <attr name="show_bottom_line" format="boolean"/>
    <attr name="show_left_icon" format="boolean" />
    <attr name="info_text" format="string"/>
    <attr name="show_info" format="boolean" />
</declare-styleable>

最后代码部分如下：

public class SetEnterView extends RelativeLayout {


    private TextView nameTv;

    public SetEnterView(Context context) {
        super(context);
//        init(context,null);
    }

    public SetEnterView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context,attrs);
    }

    public SetEnterView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context,attrs);
    }

    private void init(Context context, AttributeSet attrs) {
        //第三个参数：是否添加到父布局上
        View view = LayoutInflater.from(context).inflate(R.layout.view_set_enter, this, true);
        ImageView leftIv = (ImageView) view.findViewById(R.id.left_iv);
        ImageView rightIv = (ImageView) view.findViewById(R.id.right_iv);
        nameTv = (TextView) view.findViewById(R.id.name_tv);
        TextView infoTv = (TextView) view.findViewById(R.id.info_tv);
        View bottomLine = view.findViewById(R.id.bottom_line);
        //获取自定义的属性
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.SetEnterView, 0, 0);
        int leftIcon = typedArray.getResourceId(R.styleable.SetEnterView_left_icon, 0);
        int rightIcon = typedArray.getResourceId(R.styleable.SetEnterView_right_icon, 0);
        String leftText = typedArray.getString(R.styleable.SetEnterView_left_text);
        String infoText = typedArray.getString(R.styleable.SetEnterView_info_text);
        int color = typedArray.getColor(R.styleable.SetEnterView_left_text_color, Color.GRAY);
        boolean isShowBottomView = typedArray.getBoolean(R.styleable.SetEnterView_show_bottom_line, true);
        boolean isShowLeftIcon = typedArray.getBoolean(R.styleable.SetEnterView_show_left_icon, true);
        boolean isShowInfo = typedArray.getBoolean(R.styleable.SetEnterView_show_info, true);
        typedArray.recycle();
        //设置
        leftIv.setImageResource(leftIcon);
        rightIv.setImageResource(rightIcon);
        nameTv.setText(leftText);
        infoTv.setText(infoText);
        nameTv.setTextColor(color);
        bottomLine.setVisibility(isShowBottomView?VISIBLE:GONE);
        leftIv.setVisibility(isShowLeftIcon?VISIBLE:GONE);
        infoTv.setVisibility(isShowInfo?VISIBLE:GONE);
    }

    public void setLeftText(String leftText){
        nameTv.setText(leftText);
    }
}

使用

应用以上自定义view就可以避免一堆xml的复制和粘贴了。如下：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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="com.jlkf.oidemo.home.activity.SetEnterActivity">

    <com.oidemo.home.widget.SetEnterView
        android:id="@+id/name_sev"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:left_icon="@mipmap/icon_left_iv"
        app:left_text="标题文字"
        app:right_icon="@mipmap/icon_enter"
        app:left_text_color="@color/theme_focus"
        app:show_bottom_line="false" />

</android.support.constraint.ConstraintLayout>