文档章节

Android客户端图片左右滑动(自动切换)

黄柳淞
 黄柳淞
发布于 2016/11/26 23:12
字数 1363
阅读 17
收藏 0

本例是用ViewPager去做的实现,支持自动滑动和手动滑动,不仅优酷网,实际上有很多商城和门户网站都有类似的实现:

具体思路:

1. 工程中需要添加android-support-v4.jar,才能使用ViewPager控件.

2. 图片的自动切换: 可使用Timer或者ScheduledExecutorService,这个有多重方式可以实现.

    同时要切换底部的dots(园点)

3.Handler+Message机制更新UI,这个相信大家都很熟练,不再描述

4. 实现的一些细节:注意本例中的优化:图片的自动切换启动了其他的线程,要在Activity在可见到不可见的状态,也就是在onStop()方法中将线程停止,在onStart()方法中开启线程。否则,Timer没有停止,或者反复开启,会引起较大的内存消耗,时间一长就程序就会崩掉。 还有,就是在跳转到其他Activity的过程中会出现画面的卡顿

 

下面看一下效果图和具体代码:

            

 

 

工程结构如下图所示:

main.xml:

[java] view plaincopy

<p>  
</p><p><strong>然后是具体的布局文件及代码实现:</strong></p><p>main.xml:</p>  
<?xml version="1.0" encoding="utf-8"?>  
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    android:layout_width="fill_parent"  
    android:layout_height="fill_parent"  
    android:background="#FFFFFF"  
    android:orientation="vertical" >  
  
    <RelativeLayout  
        android:layout_width="fill_parent"  
        android:layout_height="40dip"  
        android:background="@drawable/title_bk" >  
  
        <ImageButton  
            android:id="@+id/btn_back"  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"  
            android:background="@drawable/btn_back_selector"  
            android:src="@drawable/btn_back" />  
  
        <View  
            android:id="@+id/line0"  
            android:layout_width="1px"  
            android:layout_height="fill_parent"  
            android:layout_toRightOf="@id/btn_back"  
            android:background="#aa11264f" />  
  
        <View  
            android:layout_width="1px"  
            android:layout_height="fill_parent"  
            android:layout_toRightOf="@id/line0"  
            android:background="#009ad6" />  
  
        <TextView  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"  
            android:layout_centerInParent="true"  
            android:text="优酷客户端"  
            android:textColor="#FFFFFF"  
            android:textSize="20sp" />  
    </RelativeLayout>  
  
    <FrameLayout  
        android:layout_width="fill_parent"  
        android:layout_height="140dip" >  
  
        <android.support.v4.view.ViewPager  
            android:id="@+id/vp"  
            android:layout_width="fill_parent"  
            android:layout_height="fill_parent" />  
  
        <LinearLayout  
            android:layout_width="fill_parent"  
            android:layout_height="35dip"  
            android:layout_gravity="bottom"  
            android:background="#33000000"  
            android:gravity="center"  
            android:orientation="vertical" >  
  
            <TextView  
                android:id="@+id/tv_title"  
                android:layout_width="wrap_content"  
                android:layout_height="wrap_content"  
                android:text="中国家庭院校园区域名字体现"  
                android:textColor="#ffffff" />  
  
            <LinearLayout  
                android:layout_width="wrap_content"  
                android:layout_height="wrap_content"  
                android:layout_marginTop="3dip"  
                android:gravity="center" >  
  
                <View  
                    android:id="@+id/v_dot0"  
                    style="@style/dot_style"  
                    android:background="@drawable/dot_focused" />  
  
                <View  
                    android:id="@+id/v_dot1"  
                    style="@style/dot_style" />  
  
                <View  
                    android:id="@+id/v_dot2"  
                    style="@style/dot_style" />  
  
                <View  
                    android:id="@+id/v_dot3"  
                    style="@style/dot_style" />  
  
                <View  
                    android:id="@+id/v_dot4"  
                    style="@style/dot_style" />  
            </LinearLayout>  
        </LinearLayout>  
    </FrameLayout>  
  
</LinearLayout>  


 

