Android_ViewPager_實現多個圖片水平滾動

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>