ViewPager に区切りを追加する

2013/04/19

時刻: 10:00 Labels: Android

ViewPager でページング作ってスワイプ楽しいです。ただ、単色の背景が続くとスワイプしたのかどうかがわからんくなってくる。なにげに Google Play のアプリを見てたらページ間に仕切りがついていた。なにそれ欲しい。

サンプルは github に。

ViewPager#setPageMargin (int marginPixels) でページ間のマージンを空けつつ、ViewPager#setPageMarginDrawable (int resId) でその隙間を埋めるという方法。

	ViewPager viewPager = (ViewPager) this.findViewById(R.id.view_pager);
	Resources resources = this.getResources();
	int viewPagerPageMargin = resources.getDimensionPixelSize(R.dimen.view_pager_page_margin);
	viewPager.setPageMargin(viewPagerPageMargin);
	viewPager.setPageMarginDrawable(R.drawable.shape_view_pager_divider);

view raw gistfile1.java hosted with ❤ by GitHub

隙間の定義は dimens.xml で。程よく 4dp 。

	<resources>

	<!-- Default screen margins, per the Android Design guidelines. -->
	<dimen name="activity_horizontal_margin">16dp</dimen>
	<dimen name="activity_vertical_margin">16dp</dimen>
	<dimen name="view_pager_page_margin">4dp</dimen>

	</resources>

view raw gistfile3.xml hosted with ❤ by GitHub

隙間の定義は drawable/ に shape を定義して使ってみた。

	<?xml version="1.0" encoding="utf-8"?>
	<shape xmlns:android="http://schemas.android.com/apk/res/android"
	android:shape="rectangle" >

	<solid android:color="@android:color/black" />

	</shape>

view raw gistfile2.xml hosted with ❤ by GitHub

太さと色なんかはおこのみで調整したらいいとおもうよ。

お好み焼き食べたい。

SLUMBERS