MyViewPagerActivity:

[java] view plaincopy

  1. package com.tony.viewpager;  
      
    import java.util.ArrayList;  
    import java.util.List;  
    import java.util.concurrent.Executors;  
    import java.util.concurrent.ScheduledExecutorService;  
    import java.util.concurrent.TimeUnit;  
      
      
    import android.app.Activity;  
    import android.os.Bundle;  
    import android.os.Handler;  
    import android.os.Parcelable;  
    import android.support.v4.view.PagerAdapter;  
    import android.support.v4.view.ViewPager;  
    import android.support.v4.view.ViewPager.OnPageChangeListener;  
    import android.view.View;  
    import android.widget.ImageView;  
    import android.widget.ImageView.ScaleType;  
    import android.widget.TextView;  
      
    /** 
     * 仿优酷Android客户端图片左右滑动 
     *  
     */  
    public class MyViewPagerActivity extends Activity {  
        private ViewPager viewPager; // android-support-v4中的滑动组件  
        private List<ImageView> imageViews; // 滑动的图片集合  
      
        private String[] titles; // 图片标题  
        private int[] imageResId; // 图片ID  
        private List<View> dots; // 图片标题正文的那些点  
      
        private TextView tv_title;  
        private int currentItem = 0; // 当前图片的索引号  
      
        // An ExecutorService that can schedule commands to run after a given delay,  
        // or to execute periodically.  
        private ScheduledExecutorService scheduledExecutorService;  
      
        // 切换当前显示的图片  
        private Handler handler = new Handler() {  
            public void handleMessage(android.os.Message msg) {  
                viewPager.setCurrentItem(currentItem);// 切换当前显示的图片  
            };  
        };  
      
        @Override  
        public void onCreate(Bundle savedInstanceState) {  
            super.onCreate(savedInstanceState);  
            setContentView(R.layout.main);  
      
            imageResId = new int[] { R.drawable.a, R.drawable.b, R.drawable.c, R.drawable.d, R.drawable.e };  
            titles = new String[imageResId.length];  
            titles[0] = "巩俐不低俗,我就不能低俗";  
            titles[1] = "扑树又回来啦!再唱经典老歌引万人大合唱";  
            titles[2] = "揭秘北京电影如何升级";  
            titles[3] = "乐视网TV版大派送";  
            titles[4] = "热血屌丝的反杀";  
      
            imageViews = new ArrayList<ImageView>();  
      
            // 初始化图片资源  
            for (int i = 0; i < imageResId.length; i++) {  
                ImageView imageView = new ImageView(this);  
                imageView.setImageResource(imageResId[i]);  
                imageView.setScaleType(ScaleType.CENTER_CROP);  
                imageViews.add(imageView);  
            }  
      
              
            dots = new ArrayList<View>();  
            dots.add(findViewById(R.id.v_dot0));  
            dots.add(findViewById(R.id.v_dot1));  
            dots.add(findViewById(R.id.v_dot2));  
            dots.add(findViewById(R.id.v_dot3));  
            dots.add(findViewById(R.id.v_dot4));  
      
            tv_title = (TextView) findViewById(R.id.tv_title);  
            tv_title.setText(titles[0]);//  
      
            viewPager = (ViewPager) findViewById(R.id.vp);  
            viewPager.setAdapter(new MyAdapter());// 设置填充ViewPager页面的适配器  
            // 设置一个监听器,当ViewPager中的页面改变时调用  
            viewPager.setOnPageChangeListener(new MyPageChangeListener());  
      
        }  
      
        @Override  
        protected void onStart() {  
            scheduledExecutorService = Executors.newSingleThreadScheduledExecutor();  
            // 当Activity显示出来后,每两秒钟切换一次图片显示  
            scheduledExecutorService.scheduleAtFixedRate(new ScrollTask(), 1, 2, TimeUnit.SECONDS);  
            super.onStart();  
        }  
      
        @Override  
        protected void onStop() {  
            // 当Activity不可见的时候停止切换  
            scheduledExecutorService.shutdown();  
            super.onStop();  
        }  
      
        /** 
         * 换行切换任务 
         *  
         * @author Administrator 
         *  
         */  
        private class ScrollTask implements Runnable {  
      
            public void run() {  
                synchronized (viewPager) {  
                    System.out.println("currentItem: " + currentItem);  
                    currentItem = (currentItem + 1) % imageViews.size();  
                    handler.obtainMessage().sendToTarget(); // 通过Handler切换图片  
                }  
            }  
      
        }  
      
        /** 
         * 当ViewPager中页面的状态发生改变时调用 
         *  
         * @author Administrator 
         *  
         */  
        private class MyPageChangeListener implements OnPageChangeListener {  
            private int oldPosition = 0;  
      
            /** 
             * This method will be invoked when a new page becomes selected. 
             * position: Position index of the new selected page. 
             */  
            public void onPageSelected(int position) {  
                currentItem = position;  
                tv_title.setText(titles[position]);  
                dots.get(oldPosition).setBackgroundResource(R.drawable.dot_normal);  
                dots.get(position).setBackgroundResource(R.drawable.dot_focused);  
                oldPosition = position;  
            }  
      
            public void onPageScrollStateChanged(int arg0) {  
      
            }  
      
            public void onPageScrolled(int arg0, float arg1, int arg2) {  
      
            }  
        }  
      
        /** 
         * 填充ViewPager页面的适配器 
         *  
         * @author Administrator 
         *  
         */  
        private class MyAdapter extends PagerAdapter {  
      
            @Override  
            public int getCount() {  
                return imageResId.length;  
            }  
      
            @Override  
            public Object instantiateItem(View arg0, int arg1) {  
                ((ViewPager) arg0).addView(imageViews.get(arg1));  
                return imageViews.get(arg1);  
            }  
      
            @Override  
            public void destroyItem(View arg0, int arg1, Object arg2) {  
                ((ViewPager) arg0).removeView((View) arg2);  
            }  
      
            @Override  
            public boolean isViewFromObject(View arg0, Object arg1) {  
                return arg0 == arg1;  
            }  
      
            @Override  
            public void restoreState(Parcelable arg0, ClassLoader arg1) {  
      
            }  
      
            @Override  
            public Parcelable saveState() {  
                return null;  
            }  
      
            @Override  
            public void startUpdate(View arg0) {  
      
            }  
      
            @Override  
            public void finishUpdate(View arg0) {  
      
            }  
        }  
    }  

     

