详解Android自定义UI模板设计_由浅入深

学习安卓已有一些日子，前段时间整理了不少笔记，但是发现笔记不变分享与携带。今天开始整理博客，全当是与大家分享交流与自身学习理解的过程吧。结合最近在做的一个新闻类app及学习中的问题，一点一点整理一下，希望结识志同道合的你。

通过这篇博客你将理解下面几个问题

一.如何自定义控件属性

二.如何动态设计组件

三.如何设计动态模板

四.体会模板化开发的便利之处

五.体会接口回调思想

1.      背景我们可以看到下面这个界面（暂且只看顶部的Topbar），假如让我们设计一个这样的界面，我们可以照着葫芦画瓢，做出这两个界面，但是我们发现他们的顶端有着相似的布局，只不过是文字与button略有不同，于是我们就想，能不能只写一个界面呢？答案是肯定的。我们完全可以像抽象一个类一样，抽象一个模板

  2.追根寻源：例如当我们要使用一个Linearlayout，我们需要先定义一下layout_width*****、layout_heigh*****t然后给它width与height属性.那么谷歌是如何定义它的源文件的呢？Linealayout继承了ViewGroup，并重写了一部分方法来满足自己的需求。

  我们打开安卓源码在里面我们可以找到这样的属性

是不是很熟悉呢，看来谷歌是用这种方法来定义属性的

Ok,看到谷歌的方法后我们的思路就清晰了

我们自定义一个控件需要做哪几步呢

①  定义一个atts文件，用来配置所需要定义的属性

②重写控件，满足我们的要求。也就是创建我们自己的View

③在xml文件中使用我们的控件

****

1.我们创建一个atts文件，我们的控件名字就是Topbar

我们定义了6个属性，分别是标题的颜色、字体大小，左侧button的背景、字体颜色。注：reference|color  是因为我们在定义背景的时候既可以使用@drawable也可以用十六进制颜色代码

2.写Topbar的java文件

1.我们让Topbar继承RelativeLayout，会要求添加方法，我们添加第38行的方法

2.我们定义所需要的控件，左边的Button中间的Textview，程序第16.17行，19-26行程序我们定义Button和Textview的我们已经自定义的属性

3.下面进入Topbar方法。安卓给我们了很方便的api，来为我们设计并获取我们自定义的属性，通过TyapeArray这样一个数据结构，来存储我们获取到的一些属性的值。调用程序第41行方法，这样在xml自定义属性的值映射到我们定义的自定义属性中去，返回TyapeArray这样一个数据结构，包含了所有属性和值的映射。我们在TypeArray可以取出这些自定义属性的值

4.然后通过43-50行程序我们取出这些值

5.我们调用一下recycle方法，防止浪费资源，或缓存引起的错误

6.实例化我们的两个控件

7.把我们获取到的属性值赋给这些控件56-62行

8.下面我们需要把这些控件放到ViewGroup中。这就需要一个属性， LayoutParams.我们在第27行定义一下，然后new出LayoutParams。66.68行

    然后给它增加一个规则，第67.69行给它设置为居左对齐，居中对齐。然后把它添加到ViewGroups中去71.72行，完成了2个控件的添加

三.我们看一下如何使用自定义的Topbar控件

我们先看一下是如何使用系统的控件的

我们会先声明一个控件的名字，通过android：调用系统的属性，大家有没有想过android是什么意思呢，看上面第一行程序。通过android：我们就可以引用系统的属性

1.我们先指定我们的控件名，完整的包名+名字，然后给它两个系统属性，在设置其它属性。那么我们如何引用我们自己的属性呢，我们仿照系统的方法，我们也添加第三行xmlns，然后与系统区别开起一个custom的名字，然后就可以调用我们自定义的属性了。

四.动态控制Topbar

   给我们的button添加点击事件

可以用匿名内部类的方法

然后在onClick中写点击后的方法，但是我们以后都要修改这个onClick方法，修改模板吗，那样就失去了这个模板的意义了。下面引入接口回调机制，senOnClickListener只关注OnClickLstener这个点击，而不关心去实现什么事情。我们仿照系统的实现来实现我们自己的事件回调机制，Topbar.java的29-36行程序第30行定义了接口，接下来在Topbar中暴露一个方法给我们的调用者，就是像setOnClickListener方法，于是我们创建了 setOntopbarClickListener

总结：1.通过模板复用，接口回调来提高开发效率，降低耦合度

    2.遇到问题可以想想系统的实现方法

    3.体会、思考经典的设计模式