Android——自定义组合控件及属性

组合控件是很常见的，没人会愿意一个相同控件组合去copy几十次。。。
很多很多次了，每次想去自定义一个组合控件去使用的时候，都把自己够的一脸懵逼，这次就好好做一个笔记，方便以后的查阅。

  • 第一步、先定义一个要常用的控件组
    （我这个就是一个标题栏的控件组，中间的标题栏，左边含有图片和文字，可以点击，右边同样如此）
<?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="48dp"
    android:background="@color/colorPrimary">

    <LinearLayout
        android:id="@+id/ll_left"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:clickable="true"
        android:orientation="horizontal"
        android:padding="10dp">

        <ImageView
            android:id="@+id/iv_leftDrawer"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@mipmap/ic_launcher_round"
            android:padding="12dp"
            android:scaleType="centerCrop" />

        <TextView
            android:id="@+id/tv_leftText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginLeft="5dp"
            android:text="返回"
            android:textColor="#ffffff"
            android:textSize="15sp" />
    </LinearLayout>

    <TextView
        android:id="@+id/tv_titleText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="标题"
        android:textColor="#ffffff"
        android:textSize="20sp" />

    <LinearLayout
        android:id="@+id/ll_right"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_alignParentEnd="true"
        android:clickable="true"
        android:orientation="horizontal"
        android:padding="10dp">

        <ImageView
            android:id="@+id/iv_rightDrawer"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@mipmap/ic_launcher_round"
            android:padding="12dp"
            android:scaleType="centerCrop" />

        <TextView
            android:id="@+id/tv_rightText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginLeft="5dp"
            android:text="管理"
            android:textColor="#ffffff"
            android:textSize="15sp" />
    </LinearLayout>
</RelativeLayout>
  • 第二步、抽象出自己想要的或说不定会改变的一些属性，比如左边的文字和图片是不是必须的，中间的标题是不是可以换标题等等。这些要写在res/values/目录下自建的attrs.xml下：
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="TitleLayout">
        <!--左边返回按键的图片，文字以及显示与否-->
        <attr name="leftDrawer" format="reference" />
        <attr name="leftText" format="string" />
        <attr name="leftIsShow" format="boolean" />
        <!--标题文字与显示与否-->
        <attr name="titleText" format="string" />
        <attr name="titleIsShow" format="boolean" />
        <!--标题栏右边图片文字以及显示与否-->
        <attr name="rightDrawer" format="reference" />
        <attr name="rightText" format="string" />
        <attr name="rightIsShow" format="boolean" />
    </declare-styleable>
</resources>
  • 第三步、继承LinearLayout（原因就是不需要去重写onMesue(),onLayout()和onDraw()方法了）。
package com.example.callphone;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.drawable.Drawable;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

/**
* Author:蔡小树
* Date:2017/8/8
* Time:13:53
* No bug!No bug!No bug!
*/

public class TitleLayout extends LinearLayout {

    private Drawable leftDrawer;//左边图片
    private String leftText;//左边文字
    private boolean leftIsShow;//左边控件组是否显示
    private String titleText;//中间标题文字
    private boolean titleIsShow;//中间标题是否显示
    private Drawable rightDrawer;//右边图片
    private String rightText;//右边文字
    private boolean rightIsShow;//右边控件组是否显示
    private final LinearLayout llLeft;//左边控件组
    private final ImageView ivLeftDrawer;//左边图片控件
    private final TextView tvLeftText;//左边文字控件
    private final TextView tvTitleText;//中间标题控件
    private final LinearLayout llRight;//右边控件组
    private final ImageView ivRightDrawer;//右边图片控件
    private final TextView tvRightText;//右边文字控件
    public static OnLeftLisenter mOnLeftLisenter;//左边控件组回调接口
    public static OnRightLisenter mOnRightLisenter;//右边控件组回调接口


