2013年11月12日火曜日

ActionBarを使ってみる(タブ表示。Android 2.2以上)

今回は前回からの続きでActionBarについてになります(`・ω・´)シャキーン
ActionBarを使ってみる(Support Library v7の設定)
※設定が終わっていない方は前回の記事を元に設定の方を行ってください。

ActionBarで利用できるものは次の種類があるそうです。
NAVIGATION_MODE_LIST
 リスト構造のNavigationを提供します
NAVIGATION_MODE_STANDARD
 一般的なNavigationです
NAVIGATION_MODE_TABS
 タブのNavigationを提供します
まずはタブの機能を使ってみたいと思います( ̄ー ̄)ニヤリ

■AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.actionbar2"
    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.actionbar2.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/styles.xml

ActionBarを利用するためには、
styles.xmlに定義されているAppBaseThemeのparentに
次のうちのテーマを利用する必要があります。

・Theme.AppCompat
・Theme.AppCompat.Light
・Theme.AppCompat.Light.DarkActionBar

今回は、「Theme.AppCompat.Light」を設定しておきます。
<resources>

    <!--
        Base application theme, dependent on API level. This theme is replaced
        by AppBaseTheme from res/values-vXX/styles.xml on newer devices.
    -->
    <style name="AppBaseTheme" parent="Theme.AppCompat.Light">
        <!--
            Theme customizations available in newer API levels can go in
            res/values-vXX/styles.xml, while customizations related to
            backward-compatibility can go here.
        -->
    </style>

    <!-- Application theme. -->
    <style name="AppTheme" parent="AppBaseTheme">
        <!-- All customizations that are NOT specific to a particular API-level can go here. -->
    </style>

</resources>
■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:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world" />

</RelativeLayout>


■MainActivity.java

エミュレーターでは、ActionBarの中でタブが作成されているのに、
実機のスマートフォンでは、ActionBarの下にタブが表示されてしまっている・・・:(;゙゚'ω゚'):

なんでかな~?と思っていたら、端末の画面サイズによって変わるそうです。(´・∀・`)ヘー
2.05. ActionBarとインタラクション制御
複数のタブから 1 つを選択してコンテンツを切り替えるタイプのナビゲーションモードです。

タブの位置は、画面の大きさによって決定されます。
横幅の狭い画面では、アクションバーの直下に表示されますが、広い画面では、アクションバーのタイトル部分の右横にタブが統合されます。
これは、端末の画面回転時にも判定が行われるため、縦画面と横画面で動的にアクションバーのレイアウトが切り替わることになります。

画面サイズに依存せずに、見た目を似たように感じにするには、
ActionBarを消してあげれば良いかも?
// ActionBarのアイコンを表示しないようにする。 true:表示/false:非表示
ab.setDisplayShowHomeEnabled(false);
// ActionBarのタイトル名を表示しないようにする。true:表示/false:非表示
ab.setDisplayShowTitleEnabled(false);
もしくは、
// ActionBarを非表示にする。(表示にする場合にはshow)
ab.hide();
タブのリスナーはActivityに実装しました。
(そのため、implements ActionBar.TabListenerを行っています)
このonTabSelectedで選択されたタブにあった内容の画面を作成していきます。

onTabSelected
 タブが選択された場合に実行

onTabUnselected
 タブの選択が外れた場合に実行

onTabReselected
 選択されているタブが再度クリックされた場合に実行
package com.example.actionbar1;

import android.os.Bundle;
import android.support.v4.app.FragmentTransaction;
import android.support.v7.app.ActionBar;
import android.support.v7.app.ActionBar.Tab;
import android.support.v7.app.ActionBarActivity;
import android.util.Log;
import android.widget.GridView;
import android.widget.TextView;

public class MainActivity extends ActionBarActivity implements
  ActionBar.TabListener {

 private TextView mText;

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

  //
  mText = (TextView) findViewById(R.id.text);

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

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

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

  // ActionBarにタブを表示する
  ab.addTab(ab.newTab().setText("Tab1").setTabListener(this));
  ab.addTab(ab.newTab().setText("Tab2").setTabListener(this));
  ab.addTab(ab.newTab().setText("Tab3").setTabListener(this));

 }

 /*
  * 選択されているタブが再度選択された場合に実行
  * 
  * @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());
  //
  mText.setText(tab.getText());
 }

 /*
  * タブの選択が外れた場合に実行
  * 
  * @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());
 }

}
実行結果は次のようになります。
・エミュレーター実行時(ActionBarとタブがくっついてる状態)

実機で実行時(画面サイズが小さいため、ActionBarの下にタブが表示されている状態)

実機で実行時(画面サイズが小さいけど、ActionBarを非表示にすることでタブが上に詰まっている状態)
以上です(`・ω・´)ゞビシッ!!

参考URL

0 件のコメント:

コメントを投稿