• 高仿优酷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>  
  • 相关阅读:
    基本MVVM 和 ICommand用法举例（转）
    WPF C# 命令的运行机制
    628. Maximum Product of Three Numbers
    605. Can Place Flowers
    581. Shortest Unsorted Continuous Subarray
    152. Maximum Product Subarray
    216. Combination Sum III
    448. Find All Numbers Disappeared in an Array
    268. Missing Number
    414. Third Maximum Number
  • 原文地址：https://www.cnblogs.com/Free-Thinker/p/3689144.html
Copyright © 2020-2023  润新知