Android组合控件实现功能强大的自定义控件

通常情况下,Android实现自定义控件无非三种方式。

  Ⅰ、继承现有控件,对其控件的功能进行拓展。

  Ⅱ、将现有控件进行组合,实现功能更加强大控件。

  Ⅲ、重写View实现全新的控件

  上文说过了如何继承现有控件来自定义控件:《Android继承现有控件拓展实现自定义控件textView》,这节我们来讨论第二个议题。怎么将控件组合来实现一个功能强大的自定义控件。

  先看看创建组合控件的好处吧,创建组合控件能够很好的创建具有组合功能的控件集合。那我们一般又是怎么做的了,一般我们来继承一个合适的ViewGroup,再为他创建一个新功能,从而就形成了一个新功能的控件。我们还会为这种控件指定一些新的属性,从而使他具有很好扩展性了。好了,废话说了这么多,下面,我们就以几乎每个app都有的控件——标题栏为例,来介绍组合控件的做法。

  首先,我来回答为什么要重用标题栏:

  Ⅰ、使应用程序拥有统一的风格。

  Ⅱ、重用标题栏,也是我们将来修改标题栏非常方便,真正实现"一次编写,到处运行"的效果,而不用大费周章的,每个页面都修改。

  Ⅲ、向调用者向外暴露调用接口,从而更加灵活的控制标题栏,使其功能更加的强大。

  那么,标题栏长成那个样子,请见下图:

  

  我们,先做一下简单的分析一下,这是一个自定义控件,应该像Android的原生控件一样,能够方便调用者设置控件的属性。因此,十分有必要为这个控件设置一些属性,为一个View提供一些自定义属性十分的简单,只需要在res资源目录下的values目录下创建一个attrs.xml属性文件,并在该文件定义你所需要的属性即可。这个自定义控件自定义属性如下:

 <declare-styleable name="titleBar">
  <attr name="title" format="string" />
  <attr name="titleTextSize" format="dimension" />
  <attr name="titleTextColor" format="color" />
  <attr name="titleLeftText" format="string" />
  <attr name="titleLeftBackground" format="color|reference" />
  <attr name="titleLeftTextColor" format="color" />
  <attr name="titleRightText" format="string" />
  <attr name="titleRightBackground" format="color|reference" />
  <attr name="titleRightTextColor" format="color" />
 </declare-styleable>

  我们用<declare-styleable>标签声明要使用的自定义属性,用name属性来确定引用的名称。用format来确定引用数据的格式。在这个自定义控件自定义属性对应列表如下:

  Ⅰ、title——对应标题的文字

  Ⅱ、titleTextSize——对应标题的文字大小

  Ⅲ、titleTextColor——对应标题的文本颜色

  Ⅳ、titleLeftText——对应左边按钮的文本

  Ⅴ、titleLeftBackground——对应左边按钮的背景

  Ⅵ、titleLeftTextColor——对应左边按钮的文字颜色

  Ⅶ、titleRightText——对应右边按钮的文本

  Ⅴ、titleRightBackground——对应右边按钮的背景

  Ⅵ、titleRightTextColor——对应右边按钮的文字颜色

  这里,需要指出的是左右按钮的背景,即可以是颜色类型,也可以对应为相应的图片,所以,我们可以用“|”来分隔不同的属性。

  好了,既然,有了自定义属性的定义了,我们就需要自定义一个TitleBar的控件,来获取这些定义好的属性值,上文,我们提到一般组合控件一般继承与ViewGroup控件,这里,我们方便起见,就继承与RelativeLayout。怎么获取属性值了,系统提供了TypedArray这样数据结构就能十分方便获取属性集了,获取属性的代码如下:

