高仿QQ界面(2)

通过分析QQ的布局可以大致分为三部分, 最上面的title, 中间的ViewPager和最下面的RadioButton,如下图

,这是大概的布局结构, 每个手机都可以直接看看这样的布局, 设置方式是: 进入开发者模式->找到显示布局边界这一选项, 把这个选上就会出现如下图的布局结构:

懵的一看界线框很多,不是很清晰, 建议对布局熟悉的可以看, 不熟悉的就暂时不看, 刚看可能很乱得感觉,,根据上面的分析直接写布局,大致分为几部分后在来写, 下面是我的布局结构:

直接子控件有三个, 分别是Title标题的RelativeLayout,中间可以横向滑动的ViewPager(注意是v4包下的)和RadioButton父布局的RadioGroup这里面用到的重复的属性会很多,特别是RadioButton的属性很多一样, 所以在写的时候尽量每个控件写一个Style,让控件来引用这个Style,这样可以避免很多不必要的代码, 让代码看起来很干净,后面再加调整的时候也会很方便,不用更改每个控件,只需要更改一个Style即可, 下面上图:

RadioStyle的代码

这里的RadioButton的背景图片使用的是Selector布局,里是找的QQ里面自带的图片,下面是Selector的代码:

每一个的都一样, 不多贴出了, 因为最近才写博客,不是很了解博客的布局结构, 有空了在好好排版一下, 尽量早点上代码,今天就到这, 下次改将ViewPager的实现逻辑了