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>>>高度包裹内容