Android 自定义View 三板斧之一——组合现有控件

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

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

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

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

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

  先看看创建组合控件的好处吧,创建组合控件能够很好的创建具有组合功能的控件集合。那我们一般又是怎么做的了,一般我们来继承一个合适的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"

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

  这就是我封装标题栏,欢迎大家吐槽。
时间: 2024-10-17 10:51:06

Android 自定义View 三板斧之一——组合现有控件的相关文章

Vue.js 自定义组件封装实录——基于现有控件的二次封装(以计时器为例)

在本人着手开发一个考试系统的过程中,出现了如下一个需求:制作一个倒计时的控件显示在试卷页面上.本文所记录的就是这样的一个过程. 前期工作 对于这个需求,自然我想到的是有没有现成的组件可以直接使用(本着不重复发明轮子的原则).于是我就在 GitHub 上找寻.确实找到了不少,但是与需求之间的差距还比较大.从零开始写又不太现实(时间摆在那里,加之自己的前端也是刚学,还没有从零开始手撸一个控件的能力),所以在已有组件的基础上进行二次封装便成了一个比较可行的方法(几乎也是唯一解).遂在 npm 上以 c

Android 自定义View 总结

Android系统本身给我们提供十分丰硕的组件让我们实现包罗万象的UI效果,与此同时,我们也能够非常方便实现各种方法来实现各种强大的功能.通过继承现有的UI控件,我们也能够拓展现有的功能.我们也能够完全自定义控件,实现Android系统所没有的功能.自定义控件,对于Android初学者来说,是一个老大难的问题.其实,自定义控件没有那么困难.与其说你在自定义一个view,倒不如说你在绘画一个图形.只有站到艺术的角度,才能创建有一个更好用户体验的控件.自定义控件,应该不是一些简单API的堆砌,而应该

android自定义View之(七)------自定义控件组合仿actionbar控件

我们前面写了6个自定义view的样例,这都是全新自已画的控件.在这个样例中,我们来用几个现有的控件来组合成一个新的控件. 效果图: 我们用二个Button和一个TextView组合来成为一个actionbar,下面先来一个效果图: 关键代码: (1)res/layout/custom_action_bar.xml----组合控件布局文件 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android&quo

Android自定义View之组合控件 ---- LED数字时钟

先上图 LEDView效果如图所示. 之前看到一篇博客使用两个TextView实现了该效果,于是我想用自定义控件的方式实现一个LEDView,使用时即可直接使用该控件. 采用组合控件的方式,将两个TextView叠放在一起,再使用digital-7.ttf字体来显示数据,从而达到LED的效果.代码如下: LEDView.class package ione.zy.demo; import java.io.File; import java.util.Calendar; import java.u

Android 自定义View之自绘控件

首先要提前声明一下,我对于自定义View的理解并不是很深,最近啃了几天guolin博主写的关于自定义View的博客,讲的非常棒,只不过涉及到源码和底层的一些东西,我自己就懵逼了,目前只是会了关于自定义View的简单使用,不过还是要写出来,当做练习了,哈哈~对于一些没有接触过的初学者,希望会有所帮助,共同成长: 按类型,自定义View可以分为三种:自绘控件.组合控件.继承控件,对于这三种类型,我会写三篇博客来分别介绍和使用. 自定义View中有三个非常重要的方法,分别为: onMeasure():

Android 自定义View控件

一.简介 在自定义View时,我们通常会重写onDraw()方法来绘制View的显示内容.如果,该View还需要使用wrap_content属性,那么还必须重写onMeasure()方法.另外,通过自定义attrs属性,还可以设置新的属性配置值. 在View中通常有以下一些比较重要的回调方法: onFinisInflate():从XML加载组件后回调: onSizeChanged():组件大小改变时回调: onMeasure():回调该方法来进行测量: onLayout():回调该方法来确定显示

Android自定义View(CustomCalendar-定制日历控件)

转载请标明出处: http://blog.csdn.net/xmxkf/article/details/54020386 本文出自:[openXu的博客] 目录: 1分析 2自定义属性 3onMeasure 4onDraw 绘制月份 绘制星期 绘制日期及任务 5事件处理 源码下载 ??应项目需求,需要做一个日历控件,效果图如下: ???? ??接到需求后,没有立即查找是否有相关开源日历控件可用.系统日历控件是否能满足 ,第一反应就是这个控件该怎么画?谁叫咱自定义控件技术牛逼呢O(∩_∩)O哈哈~

Android自定义View(RollWeekView-炫酷的星期日期选择控件)

转载请标明出处: http://blog.csdn.net/xmxkf/article/details/53420889 本文出自:[openXu的博客] 目录: 1分析 2定义控件布局 3定义CustomWeekView 4重写onMeasure 5点击后执行动画 7重置预备控件 源码下载 ??最近收到一个自定义控件的需求,需要做一个日期选择控件,实现图如下: ???? ??一次展示一个星期的5天,中间放大的为当前选中的:如果点击了其中一个日期,比如星期五,那么整体向左滑动,并将星期五慢慢放大

android - 自定义(组合)控件 + 自定义控件外观

转载:http://www.cnblogs.com/bill-joy/archive/2012/04/26/2471831.html android - 自定义(组合)控件 + 自定义控件外观 Android自定义View实现很简单 继承View,重写构造函数.onDraw,(onMeasure)等函数. 如果自定义的View需要有自定义的属性,需要在values下建立attrs.xml.在其中定义你的属性. 在使用到自定义View的xml布局文件中需要加入xmlns:前缀="http://sc