为了将某些公用的View抽取成通用的View,我们需要用到自定义View,而且一般情况下,为了方便快捷,我们需要在布局文件中就设置好值,所以我们需要学会运用属性
。接下来就让我们一起进入实战演练一番吧!
案例:比如说我们编写一个ShopCheckItem类,继承于RelativeLayout,用来作为自定义的View,那么我们需要执行以下几个步骤:
编写布局文件
首先我们需要编写布局文件,不要问为什么,自定义View的办法有很多种,本文只讲这种办法,慢慢看你就懂了!
<?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="wrap_content"
android:paddingLeft="20dp"
android:paddingRight="20dp">
<com.showjoy.view.SHIconFontTextView
android:id="@+id/view_shop_check_item_icon"
android:layout_width="32dp"
android:layout_height="32dp"/>
<TextView
android:id="@+id/view_shop_check_item_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="5dp"
android:layout_toRightOf="@id/view_shop_check_item_icon"
android:textColor="@color/black"
android:textSize="16sp" />
<ImageView
android:id="@+id/view_shop_check_item_selected"
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_alignParentRight="true"/>
</RelativeLayout>
自定义属性
接着根据布局,发现我们需要这样一些属性,如:icon、name、selected。于是我们就可以在styles.xml文件中编写自定义的属性了,具体代码如下所示:
<declare-styleable name="ShopCheckItem">
<attr name="shop_check_item_icon" format="string" />
<attr name="shop_check_item_name" format="string" />
<attr name="shop_check_item_name_color" format="color" />
<attr name="shop_check_item_selected" format="boolean" />
</declare-styleable>
自定义View
编写好属性后,我们就可以开始自定义view的编写了,一般包括以下几个步骤:
使用inflate方式将布局转换为View
找到布局文件中得控件即findViewById
获取在布局文件中自定义属性的值
根据自定义属性的值初始化控件
暴露接口
注意:接口不一定是interface,只要是提供给别人用的,就算是一个public方法也是接口,如果不清楚,可以查看这篇文章:接口回调
所以,完整代码如下所示:
package com.showjoy.shop.common.view;
import android.content.Context;
import android.content.res.TypedArray;
import android.text.TextUtils;
import android.util.AttributeSet;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.TextView;
import com.showjoy.shop.R;
import com.showjoy.view.SHIconFontTextView;
/**
* Created by qingfeng on 7/20/16.
*/
public class ShopCheckItem extends RelativeLayout {
private SHIconFontTextView viewShopCheckItemIcon;
private TextView viewShopCheckItemName;
private ImageView viewShopCheckItemSelected;
public ShopCheckItem(Context context) {
super(context);
init(context, null);
}
public ShopCheckItem(Context context, AttributeSet attrs) {
super(context, attrs);
init(context, attrs);
}
public ShopCheckItem(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init(context, attrs);
}
private void init(Context context, AttributeSet attrs) {
inflate(context, R.layout.view_pay_method, this);
viewShopCheckItemIcon = (SHIconFontTextView) findViewById(R.id.view_shop_check_item_icon);
viewShopCheckItemName = (TextView) findViewById(R.id.view_shop_check_item_name);
viewShopCheckItemSelected = (ImageView) findViewById(R.id.view_shop_check_item_selected);
if (null != attrs) {
TypedArray typeArray = context.obtainStyledAttributes(attrs, R.styleable.ShopCheckItem);
String icon = typeArray.getString(R.styleable.ShopCheckItem_shop_check_item_icon);
if (!TextUtils.isEmpty(icon)) {
viewShopCheckItemIcon.setText(icon);
}
String name = typeArray.getString(R.styleable.ShopCheckItem_shop_check_item_name);
if (!TextUtils.isEmpty(name)) {
viewShopCheckItemName.setText(name);
}
int color = typeArray.getColor(R.styleable.ShopCheckItem_shop_check_item_name_color,
context.getResources().getColor(R.color.grey5));
viewShopCheckItemName.setTextColor(color);
boolean selected = typeArray.getBoolean(R.styleable.ShopCheckItem_shop_check_item_selected, false);
if (selected) {
viewShopCheckItemSelected.setImageResource(R.mipmap.view_shop_check_item_selected);
} else {
viewShopCheckItemSelected.setImageResource(R.drawable.view_shop_check_item_unselected);
}
typeArray.recycle();
}
}
public void setSelected(boolean selected) {
if (selected) {
viewShopCheckItemIcon.setTextColor(getContext().getResources().getColor(R.color.black));
viewShopCheckItemName.setTextColor(getContext().getResources().getColor(R.color.black));
viewShopCheckItemSelected.setImageResource(R.mipmap.view_shop_check_item_selected);
} else {
viewShopCheckItemIcon.setTextColor(getContext().getResources().getColor(R.color.grey5));
viewShopCheckItemName.setTextColor(getContext().getResources().getColor(R.color.grey5));
viewShopCheckItemSelected.setImageResource(R.drawable.view_shop_check_item_unselected);
}
}
}
总结
是不是很简单,自定义View就是这么简单,当然自定义View不止这么一种方式咯,大家可以自行探索,然后在下方评论区域告诉我,蟹蟹~😄