抬头图片.jpg
前言
近期从一个小公司辞职了，决定复习下之前学习过的内容。所以发布一篇自定义控件的文章，加深自己的印象，也同时为以后再找工作做准备。废话不多说，现在开始。
自定义控件介绍
Android当中自定义控件的开发，Android中所有的控件都是继承View类。以下图片是各控件继承关系图
4115762-ec0d29c74a7935a2.jpg
其实所谓的自定义控件其实就是继承View类，并且重写里面的内部方法。通常来说，自定义控件有三种方式：
1.自定义View: 继承View。
2.基于现有的组件：继承View的派生类。
3.组合的方式：自定义控件中包含其他组件。
今天呢，我们就来介绍一下组合的方式实现自定义View，其他两种方式等待小编再学习学习之后再发表。
实践
说再多的理论不如实践来得实在，一下是从网上下载的一张设计图。
timg.jpg
分析
如果我们要实现这种界面，看起来是挺简单的，也不用怎么自定义，但是相对于有部分人想偷懒的人来说（为了长远方便发展）。还是自定义一下好一点，这样，当我们再别的布局文件中还需要用到的话，直接当控件使用就好。是不是很方便？？
其实说白了呢，就是把下图自定义成一个控件，之后用到的时候直接当控件使用就好。
Item_20191007202538.jpg
实现的思路其实也挺简单，自定义一个组合的View，线性布局横向包裹，依次排列ImageView、TextView、TextView、ImageView。废话不多说，看下如何实现吧。
1.定义自定义控件布局(custom_item_view)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<!-- 线性布局水平对齐包裹-->
<LinearLayout
android:id="@+id/setting_item"
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="#ffffff"
android:padding="5dp"
android:orientation="horizontal">
<!-- 自定义控件中第一个图片-->
<ImageView
android:id="@+id/setting_item_logo"
android:layout_width="wrap_content"
android:layout_height="match_parent"/>
<!-- 自定义控件中标题-->
<TextView
android:id="@+id/setting_item_title"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginLeft="5dp"
android:gravity="center"
android:textColor="#000000"
android:textSize="18sp"/>
<!-- 为了实现，用一个TextView将后边的控件显示在右边
也可以用RelativeLayout实现-->
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<!-- 自定义控件中概述-->
<TextView
android:id="@+id/setting_item_desc"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginRight="5dp"
android:gravity="center"
android:textColor="#999999"
android:textSize="15sp"/>
<!-- 自定义控件中第二个图片-->
<ImageView
android:id="@+id/setting_item_more"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"/>
</LinearLayout>
<!-- 自定义控件中下划线-->
<View
android:id="@+id/setting_item_line"
android:layout_width="match_parent"
android:layout_height="1px"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:background="#888888"/>
</LinearLayout>
2.新建一个attrs.XML文件设置自定义控件属性
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="CustomSettingItemView">
<!-- Item标题-->
<attr name="settingItemTitle" format="string"/>
<!-- Item描述-->
<attr name="settingItemDesc" format="string"/>
<!-- 第一张图片-->
<attr name="settingLogoSrc" format="reference"/>
<!-- 第二张图片-->
<attr name="settingMoreSrc" format="reference"/>
<!-- 下划线显示与否-->
<attr name="settingItemUnderLineVisibility" format="boolean"/>
</declare-styleable>
</resources>
3.继承FrameLayout，复写构造函数
读取布局文件中的属性参数（见init方法）：
如果在布局中传入了自定义的参数，可以在构造函数中从AttributeSet读取并设置给控件。
package com.example.customview_setting_item.customView;
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.LinearLayout;
import android.widget.TextView;
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import com.example.customview_setting_item.R;
/**
* Create by 25497 on 2019/10/6
* The project name is CustomView-setting_item
* Leo Mark
*
* Desc: 自定义控件（继承FrameLayout）
**/
public class CustomSettingItemView extends FrameLayout {
private Context mContext;
private View mainView;
private LinearLayout settingItem;
private ImageView settingItemLogo;//第一张图片
private ImageView settingItemMore;//第二张图片
private TextView settingItemTitle;//标题
private TextView settingItemDesc;//概述
private View settingItemUnderLine;//下划线
private String settingItemTitleText;//标题内容
private String settingItemDescText;//概述内容
private int settingItemLogoSrc;//第一张图片路径
private int settingItemMoreSrc;//第二张图片路径
private boolean settingItemLineVisibility;//下划线显示与否判断
public String getSettingItemTitleText() {
return settingItemTitleText;
}
public void setSettingItemTitleText(String settingItemTitleText) {
if (settingItemTitleText!=null){
this.settingItemTitleText = settingItemTitleText;
settingItemTitle.setText(settingItemTitleText);//将内容设置进控件中
}
}
public String getSettingItemDescText() {
return settingItemDescText;
}
public void setSettingItemDescText(String settingItemDescText) {
if (settingItemDescText!=null) {
this.settingItemDescText = settingItemDescText;
settingItemDesc.setText(settingItemDescText);//将内容设置进控件中
}
}
public int getSettingItemLogoSrc() {
return settingItemLogoSrc;
}
public void setSettingItemLogoSrc(int settingItemLogoSrc) {
if (settingItemLogoSrc!=10000) {
this.settingItemLogoSrc = settingItemLogoSrc;
settingItemLogo.setImageResource(settingItemLogoSrc);//将图片地址设置进控件中
}
}
public int getSettingItemMoreSrc() {
return settingItemMoreSrc;
}
public void setSettingItemMoreSrc(int settingItemMoreSrc) {
if (settingItemMoreSrc!=10000) {
this.settingItemMoreSrc = settingItemMoreSrc;
settingItemMore.setImageResource(settingItemMoreSrc);//将图片地址设置进控件中
}
}
public boolean getSettingItemLineVisibility() {
return settingItemLineVisibility;
}
public void setSettingItemLineSize(boolean settingItemLineVisibility) {
this.settingItemLineVisibility = settingItemLineVisibility;
//判断是否显示下划线
if (settingItemLineVisibility){
settingItemUnderLine.setVisibility(VISIBLE);
}else{
settingItemUnderLine.setVisibility(INVISIBLE);
}
}
public CustomSettingItemView(@NonNull Context context) {
super(context);
}
public CustomSettingItemView(@NonNull Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
init(context,attrs);
}
public CustomSettingItemView(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init(context,attrs);
}
public CustomSettingItemView(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
init(context,attrs);
}
/**
* 定义自定义控件中的属性
* @param context
* @param attrs
*/
private void init(Context context, AttributeSet attrs) {
this.mContext=context;
LayoutInflater inflater= (LayoutInflater) mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
mainView=inflater.inflate(R.layout.custom_setting_item_view,this,true);
initView(mainView);//初始布局中的控件
TypedArray typedArray=mContext.obtainStyledAttributes(attrs, R.styleable.CustomSettingItemView);
setSettingItemTitleText(typedArray.getString(R.styleable.CustomSettingItemView_settingItemTitle));
setSettingItemDescText(typedArray.getString(R.styleable.CustomSettingItemView_settingItemDesc));
setSettingItemLogoSrc(typedArray.getResourceId(R.styleable.CustomSettingItemView_settingLogoSrc,10000));
setSettingItemMoreSrc(typedArray.getResourceId(R.styleable.CustomSettingItemView_settingMoreSrc,10000));
setSettingItemLineSize(typedArray.getBoolean(R.styleable.CustomSettingItemView_settingItemUnderLineVisibility,true));
}
/**
* 初始化控件
* @param mainView
*/
private void initView(View mainView) {
settingItemTitle=mainView.findViewById(R.id.setting_item_title);
settingItemDesc=mainView.findViewById(R.id.setting_item_desc);
settingItemLogo=mainView.findViewById(R.id.setting_item_logo);
settingItemMore=mainView.findViewById(R.id.setting_item_more);
settingItemUnderLine=mainView.findViewById(R.id.setting_item_line);
}
}
4.修改主函数布局文件
创建主函数入口MainActivity,布局文件中，把刚刚自定义的当控件使用就好，也可代码中动态设置，我这里就随便找了之前使用过的图片来展示。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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=".MainActivity"
android:orientation="vertical">
<com.example.customview_setting_item.customView.CustomSettingItemView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:settingItemTitle="测试标题1"
app:settingItemDesc="测试详情1"
app:settingLogoSrc="@mipmap/soufa"
app:settingMoreSrc="@mipmap/more"/>
<com.example.customview_setting_item.customView.CustomSettingItemView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:settingItemTitle="测试标题2"
app:settingLogoSrc="@mipmap/soufa"
app:settingMoreSrc="@mipmap/more"/>
<com.example.customview_setting_item.customView.CustomSettingItemView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:settingItemTitle="测试标题3"
app:settingItemDesc="测试详情3"
app:settingLogoSrc="@mipmap/soufa"
app:settingMoreSrc="@mipmap/more"/>
<com.example.customview_setting_item.customView.CustomSettingItemView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:settingItemTitle="测试标题4"
app:settingItemDesc="测试详情4"
app:settingLogoSrc="@mipmap/soufa"
app:settingMoreSrc="@mipmap/more"
app:settingItemUnderLineVisibility="false"/>
<com.example.customview_setting_item.customView.CustomSettingItemView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
app:settingItemTitle="测试标题5"
app:settingItemDesc="测试详情5"
app:settingLogoSrc="@mipmap/soufa"
app:settingMoreSrc="@mipmap/more"/>
<com.example.customview_setting_item.customView.CustomSettingItemView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:settingItemTitle="测试标题6"
app:settingItemDesc="测试详情6"
app:settingLogoSrc="@mipmap/soufa"/>
<com.example.customview_setting_item.customView.CustomSettingItemView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:settingItemTitle="测试标题7"
app:settingItemDesc="测试详情7"
app:settingLogoSrc="@mipmap/soufa"
app:settingMoreSrc="@mipmap/more"/>
</LinearLayout>
运行在虚拟机之后的效果图
微信截图_20191007213952.jpg
总结
以上是自定义控件的组合实现，在实际开发中，肯定不是那么简单，但是万变不离其中，只要我们懂思路方法，就不用管项目经理啥子无理需求了。当然，这也只是简单实现，如果想要实现更多的效果。可以通过前面写的第一种自定义View,继承View、重写组件的onMeasure、onLayout、onDraw来实现。
好了，关于自定义View的其中一种方式就是这样子了，如果有错误，期待您批评改正。码字不易，望您收藏、转发、点赞。
