Androidアプリ開発！！: ページめくり(ViewPager, PagerAdapter )

書籍アプリのような、スワイプ操作に対応した画面を作りたい。
Playストアのような画面を作りたい。

そんな時に用いるのがPagerAdapt。。

使い方は簡単で、GridViewやListViewで用いたAdapterを使用します。

昔は外部ライブリを参照しないとViewPagerを使えませんでしたが、
Android3.0以降は外部ライブラリを参照しなくても利用できます。

※android-support-v4.jarで今回のサンプルソースを作成しました。

■サンプルソース
・メインアクティビティ

package com.example.pageadapter;

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

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
      
        // カスタム PagerAdapter を生成
        PagerAdapt oAdp = new PagerAdapt(getApplicationContext());
        oAdp.add(Color.RED);
        oAdp.add(Color.GREEN);
        oAdp.add(Color.WHITE);

        // ViewPager を生成
        ViewPager oViewPager = new ViewPager(getApplicationContext());
        oViewPager.setAdapter(oAdp);
        setContentView(oViewPager);
    }
}

・Adapter用ファイル

package com.example.pageadapter;

import java.util.ArrayList;

import com.example.pageadapter.R;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Color;
import android.support.v4.view.PagerAdapter;
import android.view.Gravity;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

public class PagerAdapt extends PagerAdapter {

    private Context mContext;
    private ArrayList mList;

    //コンストラクター（クラスの生成時に呼ばれる）
    public PagerAdapt(Context context) {
        mContext = context;
        mList = new ArrayList();
    }

    //リストにアイテムを追加する
    public void add(Integer item) {
        mList.add(item);
    }

    //アイテム追加後に呼ばれる
    @Override
    public Object instantiateItem(ViewGroup oVg, int position) {
        // リストから取得
        Integer iColor = mList.get(position);
        //レイアウトを作成
        LinearLayout oLayout = Make_Linear();
        //背景にお色を付ける
        oLayout.setBackgroundColor(iColor);
        oVg.addView(oLayout);
        return oLayout;
    }

    //View を削除
    @Override
    public void destroyItem(ViewGroup oVg, int position, Object object) {
        oVg.removeView((View) object);
    }

    //アイテム数を返す
    @Override
    public int getCount() {
        return mList.size();
    }

    //View が存在するかの判定
    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view == (LinearLayout) object;
    }
  
    private LinearLayout Make_Linear(){
        //LinearLayoutを生成
        LinearLayout oLayout = new LinearLayout(mContext);
        //縦に格納
        oLayout.setOrientation(LinearLayout.VERTICAL);
        for (int i = 0; i < 4; i++){
            //さらにレイアウトを作成
            LinearLayout oL = new LinearLayout(mContext);
            //横に格納
            oL.setOrientation(LinearLayout.HORIZONTAL);
            oLayout.addView(oL);
            for (int ii = 0; ii < 3; ii++ ){
                //これが最後
                LinearLayout oll = new LinearLayout(mContext);
                //縦に格納
                oll.setOrientation(LinearLayout.VERTICAL);
                //画像とテキストを格納
                oll.addView(Make_ImageView());
                oll.addView(Make_TextView());
                oL.addView(oll);
            }
        }
      
        return oLayout;
    }
  
    private TextView Make_TextView(){
        // TextView を生成
        TextView textView = new TextView(mContext);
        textView.setText("Hello World");
        textView.setTextColor(Color.BLACK);
        textView.setGravity(Gravity.CENTER);
        return textView;
    }

    private ImageView Make_ImageView(){
        // ImageViewを生成
        ImageView oIv = new ImageView(mContext);
        //Bitmapを作成
        Bitmap oBmp = BitmapFactory.decodeResource(mContext.getResources(), R.drawable.ic_launcher);
        //Bitmapをimagviewに貼り付ける
        oIv.setImageBitmap(oBmp);
        return oIv;
    }
}

■実行結果