zoukankan      html  css  js  c++  java

  • 高仿优酷Android客户端图片左右滑动（自动切换）

    本例是用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 plaincopyprint?

        然后是具体的布局文件及代码实现:

    1. <?xml version="1.0" encoding="utf-8"?>  
    2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    3.     android:layout_width="fill_parent"  
    4.     android:layout_height="fill_parent"  
    5.     android:background="#FFFFFF"  
    6.     android:orientation="vertical" >  
    7.   
    8.     <RelativeLayout  
    9.         android:layout_width="fill_parent"  
    10.         android:layout_height="40dip"  
    11.         android:background="@drawable/title_bk" >  
    12.   
    13.         <ImageButton  
    14.             android:id="@+id/btn_back"  
    15.             android:layout_width="wrap_content"  
    16.             android:layout_height="wrap_content"  
    17.             android:background="@drawable/btn_back_selector"  
    18.             android:src="@drawable/btn_back" />  
    19.   
    20.         <View  
    21.             android:id="@+id/line0"  
    22.             android:layout_width="1px"  
    23.             android:layout_height="fill_parent"  
    24.             android:layout_toRightOf="@id/btn_back"  
    25.             android:background="#aa11264f" />  
    26.   
    27.         <View  
    28.             android:layout_width="1px"  
    29.             android:layout_height="fill_parent"  
    30.             android:layout_toRightOf="@id/line0"  
    31.             android:background="#009ad6" />  
    32.   
    33.         <TextView  
    34.             android:layout_width="wrap_content"  
    35.             android:layout_height="wrap_content"  
    36.             android:layout_centerInParent="true"  
    37.             android:text="优酷客户端"  
    38.             android:textColor="#FFFFFF"  
    39.             android:textSize="20sp" />  
    40.     </RelativeLayout>  
    41.   
    42.     <FrameLayout  
    43.         android:layout_width="fill_parent"  
    44.         android:layout_height="140dip" >  
    45.   
    46.         <android.support.v4.view.ViewPager  
    47.             android:id="@+id/vp"  
    48.             android:layout_width="fill_parent"  
    49.             android:layout_height="fill_parent" />  
    50.   
    51.         <LinearLayout  
    52.             android:layout_width="fill_parent"  
    53.             android:layout_height="35dip"  
    54.             android:layout_gravity="bottom"  
    55.             android:background="#33000000"  
    56.             android:gravity="center"  
    57.             android:orientation="vertical" >  
    58.   
    59.             <TextView  
    60.                 android:id="@+id/tv_title"  
    61.                 android:layout_width="wrap_content"  
    62.                 android:layout_height="wrap_content"  
    63.                 android:text="中国家庭院校园区域名字体现"  
    64.                 android:textColor="#ffffff" />  
    65.   
    66.             <LinearLayout  
    67.                 android:layout_width="wrap_content"  
    68.                 android:layout_height="wrap_content"  
    69.                 android:layout_marginTop="3dip"  
    70.                 android:gravity="center" >  
    71.   
    72.                 <View  
    73.                     android:id="@+id/v_dot0"  
    74.                     style="@style/dot_style"  
    75.                     android:background="@drawable/dot_focused" />  
    76.   
    77.                 <View  
    78.                     android:id="@+id/v_dot1"  
    79.                     style="@style/dot_style" />  
    80.   
    81.                 <View  
    82.                     android:id="@+id/v_dot2"  
    83.                     style="@style/dot_style" />  
    84.   
    85.                 <View  
    86.                     android:id="@+id/v_dot3"  
    87.                     style="@style/dot_style" />  
    88.   
    89.                 <View  
    90.                     android:id="@+id/v_dot4"  
    91.                     style="@style/dot_style" />  
    92.             </LinearLayout>  
    93.         </LinearLayout>  
    94.     </FrameLayout>  
    95.   
    96. </LinearLayout>  

    MyViewPagerActivity:

    [java] view plaincopyprint?
    1. package com.tony.viewpager;  
    2.   
    3. import java.util.ArrayList;  
    4. import java.util.List;  
    5. import java.util.concurrent.Executors;  
    6. import java.util.concurrent.ScheduledExecutorService;  
    7. import java.util.concurrent.TimeUnit;  
    8.   
    9.   
    10. import android.app.Activity;  
    11. import android.os.Bundle;  
    12. import android.os.Handler;  
    13. import android.os.Parcelable;  
    14. import android.support.v4.view.PagerAdapter;  
    15. import android.support.v4.view.ViewPager;  
    16. import android.support.v4.view.ViewPager.OnPageChangeListener;  
    17. import android.view.View;  
    18. import android.widget.ImageView;  
    19. import android.widget.ImageView.ScaleType;  
    20. import android.widget.TextView;  
    21.   
    22. /** 
    23.  * 仿优酷Android客户端图片左右滑动 
    24.  *  
    25.  */  
    26. public class MyViewPagerActivity extends Activity {  
    27.     private ViewPager viewPager; // android-support-v4中的滑动组件   
    28.     private List<ImageView> imageViews; // 滑动的图片集合   
    29.   
    30.     private String[] titles; // 图片标题   
    31.     private int[] imageResId; // 图片ID   
    32.     private List<View> dots; // 图片标题正文的那些点   
    33.   
    34.     private TextView tv_title;  
    35.     private int currentItem = 0; // 当前图片的索引号   
    36.   
    37.     // An ExecutorService that can schedule commands to run after a given delay,   
    38.     // or to execute periodically.   
    39.     private ScheduledExecutorService scheduledExecutorService;  
    40.   
    41.     // 切换当前显示的图片   
    42.     private Handler handler = new Handler() {  
    43.         public void handleMessage(android.os.Message msg) {  
    44.             viewPager.setCurrentItem(currentItem);// 切换当前显示的图片   
    45.         };  
    46.     };  
    47.   
    48.     @Override  
    49.     public void onCreate(Bundle savedInstanceState) {  
    50.         super.onCreate(savedInstanceState);  
    51.         setContentView(R.layout.main);  
    52.   
    53.         imageResId = new int[] { R.drawable.a, R.drawable.b, R.drawable.c, R.drawable.d, R.drawable.e };  
    54.         titles = new String[imageResId.length];  
    55.         titles[0] = "巩俐不低俗，我就不能低俗";  
    56.         titles[1] = "扑树又回来啦！再唱经典老歌引万人大合唱";  
    57.         titles[2] = "揭秘北京电影如何升级";  
    58.         titles[3] = "乐视网TV版大派送";  
    59.         titles[4] = "热血屌丝的反杀";  
    60.   
    61.         imageViews = new ArrayList<ImageView>();  
    62.   
    63.         // 初始化图片资源   
    64.         for (int i = 0; i < imageResId.length; i++) {  
    65.             ImageView imageView = new ImageView(this);  
    66.             imageView.setImageResource(imageResId[i]);  
    67.             imageView.setScaleType(ScaleType.CENTER_CROP);  
    68.             imageViews.add(imageView);  
    69.         }  
    70.   
    71.           
    72.         dots = new ArrayList<View>();  
    73.         dots.add(findViewById(R.id.v_dot0));  
    74.         dots.add(findViewById(R.id.v_dot1));  
    75.         dots.add(findViewById(R.id.v_dot2));  
    76.         dots.add(findViewById(R.id.v_dot3));  
    77.         dots.add(findViewById(R.id.v_dot4));  
    78.   
    79.         tv_title = (TextView) findViewById(R.id.tv_title);  
    80.         tv_title.setText(titles[0]);//   
    81.   
    82.         viewPager = (ViewPager) findViewById(R.id.vp);  
    83.         viewPager.setAdapter(new MyAdapter());// 设置填充ViewPager页面的适配器   
    84.         // 设置一个监听器，当ViewPager中的页面改变时调用   
    85.         viewPager.setOnPageChangeListener(new MyPageChangeListener());  
    86.   
    87.     }  
    88.   
    89.     @Override  
    90.     protected void onStart() {  
    91.         scheduledExecutorService = Executors.newSingleThreadScheduledExecutor();  
    92.         // 当Activity显示出来后，每两秒钟切换一次图片显示   
    93.         scheduledExecutorService.scheduleAtFixedRate(new ScrollTask(), 1, 2, TimeUnit.SECONDS);  
    94.         super.onStart();  
    95.     }  
    96.   
    97.     @Override  
    98.     protected void onStop() {  
    99.         // 当Activity不可见的时候停止切换   
    100.         scheduledExecutorService.shutdown();  
    101.         super.onStop();  
    102.     }  
    103.   
    104.     /** 
    105.      * 换行切换任务 
    106.      *  
    107.      * @author Administrator 
    108.      *  
    109.      */  
    110.     private class ScrollTask implements Runnable {  
    111.   
    112.         public void run() {  
    113.             synchronized (viewPager) {  
    114.                 System.out.println("currentItem: " + currentItem);  
    115.                 currentItem = (currentItem + 1) % imageViews.size();  
    116.                 handler.obtainMessage().sendToTarget(); // 通过Handler切换图片   
    117.             }  
    118.         }  
    119.   
    120.     }  
    121.   
    122.     /** 
    123.      * 当ViewPager中页面的状态发生改变时调用 
    124.      *  
    125.      * @author Administrator 
    126.      *  
    127.      */  
    128.     private class MyPageChangeListener implements OnPageChangeListener {  
    129.         private int oldPosition = 0;  
    130.   
    131.         /** 
    132.          * This method will be invoked when a new page becomes selected. 
    133.          * position: Position index of the new selected page. 
    134.          */  
    135.         public void onPageSelected(int position) {  
    136.             currentItem = position;  
    137.             tv_title.setText(titles[position]);  
    138.             dots.get(oldPosition).setBackgroundResource(R.drawable.dot_normal);  
    139.             dots.get(position).setBackgroundResource(R.drawable.dot_focused);  
    140.             oldPosition = position;  
    141.         }  
    142.   
    143.         public void onPageScrollStateChanged(int arg0) {  
    144.   
    145.         }  
    146.   
    147.         public void onPageScrolled(int arg0, float arg1, int arg2) {  
    148.   
    149.         }  
    150.     }  
    151.   
    152.     /** 
    153.      * 填充ViewPager页面的适配器 
    154.      *  
    155.      * @author Administrator 
    156.      *  
    157.      */  
    158.     private class MyAdapter extends PagerAdapter {  
    159.   
    160.         @Override  
    161.         public int getCount() {  
    162.             return imageResId.length;  
    163.         }  
    164.   
    165.         @Override  
    166.         public Object instantiateItem(View arg0, int arg1) {  
    167.             ((ViewPager) arg0).addView(imageViews.get(arg1));  
    168.             return imageViews.get(arg1);  
    169.         }  
    170.   
    171.         @Override  
    172.         public void destroyItem(View arg0, int arg1, Object arg2) {  
    173.             ((ViewPager) arg0).removeView((View) arg2);  
    174.         }  
    175.   
    176.         @Override  
    177.         public boolean isViewFromObject(View arg0, Object arg1) {  
    178.             return arg0 == arg1;  
    179.         }  
    180.   
    181.         @Override  
    182.         public void restoreState(Parcelable arg0, ClassLoader arg1) {  
    183.   
    184.         }  
    185.   
    186.         @Override  
    187.         public Parcelable saveState() {  
    188.             return null;  
    189.         }  
    190.   
    191.         @Override  
    192.         public void startUpdate(View arg0) {  
    193.   
    194.         }  
    195.   
    196.         @Override  
    197.         public void finishUpdate(View arg0) {  
    198.   
    199.         }  
    200.     }  
    201. }  

    Drawable目录下 btn_back_selector.xml:

    [java] view plaincopyprint?
    1. <?xml version="1.0" encoding="utf-8"?>  
    2. <selector xmlns:android="http://schemas.android.com/apk/res/android">  
    3.   
    4.     <item android:drawable="@drawable/btn_top_pressed" android:state_focused="true"></item>  
    5.     <item android:drawable="@drawable/btn_top_pressed" android:state_pressed="true"></item>  
    6.     <item android:drawable="@drawable/btn_top_pressed" android:state_selected="true"></item>  
    7.     <item android:drawable="@drawable/title_bk"></item>  
    8.   
    9. </selector>  

    btn_top_pressed.xml:

    [java] view plaincopyprint?
    1. <?xml version="1.0" encoding="utf-8"?>  
    2. <shape xmlns:android="http://schemas.android.com/apk/res/android"  
    3.     android:shape="rectangle" >  
    4.   
    5.     <gradient  
    6.         android:angle="270"  
    7.         android:endColor="#009ad6"  
    8.         android:startColor="#11264f" />  
    9.   
    10. </shape>  

    dot_focused.xml:

    [java] view plaincopyprint?
    1. <?xml version="1.0" encoding="utf-8"?>  
    2. <shape xmlns:android="http://schemas.android.com/apk/res/android"  
    3.     android:shape="oval" >  
    4.   
    5.     <solid android:color="#aaFFFFFF" />  
    6.   
    7.     <corners android:radius="5dip" />  
    8.   
    9. </shape>  


    dot_normal.xml:

    [java] view plaincopyprint?
    1. <?xml version="1.0" encoding="utf-8"?>  
    2. <shape xmlns:android="http://schemas.android.com/apk/res/android"  
    3.     android:shape="oval" >  
    4.   
    5.     <solid android:color="#33000000" />  
    6.   
    7.     <corners android:radius="5dip" />  
    8.   
    9. </shape>  


    title_bk.xml:

    [java] view plaincopyprint?
    1. <?xml version="1.0" encoding="utf-8"?>  
    2. <shape xmlns:android="http://schemas.android.com/apk/res/android"  
    3.     android:shape="rectangle" >  
    4.   
    5.     <gradient  
    6.         android:angle="270"  
    7.         android:endColor="#11264f"  
    8.         android:startColor="#009ad6" />  
    9.   
    10. </shape>  
  • 相关阅读:
    Easy-Transfer学习
    录音+语音转文字
    pyQt点击事件和数据传输
    第一个python-ui界面
    python写第一个网页
    pyhthon第一个小脚本——文件备份
    Stones HDU 1896
    Cow Sorting POJ 3270 & HDU 2838
    Stones
    大数相加
  • 原文地址：https://www.cnblogs.com/Free-Thinker/p/3689144.html
Copyright © 2011-2022 走看看