Android自定义控件之自定义组合控件（三）

2024-10-08 06:01:05

前言：

前两篇介绍了自定义控件的基础原理Android自定义控件基本原理详解（一）、Android自定义控件之自定义属性（二）。今天重点介绍一下如何通过自定义组合控件来提高布局的复用，降低开发成本，以及维护成本。

使用自定义组合控件的好处？
我们在项目开发中经常会遇见很多相似或者相同的布局，比如APP的标题栏，我们从三种方式实现标题栏来对比自定义组件带来的好处，毕竟好的东西还是以提高开发效率，降低开发成本为导向的。
1.）第一种方式：直接在每个xml布局中写相同的标题栏布局代码

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:lee="http://schemas.android.com/apk/res-auto"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical">

 <RelativeLayout
  android:layout_width="match_parent"
  android:background="@color/green"
  android:layout_height="45dp">

  <Button
   android:id="@+id/title_bar_left"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_alignParentLeft="true"
   android:layout_centerVertical="true"
   android:layout_marginLeft="5dp"
   android:background="@mipmap/titlebar_back_icon"
   android:minHeight="45dp"
   android:minWidth="45dp"
   android:textSize="14sp" />

  <TextView
   android:id="@+id/title_bar_title"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_centerInParent="true"
   android:text="登录"
   android:singleLine="true"
   android:textSize="17sp" />

  <Button
   android:id="@+id/title_bar_right"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_alignParentRight="true"
   android:layout_centerVertical="true"
   android:layout_marginRight="7dp"
   android:text="提交"
   android:textColor="@android:color/white"
   android:background="@null"
   android:minHeight="45dp"
   android:minWidth="45dp"
   android:textSize="14sp" />
 </RelativeLayout>

</LinearLayout>

这种方式没有任何布局复用的概念，同时也让当前的布局变得臃肿难以维护，开发效率低下，而且这个还需要要求每个开发人员必须细心否则有可能会做出参差不齐的标题栏，所以这种方式是最不推荐使用的。

2.）第二种方式：使用include标签
首先定义标题栏布局

 <RelativeLayout
  android:layout_width="match_parent"
  android:background="@color/green"
  android:layout_height="45dp">

  <Button
   android:id="@+id/title_bar_left"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_alignParentLeft="true"
   android:layout_centerVertical="true"
   android:layout_marginLeft="5dp"
   android:minHeight="45dp"
   android:minWidth="45dp"
   android:textSize="14sp" />

  <TextView
   android:id="@+id/title_bar_title"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_centerInParent="true"
   android:singleLine="true"
   android:textSize="17sp" />

  <Button
   android:id="@+id/title_bar_right"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_alignParentRight="true"
   android:layout_centerVertical="true"
   android:layout_marginRight="7dp"
   android:background="@null"
   android:minHeight="45dp"
   android:minWidth="45dp"
   android:textSize="14sp" />
 </RelativeLayout>

然后在需要的地方通过include标签实现引用

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:lee="http://schemas.android.com/apk/res-auto"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical">

 <include layout="@layout/view_title_bar" />

</LinearLayout>

通过上面的布局代码，我们可以使用上面这种方式确实实现了布局的复用，而且也避免了开发人员开发出参差不齐标题栏的问题，但是同时也引入了新的问题，比如更加降低了开发效率，加大了开发成本，问题就在我们该如何为每个布局文件定义标题栏？只有通过代码的方式来设置标题问题，左右按钮等其他的属性，导致布局属性和Activity代码耦合性比较高，所以这种方式也不是推荐的方式。

3.）第三种方式：通过自定义组合控件
这里先不具体介绍如何实现一个自定义组合控件，这里先介绍一下自定义组合控件带来的好处。
•提高布局文件开发效率
•降低布局文件维护成本
•降低布局文件和Activity代码耦合性
•容易扩展
•简单易用

如何实现一个自定义组合控件
1.）先定义一个布局文件

<merge xmlns:android="http://schemas.android.com/apk/res/android">

 <Button
  android:id="@+id/title_bar_left"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_alignParentLeft="true"
  android:layout_centerVertical="true"
  android:layout_marginLeft="5dp"
  android:background="@null"
  android:minHeight="45dp"
  android:minWidth="45dp"
  android:textSize="14sp" />

 <TextView
  android:id="@+id/title_bar_title"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_centerInParent="true"
  android:singleLine="true"
  android:textSize="17sp" />

 <Button
  android:id="@+id/title_bar_right"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_alignParentRight="true"
  android:layout_centerVertical="true"
  android:layout_marginRight="7dp"
  android:background="@null"
  android:minHeight="45dp"
  android:minWidth="45dp"
  android:textSize="14sp" />

</merge>

注意：这里为何要使用merge标签，自定义组合控件时会继承RelativeLayout、LinearLayout等控件，这样导致布局的层级无形中增加了一层，如下是对比：

