Android：使用ViewPager實現左右滑動切換圖片（圖上有點點）

在以下實例的基礎上加上點點

Android：使用ViewPager實現左右滑動切換圖片 (簡單版)

效果預覽：

因為要把點點放圖片上，所以修改布局為相對布局：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    <!-- 切換卡 -->
    <android.support.v4.view.ViewPager
         android:id="@+id/viewPager"  
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
        >  
    </android.support.v4.view.ViewPager>  
    
    <!-- 點點 -->   
        <LinearLayout  
        android:id="@+id/viewGroup"  
        android:layout_width="fill_parent"  
        android:layout_height="wrap_content"  
        android:layout_alignParentBottom="true"  
        android:layout_marginBottom="40dp"  
        android:gravity="center_horizontal"  
        android:orientation="horizontal" >         
    </LinearLayout>  
</RelativeLayout>

程序新增：

private ImageView imageView; 
private ImageView[] imageViews; 
//包裹點點的LinearLayout
private ViewGroup group;

  group = (ViewGroup)findViewById(R.id.viewGroup); 
        
        //有多少張圖就有多少個點點
        imageViews = new ImageView[pageview.size()];
        for(int i =0;i<pageview.size();i++){
            imageView = new ImageView(MainActivity.this);
            imageView.setLayoutParams(new LayoutParams(20,20));
            imageView.setPadding(20, 0, 20, 0); 
            imageViews[i] = imageView;   
            
            //默認第一張圖顯示為選中狀態
            if (i == 0) {  
                imageViews[i].setBackgroundResource(R.drawable.page_indicator_focused);  
            } else {  
                imageViews[i].setBackgroundResource(R.drawable.page_indicator_unfocused);  
            }  
            
            group.addView(imageViews[i]);  
        }
        
        
        
        
        //pageView監聽器
        class GuidePageChangeListener implements OnPageChangeListener{

            @Override
            public void onPageScrollStateChanged(int arg0) {
                // TODO Auto-generated method stub
                
            }

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

            @Override
            //如果切換了，就把當前的點點設置為選中背景，其他設置未選中背景
            public void onPageSelected(int arg0) {
                // TODO Auto-generated method stub
                for(int i=0;i<imageViews.length;i++){
                    imageViews[arg0].setBackgroundResource(R.drawable.page_indicator_focused);
                     if (arg0 != i) {  
                            imageViews[i].setBackgroundResource(R.drawable.page_indicator_unfocused);  
                        }  
                }
                
            }
            
        }
        
        //綁定監聽事件
        viewPager.setOnPageChangeListener(new GuidePageChangeListener());

>>>>>>>>>>>>>>>>實例下載

 

相關文章：

Android 使用ViewPager實現左右循環滑動圖片