2013年10月26日土曜日

ViewPagerを使ってみる

スワイプやフリックで画像の切り替えなどを行うために、
きっとそれようのViewが既にあるはず!という事で調べたらViewSwitcher、ViewFliper、ViewPagerを見つけました(`・ω・´)シャキーン

どちらでもスワイプに対応してそうでしたが、
ViewPagerの方がiOSライク的に動くみたいなことが書かれていたので
今回はこちらを利用したいと思います!

■ViewPager
Androidの4.1.2から導入されたものらしいです。
サポートライブラリのandroid-support-v4.jarを利用すれば
Android 1.6から利用が可能とのこと(´・∀・`)ヘー
ViewPagerはメモリの節約のために、現在表示しているViewと前後のViewのみを生成して、それ以外は開放していくそうです。

ViewSwitcherやViewFlipperと違いはこちらから抜粋
また、ViewSwitcherやViewFlipperと違い、最後のView(最初のView)を表示しているときに、
次のView(前のView)を表示することはできません。
※ViewSwitcherやViewFlipperでは、最後のView(最初のView)でshowNext(showPrev)を呼ぶと、
最初(最後)のViewを表示することができます。

無限ループ的な感じでは作れないみたいですね・・・(´;ω;`)ウッ…
ただこちらの方がそれが出来るようにしてるっぽいですね~ъ(゚Д゚)グッジョブ!!
Android ループできる ViewPager (完全版)作った

■AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.viewpager"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="8" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name="com.example.viewpager.MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

■res/values/strings.xml
ボタンに設定している文字列を定義になります。
<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="app_name">ViewPager</string>
    <string name="action_settings">Settings</string>
    <string name="hello_world">Hello world!</string>
    <string name="prev">前へ</string>
    <string name="next">次へ</string>
    <string name="first">最初へ</string>
    <string name="last">最後へ</string>

</resources>
■activity_main.xml
メインのレイアウトになります。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="スライドスクロール"
        android:textSize="28sp" />

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center" >

        <Button
            android:id="@+id/btn_start"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:tag="@string/first"
            android:text="@string/first"/>

        <Button
            android:id="@+id/btn_prev"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:tag="@string/prev"
            android:text="@string/prev"/>

        <Button
            android:id="@+id/btn_next"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:tag="@string/next"
            android:text="@string/next"/>

        <Button
            android:id="@+id/btn_end"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:tag="@string/last"
            android:text="@string/last"/>
    </LinearLayout>

</LinearLayout>

■MainActivity.java
メインのアクティビティになります。
package com.example.viewpager;

import java.util.ArrayList;

import android.app.Activity;
import android.content.res.Resources;
import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.util.Log;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;

public class MainActivity extends Activity implements OnClickListener {

 private ArrayList<Button> mButtonList = new ArrayList<Button>();
 private ViewPager mViewPager = null;
 private CustomPagerAdapter mPagerAdapter;
 
 @Override
 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  
  //各ボタンを保持する
  mButtonList.add((Button) findViewById(R.id.btn_start));
  mButtonList.add((Button) findViewById(R.id.btn_prev));
  mButtonList.add((Button) findViewById(R.id.btn_next));
  mButtonList.add((Button) findViewById(R.id.btn_end));
  
  //ボタンにクリックイベントを設定する
  for (Button btn : mButtonList) {
   btn.setOnClickListener(this);
  }
  //ViewPagerを取得する
  mViewPager = (ViewPager) findViewById(R.id.viewpager);
  //アダプターを設定する
  mPagerAdapter = new CustomPagerAdapter(this);
  //アダプター経由でViewPagerに追加する
  mPagerAdapter.add(Color.BLACK);
  mPagerAdapter.add(Color.RED);
  mPagerAdapter.add(Color.GREEN);
  mPagerAdapter.add(Color.BLUE);
  mPagerAdapter.add(Color.CYAN);
  mPagerAdapter.add(Color.MAGENTA);
  mPagerAdapter.add(Color.YELLOW);
  //アダプターを設定する
  mViewPager.setAdapter(mPagerAdapter);
 }

    /*
     * ボタンクリック時の動作 
     */
    public void onClick(View v) {
     
        Log.d("ボタン",(String) v.getTag());
        //
        Resources res = getResources();
        //
        if (v.getTag().equals((String)res.getString(R.string.first))){
         mViewPager.setCurrentItem(0);
        }else if (v.getTag().equals((String)res.getString(R.string.last))){
         mViewPager.setCurrentItem(mPagerAdapter.getCount() - 1);
        }else if (v.getTag().equals((String)res.getString(R.string.prev))){
         mViewPager.arrowScroll(View.FOCUS_LEFT);
        }else if (v.getTag().equals((String)res.getString(R.string.next))){
         mViewPager.arrowScroll(View.FOCUS_RIGHT);
        }
    }

}

■CustomPagerAdapter.java
ViewPagerのアダプターの定義になります。
package com.example.viewpager;

import java.util.ArrayList;

import android.content.Context;
import android.support.v4.view.PagerAdapter;
import android.util.Log;
import android.view.Gravity;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class CustomPagerAdapter extends PagerAdapter {
 
    /** コンテキスト. */
    private Context mContext;
     
    /** リスト. */
    private ArrayList<Integer> mList;
 
    /**
     * コンストラクタ.
     */
    public CustomPagerAdapter(Context context) {
        mContext = context;
        mList = new ArrayList<Integer>();
    }
 
    /**
     * リストにアイテムを追加する.
     * @param item アイテム
     */
    public void add(Integer item) {
     Log.d("CustomPagerAdapter", "add");
        mList.add(item);
    }
 /*
  * アイテムを追加するときに呼ばれる。このメソッド内で View をコンテナに追加する。
  * @see android.support.v4.view.PagerAdapter#instantiateItem(android.view.ViewGroup, int)
  */
    @Override
    public Object instantiateItem(ViewGroup container, int position) {
     Log.d("CustomPagerAdapter", "instantiateItem");
        // リストから取得
        Integer item = mList.get(position);
 
        // View を生成
        TextView textView = new TextView(mContext);
        textView.setText("Page:" + position);
        textView.setTextSize(30);
        textView.setTextColor(item);
        textView.setGravity(Gravity.CENTER);
 
        // コンテナに追加
        container.addView(textView);
 
        return textView;
    }
 /**
  * アイテムを削除するときに呼ばれる。このメソッド内で View の削除をおこなう。 postion番目のViweを削除するために利用
  * 
  * @param container
  *            : 削除するViewのコンテナ
  * @param position
  *            : インスタンス削除位置
  * @param object
  *            : instantiateItemメソッドで返却したオブジェクト
  * @see android.support.v4.view.PagerAdapter#destroyItem(android.view.ViewGroup,
  *      int, java.lang.Object)
  */
    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        // コンテナから View を削除
        container.removeView((View) object);
    }
 /*
  * ViewPager に登録する全アイテム数を返す。
  * @see android.support.v4.view.PagerAdapter#getCount()
  */
    @Override
    public int getCount() {
        // リストのアイテム数を返す
        return mList.size();
    }
 /**
  * Object に View が含まれているか判定する。 第2引数のobjectに第1引数のviewが含まれているか、判定する。
  * 正しく比較をしないと挙動がおかしくなった・・・orz スワイプ中のページ送りのフォーカスや表示調整に使っている?
  * 
  * @see android.support.v4.view.PagerAdapter#isViewFromObject(android.view.View,
  *      java.lang.Object)
  */ 
    @Override
    public boolean isViewFromObject(View view, Object object) {
        // Object 内に View が存在するか判定する
        return view == (TextView) object;
    }
}


以上です(`・ω・´)ゞビシッ!!

参考URL

0 件のコメント:

コメントを投稿