Android 代码设置自定义组件属性 android自定义组件开发

前言

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

通常来说自定义控件分为三种：

1.自定义View：继承View

2.基于现有组件：继承View的派生类

3.组合的方式：自定义控件中包含了其他的组件

下图体现了各种控件的继承关系：

View派生类.png

来实践一下

有一个需求是这样的，需要在页面中构建一种菜单列表，菜单单个项目如图所示：

item.png

当我们构建这样的菜单列表，不必每一个item在布局里都重写一次，可以提取相同的元素，将单个项目封装成控件，需要时直接引用即可。

思路:

分析一下布局中的元素，左边的icon，左边的titleText，右边的hintText，右边的icon，分割线等。抽取出相同的部分，不同的部分通过自定义样式类型来区分，实现最大程度上的复用。我使用第三种组合的方式来编写。

1.定义组件布局：

按需求编写出对应布局，包含了所有元素

xmlns:fresco="http://schemas.android.com/apk/res-auto"

xmlns:tools="http://schemas.android.com/tools"

android:id="@+id/menu_item_layout"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:background="@color/white"

android:orientation="vertical">

android: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" />

android:id="@+id/divide_area_view"

android:layout_width="match_parent"

android:layout_height="10dp"

android:background="@color/main_bg"

android:visibility="gone" />

android:layout_width="match_parent"

android:layout_height="50dp"

android:background="@drawable/ripple_with_mask"

android:gravity="center_vertical"

android:orientation="horizontal"

android:paddingLeft="15dp"

android:paddingRight="15dp">

android:id="@+id/menu_item_icon_img"

android:layout_width="24dp"

android:layout_height="24dp" />

android:id="@+id/menu_item_text"

android:layout_width="0dp"

android:layout_height="wrap_content"

android:layout_marginLeft="10.5dp"

android:layout_weight="1"

android:gravity="center_vertical"

android:textSize="15sp"

tools:text="标题文字" />

android: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="提示文字" />

android:id="@+id/menu_item_red_hint"

android:layout_width="10dp"

android:layout_height="10dp"

android:layout_marginRight="10dp"

android:src="@drawable/msg_red"

android:visibility="gone" />

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:src="@drawable/arrow_right" />

1.1.color.xml:

#ffffff

#e6ebf0

#F3F3F3

#a6a6a6

#19333333

1.2.attrs.xml:

1.3.红点图片msg_red.png和箭头图标arrow_right.png

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

2.1.读取布局文件中的属性参数(见init方法)：

如果在布局中传入了自定义的参数，可以在构造函数中从AttributeSet读取并设置给控件。

2.2.在MenuItemLayout中找到了所有的控件并初始化它们，分割线样式设置了三种：白色区域、灰色分割线、以及无样式。onclickId是为了给动态生成的布局设置点击事件，根据属性来控制控件的显示。

package com.example.tianxiying.mytestapplication;

import android.content.Context;

import android.content.res.TypedArray;

import android.util.AttributeSet;

import android.view.LayoutInflater;

import android.view.View;

import android.widget.FrameLayout;

import android.widget.ImageView;

import android.widget.TextView;

/**

* Created by tianxiying on 2018/3/1.

*/

public class MenuItemLayout extends FrameLayout {

private Context mContext;

private View mView;

private TextView titleTv;

private TextView hintTv;

private ImageView redHintImg;

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 void setShowRedHintImg(boolean showRedHintImg) {

isShowRedHintImg = showRedHintImg;

redHintImg.setVisibility(showRedHintImg ? VISIBLE : GONE);

}

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.item_menu_layout, this, true);

titleTv = (TextView) mView.findViewById(R.id.menu_item_text);

hintTv = (TextView) mView.findViewById(R.id.menu_item_text_hint);

iconImg = (ImageView) mView.findViewById(R.id.menu_item_icon_img);

redHintImg = (ImageView) mView.findViewById(R.id.menu_item_red_hint);

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：

创建MainActivity为应用的入口，修改activity_main.xml代码：

在布局中我随便写了几个菜单作为参考，菜单项目可以再布局中写，也可以在代码中动态生成然后添加进布局中(可以支持后台动态配置)。

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:orientation="vertical"

android:background="@color/main_bg"

tools:context="com.example.tianxiying.mytestapplication.MainActivity">

android:layout_width="match_parent"

android:layout_height="wrap_content"

app:divide_line_style="0"

app:icon_reference="@mipmap/ic_launcher"

app:title_text="个人中心" />

android:layout_width="match_parent"

android:layout_height="wrap_content"

app:divide_line_style="1"

app:icon_reference="@mipmap/ic_launcher"

app:hint_text="查看收藏过的书签"

app:title_text="我的收藏" />

android:layout_width="match_parent"

android:layout_height="wrap_content"

app:divide_line_style="1"

app:icon_reference="@mipmap/ic_launcher"

app:hint_text="我关注过的人在这里"

app:title_text="我的关注" />

android:layout_width="match_parent"

android:layout_height="wrap_content"

app:divide_line_style="2"

app:icon_reference="@mipmap/ic_launcher"

app:hint_text="有什么问题点这里"

app:title_text="我的客服" />

android:layout_width="match_parent"

android:layout_height="wrap_content"

app:divide_line_style="1"

app:icon_reference="@mipmap/ic_launcher"

app:title_text="设置" />

运行起来如图所示：

运行图.png

结尾：

以上只是组合自定义控件的一个简单的例子，目的在于叙述自定义控件的方法和思路，如果想要更多的效果可以重写组件的onMeasure、onLayout、onDraw来实现。