当前位置：移动技术网 > IT编程>移动开发>Android > Android自定义控件之自定义组合控件（三）

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

2019年07月24日 | 移动技术网IT编程 | 我要评论

末世重生之小人物,小偷亚精,ups 快递

前言：

前两篇介绍了自定义控件的基础原理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制作登录页面并且记住账号密码功能的实现代码

一、页面搭建<?xml version="1.0" encoding="utf-8"?><android.support.co... [阅读全文]
Android studio开发小型对话机器人app(实例代码)

前言偶然在网上看到一个免费机器人接口，所以生此想法，接口地址：，android开发比爬虫要繁琐得多，所以本文我将细说接口的调用方法，读者可根据思路去网上找一些免... [阅读全文]
Android通过Java sdk的方式接入OpenCv的方法

简述公司最近要做运动检测和眼球追踪，鉴于资费等因素，最后考虑使用opencv的相关api来来满足业务需求。在使用过程中发现opencv的v4.2.0和v4.1.... [阅读全文]
Android 通过cmake的方式接入opencv的方法步骤

简述我们通过java sdk的方式已经将opencv接入到项目中了，如果想使用opencv sdk 提供的 c++ 头文件与 .so动态库,自己封装jni这样... [阅读全文]
Android开发学习实现简单计算器

这里是用线性布局实现的计算器，为防止以后再回顾知识代码找不到，特将代码贴在这里：xml文件的布局代码：<?xml version="1.0" en... [阅读全文]
Android Studio finish()方法的使用与解决app点击“返回”(直接退出)

在这里，我们将用到finish(),简单介绍一下它的使用:finish()官方解析:call this when your activity is done a... [阅读全文]
Flutter 实现虎牙/斗鱼弹幕功能

用flutter实现弹幕功能，轻松实现虎牙、斗鱼的弹幕效果。先来一张效果图：实现原理弹幕的实现原理非常简单，即将一条弹幕从左侧平移到右侧，当然我们要计算弹幕垂直... [阅读全文]
Flutter 插件url_launcher简介

url_launcher是用于在移动平台中启动url的flutter插件，适用于ios和android平台。他可以打开网页，发送邮件，还可以拨打电话。githu... [阅读全文]
Android 进度条 ProgressBar的实现代码(隐藏、出现、加载进度)

初识进度条progressbar软件：android studio实现：1.点击按钮，进度条隐藏；再次点击，进度条出现。循环2.点击按钮，水平进度条进度呈现并+... [阅读全文]
Flutter 实现网易云音乐字幕的代码

没有接触过音乐字幕方面知识的话，会对字幕的实现比较迷茫，什么时候转到下一句？看了这篇文章，你就会明白字幕so easy。先来一张效果图：字幕格式目前市面上有很多... [阅读全文]

网友评论


验证码：

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

2019年07月24日 | 移动技术网IT编程 | 我要评论

您可能感兴趣的文章:

相关文章:

网友评论