Android-廣告 滑動頁面 ViewPager + PagerAdapter(一)

更新日期 : 20160116 新增索引點
更新日期 : 20160217 切換頁面監聽更改

相信各位在安裝 App 時候一定有引導教學左右滑動頁面
經過測試後
其實跟我們常用的 ListView 、GridView 大同小異
如果對 BaseAdapter 熟悉的朋友
一定很快就能上手
注意 : 要使用此功能，必須匯入 V4 包

順序
1 . 抓出畫面共同點!? ( 有些App會在最後一頁有 Button ，可以先隱藏 )
2 . 設計畫面UI
3 . 設計選配器
4 . 將 選配器放進 ViewPager ( 像 ListView )內

這次的 Sample 以單純圖片顯示

1 . cell_pager_image.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/imageView"
        android:scaleType="fitXY"
        android:layout_gravity="right" />
</LinearLayout>

2 . MyPagerAdapter.java

import android.content.Context;
import android.support.v4.view.PagerAdapter;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;

import java.util.List;

public class MyPagerAdapter extends PagerAdapter {
    
    private Context context;
    private List<Integer> list;
    private LayoutInflater inflater;

    public MyPagerAdapter(Context context, List<Integer> list) {
        this.context = context;
        this.list = list;
    }

    @Override
    public int getCount() {
        return list.size();
    }

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view == object;
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        inflater = (LayoutInflater) 
            context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            
        // 佈局
        View itemView = inflater
            .inflate(R.layout.cell_pager_image, container, false);

        // 佈局元件內容
        ImageView imageView = (ImageView)itemView.findViewById(R.id.imageView);
        imageView.setImageResource(list.get(position));

        // 加載
        (container).addView(itemView);

        return itemView;
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        // LinearLayout 是以 cell_pager_image 主體變更
        container.removeView((LinearLayout) object);
    }

}

3 . activity_main.xml (將設定好的選配器設置到 ViewPager 上

<?xml version="1.0" encoding="utf-8"?>
<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">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
    </android.support.v4.view.ViewPager>

</RelativeLayout>

4 . MainActivity.java

import android.app.Activity;
import android.os.Bundle;
import android.support.v4.view.ViewPager;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends Activity implements ViewPager.OnPageChangeListener{

    ViewPager viewPager;
    MyPagerAdapter myPagerAdapter;

    // 在專案內放的測試圖
    private static final int[] pictures = { R.drawable.icon_01,
            R.drawable.icon_02, R.drawable.icon_03 };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        viewPager = (ViewPager) findViewById(R.id.viewpager);

        List<Integer> list = new ArrayList<Integer>();
        for(int i : pictures){
         list.add(i);
        }

        myPagerAdapter = new MyPagerAdapter(this, list);
        viewPager.setAdapter(myPagerAdapter);

    }

}

如果要對頁面設定監聽器

ViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

        }

        @Override
        public void onPageSelected(int position) {

        }

        @Override
        public void onPageScrollStateChanged(int state) {

        }
    });

參考資料 : Viewpager setonpagechangelistener deprecated

有關於底下原點，必須要在MainActivity設定
簡單的說必須配合監聽換頁
如果有時間會在寫一些 Sample


參考資料 : Android ViewPager Gallery Images and Texts Tutorial
參考資料 : Android通用圆点指示器——android-Universal-CircleIndicator
參考資料 : ViewPagerIndicator 分頁指示器

參考資料 : VIEW PAGER WITH CIRCULAR INDICATOR (WITHOUT ANY LIBRARY)

歡迎轉載，請註明出處。