Drawable目录下
btn_back_selector.xml:

[java] view plaincopy

  1. <?xml version="1.0" encoding="utf-8"?>  
    <selector xmlns:android="http://schemas.android.com/apk/res/android">  
      
        <item android:drawable="@drawable/btn_top_pressed" android:state_focused="true"></item>  
        <item android:drawable="@drawable/btn_top_pressed" android:state_pressed="true"></item>  
        <item android:drawable="@drawable/btn_top_pressed" android:state_selected="true"></item>  
        <item android:drawable="@drawable/title_bk"></item>  
      
    </selector>  
    
    
    
    btn_top_pressed.xml:
    
    [java] view plaincopy
    
    <?xml version="1.0" encoding="utf-8"?>  
    <shape xmlns:android="http://schemas.android.com/apk/res/android"  
        android:shape="rectangle" >  
      
        <gradient  
            android:angle="270"  
            android:endColor="#009ad6"  
            android:startColor="#11264f" />  
      
    </shape>  

     


dot_focused.xml:

[java] view plaincopy

  1. <?xml version="1.0" encoding="utf-8"?>  
    <shape xmlns:android="http://schemas.android.com/apk/res/android"  
        android:shape="oval" >  
      
        <solid android:color="#aaFFFFFF" />  
      
        <corners android:radius="5dip" />  
      
    </shape>  

     


dot_normal.xml:

[java] view plaincopy

  1. <?xml version="1.0" encoding="utf-8"?>  
    <shape xmlns:android="http://schemas.android.com/apk/res/android"  
        android:shape="oval" >  
      
        <solid android:color="#33000000" />  
      
        <corners android:radius="5dip" />  
      
    </shape>  

     


