この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
今回作るのは、前のページと次のページが少しだけ見えている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ページ目表示時は、前のページと次のページが少しだけ見えてます。
ではでは。