滚动新闻视图,呃~ 其实真正的名称我也不太清楚,姑且这样叫吧。希望有大神可以帮忙指正,谢谢!
首先看一下这个demo的视图:
其中,有三个部分,分别是图片显示部分、标题部分和滚动中的点(先这样称呼吧)。
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="185dp" >
<LinearLayout
android:id="@+id/top_news_viewpager"
android:layout_width="fill_parent"
android:layout_height="185dp"
android:orientation="horizontal" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="30dp"
android:layout_alignParentBottom="true"
android:background="#88000000"
android:gravity="center_vertical"
android:orientation="horizontal" >
<TextView
android:id="@+id/top_news_title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_marginRight="8dp"
android:layout_weight="1"
android:singleLine="true"
android:text="图片标题"
android:textColor="#F6F6F6" />
<LinearLayout
android:id="@+id/dots_ll"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="5dp"
android:gravity="center"
android:orientation="horizontal" />
</LinearLayout>
</RelativeLayout>
在图片显示的位置上,实际上是LinearLayout,这样方便动态的加载图片。其他的布局不用多说了。很简单的。
在MianActivity中,对于滚动的视图,我是从网上找的哔哩哔哩的连接---->http://www.bilibili.com/index/slideshow.json;
整理后的json数据如下:
{
"list": [
{
"img": "http://i0.hdslb.com/u_user/c6b4b30c07ddfd9ca039c1113acce585.jpg",
"link": "http://www.bilibili.com/topic/711.html",
"simg": "",
"title": "花式秀恩爱啊"
},
{
"img": "http://i2.hdslb.com/promote/1e3a969ec5f508b2e74c6268f21158bd.jpg",
"link": "http://www.bilibili.com/video/av2412947/",
"simg": "",
"title": "周刊排行榜 #259"
},
{
"img": "http://i0.hdslb.com/promote/e6bbcf75fed8e6d39826c359db72fe5b.jpg",
"link": "http://www.bilibili.com/video/av2412466/?br",
"simg": "",
"title": "独家正版 雨色可可 10"
},
{
"img": "http://i0.hdslb.com/promote/5bc57e607a459de340f9c832f3040055.jpg",
"link": "http://www.bilibili.com/video/av2412458/?br",
"simg": "",
"title": "亚尔斯兰战记 第10话"
},
{
"img": "http://i1.hdslb.com/u_user/c3aa1bf61340aaaefbaef4efeb7e5c00.jpg",
"link": "http://www.bilibili.com/topic/709.html",
"simg": "",
"title": "生日快乐!"
},
{
"img": "http://i0.hdslb.com/u_user/9f295e435aa7b0d32886a034b635a758.jpg",
"link": "http://www.bilibili.com/topic/v2/708.html",
"simg": "",
"title": "啦啦啦!周末啦!"
}
],
"results": 6
}
用这个可以动态的获取实时的网络数据,比一般的教程中,固定的几张图片和标题,本人感觉要高大上许多。
这里提到一个很好用的json格式化软件,HiJson,真的很好用(谁用谁知道)。
对于json数据的解析,采用的是Gson来解析的。
而网络数据的加载是采用xUtils。也是很方便的哟。
MainActivity中的一些初始化就不多说了,下面一段代码是通过xUtils从网上截取json数据;
<span style="white-space:pre"> </span>HttpUtils httpUtils = new HttpUtils();
httpUtils.send(HttpMethod.GET, url, new RequestCallBack<String>() {
@Override
public void onFailure(HttpException arg0, String arg1) {
// TODO Auto-generated method stub
}
@Override
public void onSuccess(ResponseInfo<String> responseInfo) {
PrecessData(responseInfo.result);
}
});
其中的PrecessData()方法是对json数据进行解析和对数据的处理。
<span style="white-space:pre"> </span>protected void PrecessData(String result) {
Gson gson = new Gson();
RollViewBean viewBean = gson.fromJson(result, RollViewBean.class);
<span style="white-space:pre"> </span>//这里的viewBean是根据json数据创建的bean类</span>
if (viewBean.list != null) {
// 加载解析出来的数据
for (ItemView item : viewBean.list) {
picUrl.add(item.img);
titleList.add(item.title);
itemList.add(item.link);
}
<span style="white-space:pre"> </span>//上面的代码是对解析出来的数据添加的local变量中,方便使用。</span>
initDot(viewBean.list.size());
// 创建滚动view自定义组件
RollingViewPager pager = new RollingViewPager(this, dotViewList,
itemList, R.drawable.dot_normal, R.drawable.dot_focus);
<span style="white-space:pre"> </span> //上面的代码是创建自定义的滚动视图组件,并传入需要的参数</span>
<span style="white-space:pre"> </span> //参数中,dotViewList的定义是private List<View> dotViewList;这个是对点的View的一个list,下面会贴出代码。
<span style="white-space:pre"> </span>//<span style="font-family: Arial, Helvetica, sans-serif;">itemList是解析json数据是存储的详细连接地址。</span></span>
<span style="white-space:pre"> </span>//R.drawable.dot_normal和R.drawable.dot_focus是两个图片,代表图片展示和非展示状态是点的图片(好难解~)
pager.setImageUrl(picUrl);//设置图片的Url连接
pager.settitle(titleList, title);//设置图片的连接,并传入图片显示的控件
pager.setDuration(4000);//设置滚动视图的滚动时间
pager.startRoll();//开始滚动
ll_viewPager.removeAllViews();//清空布局
ll_viewPager.addView(pager);//将创建的view加载到布局中
}
}
下面代码是动态初始化点
<span style="white-space:pre"> </span>/**
* 初始化点
*
* @param size
* 点的个数
*/
private void initDot(int size) {
dotViewList = new ArrayList<View>();
ll_dot.removeAllViews();// 清空布局,保证没有控件
for (int i = 0; i < size; i++) {
View dotView = new View(this);
// 设置所创建出来view的大小
LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(
CommonUtil.dip2px(this, 6), CommonUtil.dip2px(this, 6));
// 设置各个view的间距
layoutParams.setMargins(5, 0, 5, 0);
// 将设置好的参数添加到view中
dotView.setLayoutParams(layoutParams);
// 设置初始的显示状况
if (i == 0) {
dotView.setBackgroundResource(R.drawable.dot_focus);
} else {
dotView.setBackgroundResource(R.drawable.dot_normal);
}
// 将创建的view添加到集合中
dotViewList.add(dotView);
// 将创建的view添加到布局中显示
ll_dot.addView(dotView);
}
}
这里用到了CommonUtils的工具类。
好了,MianActivity中大致是这样了,下面来看看自定义的滚动视图的代码
首先,在创建滚动视图的构造
<span style="white-space:pre"> </span>public RollingViewPager(MainActivity mainActivity, List<View> dotList,
List<String> itemList, int dotNormal, int dotFocus) {
super(mainActivity);
this.ct = mainActivity;
this.dotList = dotList;
this.dotNormal = dotNormal;
this.dotFocus = dotFocus;
this.itemList = itemList;
bitmapUtils = new BitmapUtils(ct);
bitmapUtils.configDefaultBitmapConfig(Config.RGB_565);
<span style="white-space:pre"> </span>//上面的2行代码是xUtils中bitmapUtils的简单创建和初始化配置。</span>
// 创建task
viewPagerTask = new ViewPagerTask();
<span style="white-space:pre"> </span>//这个task的作用是定时去滚动视图
接下来是设置图片的连接的方法
<span style="white-space:pre"> </span>/**
* 设置图片url连接
*
* @param picUrl
* 图片的url
*/
private List<String> picUrl;
public void setImageUrl(List<String> picUrl) {
this.picUrl = picUrl;
}
还有设置标题的方法
<span style="white-space:pre"> </span>/**
* 设置标题
*
* @param titleList
* 标题的数据
* @param title
* 标题显示的组件
*/
private List<String> titleList;
private TextView title;
public void settitle(List<String> titleList, TextView title) {
this.titleList = titleList;
this.title = title;
// 设置显示第一个标题的数据
if (title != null && titleList != null && titleList.size() > 0) {
title.setText(titleList.get(0));
}
}
还有设置跳转时间的方法
<span style="white-space:pre"> </span>/**
* 设置图片自动跳转的时间
*
* @param i
*/
private int duration;
public void setDuration(int duration) {
this.duration = duration;
}
接下来是重要的开始滚动的方法
<span style="white-space:pre"> </span>/**
* 开始滚动
*/
private boolean hasSetAdater = false;// 判断是否已经创建adapter
private MyViewPagerAdapter adapter;
private ViewPagerTask viewPagerTask;
public void startRoll() {
if (!hasSetAdater)// 如果没有创建adapter
{
hasSetAdater = true;
adapter = new MyViewPagerAdapter();
RollingViewPager.this
.setOnPageChangeListener(new MyOnPagerChangeListener());
RollingViewPager.this.setAdapter(adapter);
}
handler.postDelayed(viewPagerTask, duration);
}
/*
* 创建一个handler来控制循环滚动
*/
private Handler handler = new Handler() {
public void handleMessage(android.os.Message msg) {
RollingViewPager.this.setCurrentItem(currentItem);
startRoll();
};
};
/**
* 创建一个task开执行滚动切换操作
*
* @author Administrator
*
*/
private int currentItem = 0;// 当前正在展示的
public class ViewPagerTask implements Runnable {
@Override
public void run() {
currentItem = (currentItem + 1) % dotList.size();
title.setText(titleList.get(currentItem));
handler.obtainMessage().sendToTarget();// 再次调用handle
}
}
关键的自定义MyViewPagerAdapter如下
<span style="white-space:pre"> </span>public class MyViewPagerAdapter extends PagerAdapter {
@Override
public int getCount() {
// TODO Auto-generated method stub
return picUrl.size();
}
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
// TODO Auto-generated method stub
return arg0 == arg1;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
((ViewPager) container).removeView((View) object);
}
@Override
public Object instantiateItem(ViewGroup container, final int position) {
View view = View.inflate(ct, R.layout.viewpager_item, null);//其中加载的viewpager_item是一个ImageView的布局。
((ViewPager) container).addView(view);// 将创建的空间添加到container容器中
ImageView image = (ImageView) view.findViewById(R.id.image);
// LogUtils.d("要加载的数据url---->" + picUrl.get(position));
bitmapUtils.display(image, picUrl.get(position));// 下载图片并显示显示到相应的位置
view.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View view) {
// TODO Auto-generated method stub
// LogUtils.d("你点击了" + itemList.get(position));
Intent intent = new Intent();
intent.putExtra("url", itemList.get(position));
intent.setClass(ct, ItemActivity.class);
ct.startActivity(intent);
}
});
<span style="white-space:pre"> </span>//上面的代码复写了onClick方法,实现了点击滚动视图后跳转到详细内容显示。这部分比较简单,就不给出代码了。
return view;
}
}
最重要的是图片与点了联动,如下代码:
<span style="white-space:pre"> </span>public class MyOnPagerChangeListener implements OnPageChangeListener {
private int oldposition = 0;
@Override
public void onPageSelected(int position) {
// TODO Auto-generated method stub
currentItem = position;
if (titleList != null) {
title.setText(titleList.get(currentItem));
}
if (dotList != null) {
dotList.get(position).setBackgroundResource(dotFocus);
dotList.get(oldposition).setBackgroundResource(dotNormal);
}
oldposition = currentItem;
}
<span style="white-space:pre"> </span>//在RollingViewPager的构造中传入点的集合dotList就是为了联动。</span>
@Override
public void onPageScrollStateChanged(int arg0) {
// TODO Auto-generated method stub
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
// TODO Auto-generated method stub
}
}
至此,基本上这个demo的关键代码都在这里了,希望看客们共同学习,天天向上。
如果有需要源代码的,qq留言。谢谢。