2.）定义自定义属性
比如标题文字、标题栏左边按钮图标等。

 <declare-styleable name="CustomTitleBar">
  <attr name="title_background_color" format="reference|integer" />
  <attr name="left_button_visible" format="boolean" />
  <attr name="right_button_visible" format="boolean" />
  <attr name="title_text" format="string" />
  <attr name="title_text_color" format="color" />
  <attr name="title_text_drawable" format="reference|integer" />
  <attr name="right_button_text" format="string" />
  <attr name="right_button_text_color" format="color" />
  <attr name="right_button_drawable" format="reference|integer" />
  <attr name="left_button_text" format="string" />
  <attr name="left_button_text_color" format="color" />
  <attr name="left_button_drawable" format="reference|integer" />
 </declare-styleable>

3.）自定义一个View根据需求继承不同的ViewGroup子类，比如：RelativeLayout、LinearLayout等，我们这里继承RelativeLayout。

public class CustomTitleBar extends RelativeLayout {
 private Button titleBarLeftBtn;
 private Button titleBarRightBtn;
 private TextView titleBarTitle;

 public CustomTitleBar(Context context, AttributeSet attrs) {
  super(context, attrs);
  LayoutInflater.from(context).inflate(R.layout.custom_title_bar, this, true);
  titleBarLeftBtn = (Button) findViewById(R.id.title_bar_left);
  titleBarRightBtn = (Button) findViewById(R.id.title_bar_right);
  titleBarTitle = (TextView) findViewById(R.id.title_bar_title);

  TypedArray attributes = context.obtainStyledAttributes(attrs, R.styleable.CustomTitleBar);
  if (attributes != null) {
   //处理titleBar背景色
   int titleBarBackGround = attributes.getResourceId(R.styleable.CustomTitleBar_title_background_color, Color.GREEN);
   setBackgroundResource(titleBarBackGround);
   //先处理左边按钮
   //获取是否要显示左边按钮
   boolean leftButtonVisible = attributes.getBoolean(R.styleable.CustomTitleBar_left_button_visible, true);
   if (leftButtonVisible) {
    titleBarLeftBtn.setVisibility(View.VISIBLE);
   } else {
    titleBarLeftBtn.setVisibility(View.INVISIBLE);
   }
   //设置左边按钮的文字
   String leftButtonText = attributes.getString(R.styleable.CustomTitleBar_left_button_text);
   if (!TextUtils.isEmpty(leftButtonText)) {
    titleBarLeftBtn.setText(leftButtonText);
    //设置左边按钮文字颜色
    int leftButtonTextColor = attributes.getColor(R.styleable.CustomTitleBar_left_button_text_color, Color.WHITE);
    titleBarLeftBtn.setTextColor(leftButtonTextColor);
   } else {
    //设置左边图片icon 这里是二选一 要么只能是文字 要么只能是图片
    int leftButtonDrawable = attributes.getResourceId(R.styleable.CustomTitleBar_left_button_drawable, R.mipmap.titlebar_back_icon);
    if (leftButtonDrawable != -1) {
     titleBarLeftBtn.setBackgroundResource(leftButtonDrawable);
    }
   }

   //处理标题
   //先获取标题是否要显示图片icon
   int titleTextDrawable = attributes.getResourceId(R.styleable.CustomTitleBar_title_text_drawable, -1);
   if (titleTextDrawable != -1) {
    titleBarTitle.setBackgroundResource(titleTextDrawable);
   } else {
    //如果不是图片标题 则获取文字标题
    String titleText = attributes.getString(R.styleable.CustomTitleBar_title_text);
    if (!TextUtils.isEmpty(titleText)) {
     titleBarTitle.setText(titleText);
    }
    //获取标题显示颜色
    int titleTextColor = attributes.getColor(R.styleable.CustomTitleBar_title_text_color, Color.WHITE);
    titleBarTitle.setTextColor(titleTextColor);
   }

   //先处理右边按钮
   //获取是否要显示右边按钮
   boolean rightButtonVisible = attributes.getBoolean(R.styleable.CustomTitleBar_right_button_visible, true);
   if (rightButtonVisible) {
    titleBarRightBtn.setVisibility(View.VISIBLE);
   } else {
    titleBarRightBtn.setVisibility(View.INVISIBLE);
   }
   //设置右边按钮的文字
   String rightButtonText = attributes.getString(R.styleable.CustomTitleBar_right_button_text);
   if (!TextUtils.isEmpty(rightButtonText)) {
    titleBarRightBtn.setText(rightButtonText);
    //设置右边按钮文字颜色
    int rightButtonTextColor = attributes.getColor(R.styleable.CustomTitleBar_right_button_text_color, Color.WHITE);
    titleBarRightBtn.setTextColor(rightButtonTextColor);
   } else {
    //设置右边图片icon 这里是二选一 要么只能是文字 要么只能是图片
    int rightButtonDrawable = attributes.getResourceId(R.styleable.CustomTitleBar_right_button_drawable, -1);
    if (rightButtonDrawable != -1) {
     titleBarRightBtn.setBackgroundResource(rightButtonDrawable);
    }
   }
   attributes.recycle();
  }
 }

