ViewPager實現APP首頁圖片輪播和自由切換

1、首先看下實現的效果

主要的代碼 ##

layout中的代碼

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity2" >
<FrameLayout   
       android:layout_width="fill_parent"     
       android:layout_height="200dp">  

        <android.support.v4.view.ViewPager  
            android:id="@+id/myviewpager"  
            android:layout_width="fill_parent"  
            android:layout_height="fill_parent"  
        />  
        <LinearLayout   
           android:layout_width="fill_parent"  
           android:layout_height="35dp"  
           android:orientation="vertical"  
           android:layout_gravity="bottom"  
           android:gravity="center"  
           android:background="#33000000">  

            <TextView   
                 android:id="@+id/txttitle"  
                 android:layout_width="wrap_content"  
                 android:layout_height="wrap_content"      
                 android:textColor="@android:color/white"  
            />     
            <LinearLayout   
                android:layout_width="wrap_content"  
                android:layout_height="wrap_content"     
                android:layout_marginTop="3dp"  
                android:orientation="horizontal">  

                <View   
                   android:id="@+id/dotnumber_1"  
                   android:layout_width="10dp"  
                   android:layout_height="10dp"  
                   android:layout_marginLeft="2dp"  
                   android:layout_marginRight="2dp"  
                   android:background="@drawable/dot_select_yes"          
                />  
                <View   
                   android:id="@+id/dotnumber_2"  
                   android:layout_width="10dp"  
                   android:layout_height="10dp"  
                   android:layout_marginLeft="2dp"  
                   android:layout_marginRight="2dp"  
                   android:background="@drawable/dot_select"          
                />  
                <View   
                   android:id="@+id/dotnumber_3"  
                   android:layout_width="10dp"  
                   android:layout_height="10dp"  
                   android:layout_marginLeft="2dp"  
                   android:layout_marginRight="2dp"  
                   android:background="@drawable/dot_select"          
                />  


            </LinearLayout>   

        </LinearLayout>  
    </FrameLayout>  

</RelativeLayout>

Activity中代碼

public class MainActivity extends AppCompatActivity implements View.OnClickListener {
    private int[] imageids;//圖片數組
    private String[] titles;  //標題集合
    private List<ImageView> imageslist; //ImageView集合
    private List<View> dotslist;  //自定義點的集合
    private TextView txttitle;
    private ViewPager mViewPager;
    private ScheduledExecutorService excutorservice;//執行週期性或定時任務

    private int oldposition = 1;  //標記位設置前一個點的背景圖片
    private int currentposition; //當前currentposition+1代表剛開始ImageView的位置
    public boolean suspendFlag = false;// 控制線程的執行

    private ImageView imageview0;//第一張圖片
    private ImageView imageview1;//第二張圖片
    private ImageView imageview2;//第三張圖片
    private ImageView imageview3;//第四張圖片
    private ImageView imageview4;//第五張圖片


