android学习之---滚动新闻视图

滚动新闻视图，呃~  其实真正的名称我也不太清楚，姑且这样叫吧。希望有大神可以帮忙指正，谢谢！

首先看一下这个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>() {@Overridepublic void onFailure(HttpException arg0, String arg1) {// TODO Auto-generated method stub}@Overridepublic 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>// 创建taskviewPagerTask = 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;// 判断是否已经创建adapterprivate 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 {@Overridepublic 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 {@Overridepublic int getCount() {// TODO Auto-generated method stubreturn picUrl.size();}@Overridepublic boolean isViewFromObject(View arg0, Object arg1) {// TODO Auto-generated method stubreturn arg0 == arg1;}@Overridepublic void destroyItem(ViewGroup container, int position, Object object) {((ViewPager) container).removeView((View) object);}@Overridepublic 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() {@Overridepublic 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;@Overridepublic void onPageSelected(int position) {// TODO Auto-generated method stubcurrentItem = 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>@Overridepublic void onPageScrollStateChanged(int arg0) {// TODO Auto-generated method stub}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {// TODO Auto-generated method stub}}

至此，基本上这个demo的关键代码都在这里了，希望看客们共同学习，天天向上。

如果有需要源代码的，qq留言。谢谢。