private void initAttrs(AttributeSet attrs) {
  TypedArray ta = this.getContext().obtainStyledAttributes(attrs,
    R.styleable.titleBar);
  if (ta != null) {
   title = ta.getString(R.styleable.titleBar_title);
   titleTextSize = ta.getDimension(R.styleable.titleBar_titleTextSize,
     16);
   titleTextColor = ta
     .getColor(R.styleable.titleBar_titleTextColor, 0);
   titleLeftText = ta.getString(R.styleable.titleBar_titleLeftText);
   titleLeftBackground = ta
     .getDrawable(R.styleable.titleBar_titleLeftBackground);
   titleLeftTextColor = ta.getColor(
     R.styleable.titleBar_titleLeftTextColor, 0);
   titleRightText = ta.getString(R.styleable.titleBar_titleRightText);
   titleRightBackground = ta
     .getDrawable(R.styleable.titleBar_titleRightBackground);
   titleRightTextColor = ta.getColor(
     R.styleable.titleBar_titleRightTextColor, 0);
   ta.recycle();
  }
 }

  这里,需要值得一提的是需要调用TypedArray的recycle方法将资源回收。

  既然,我们让这个组合控件有了属性以后,下面,我们要做的是将这个组合控件的按钮,文本框有机组合起来,组合的代码如下所示:

 private void initView() {
  leftButton = new Button(getContext());
  titleTextView = new TextView(getContext());
  rightButton = new Button(getContext());

  leftButton.setTextColor(titleLeftTextColor);
  leftButton.setBackgroundDrawable(titleLeftBackground);
  leftButton.setText(titleLeftText);

  rightButton.setTextColor(titleRightTextColor);
  rightButton.setBackgroundDrawable(titleRightBackground);
  rightButton.setText(titleRightText);

  titleTextView.setText(title);
  titleTextView.setTextSize(titleTextSize);
  titleTextView.setTextColor(titleTextColor);

  mLeftLayoutParams = new LayoutParams(LayoutParams.WRAP_CONTENT,
    LayoutParams.MATCH_PARENT);
  mLeftLayoutParams.addRule(RelativeLayout.ALIGN_PARENT_LEFT);
  addView(leftButton, mLeftLayoutParams);

  mCenterLayoutParams = new LayoutParams(LayoutParams.WRAP_CONTENT,
    LayoutParams.MATCH_PARENT);
  mCenterLayoutParams.addRule(RelativeLayout.CENTER_IN_PARENT);
  addView(titleTextView, mCenterLayoutParams);

  mRightLayoutParams = new LayoutParams(LayoutParams.WRAP_CONTENT,
    LayoutParams.MATCH_PARENT);
  mRightLayoutParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT);
  addView(rightButton, mRightLayoutParams);
 }

  我们看到上文定义一些属性,无非复制给了这些组合控件,使这个组合控件变得"有血有肉"了。

  这既然是一个自定义控件,是一个UI模版,应该每个调用者点击左右按钮,所实现的可能都不一样,我们应当所做就是向外暴露接口,让调用者灵活的控制这两个按钮。那么接口的定义如下:

 public interface ClickListener {
  void Click(int tag);
 }

 private ClickListener listener;

  在模版方法中,为左、右按钮增加点击事件,调用接口的点击方法,代码如下所示:

private void setListener() {
  leftButton.setOnClickListener(this);
  rightButton.setOnClickListener(this);
 }

 @Override
 public void onClick(View v) {
  if (listener != null) {
   if (v == leftButton) {
    listener.Click(LEFT_BUTTON);
   } else if (v == rightButton) {
    listener.Click(RIGHT_BUTTON);
   }
  }

 }

  在代码,我们有效判断是左边按钮点击了,还是右边按钮点击了。 

  有了这个模版方法中接口的定义之后,我们在外部调用这个回调代码如下:

titleBar.setListener(new ClickListener() {

   @Override
   public void Click(int tag) {
    switch (tag) {
   case TitleBar.LEFT_BUTTON:
    Toast.makeText(MainActivity.this, "左边按钮被点击了", 0).show();
    break;
   case TitleBar.RIGHT_BUTTON:
    Toast.makeText(MainActivity.this, "右边按钮被点击了", 0).show();
    break;
   default:
    break;
   }
   }
  });

  这样在外部,能够有效的控制左右按钮的点击事件了。

  做了这么多,就是希望能够有效调用这个组合控件,调用组合控件的代码如下:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:custom="http://schemas.android.com/apk/res/com.example.test"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:padding="5dp"
 tools:context=".MainActivity">

 <!-- <include layout="@layout/topbar" /> -->

 <com.example.test.TitleBar
  android:id="@+id/titleBar"
  android:layout_width="match_parent"
  android:layout_height="40dp"
  custom:titleLeftBackground="@drawable/blue_button"
  custom:titleLeftText="Back"
  custom:titleLeftTextColor="#FFFFFF"
  custom:titleRightBackground="@drawable/blue_button"
  custom:titleRightText="More"
  custom:titleRightTextColor="#FFFFFF"
  custom:title="自定义标题"
  custom:titleTextColor="#123412"
  custom:titleTextSize="10sp"/>

</RelativeLayout>

这里,需要和大家交代的是,自定义控件与原生控件调用区别在于:

Ⅰ、引用自定义控件必须引用它的完全类名。

Ⅱ、引用自定义控件自定义属性时,必须要引用自定义的命名空间,引用方法如下:

xmlns:custom="http://schemas.android.com/apk/res/com.example.test"

这个控件,最终运行效果为:

以上就是本文的全部内容,希望对大家的学习有所帮助。

(0)

相关推荐

  • Android自定义控件之自定义组合控件(三)

    前言: 前两篇介绍了自定义控件的基础原理Android自定义控件基本原理详解(一).Android自定义控件之自定义属性(二).今天重点介绍一下如何通过自定义组合控件来提高布局的复用,降低开发成本,以及维护成本. 使用自定义组合控件的好处? 我们在项目开发中经常会遇见很多相似或者相同的布局,比如APP的标题栏,我们从三种方式实现标题栏来对比自定义组件带来的好处,毕竟好的东西还是以提高开发效率,降低开发成本为导向的.  1.)第一种方式:直接在每个xml布局中写相同的标题栏布局代码 <?xml v

  • Android自定义组合控件之自定义下拉刷新和左滑删除实例代码

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

  • Android自定义View之组合控件实现类似电商app顶部栏

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

  • 探究Android中ListView复用导致布局错乱的解决方案

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

  • Android自定义控件之创建可复用的组合控件

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

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

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

  • 实例讲解Android应用中自定义组合控件的方法

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

  • 在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自定义控件之继承ViewGroup创建新容器

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

  • Android自定义控件之组合控件学习笔记分享

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

随机推荐