Android-自定义控件开发

Android中所有控件和布局的基类都是View，自定义控件也就是继承View或者View的派生类，然后再重写类中的内部方法。

通常来说自定义控件分为三种：1.自定义View：继承View2.基于现有组件：继承View的派生类3.组合的方式：自定义控件中包含了其他的组件

三种方式对于新手的学习难度来说，自定义view为最难的，组合的方式相对来说更简单，大多数情况下组合的方式是为了避免重复布局，简化页面代码。今天就最简单的组合方式实践使用下。

看一下项目需求，需要构建一种菜单列表，如图：

当我们构建这样的菜单列表，不必每一个item在布局里都重写一次，可以提取相同的元素，将单个菜单项目封装成控件，需要时直接引用即可。思路：分析一下布局中的元素，左边的icon，左边的titleText，右边的hintText，右边的icon，分割线等。抽取出相同的部分，不同的部分通过自定义样式类型来区分，实现最大程度上的复用。完全符合使用组合方式的自定义view。接下来就是代码实现了。1.定义组件布局：按需求编写出所有对应布局，包含所有元素

<LinearLayout xmlns:android="/apk/res/android"xmlns:tools="/tools"android:id="@+id/menu_item_layout"android:layout_width="match_parent"android:layout_height="wrap_content"android:background="@android:color/white"android:orientation="vertical"><Viewandroid:id="@+id/divide_line_view"android:layout_width="match_parent"android:layout_height="0.5dp"android:layout_marginLeft="49.5dp"android:background="@color/divide"android:visibility="gone" /><Viewandroid:id="@+id/divide_area_view"android:layout_width="match_parent"android:layout_height="10dp"android:background="@color/main_bg"android:visibility="gone" /><LinearLayoutandroid:layout_width="match_parent"android:layout_height="50dp"android:background="@android:color/white"android:gravity="center_vertical"android:orientation="horizontal"android:paddingLeft="15dp"android:paddingRight="15dp"><ImageViewandroid:id="@+id/menu_item_icon_img"android:layout_width="24dp"android:layout_height="24dp" /><TextViewandroid:id="@+id/menu_item_text"android:layout_width="0dp"android:layout_height="wrap_content"android:layout_marginLeft="10.5dp"android:layout_weight="1"android:textColor="#333333"android:gravity="center_vertical"android:textSize="15sp"tools:text="标题文字" /><TextViewandroid:id="@+id/menu_item_text_hint"android:layout_width="wrap_content"android:layout_height="wrap_content"android:textColor="@color/mc_txt_gray_bg"android:textSize="13sp"android:layout_marginRight="10dp"tools:text="提示文字" /><ImageViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:src="@mipmap/icon_right" /></LinearLayout></LinearLayout>

2.继承FrameLayout，复写三个构造函数。

2.1.读取布局文件中的属性参数（见init方法）：如果在布局中传入了自定义的参数，可以在构造函数中从AttributeSet读取并设置给控件。2.2.在MenuItemLayout中找到了所有的控件并初始化它们，分割线样式设置了三种：白色区域、灰色分割线、以及无样式。onclickId是为了给动态生成的布局设置点击事件，根据属性来控制控件的显示。

public class MenuItemLayout extends FrameLayout {private Context mContext;private View mView;private TextView titleTv;private TextView hintTv;private ImageView iconImg;private OnClickListener onClickListener;private String titleText;private String hintText;private String iconImgUri;private String jumpUrl;private int iconImgId;private String onclickId;public static final int NO_LINE = 0;public static final int DIVIDE_LINE = 1;public static final int DIVIDE_AREA = 2;public int divideLineStyle = NO_LINE;private boolean isShowRedHintImg = false;public int getIconImgId() {return iconImgId;}public void setIconImgId(int iconImgId) {if (iconImgId != 10000) {this.iconImgId = iconImgId;iconImg.setImageResource(iconImgId);}}public String getTitleText() {return titleText;}public void setTitleText(String titleText) {if (titleText != null) {this.titleText = titleText;titleTv.setText(titleText);}}public String getHintText() {return hintText;}public void setHintText(String hintText) {if (hintText != null) {this.hintText = hintText;hintTv.setText(hintText);}}public boolean isShowRedHintImg() {return isShowRedHintImg;}public String getJumpUrl() {return jumpUrl;}public void setJumpUrl(String jumpUrl) {if (jumpUrl != null) {this.jumpUrl = jumpUrl;}}public String getOnclickId() {return onclickId;}public void setOnclickId(String onclickId) {this.onclickId = onclickId;}public MenuItemLayout(Context context) {this(context, null);}public MenuItemLayout(Context context, AttributeSet attrs) {this(context, attrs, 0);}public MenuItemLayout(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);init(context, attrs);}private void init(Context context, AttributeSet attrs) {mContext = context;LayoutInflater inflater = (LayoutInflater) mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);mView = inflater.inflate(R.layout.mine_menu_item, this, true);titleTv = mView.findViewById(R.id.menu_item_text);hintTv = mView.findViewById(R.id.menu_item_text_hint);iconImg = mView.findViewById(R.id.menu_item_icon_img);TypedArray a = mContext.obtainStyledAttributes(attrs, R.styleable.MenuItemLayout);setTitleText(a.getString(R.styleable.MenuItemLayout_title_text));setHintText(a.getString(R.styleable.MenuItemLayout_hint_text));setIconImgId(a.getResourceId(R.styleable.MenuItemLayout_icon_reference, 10000));setJumpUrl(a.getString(R.styleable.MenuItemLayout_jump_url));divideLineStyle = a.getInt(R.styleable.MenuItemLayout_divide_line_style, NO_LINE);setDivideLine(divideLineStyle);}public void setDivideLine(int bootomLineStyle) {View lineView = findViewById(R.id.divide_line_view);View areaView = findViewById(R.id.divide_area_view);lineView.setVisibility(GONE);areaView.setVisibility(GONE);if (bootomLineStyle == DIVIDE_LINE) {lineView.setVisibility(VISIBLE);} else if (bootomLineStyle == DIVIDE_AREA) {areaView.setVisibility(VISIBLE);}}public void setViewOnlickListener(OnClickListener onlickListener) {this.onClickListener = onlickListener;mView.setOnClickListener(onlickListener);}public TextView getTitleTv() {return titleTv;}public TextView getHintTv() {return hintTv;}}

3.在布局中引用MenuItemLayout：

<LinearLayout xmlns:android="/apk/res/android"xmlns:app="/apk/res-auto"xmlns:tools="/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"tools:context=".MainActivity"><com.example.muquanying.myapplication.view.MenuItemLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"app:divide_line_style="0"app:hint_text="ID：82542"app:icon_reference="@mipmap/ic_launcher"app:title_text="门店管理" /><com.example.muquanying.myapplication.view.MenuItemLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"app:divide_line_style="1"app:icon_reference="@mipmap/ic_launcher"app:title_text="常用小区管理" /><com.example.muquanying.myapplication.view.MenuItemLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"app:divide_line_style="1"app:icon_reference="@mipmap/ic_launcher"app:title_text="员工管理" /><com.example.muquanying.myapplication.view.MenuItemLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"app:divide_line_style="1"app:icon_reference="@mipmap/ic_launcher"app:title_text="产品管理" /></LinearLayout>

运行一下效果图：

组合式的方式无非就是减少重复的代码，将几种已有的控件组合成新控件，形成新的效果，写起来简单，好理解，后期修改和维护都比较麻烦，不够灵活。