 public void setTitleClickListener(OnClickListener onClickListener) {
  if (onClickListener != null) {
   titleBarLeftBtn.setOnClickListener(onClickListener);
   titleBarRightBtn.setOnClickListener(onClickListener);
  }
 }

 public Button getTitleBarLeftBtn() {
  return titleBarLeftBtn;
 }

 public Button getTitleBarRightBtn() {
  return titleBarRightBtn;
 }

 public TextView getTitleBarTitle() {
  return titleBarTitle;
 }
}

4.）在不同的XML布局中引用
关于如何使用自定义属性这里就不再说明了，为了更加直观的查看效果，我这里在一个布局文件中实现不同要求的标题栏

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:lee="http://schemas.android.com/apk/res-auto"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical">

 <com.whoislcj.views.CustomTitleBar
  android:layout_width="match_parent"
  android:layout_height="45dp"
  android:layout_marginTop="10dp"
  lee:right_button_drawable="@mipmap/titlebar_add_icon"
  lee:title_background_color="@color/green"
  lee:title_text="标题1" />

 <com.whoislcj.views.CustomTitleBar
  android:layout_width="match_parent"
  android:layout_height="45dp"
  android:layout_marginTop="10dp"
  lee:right_button_visible="false"
  lee:title_background_color="@color/green"
  lee:title_text="标题2" />

 <com.whoislcj.views.CustomTitleBar
  android:layout_width="match_parent"
  android:layout_height="45dp"
  android:layout_marginTop="10dp"
  lee:left_button_text="左边"
  lee:right_button_text="右边"
  lee:title_background_color="@color/red"
  lee:title_text="标题3" />

 <com.whoislcj.views.CustomTitleBar
  android:layout_width="match_parent"
  android:layout_height="45dp"
  android:layout_marginTop="10dp"
  lee:left_button_text="左边"
  lee:right_button_drawable="@mipmap/titlebar_add_icon"
  lee:title_background_color="@color/red"
  lee:title_text="标题4" />

 <com.whoislcj.views.CustomTitleBar
  android:layout_width="match_parent"
  android:layout_height="45dp"
  android:layout_marginTop="10dp"
  lee:left_button_text="左边"
  lee:left_button_text_color="@color/red"
  lee:right_button_drawable="@mipmap/titlebar_add_icon"
  lee:title_background_color="@color/blue"
  lee:title_text="标题5" />

 <com.whoislcj.views.CustomTitleBar
  android:layout_width="match_parent"
  android:layout_height="45dp"
  android:layout_marginTop="10dp"
  lee:left_button_text="左边"
  lee:left_button_text_color="@color/red"
  lee:right_button_drawable="@mipmap/titlebar_add_icon"
  lee:title_background_color="@color/blue"
  lee:title_text="标题6"
  lee:title_text_color="@color/black" />

</LinearLayout>

显示效果

总结：

通过本篇文章我们得知，通过自定义组合控件确实能够提高开发效率，降低维护成本，但是也需要UI设计风格保持高度一致，不然的话只能呵呵哒了！所以想要做好一个app需要一个有共识的团队才行。本篇介绍到此为止，下一篇要更新什么我还没有想好！有可能是自定义控件的事件回调，也有可能自定义ViewGroup实现流式布局，点击查看。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

Android中View自定义组合控件的基本编写方法

有很多情况下,我们只要运用好Android给我提供好的控件,经过布局巧妙的结合在一起,就是一个新的控件,我称之为"自定义组合控件". 那么,这种自定义组合控件在什么情况下用呢?或者大家在做项目时候会发现,某些布局会被重复的利用,同一个布局的XML代码块会被重复的复制黏贴多次,这样会造成代码结构混乱不说,代码量也会增大,各种控件都需要在Java代码中被申明和处理相应的逻辑,工作量着实不小,所以,必须要找到一个合理的"偷懒"的方式,开动脑经去怎么简化以上说的不必要的麻烦
Android自定义控件之创建可复用的组合控件

前面已学习了一种自定义控件的实现,是Andriod 自定义控件之音频条,还没学习的同学可以学习下,学习了的同学也要去温习下,一定要自己完全的掌握了,再继续学习,贪多嚼不烂可不是好的学习方法,我们争取学习了一种技术就会一种技术,而且不光看了就算了,最好的方法就是看完我自己再练习下,再扩展下,在原来的基础上在添加一些东西,比如,增加一些功能实现等等. 今天我们打算学习下另外一种自定义控件,就是创建可重复使用的组合控件,那么问题来了: 什么是可重复使用? 就是在应用中,可以在多个地方共同使用一套代码.
Android自定义控件之继承ViewGroup创建新容器

