转自: http://blog.csdn.net/guolin_blog/article/details/8796877
转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/8796877
大家好,记得上次我带着大家一起实现了一个类似与淘宝客户端中带有的图片滚动播放器的效果,但是在做完了之后,发现忘了加入图片自动播放的功能(或许是我有意忘记加的.....),结果图片只能通过手指滑动来播放。于是今天我将再次带领大家,添加上之前遗漏的功能,让我们的图片播放器更加完善。
这次的程序开发将完全基于上一次的代码,如果有朋友还未看过上篇文章,请先阅读 Android实现图片滚动控件,含页签功能,让你的应用像淘宝一样炫起来 。
既然是要加入自动播放的功能,那么就有一个非常重要的问题需要考虑。如果当前已经滚动到了最后一张图片,应该怎么办?由于我们目前的实现方案是,所有的图片都按照布局文件里面定义的顺序横向排列,然后通过偏移第一个图片的leftMargin,来决定显示哪一张图片。因此当图片滚动在最后一张时,我们可以让程序迅速地回滚到第一张图片,然后从头开始滚动。这种效果和淘宝客户端是有一定差异的(淘宝并没有回滚机制,而是很自然地由最后一张图片滚动到第一张图片),我也研究过淘宝图片滚动器的实现方法,并不难实现。但是由于我们是基于上次的代码进行开发的,方案上无法实现和淘宝客户端一样的效果,因此这里也就不追求和它完全一致了,各有风格也挺好的。
好了,现在开始实现功能,首先是打开SlidingSwitcherView,在里面加入一个新的AsyncTask,专门用于回滚到第一张图片:
- class ScrollToFirstItemTask extends AsyncTask<Integer, Integer, Integer> {
- @Override
- protected Integer doInBackground(Integer... speed) {
- int leftMargin = firstItemParams.leftMargin;
- while (true) {
- leftMargin = leftMargin + speed[0];
- // 当leftMargin大于0时,说明已经滚动到了第一个元素,跳出循环
- if (leftMargin > 0) {
- leftMargin = 0;
- break;
- }
- publishProgress(leftMargin);
- sleep(20);
- }
- return leftMargin;
- }
- @Override
- protected void onProgressUpdate(Integer... leftMargin) {
- firstItemParams.leftMargin = leftMargin[0];
- firstItem.setLayoutParams(firstItemParams);
- }
- @Override
- protected void onPostExecute(Integer leftMargin) {
- firstItemParams.leftMargin = leftMargin;
- firstItem.setLayoutParams(firstItemParams);
- }
- }
- /**
- * 滚动到第一个元素。
- */
- public void scrollToFirstItem() {
- new ScrollToFirstItemTask().execute(20 * itemsCount);
- }
OK,然后我们要定义一个方法用于启动自动播放功能。仍然是在SlidingSwitcherView中新增如下代码:
- /**
- * 用于在定时器当中操作UI界面。
- */
- private Handler handler = new Handler();
- /**
- * 开启图片自动播放功能,当滚动到最后一张图片的时候,会自动回滚到第一张图片。
- */
- public void startAutoPlay() {
- new Timer().scheduleAtFixedRate(new TimerTask() {
- @Override
- public void run() {
- if (currentItemIndex == itemsCount - 1) {
- currentItemIndex = 0;
- handler.post(new Runnable() {
- @Override
- public void run() {
- scrollToFirstItem();
- refreshDotsLayout();
- }
- });
- } else {
- currentItemIndex++;
- handler.post(new Runnable() {
- @Override
- public void run() {
- scrollToNext();
- refreshDotsLayout();
- }
- });
- }
- }
- }, 3000, 3000);
- }
之后只要在Activity创建的时候去调用SlidingSwitcherView的startAutoPlay方法,自动播放功能就实现了!!
结束了?Naive!! 如果就这么结束了,怎么对得起大家的期待,如此简单的功能还要用一篇文章来讲简直是弱爆了。
接下来才是今天的重点,我们要使用自定义属性来启用自动播放功能,这样才能让你更加接近高手,才能让你更加玩转Android。
那我们继续,在res/values目录下新建一个attrs.xml文件,里面加入代码:
- <?xml version="1.0" encoding="UTF-8"?>
- <resources>
- <attr name="auto_play" forMymat="boolean" />
- <declare-styleable name="SlidingSwitcherView">
- <attr name="auto_play" />
- </declare-styleable>
- </resources>
然后重写SlidingSwitcherView的构造函数,在里面加入从布局文件中获取自定义属性的代码:
- public SlidingSwitcherView(Context context, AttributeSet attrs) {
- super(context, attrs);
- TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.SlidingSwitcherView);
- boolean isAutoPlay = a.getBoolean(R.styleable.SlidingSwitcherView_auto_play, false);
- if (isAutoPlay) {
- startAutoPlay();
- }
- a.recycle();
- }
接下来就是见证奇迹的时刻!让我们打开activity_main.xml,在里面加入两行关键性代码。在最外层的LinearLayout加入xmlns:myattr="http://schemas.android.com/apk/res/com.example.viewswitcher"。在我们自定义的com.example.viewswitcher.SlidingSwitcherView加入myattr:auto_play="true"。完整XML代码如下:
- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
- xmlns:tools="http://schemas.android.com/tools"
- xmlns:myattr="http://schemas.android.com/apk/res/com.example.viewswitcher"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:orientation="vertical"
- tools:context=".MainActivity" >
- <com.example.viewswitcher.SlidingSwitcherView
- android:id="@+id/slidingLayout"
- myattr:auto_play="true"
- android:layout_width="fill_parent"
- android:layout_height="100dip" >
- <LinearLayout
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:orientation="horizontal" >
- <Button
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:background="@drawable/image1" />
- <Button
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:background="@drawable/image2" />
- <Button
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:background="@drawable/image3" />
- <Button
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:background="@drawable/image4" />
- </LinearLayout>
- <LinearLayout
- android:layout_width="60dip"
- android:layout_height="20dip"
- android:layout_alignParentBottom="true"
- android:layout_alignParentRight="true"
- android:layout_margin="15dip"
- android:orientation="horizontal" >
- </LinearLayout>
- </com.example.viewswitcher.SlidingSwitcherView>
- </LinearLayout>