[Androidアプリ開発] ちょい見せViewPagerを作ってみた | アドカレ2013 : SP #12

今回作るのは、前のページと次のページが少しだけ見えているViewPagerです。

実装

今回のサンプル用のactivity_main.xmlはこちら。

activity_main.xml

<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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:clipToPadding="false"
        android:paddingLeft="40dp"
        android:paddingRight="40dp" />

</RelativeLayout>

ViewPagerに左右のパディングを設定して、clipToPaddingをfalseにします。
はい、ただそれだけのことです。

今回のサンプル用のPagerAdapterはこちら。

CustomPagerAdapter.java

package jp.classmethod.sidepaddingviewpager;

import java.util.List;

import android.content.Context;
import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;

public class CustomPagerAdapter extends PagerAdapter {

	private Context mContext;

	private List<Integer> mColorList;

	public CustomPagerAdapter(Context context, List<Integer> colorList) {
		mContext = context;
		mColorList = colorList;
	}

	@Override
	public Object instantiateItem(ViewGroup container, int position) {
		// リストからページの背景色を取得します。
		Integer color = mColorList.get(position);

		// Viewを生成します。
		View view = new View(mContext);
		view.setBackgroundColor(color);

		// 生成したViewをコンテナに追加します。
		container.addView(view);
		return view;
	}

	@Override
	public void destroyItem(ViewGroup container, int position, Object object) {
		container.removeView((View) object);
	}

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

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

}

今回のサンプル用のMainActivityはこちら。

MainActivity.java

package jp.classmethod.sidepaddingviewpager;

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

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

public class MainActivity extends Activity {

	private ViewPager mViewPager;

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

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

		// java側で設定する場合はsetClipToPaddingメソッドを使用します。
		// mViewPager.setClipToPadding(false);

		List<Integer> colorList = new ArrayList<Integer>();
		colorList.add(Color.RED);
		colorList.add(Color.GREEN);
		colorList.add(Color.BLUE);
		colorList.add(Color.YELLOW);
		// カスタム PagerAdapter を生成
		CustomPagerAdapter adapter = new CustomPagerAdapter(this, colorList);
		mViewPager.setAdapter(adapter);
	}

}

はい、これで完成です。

動作確認

では、動かしてみます。

1ページ目表示時は、2ページ目が少しだけ画面右側に見えてます。

2ページ目表示時は、前のページと次のページが少しだけ見えてます。

ではでは。