从Top栏说说自定义View

周末在家想着这周写点什么好呢，转眼拿起手机找点灵感，这个时候打开两款软件

e学客户端

  掌上英雄联盟     

似乎现在国内主流的app框架中对于top栏的样式是千篇一律，左边占一块区域，中间显示当前页面的标题，右边再占一块区域用于跳转。可能在有的项目中这种top栏实现的方式选择写一个通用的layout写死，然后在需要用到的布局中include一下，当然这种实现方式没有问题，但是却显得不是那么的高大上。今天咱们就结合自定义view来手撸一个通用的top栏。

1.1 自定义属性

 给一个自定义view设置自定义属性很简单，只要在res资源文件目录的values目录下创建一个attrs.xml属性即可。截图如下：

attrs.xml所在路径

考虑到top栏包括：左标题名称，左标题文字颜色，左标题背景，中间标题名称，中间标题文字大小，中间标题颜色，右标题文字名称，右标题文字颜色，右标题背景，所以创建的attrs文件中应该包括如下属性：

TopBar需要的属性

这样我们就成功的在attrs.xml中<declare-styleable>节点下定义了一个叫TopBar自定义属性。这里我在最后一行加了标记，这里说明一下，左右背景既可以是颜色，也可以引用的背景图片，所以用“|”来分隔不同的属性。

2.1 自定义view

在确定好TopBar所包含的各个属性后，我们就要开始写我们这个控件了，因为我们的标题栏包含很多控件，所以它应该继承自ViewGroup,这里为了实现简单，我们让它继承RelativeLayout。代码如下：

获取布局文件中定义的自定义属性

这样就取得了我们在attrs.xml在布局文件中设置的属性，注意我标记的两条数据

初始化TopBar中的控件

这里需要注意的事addView时给子控件增加的布局约束

3.1 为TopBar中控件增加点击事件

为了让调用者可以实现不同的点击事件，所以事件的点击事件不能在TopBar控件中写死，这时候我们就要考虑使用接口回调了。

    3.1.1 创建内部接口

        在TopBar中定义左右点击事件接口，分别响应不同的事件：

创建内部回调接口

      3.1.2 响应点击事件

创建事件响应

4.1 布局引用

万事俱备，只欠东风，下面就到实战环节了！

布局中引用TopBar

这里我标记了一条布局引用，注意这里用到自定义控件时需要加入引用空间声明，这里如果不用res-auto也可以换成程序的包名。

下面在MainActivity中取得这个控件，并且响应点击事件如下：

MainActivity引用如下

到这里这个TopBar的自定义viewGrop就结束了~谢谢大家支持！放下软件最后运行截图：

360手机上运行截图

需要源码的欢迎加我微信