    private Handler handle = new Handler() {

        @Override
        public void handleMessage(Message msg) {
            // TODO Auto-generated method stub
            super.handleMessage(msg);
            mViewPager.setCurrentItem(currentposition);
        }
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        imageids = new int[]{R.mipmap.icon_a, R.mipmap.icon_b, R.mipmap.icon_d};
        titles = new String[]{"3", "1", "2", "3", "1"};
        imageslist = new ArrayList<>();

        imageview0 = new ImageView(getApplicationContext());
        imageview0.setBackgroundResource(imageids[2]);
        imageview0.setId(R.id.image0);
        imageview0.setOnClickListener(this);
        imageslist.add(imageview0);

        imageview1 = new ImageView(getApplicationContext());
        imageview1.setBackgroundResource(imageids[0]);
        imageslist.add(imageview1);
        imageview1.setId(R.id.image1);
        imageview1.setOnClickListener(this);

        imageview2 = new ImageView(getApplicationContext());
        imageview2.setBackgroundResource(imageids[1]);
        imageview2.setOnClickListener(this);
        imageview2.setId(R.id.image2);
        imageslist.add(imageview2);

        imageview3 = new ImageView(getApplicationContext());
        imageview3.setBackgroundResource(imageids[2]);
        imageview3.setOnClickListener(this);
        imageview3.setId(R.id.image3);
        imageslist.add(imageview3);

        imageview4 = new ImageView(getApplicationContext());
        imageview4.setBackgroundResource(imageids[0]);
        imageview4.setOnClickListener(this);
        imageview4.setId(R.id.image4);
        imageslist.add(imageview4);

        dotslist = new ArrayList<>();
        dotslist.add(findViewById(R.id.dotnumber_3));
        dotslist.add(findViewById(R.id.dotnumber_1));
        dotslist.add(findViewById(R.id.dotnumber_2));
        dotslist.add(findViewById(R.id.dotnumber_3));
        dotslist.add(findViewById(R.id.dotnumber_1));

        txttitle = (TextView) findViewById(R.id.txttitle);
        txttitle.setText(titles[1]);
        mViewPager = (ViewPager) findViewById(myviewpager);
        mViewPager.setAdapter(new ViewPagerAdapter(imageslist));
        mViewPager.setCurrentItem(1);

        //創建一個頁面更換監聽
        mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageSelected(int arg0) {
                txttitle.setText(titles[arg0]);
                dotslist.get(oldposition).setBackgroundResource(R.mipmap.dot_select);
                dotslist.get(arg0).setBackgroundResource(R.mipmap.dot_select_yes);
                oldposition = arg0;
                currentposition = arg0;
            }

            @Override
            public void onPageScrolled(int arg0, float arg1, int arg2) {
                // TODO Auto-generated method stub

            }
            //滑動狀態改變的時候調用
            public void onPageScrollStateChanged(int state) {
                // ViewPager.SCROLL_STATE_IDLE 標識的狀態是當前頁面完全展現，並且沒有動畫正在進行中，如果不
                // 是此狀態下執行 setCurrentItem 方法回在首位替換的時候會出現跳動！
                 // ViewPager.SCROLL_STATE_DRAGGING 開始滾動
                // ViewPager.SCROLL_STATE_IDLE 停止滾動
                // ViewPager.SCROLL_STATE_SETTLING 正在設置頁面，即將要停止，並且設置當前顯示的頁面
                if (state != ViewPager.SCROLL_STATE_IDLE) {
                    suspend();//手指滑動還沒有停止的時候暫停線程
                    return;
                }
                resume();//滑動動畫完成啓動線程
                // 當視圖在第一個時，將頁面號設置爲圖片的最後一張。
                if (currentposition == 0) {
                    mViewPager.setCurrentItem(imageslist.size() - 2, false);

                } else if (currentposition == imageslist.size() - 1) {
                    // 當視圖在最後一個是,將頁面號設置爲圖片的第一張。
                    mViewPager.setCurrentItem(1, false);
                }
            }
        });

    }

    @Override
    protected void onStart() {
        // TODO Auto-generated method stub
        //創建一個只有一個線程的線程池
        excutorservice = Executors.newSingleThreadScheduledExecutor();
        //創建並執行一個在給定初始延遲後首次啓用的定期操作，隨後，在每一次執行終止和下一次執行開始之間都存在給定的延遲，如果任務的執行時間超過了廷遲時間（delay），下一個任務則會在
        //（當前任務執行所需時間+delay）後執行。
        //第一個參數，要執行的任務，第二個參數，第一次執行延遲的時間，第三個參數，相鄰兩次任務執行的間隔，第四個參數，初始延遲和延遲參數的時間單位
        excutorservice.scheduleWithFixedDelay(new MyTask(), 4, 4, TimeUnit.SECONDS);
        super.onStart();
    }

    @Override
    public void onClick(View view) {
        switch (view.getId()) {
            case R.id.image0:
                Toast.makeText(this, "3", Toast.LENGTH_SHORT).show();
                break;
            case R.id.image1:
                Toast.makeText(this, "1", Toast.LENGTH_SHORT).show();
                break;
            case R.id.image2:
                Toast.makeText(this, "2", Toast.LENGTH_SHORT).show();
                break;
            case R.id.image3:
                Toast.makeText(this, "3", Toast.LENGTH_SHORT).show();
                break;
            case R.id.image4:
                Toast.makeText(this, "1", Toast.LENGTH_SHORT).show();
                break;
        }
    }

    private class MyTask implements Runnable {
        @Override
        public void run() {
            // TODO Auto-generated method stub
            //當前的下標+1去顯示下一個圖片，取模是爲了循環播放
            while (suspendFlag) {
                try {
                    Thread.sleep(1000);
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
            }
            currentposition = (currentposition + 1) % imageslist.size();
            handle.sendEmptyMessage(0);
        }
    }

    @Override
    protected void onPause() {
        super.onPause();
        //關閉 ExecutorService
        excutorservice.shutdown();
    }

    /**
     * 線程暫停
     */
    public void suspend() {
        this.suspendFlag = true;
    }

    /**
     * 喚醒線程
     */
    public synchronized void resume() {
        suspendFlag = false;

    }
}

