智慧北京03_菜单详情页_ViewPagerIndicator框架_页签详情页_事件处理

1,新闻菜单详情页,初始化标签页面

 

 

这是新闻菜单详情页的内容,不考虑导航栏的状况下,下面是一个ViewPager.

建立新闻菜单详情页的布局,建立ViewPager

建立ViewPager适配器

重点在初始化item,instantiateItem()中

 

观察可知,其实在这几个Pager的内容基本同样,因此只须要建立一个对象类(页签)就行

这个类继承BaseMenuDetailPager(是否继承这个类不是重点,主要是不须要再建立一个类去写initView(),initData()方法)

 

初始化这个页签在NewsMenuPager的initData()中进行初始化

初始化页签要根据网络返回的数据,拿到页签的数量

新闻中心把数据传递给菜单详情页>>>在建立菜单详情页集合的时候,把解析网络的children数据,经过构造传递过去(更改构造参数就是了)

 

而后在具体的新闻详情页中,initData()中

遍历children的集合(由于封装的时候用的是集合去封装),建立页签对象,数量与集合一直,最后所有储存在页签集合中

 

而后在ViewPager是配置器中设置这个集合的页签

 

考虑到每一个页签的标题不同,经过能够经过构造把标题传递过去

这里设置标题不能在initView()中设置,放到initData()中设置,否则代码顺序不一致,会null

 

额外:页签滑动事件处理

这样设置的ViewPager与父容器的触摸事件冲突了,滑动很费力

因此在父容器的ViewPager(那个自定义控件中)把interceptTouchEvent() 的返回值置为flase

 

2,开源框架ViewPagerIndicator的使用(ViewPager页面指示器)

经过实例代码中的实例找到须要的效果,而后全局搜索找到相关的代码,而后借鉴(Copy);

这里在eclipse中使用会出现v4包冲突,这里就不能直接删Library中的v4(由于它自己依赖的就是自身的)把v4包版本搞一致就能够了(若是是实例和Library包中的v4包冲突,删掉实例的v4包,改一致也能够,不过可能有问题).

 

使用框架(具体流程参考示例代码):

①布局文件中,建立一个TabPageIndicator控件和一个ViewPager(前面已经建立了)

②代码中将指示器和ViewPager绑定一块儿(要在setAdapter()以后)

③在ViewPager适配器里重写getPagerTitle()方法

④发现效果不同,是由于示例中设置了一个主题,一样copy过来就好了.

背景变成黑色,由于主题的缘由.因此设置一个背景颜色就能够了

⑤修改indicator指示器文本的颜色(带有一个状态选择器),指示器的蓝条

由于是改了主题才有的蓝条,因此查看主题中的蓝条样式便可

可是看到蓝条样式,并不能修改,由于它在库中

因此干脆把样式copy出来放到项目里,再修改,改为须要的样式.

一样的文字也有样式,能够修改选择器.

 

3.指示器事件处理

3.1 当在指示器上滑动的时候,滑出了侧边栏,由于指示器和侧边栏冲突了.

解决方式:让须要事件的子控件强制拦截掉全部事件,不让别的控件抢到.

在指示器类中(其实是在类库中的源码中)

重写dispatchTouchEvent()方法

请求全部父控件不要拦截事件,包括爷爷(叔叔什么的都拦截不了)都不要拦截

getParent().requestDisallowIntercepteTouchEvent(true);

 

3.2 页签滑动的时候也会滑出侧边栏

这里不适合直接请求全部父控件不要拦截,在第一个页签的时候才让侧边栏能够滑出.

解决方式:实现 ViewPager的滑动事件,拿到SlidingMenu对象.

可是这里不能使用ViewPager的滑动事件监听器,而要用指示器的监听器

mIndicator.setonPagerChangeListener(this)

在重写的方法里,页面被选中时,判断是否须要开启禁用SlidingMenu.

 

3.3 去掉ListView分割线(默认是有一条分割线的)

属性android:divider=”@null”能够去掉条目间的分割线

 

4 页签点击按钮跳转下一页

 

 

在新闻标签页中,给指示器添加一个图标

这里的按钮事件就用Xtuils的功能

建立一个方法(view),在上面加注解@onClick(id)便可

先拿到当前的选中条目,再进行++,设置给ViewPager(它本身处理了索引越界问题)

 

 

 

5,页签详情页结构分析

 

 

5.1 给页签详情页设置布局ViewPager + ListView

找到关心的控件

设置ViewPager适配器

返回的条目数跟网络数据有关,在Children中的url里

 

