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>() {

			@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留言。谢谢。