適配器ViewPagerAdapter代碼

public class ViewPagerAdapter extends PagerAdapter {
    List<ImageView> mImageslist = null;

    public ViewPagerAdapter(List<ImageView> ImagesList) {
        this.mImageslist = ImagesList;
    }

    @Override
    public int getCount() {
        // TODO Auto-generated method stub
        return mImageslist.size();
    }

    //判斷是不是同一張圖片
    @Override
    public boolean isViewFromObject(View arg0, Object arg1) {
        // TODO Auto-generated method stub
        return arg0 == arg1;
    }
        /*顯示內存就放三張圖片 滑動的時候 出去的圖片執行destroy 進到內存的圖片就是instaint*/

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        //移除這個位置的圖片
        container.removeView(mImageslist.get(position));

    }

    //添加當前的圖片
    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        // TODO Auto-generated method stub
        container.addView(mImageslist.get(position));
        return mImageslist.get(position);
    }
}

對ViewPager的addOnPageChangeListener方法詳解請點擊查看
ViewPager循環滑動分析：
ViewPager中只需要顯示三個ImageView，而Activity中卻定義了五個，但只用了三張圖片。

 ImageView imageview = new ImageView(getApplicationContext());  
        imageview.setBackgroundResource(imageids[2]);  
        imageslist.add(imageview);
        ImageView imageview1 = new ImageView(getApplicationContext());  
        imageview1.setBackgroundResource(imageids[0]);  
        imageslist.add(imageview1); 
        ImageView imageview2 = new ImageView(getApplicationContext());  
        imageview2.setBackgroundResource(imageids[1]);  
        imageslist.add(imageview2); 
        ImageView imageview3 = new ImageView(getApplicationContext());  
        imageview3.setBackgroundResource(imageids[2]);  
        imageslist.add(imageview3);
        ImageView imageview4 = new ImageView(getApplicationContext());  
        imageview4.setBackgroundResource(imageids[0]);  
        imageslist.add(imageview4);

ImageView（0）—圖片下標2—–圖片c
ImageView（1）—圖片下標0—–圖片a
ImageView（2）—圖片下標1—–圖片b
ImageView（3）—圖片下標2—–圖片c
ImageView（4）—圖片下標0—–圖片a

初始狀態，顯示下標爲1的圖片a，當手指向右滑動時，此時我們應該顯示第三張圖片c，這裏我們在第一張圖片a的左邊多加了一個Imageview,來做一個過渡，在滑動的時候，先來顯示ImageView（0）這張圖片，當手指滑動動畫完成的時候，再做一個判斷，判斷當前視圖是否處於第一個位置，如果處於imageslist中第一個位置，則再把當前頁面定位到ImageView（3），也就是顯示頁面的最後一個，imageslist中的第四個。

如果是ImageView（3）位置，去往左滑動，此時滑動動畫先顯示的是ImageView（4），然後滑動動畫完成後，再做一個判斷，判斷當前視圖是否處於imageslist中最後一個位置，如果處於最後一個位置，則再把當前頁面定位到ImageView（1），也就是顯示頁面的第一個。

 @Override  
            public void onPageScrollStateChanged(int state) {  

                    // ViewPager.SCROLL_STATE_IDLE 標識的狀態是當前頁面完全展現，並且沒有動畫正在進行中，如果不
                     // 是此狀態下執行 setCurrentItem 方法回在首位替換的時候會出現跳動！
                     if (state != ViewPager.SCROLL_STATE_IDLE) 
                         {
                         return;
                         }

                     // 當視圖在第一個時，將頁面號設置爲圖片的最後一張。
                     if (currentposition == 0) {
                         mViewPager.setCurrentItem(imageslist.size() - 2, false);

                     } else if (currentposition == imageslist.size() - 1) {
                         // 當視圖在最後一個是,將頁面號設置爲圖片的第一張。
                         mViewPager.setCurrentItem(1, false);
                     }                                   
            }

ViewPager輪播功能引用博客地址：

http://blog.csdn.net/JM_beizi/article/details/51297200

ViewPager實現APP首頁圖片輪播和自由切換

1、首先看下實現的效果

DAPPER 事務 TRANSACTION

Java中線程的創建方式

實現一個有趣的小效果

自定義View之狀態顯示

Fragment+ViewPage一步步實現底部導航欄。

Android動畫（一）幀動畫和補間動畫

正則表達式判斷基本信息（Java）

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結