转载地址:http://blog.csdn.net/guolin_blog/article/details/8796877
既然是要加入自动播放的功能,那么就有一个非常重要的问题需要考虑。如果当前已经滚动到了最后一张图片,应该怎么办?由于我们目前的实现方案是,所有的图片都按照布局文件里面定义的顺序横向排列,然后通过偏移第一个图片的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>