    /**
     * 构造函数一定要使用这两个参数的，我是用血淋淋的教训得出的教训
     *
     * @param context Context上下文
     * @param attrs   就是我们定义的、抽象出来的属性集合
     */
    public TitleLayout(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
//        获取布局文件
        LayoutInflater.from(context).inflate(R.layout.layout_title, this, true);
//        获取自定义属性的集合
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.TitleLayout);
        if (typedArray != null) {
//            图片获取就使用getDrawable()
            leftDrawer = typedArray.getDrawable(R.styleable.TitleLayout_leftDrawer);
            leftText = typedArray.getString(R.styleable.TitleLayout_leftText);
            leftIsShow = typedArray.getBoolean(R.styleable.TitleLayout_leftIsShow, false);

            titleText = typedArray.getString(R.styleable.TitleLayout_titleText);
            titleIsShow = typedArray.getBoolean(R.styleable.TitleLayout_titleIsShow, false);

            rightDrawer = typedArray.getDrawable(R.styleable.TitleLayout_rightDrawer);
            rightText = typedArray.getString(R.styleable.TitleLayout_rightText);
            rightIsShow = typedArray.getBoolean(R.styleable.TitleLayout_rightIsShow, false);
//            记得销毁不必要的消耗
            typedArray.recycle();
        }

//        处理左边控件组合的事务
        llLeft = (LinearLayout) findViewById(R.id.ll_left);
        ivLeftDrawer = (ImageView) findViewById(R.id.iv_leftDrawer);
        tvLeftText = (TextView) findViewById(R.id.tv_leftText);
//        判断是否要显示左边控件组
//        使用Gone的原因就是为了不让控件占地方，不能让不显示的控件占地方把别的控件给挤掉了
        if (leftIsShow) {
            llLeft.setVisibility(VISIBLE);
            if (leftDrawer != null) {
                ivLeftDrawer.setVisibility(VISIBLE);
                ivLeftDrawer.setImageDrawable(leftDrawer);
            } else {
                ivLeftDrawer.setVisibility(GONE);
            }
            if (leftText != null) {
                tvLeftText.setVisibility(VISIBLE);
                tvLeftText.setText(leftText);
            } else {
                tvLeftText.setVisibility(GONE);
            }
        } else {
            llLeft.setVisibility(GONE);
        }
//        左边控件组的点击事件
        llLeft.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View view) {
                mOnLeftLisenter.setOnLeftLisenter();
            }
        });

//        处理中间标题的事务
        tvTitleText = (TextView) findViewById(R.id.tv_titleText);
        if (titleIsShow) {
            tvLeftText.setVisibility(VISIBLE);
            if (titleText != null) {
                tvTitleText.setVisibility(VISIBLE);
                tvTitleText.setText(titleText);
            } else {
                tvTitleText.setVisibility(GONE);
            }
        } else {
            tvTitleText.setVisibility(GONE);
        }

//        处理右边控件组的事务
        llRight = (LinearLayout) findViewById(R.id.ll_right);
        ivRightDrawer = (ImageView) findViewById(R.id.iv_rightDrawer);
        tvRightText = (TextView) findViewById(R.id.tv_rightText);
        if (rightIsShow) {
            llRight.setVisibility(VISIBLE);
            if (rightDrawer != null) {
                ivRightDrawer.setVisibility(VISIBLE);
                ivRightDrawer.setImageDrawable(rightDrawer);
            } else {
                ivRightDrawer.setVisibility(GONE);
            }
            if (rightText != null) {
                tvRightText.setVisibility(VISIBLE);
                tvRightText.setText(rightText);
            } else {
                tvRightText.setVisibility(GONE);
            }
        } else {
            llRight.setVisibility(GONE);
        }
//        右边控件组的点击事件
        llRight.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View view) {
                mOnRightLisenter.setOnRightLisenter();
            }
        });
    }

    /**
     * 定义左边控件组的回调接口
     */
    public interface OnLeftLisenter {
        void setOnLeftLisenter();
    }

    /**
     * 实现回调接口的方法
     *
     * @param onLeftLisenter 回调接口的实例
     */
    public void setOnLeftLisenter(OnLeftLisenter onLeftLisenter) {
        mOnLeftLisenter = onLeftLisenter;
    }

    /**
     * 定义右边控件组的回调接口
     */
    public interface OnRightLisenter {
        void setOnRightLisenter();
    }

    /**
     * 实现回调接口的方法
     *
     * @param onRightLisenter 回调接口的实例
     */
    public void setOnRightLisenter(OnRightLisenter onRightLisenter) {
        mOnRightLisenter = onRightLisenter;
    }

}
  • 第四步、布局文件中的使用
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="[http://schemas.android.com/apk/res/android"](http://schemas.android.com/apk/res/android%22);;
    xmlns:app="[http://schemas.android.com/apk/res-auto"](http://schemas.android.com/apk/res-auto%22);;
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <com.example.callphone.TitleLayout
        android:id="@+id/title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:leftIsShow="true"
        app:leftText="返回"
        app:rightIsShow="false"
        app:titleIsShow="true"
        app:titleText="打电话" />

</LinearLayout>
  • 第五步、Activity中的实现
//获取控件的实例
TitleLayout titleLayout = (TitleLayout) findViewById(R.id.title);

//控件的回调接口的实现
titleLayout.setOnLeftLisenter(new TitleLayout.OnLeftLisenter() {
    @Override
    public void setOnLeftLisenter() {
        Toast.makeText(MainActivity.this, "Left", Toast.LENGTH_SHORT).show();
    }
});
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容