2014年1月22日水曜日

ActionBarを使ってみる(NAVIGATION_MODE_TABS + ViewPager Android 2.2以上)

依然書いた記事で「PagerTabStripを使ってみる 」で、
Google Play ストアっぽいメニューを表示させていましたが、
良く見てみるとなんていうか・・・メニュー部分の見た目が全然違っていましたね:(;゙゚'ω゚'):

Google Playストアっぽいメニューにするには、
ActionBarのNAVIGATION_MODE_TABSを使い、
中身はViewPagerを使って作った方がよりGoogle Playストアに近づきましたワーイヽ(゚∀゚)メ(゚∀゚)メ(゚∀゚)ノワーイ

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

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

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/Theme.AppCompat" >
        <activity
            android:name="com.example.actionbar11.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>
■activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin" >

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

</LinearLayout>

■CustomPagerAdapter.java
package com.example.actionbar11;

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.setGravity(Gravity.CENTER);

  // コンテナに追加
  container.addView(textView);

  return textView;
 }

 /*
  * アイテムを削除するときに呼ばれる。このメソッド内で View の削除をおこなう。
  * 
  * @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 が含まれているか判定する。
  * 
  * @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;
  return view.equals(object);
 }
}
■MainActivity.java
package com.example.actionbar11;

import android.app.Activity;
import android.os.Bundle;
import android.support.v4.app.FragmentTransaction;
import android.support.v4.view.ViewPager;
import android.support.v7.app.ActionBar;
import android.support.v7.app.ActionBar.Tab;
import android.support.v7.app.ActionBarActivity;
import android.util.Log;

public class MainActivity extends ActionBarActivity {

 private static ViewPager mViewPager = null;
 private CustomPagerAdapter mPagerAdapter;

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

  // action bar を取得する
  final ActionBar ab = getSupportActionBar();

  int length = 12;

  // ViewPagerを取得する
  mViewPager = (ViewPager) findViewById(R.id.viewpager);
  // アダプターを設定する
  mPagerAdapter = new CustomPagerAdapter(this);

  for (int i = 0; i < length; i++) {
   // アダプター経由でViewPagerに追加する
   mPagerAdapter.add(i);
  }

  /**
   * スワイプしたときにもActionbarのタブ(NavigationItem)を常に表示させる処理
   */
  mViewPager
    .setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {
     @Override
     public void onPageSelected(int position) {
      ab.setSelectedNavigationItem(position);
     }
    });

  // アダプターを設定する
  mViewPager.setAdapter(mPagerAdapter);

  // ActionBarのアイコンを表示しないようにする。 true:表示/false:非表示
  ab.setDisplayShowHomeEnabled(false);
  // ActionBarのタイトル名を表示しないようにする。true:表示/false:非表示
  ab.setDisplayShowTitleEnabled(false);

  // ActionBarのNavigationModeを設定する
  ab.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

  // 設定指定あるアダプターの件数を取得する
  int lengthViewPagerCount = mPagerAdapter.getCount();

  // リスナー生成
  MainTabListener listener = new MainTabListener(this);

  // タブにリスナーを追加する
  for (int i = 0; i < lengthViewPagerCount; i++) {
   // タブを追加する
   Tab tab = ab.newTab().setText("Tab" + String.valueOf(i))
     .setTabListener(listener);
   ab.addTab(tab);
  }

  // デフォルトの状態選択を変更する
  ab.setSelectedNavigationItem(0);

 }

 /*
  * ActionBarのタブリスナー
  */
 public static class MainTabListener implements ActionBar.TabListener {

  private final Activity activity;

  public MainTabListener(Activity activity) {
   this.activity = activity;
  }

  /*
   * 選択されているタブが再度選択された場合に実行
   * 
   * @see
   * android.support.v7.app.ActionBar.TabListener#onTabReselected(android.
   * support.v7.app.ActionBar.Tab,
   * android.support.v4.app.FragmentTransaction)
   */
  @Override
  public void onTabReselected(Tab tab, FragmentTransaction ft) {
   // TODO Auto-generated method stub
   Log.d("MainActivity", "onTabReselected " + tab.getText()
     + " : position => " + tab.getPosition());

  }

  /*
   * タブが選択された場合に実行
   * 
   * @see
   * android.support.v7.app.ActionBar.TabListener#onTabSelected(android
   * .support .v7.app.ActionBar.Tab,
   * android.support.v4.app.FragmentTransaction)
   */
  @Override
  public void onTabSelected(Tab tab, FragmentTransaction ft) {
   // TODO Auto-generated method stub
   Log.d("MainActivity", "onTabSelected " + tab.getText()
     + " : position => " + tab.getPosition());

   // ここで表示するフラグメントを決定する
   // setCurrentItem で、下記の SectionPagerAdapter の getItem を呼び出し
   mViewPager.setCurrentItem(tab.getPosition());

  }

  /*
   * タブの選択が外れた場合に実行
   * 
   * @see
   * android.support.v7.app.ActionBar.TabListener#onTabUnselected(android.
   * support.v7.app.ActionBar.Tab,
   * android.support.v4.app.FragmentTransaction)
   */
  @Override
  public void onTabUnselected(Tab tab, FragmentTransaction ft) {
   // TODO Auto-generated method stub
   Log.d("MainActivity", "onTabUnselected " + tab.getText()
     + " : position => " + tab.getPosition());

   // Fragment削除
   // ft.remove(mFragment);

  }
 }

}
実行結果は次のようになります。

スワイプまたは、タブを選択すると横に移動する、



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

参考URL

0 件のコメント:

コメントを投稿