今回はViewPagerの実装の仕方についてです。
ViewPagerは動かすまでにたくさん記述しなくてはいけないので、なかなか時間がかかりますが、これがあるだけでなんとなくアプリがリッチに見えるのでオススメです!
今回は、画像とページ名をセットで表示するようなViewPagerを作っていきます。
まずはページ名を決めていきましょう。この配列の要素数によって挙動が変わってきます。
[strings.xml]
1 2 3 4 5 6 7 8 | < string-array name = "data_names" > < item >テキスト1</ item > < item >テキスト2</ item > < item >テキスト3</ item > < item >テキスト4</ item > < item >テキスト5</ item > < item >テキスト6</ item > </ string-array > |
これでテキストの準備は完了です。
それでは、レイアウトxmlにViewを追加します。
[main.xml]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | < LinearLayout android:layout_width = "fill_parent" android:layout_height = "wrap_content" android:gravity = "center" android:orientation = "horizontal" > < Button android:id = "@+id/bt_l" android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:background = "@drawable/button_back" android:onClick = "LEFT" android:text = "" /> < TextView android:id = "@+id/data_name" android:layout_width = "0dp" android:layout_height = "wrap_content" android:layout_weight = "1" android:gravity = "center" android:text = "" /> < Button android:id = "@+id/bt_r" android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:background = "@drawable/button_next" android:onClick = "RIGHT" android:text = "" /> </ LinearLayout > < android.support.v4.view.ViewPager android:id = "@+id/viewpager" android:layout_weight = "1" android:layout_width = "fill_parent" android:layout_height = "0dp" /> |
このとき、ViewPagerのwidthやheightをwrap_contentにしてはいけません。
Viewの高さが反映されないようで、wrap_contentだと無効化されてしまいます。
次に、アクティビティ側の宣言。
[MainActivity.java]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 | public class MainActivity extends Activity { private String[] data_strs; private int data_num; private int now_page; private ViewPager viewPager; @Override protected void onCreate(Bundle savedInstanceState) { super .onCreate(savedInstanceState); setContentView(R.layout.main); //ページビューのセット now_page = 0 ; data_strs = getResources().getStringArray(R.array.data_names); data_num = data_strs.length; SetPageView(); } private void SetPageView() { viewPager = (ViewPager) findViewById(R.id.viewpager); PagerAdapter mPagerAdapter = new AdapterPager( this ); viewPager.setAdapter(mPagerAdapter); //ページが変わったことを受け取るイベント viewPager.setOnPageChangeListener( new ViewPager.SimpleOnPageChangeListener() { @Override public void onPageSelected( int position) { now_page = position; SetArrowImages(position); } }); viewPager.setCurrentItem(now_page); SetArrowImages(now_page); } //矢印の見え方を定義 private void SetArrowImages( int position) { Button arrow_l = (Button)findViewById(R.id.bt_l); Button arrow_r = (Button)findViewById(R.id.bt_r); TextView data_name = (TextView)findViewById(R.id.data_name); if (position == 0 ) {arrow_l.setVisibility(View.INVISIBLE);} else {arrow_l.setVisibility(View.VISIBLE);} if (position == (data_num- 1 )) {arrow_r.setVisibility(View.INVISIBLE);} else {arrow_r.setVisibility(View.VISIBLE);} data_name.setText(data_strs[position]); if (position > 0 ) { arrow_l.setText(data_strs[position - 1 ]); } if (position < (sound_num- 1 )) { arrow_r.setText(data_strs[position + 1 ]); } } public void LEFT(View v) { now_page = ((now_page + data_num - 1 ) % data_num); viewPager.setCurrentItem(now_page, true ); //2番目の引数はアニメーションの有無 } public void RIGHT(View v) { now_page = ((now_page + 1 ) % data_num); viewPager.setCurrentItem(now_page, true ); } } |
main.xmlに、ページをめくる左右の矢印ボタンがあるという想定です。
SetArrowImages()メソッドは、それを設定するためです。
矢印ボタンは、ページ位置に応じて消えたり現れたりしますし、ボタンの文字領域に、前ページと次ページのページ名が表示されます。
次はアダプターです。
[AdapterPager.java]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | public class AdapterPager extends PagerAdapter { private int N; private LayoutInflater _inflater = null ; String[] names; public AdapterPager(Context c) { super (); _inflater = (LayoutInflater) c.getSystemService(Context.LAYOUT_INFLATER_SERVICE); names = c.getResources().getStringArray(R.array.data_names); N = names.length; } @Override public Object instantiateItem(ViewGroup container, int position) { LinearLayout layout = (LinearLayout) _inflater.inflate(R.layout.page_data, null ); //ページごとに表示する画像 ImageView img = (ImageView) layout.findViewById(R.id.frame_image); int rsrc[] = { R.drawable.image01, R.drawable.image02, R.drawable.image03, R.drawable.image04, R.drawable.image05, R.drawable.image06, }; img.setImageResource(rsrc[position]); container.addView(layout); return layout; } @Override public void destroyItem(ViewGroup container, int position, Object object) { ((ViewPager) container).removeView((View) object); } @Override public int getCount() { return N; } @Override public boolean isViewFromObject(View view, Object object) { return view.equals(object); } } |
アダプターはこんな感じですが、ページごとのレイアウトを定義するpage_dataがまだありませんね。
page_dataを作っていきましょう。
[page_data.xml]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <? xml version = "1.0" encoding = "utf-8" ?> android:layout_width = "fill_parent" android:layout_height = "wrap_content" android:gravity = "center" android:orientation = "horizontal" > < ImageView android:id = "@+id/frame_image" android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:adjustViewBounds = "true" android:scaleType = "fitXY" android:src = "@drawable/image01" /> </ LinearLayout > |
以上です。
これらを実装して動作させてみましょう!
今回はコードが多くて記事を書くのに疲れました。。。
コメントを残す