1. 程式人生 > >Android ViewPager實現多個圖片水平滾動

Android ViewPager實現多個圖片水平滾動

oncreate iss block 如果 del ner ide extends 大小

1.示意圖

技術分享 技術分享

技術分享 技術分享

2.實現分析

(1).xml配置

<!-- 配置container和pager的clipChildren=false, 並且指定marginLeft 和 marginRight 的值-->  
<LinearLayout  
    android:id="@+id/container"  
    android:layout_width="match_parent"  
    android:layout_height="100dp"  
    android:clipChildren="
false" android:gravity="center_horizontal" android:layerType="software" android:orientation="horizontal" > <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="match_parent
" android:layout_marginLeft="110dp" android:layout_marginRight="110dp" android:clipChildren="false" > </android.support.v4.view.ViewPager> </LinearLayout>

(2).java代碼

// 1.設置幕後item的緩存數目  
viewPager.setOffscreenPageLimit(3);   
// 2.設置頁與頁之間的間距  
viewPager.setPageMargin(10); // 3.將父類的touch事件分發至viewPgaer,否則只能滑動中間的一個view對象 container.setOnTouchListener(new View.OnTouchListener() { @Override public boolean onTouch(View v, MotionEvent event) { return viewPager.dispatchTouchEvent(event); } });

3.代碼實現

/** 
 * MainActivity.java 
 *  
 * @author http://blog.csdn.net/zimo2013 
 *  
 */  
public class MainActivity extends Activity implements OnPageChangeListener {  
  
    private ViewPager viewPager;  
    private List<View> views = new ArrayList<View>();  
  
    private LinearLayout container;  
    private TextView tvTitle;  
    private LayoutInflater inflater;  
  
    private String dir;  
  
    @Override  
    protected void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        setContentView(R.layout.activity_main);  
  
        inflater = getLayoutInflater();  
        container = (LinearLayout) findViewById(R.id.container);  
        viewPager = (ViewPager) findViewById(R.id.viewpager);  
        tvTitle = (TextView) findViewById(R.id.title);  
  
        //這裏預先在sdcard準備一些輪播圖片資源  
        dir = Environment.getExternalStorageDirectory().getAbsolutePath();  
        // 得到views集合  
        views = new ArrayList<View>();  
        //此處可以根據需要自由設定,這裏只是簡單的測試  
        for (int i = 1; i <= 12; i++) {  
            View view = inflater.inflate(R.layout.guide_item, null);  
            views.add(view);  
        }  
          
        /////////////////////主要配置//////////////////////////////////////  
          
        // 1.設置幕後item的緩存數目  
        viewPager.setOffscreenPageLimit(3);   
        // 2.設置頁與頁之間的間距  
        viewPager.setPageMargin(10);  
        // 3.將父類的touch事件分發至viewPgaer,否則只能滑動中間的一個view對象  
        container.setOnTouchListener(new View.OnTouchListener() {  
            @Override  
            public boolean onTouch(View v, MotionEvent event) {  
                return viewPager.dispatchTouchEvent(event);  
            }  
        });  
  
        ////////////////////////////////////////////////////////////////  
        viewPager.setAdapter(new MyAdapter()); // 為viewpager設置adapter  
        viewPager.setOnPageChangeListener(this);// 設置監聽器  
    }  
  
    // PagerAdapter是object的子類  
    class MyAdapter extends PagerAdapter {  
  
        /** 
         * PagerAdapter管理數據大小 
         */  
        @Override  
        public int getCount() {  
            return views.size();  
        }  
  
        /** 
         * 關聯key 與 obj是否相等,即是否為同一個對象 
         */  
        @Override  
        public boolean isViewFromObject(View view, Object obj) {  
            return view == obj; // key  
        }  
  
        /** 
         * 銷毀當前page的相隔2個及2個以上的item時調用 
         */  
        @Override  
        public void destroyItem(ViewGroup container, int position, Object object) {  
            container.removeView((View) object); // 將view 類型 的object熊容器中移除,根據key  
        }  
  
        /** 
         * 當前的page的前一頁和後一頁也會被調用,如果還沒有調用或者已經調用了destroyItem 
         */  
        @Override  
        public Object instantiateItem(ViewGroup container, int position) {  
            System.out.println("pos:" + position);  
            View view = views.get(position);  
            // 如果訪問網絡下載圖片,此處可以進行異步加載  
            ImageView img = (ImageView) view.findViewById(R.id.icon);  
            img.setImageBitmap(BitmapFactory.decodeFile(dir + getFile(position)));  
            container.addView(view);  
            return views.get(position); // 返回該view對象,作為key  
        }  
    }  
  
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {  
        if (viewPager != null) {  
            viewPager.invalidate();  
        }  
    }  
  
    // 一個新頁被調用時執行,仍為原來的page時,該方法不被調用  
    public void onPageSelected(int position) {  
        tvTitle.setText(getFile(position));  
    }  
  
    /* 
     * SCROLL_STATE_IDLE: pager處於空閑狀態 SCROLL_STATE_DRAGGING: pager處於正在拖拽中 
     * SCROLL_STATE_SETTLING: pager正在自動沈降,相當於松手後,pager恢復到一個完整pager的過程 
     */  
    public void onPageScrollStateChanged(int state) {  
    }  
  
    public String getFile(int position) {  
        return "/img" + ((position + 1) >= 10 ? (position + 1) : "0" + (position + 1)) + ".png";  
    }  
}  
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    android:layout_width="match_parent"  
    android:layout_height="match_parent"  
    android:layout_marginLeft="15dp"  
    android:layout_marginRight="15dp"  
    android:layout_marginTop="50dp"  
    android:orientation="vertical" >  
  
    <View  
        android:layout_width="match_parent"  
        android:layout_height="2dp"  
        android:background="#ffbd2021" />  
  
    <!-- 配置container和pager的clipChildren=false, 並且指定marginLeft 和 marginRight 的值 -->  
  
    <LinearLayout  
        android:id="@+id/container"  
        android:layout_width="match_parent"  
        android:layout_height="100dp"  
        android:clipChildren="false"  
        android:gravity="center_horizontal"  
        android:layerType="software"  
        android:orientation="horizontal" >  
  
        <android.support.v4.view.ViewPager  
            android:id="@+id/viewpager"  
            android:layout_width="match_parent"  
            android:layout_height="match_parent"  
            android:layout_marginLeft="110dp"  
            android:layout_marginRight="110dp"  
            android:clipChildren="false" >  
        </android.support.v4.view.ViewPager>  
    </LinearLayout>  
  
    <View  
        android:layout_width="match_parent"  
        android:layout_height="2dp"  
        android:background="#ffbd2021" />  
  
    <ImageView  
        android:layout_width="match_parent"  
        android:layout_height="wrap_content"  
        android:background="@drawable/line" />  
  
    <TextView  
        android:id="@+id/title"  
        android:layout_width="match_parent"  
        android:layout_height="wrap_content"  
        android:layout_gravity="center"  
        android:gravity="center_horizontal"  
        android:scaleType="fitXY"  
        android:src="@drawable/ic_launcher"  
        android:text="baidu"  
        android:textSize="18sp" />  
  
</LinearLayout>  

Android ViewPager實現多個圖片水平滾動