5.2 在页签详情页中访问网络,从传递过来的网络数据中读取到url,访问它,(这里的前缀要本身写,不过前面已经封装好了)

这里的url返回的也是一个json串,建立一个JAVABean封装数据

而后用GSON进行解析

记得打印一下结果,看看跟预期想要的数据是否一致

 

5.3 从返回的结果中获取到页签详情页的ViewPager的数据(TopNews头条新闻)

设置条目数,设置默认的图片

而后下载图片,下载完了流把图片设置给条目(须要避免内存溢出,oom,加缓存提升速度)

Xutils模块>>BitmapUtils

①使用方式

BitMapUtils mBitMapUtils = new BitMapUtils(mActivity);

mBitMapUtils.display(view(须要设置的控件),url(经过数据中的url路径获取))

 

②不过设置完会显示与容器范围不完整匹配,设置成背景会好一些

可是mBitMapUtils是默认设置成src,修改它太麻烦了

imageView.setScaleType(ScaleType.FIT_XY)//设置图片缩放方式,填充父容器

 

③读取缓存:在请求数据以前就加载缓存

加载缓存,访问网络获得JSON以后把缓存设置进来

图片缓存有BitMapUtils进行了缓存处理

 

5.4 轮播图滑动事件处理(dispatchTouchEvent()方法内处理)

问题1:在页签里TopNews 的ViewPager和新闻详情页的ViewPager冲突了

解决1:建立一个自定义控件ViewPager申请父类不要拦截

 

问题2:分析项目可知,若是画到轮播图最后一个图片或第一个图片应该能够继续滑.同时上下滑动也不该该拦截

分析2:上下滑动,父控件拦截

 向右滑动而且是第一个页面,父控件须要拦截

 向左滑动而且是最后一个页面,父控件须要拦截

拿到item总数

getAdapter().getCount();//经过适配器拿到总数

注意:仍是要保留前面的请求父类不要拦截,否则不会走后面的触摸拦截事件

 

6,更新头条新闻标题

6.1 不论是加载缓存仍是访问网络,都有一段时间的空白,用户体验很差

mBitMapUtils.configdefaultLodingImage(id)//设置加载中的默认图片

 

6.2 轮播的描述文本,用一个帧布局来作,让描述文本压在图片上便可

 

布局属性中半透明简写#a000

 

更新描述文本,在ViewPager的事件监听器中,默认选中第0个

文本经过解析网络数据中的内容获得

 

6.3 小圆点根据开源框架中的效果,找到对应的代码和布局,copy过来

CirclePagerIndicator自定义控件

须要修改小圆点的样式:开源框架提供布局,代码方法,主题样式三种修改方式.

这里用布局文件修改,找到布局方式对应的控件,对比颜色进行修改便可.

须要注意的是:命名空间的声明,copy过来就能够

 

问题1:当页签切换的时候,小圆点与显示的轮播不一致

mIndicator.onPageSelected(0)//默认选中第一个,解决页面从新初始化的时候,Indicator与实际图片显示不一致.

 

优势:使用方便

缺点:细节修改太麻烦,好比这个指示器之间圆点的距离修改,很麻烦

 

7.新闻列表的加载,CenterCrop属性裁剪,参看界面图

 

 

7.1 建立ListView在布局中.

获取完网络数据,经过网络数据中的列表数据(newsTabBean.data.news)

建立适配器

建立条目布局文件

条目中,最好把宽高固定下来.

可是发现图片并无把ImagView填充起来

因此设置scaleType=’centerCrop’//根据控件大小进行裁剪,推荐使用

图片周围的黑色边框实际上是背景为黑色,padding=1dp

 

条目的文本,ellipsize=”end” 可让未显示完的文本显示为...

maxLine=”2”限制最大显示行数

 

7.2 新闻列表展示

把网络数据的信息填充到ListView中

设置图片的时候,建立适配器的构造方法,在这里用BitMapUtils设置默认图片

而后在每个条目设置图片时,也用它去加载图片

 

 

问题1:拖动的时候ListView变成黑色了

ListView是有一个缓冲的颜色,是黑色,为了提升性能有时候会显示为黑色

解决:布局数据cacheColorHint=”#fff”

 

问题2:ListView占据的位置过小,头条新闻占据位置太大

解决:把头条新闻做为LIstView的头布局

 

 

把头条新闻抽取出来作成一个布局,而后listView.addHeaderView(view)

注意,这里单独抽取出来以后,ViewUtils须要从新注入这个头布局

 

若是头布局高度问题:在头布局上套一层LinearLayout>>>高度包裹内容