欢迎大家来学习本节内容,前几节我们已经学习了其他几种自定义控件,分别是Andriod 自定义控件之音频条及 Andriod 自定义控件之创建可以复用的组合控件还没有学习的同学请先去学习下,因为本节将使用到上几节所讲述的内容. 在学习新内容之前,我们先来弄清楚两个问题: 1 . 什么是ViewGroup? ViewGroup是一种容器.它包含零个或以上的View及子View. 2 . ViewGroup有什么作用? ViewGroup内部可以用来存放多个View控件,并且根据自身的测量模式,来测量
Android组合控件实现功能强大的自定义控件

通常情况下,Android实现自定义控件无非三种方式. Ⅰ.继承现有控件,对其控件的功能进行拓展. Ⅱ.将现有控件进行组合,实现功能更加强大控件. Ⅲ.重写View实现全新的控件上文说过了如何继承现有控件来自定义控件:<Android继承现有控件拓展实现自定义控件textView>,这节我们来讨论第二个议题.怎么将控件组合来实现一个功能强大的自定义控件. 先看看创建组合控件的好处吧,创建组合控件能够很好的创建具有组合功能的控件集合.那我们一般又是怎么做的了,一般我们来继承一个合适的ViewG
探究Android中ListView复用导致布局错乱的解决方案

首先来说一下具体的需求是什么样的: 需求如图所示,这里面有ABCD四个选项的题目,当点击A选项,如果A是正确的答案,则变成对勾的图案,如果是错误答案,则变成错误的图案,这里当时在写的时候觉得很简单,只要是在点击的时候判断我点击的选项与正确答案是否一样,是一样就将图片换成正确的样式,如果不一样就换成错误的样式,于是我便写了下面的代码(只贴出了核心Adapter中的代码) package com.fizzer.anbangproject_dahuo_test.Adapter; import andr
实例讲解Android应用中自定义组合控件的方法

自定义view大概可以分成: 继承view 组合view 自己画的view(用paint和canvas) 自定义viewgroup(widget) 最近又跟同学聊起来了,于是就准备自己实现一个imagebutton来练练手.(最简单的了)以及后面一个把imageview与textview结合使用的案例. ImageButton 要实现ImageButton最容易想到的不就是把button和imageview合在一起么.嗯,人容易就想到这是一个组合自定义view.可是如何把一个image放到but
Android自定义组合控件之自定义下拉刷新和左滑删除实例代码

绪论最近项目里面用到了下拉刷新和左滑删除,网上找了找并没有可以用的,有比较好的左滑删除,但是并没有和下拉刷新上拉加载结合到一起,要不就是一些比较水的结合,并不能在项目里面使用,小编一着急自己组合了一个,做完了和QQ的对比了一下,并没有太大区别,今天分享给大家,其实并不难,但是不知道为什么网上没有比较好的Demo,当你的项目真的很急的时候,又没有比较好的Demo,那么"那条友谊的小船儿真是说翻就翻啊",好了,下面先来具体看一下实现后的效果吧: 代码已经上传到Github上了,小伙伴们记
在Android开发中使用自定义组合控件的例子

一.定义一个XML布局文件 setting_item_view.xml <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height
Android自定义View之组合控件实现类似电商app顶部栏

本文实例为大家分享了Android自定义View之组合控件,仿电商app顶部栏的相关代码,供大家参考,具体内容如下效果图: 分析:左右两边可以是TextView和Button,设置drawableTop即可,中间的看着像是EditText,但是用过淘宝天猫等类似app的话会发现点击搜索不是在当前Activit进行搜索的,是跳转到另外的页面进行的,所以用TextView然后设置背景即可. 实现流程参数列表: 设置属性文件:values下建立attrs.xml文件,添加需要自定义的属性. <?x
Android自定义控件之组合控件学习笔记分享

我们来讲一下自定义组合控件,相信大家也接触过自定义组合控件吧,话不多说,直接干(哈~哈~): 大家看到这个觉得这不是很简单的吗,这不就是写个布局文件就搞定嘛,没错,确实直接上布局就行,不过,我只是用这个简单的例子来讲一下自定义组合控件的用法. 首先看看,这一行行的条目看起来都长得差不多,只是图片和文字不一样,没错,就是看中这一点,我们可以把一个条目做成一个组合控件,做为一个整体,这样不管你有几个条目,就写几个组合控件就行了. 步骤: 1.先建立组合控件的布局 myView.xml <Relati

Android自定义控件之自定义组合控件（三）

相关推荐

随机推荐