title_bk.xml:

[java] view plaincopy

<?xml version="1.0" encoding="utf-8"?>  
<shape xmlns:android="http://schemas.android.com/apk/res/android"  
    android:shape="rectangle" >  
  
    <gradient  
        android:angle="270"  
        android:endColor="#11264f"  
        android:startColor="#009ad6" />  
  
</shape>

  

 

源码下载地址:

http://download.csdn.net/detail/t12x3456/4751688

© 著作权归作者所有

黄柳淞
粉丝 2
博文 108
码字总数 54251
作品 0
南宁
程序员
私信 提问
高仿优酷Android客户端图片左右滑动(自动切换)

本例是用ViewPager去做的实现,支持自动滑动和手动滑动,不仅优酷网,实际上有很多商城和门户网站都有类似的实现: 具体思路: 1. 工程中需要添加android-support-v4.jar,才能使用ViewPager控...

mingxun
2013/11/06
1K
1
Android:这是一份全面 & 详细的动画入门学习指南

前言 动画的使用 是 开发中常用的知识 可是动画的种类繁多、使用复杂,每当需要 采用自定义动画 实现 复杂的动画效果时,很多开发者就显得束手无策 本文将献上一份动画简介,包括动画的种类、...

Carson_Ho
07/23
0
0
Android实现导航菜单左右滑动效果

本文给大家介绍在Android中如何实现顶部导航菜单左右滑动效果。 在以前的一篇博文中我使用android-support-v4.jar实现了左右滑动指引效果,有兴趣的朋友可以查看: http://www.cnblogs.com/h...

迷途d书童
2012/04/26
6.4K
1
类似Cover Flow的效果

1、首先,这个看一个cover Flow的图 我想这个很多朋友都可以android的gallery或者其他模仿出来。 2、我的需求:先看图 1、左右可以滑动的效果,但是中间的图片移植都是红色的那张。左右的也只...

Muse.F.J.Roger
2012/09/13
470
0
Android的Activity屏幕切换动画(二)-左右滑动深入与实战

上一篇文章讲了 Android的左右滑动切换,实现过程是非常简单,一些新手可能会向深入了了解Activity切换的原理,下面主要对左右滑动进行深入的探讨,并以项目中的一个切换效果来进一步了解。 ...

Binny
2011/12/18
22K
8

没有更多内容

加载失败,请刷新页面

加载更多

华为手机翻译功能怎么使用?这三种方法请务必收藏

华为手机翻译功能怎么使用?在我们的生活中会经常遇到翻译问题,许多外语不好的朋友该怎么办呢?华为手机已经为我们解决了这个问题,今天小编就教大家学会使用华为手机中的三种翻译技巧,需要...

翻译小天才
26分钟前
4
0
企业服务软件开发中需要注意的三个问题

在开发企业服务软件时,我们需要分为:业务需求、用户需求、产品需求,三大需求层次,三个层次互相关联,企业服务软件开发首先要服务业务,需要满足业务的需求,再关注用户体验,也就是用户需...

积木创意科技
29分钟前
4
0
C++容器底层数据结构

内置数组: int arr[10][10];memset(arr,0,10*10*sizeof(int)); //初始化int tmp[10][10];memcpy(arr, tmp, 10 * 10 * sizeof(int));//拷贝 void *memcpy(void *destin, void *source,......

SibylY
29分钟前
3
0
Dubbo-自适应拓展机制

背景 在 Dubbo 中,很多拓展都是通过 SPI 机制进行加载的,比如 Protocol、Cluster、LoadBalance 等,这些都是Dubbo的基础组件。这些基础组件的拓展不是在系统框架启动阶段被加载,而是拓展方...

rock-man
57分钟前
7
0
Kali安装fcitx输入法(五笔)

安装fcitx > sudo apt-get install fcitx-rime fcitx-config-gtk3 重启 > sudo reboot fcitx配置 效果就是这样 配置输入法切换 系统设置...

yeahlife
59分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部