Honeycombチュートリアル その１

android honeycomb

SDKSampleのHoneycombGalleryを最初から作る

完成図

ActionBarの追加とカスタマイズ

アクションバーとは

Android3.0(Honeycomb)から画面上部のタイトルバーの機能が拡張され、ActionBarとして利用できるようになった。ActionBarにはメニューを表示したり、Tabを表示したりとタブレットに適したUIを構築できます。

  • アクションバーは画面上にある従来のタイトルバー的なあれ
  • オプションメニュー で提供するアイテムを "アクションアイテム" としてアクションバーに直接表示します。
  • ナビゲーションモードの設定で以下の事ができる
    • フラグメント の間をナビゲートするためのタブを提供することができる
    • ナビゲーション用のドロップダウンリストを提供します。
  • アクションアイテム ( 検索ボックスなど ) の代わりに双方向にやり取りする "アクションビュー" を提供します。
手順
  • layoutの作成
    • actionbar専用のレイアウトを作成する
  • Activityの編集
    • ActionBarのカスタマイズ
  • ナビゲーションの追加
layoutの作成

独自ActionBarレイアウト作成

action_bar_custom.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"></TextView>
</LinearLayout>
MainActivity

onCreateを変更する

  1. ActionBar用のViewを取得する
  2. setCustomViewmeメソッドでレイアウトをaction_bar_custom.xmlに設定する
  3. setDisplayOptionsメソッドで
  4. setNavigationModeでナビゲーションをタブ形式のあれにする
public class MainActivity extends Activity {
	
	private View actionvBarView;
	
	  /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        //Create ActionBar
        ActionBar bar = getActionBar();

        //TODO add action item lator


        // bar customizition.
        actionvBarView = getLayoutInflater().inflate(R.layout.action_bar_custom, null);
        bar.setCustomView(actionvBarView);
        bar.setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM | ActionBar.DISPLAY_USE_LOGO);
        bar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
        bar.setDisplayShowHomeEnabled(true);
    }
    
}
実行

ナビゲートタブの追加

そっけないのでとりあえずなタブを追加する

  1. ActivityにActionBar.TabListenerを実装する
public class MainActivity extends Activity implements ActionBar.TabListener {
  1. onCreateを変更し、サンプル用のタブナビを追加
		// TODO add action item and detail lator
		bar.addTab(bar.newTab().setText("tab1").setTabListener(this));
		bar.addTab(bar.newTab().setText("tab2").setTabListener(this));
		bar.addTab(bar.newTab().setText("tab3").setTabListener(this));
実行結果


ソース
package com.hidecheck.honeycomic;

import android.app.ActionBar;
import android.app.ActionBar.Tab;
import android.app.Activity;
import android.app.FragmentTransaction;
import android.os.Bundle;
import android.view.View;

public class MainActivity extends Activity implements ActionBar.TabListener {

	private View actionvBarView;

	/** Called when the activity is first created. */
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);

		// Create ActionBar
		ActionBar bar = getActionBar();

		// TODO add action item and detail lator
		bar.addTab(bar.newTab().setText("tab1").setTabListener(this));
		bar.addTab(bar.newTab().setText("tab2").setTabListener(this));
		bar.addTab(bar.newTab().setText("tab3").setTabListener(this));

		// bar customizition.
		actionvBarView = getLayoutInflater().inflate(R.layout.action_bar_custom, null);
		bar.setCustomView(actionvBarView);
		bar.setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM | ActionBar.DISPLAY_USE_LOGO);
		bar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
		bar.setDisplayShowHomeEnabled(true);
	}

	@Override
	public void onTabReselected(Tab tab, FragmentTransaction ft) {
		// TODO Auto-generated method stub

	}

	@Override
	public void onTabSelected(Tab tab, FragmentTransaction ft) {
		// TODO Auto-generated method stub

	}

	@Override
	public void onTabUnselected(Tab tab, FragmentTransaction ft) {
		// TODO Auto-generated method stub

	}
}

タブナビゲートを正しいメニューにする

SDKサンプルから元画像をコピーする

  • red_balloon.jpg
  • green_balloon.jpg
  • blue_balloon.jpg
  • blue_bike.jpg
  • rainbow_bike.jpg
  • chrome_wheel.jpg
  • punk_droid.jpg
  • stargazer_droid.jpg
  • big_droid.jpg
  • cupcake.jpg
  • donut.jpg
  • eclair.jpg
  • froyo.jpg
ナビゲート用のクラスを作成する
  • DirectoryEntry
  • DirectoryCategory
  • Directory
MainActivtyを変更する

サンプルのナビゲートを削除し正しいコードを追加する

	        //TODO add action item and detail lator
	        for(int i = 0; i < Directory.getmCategoryCount(); i++){
	        	bar.addTab(bar.newTab().setText(Directory.getCategory(i).getName()).setTabListener(this));
	        }
実行結果


ソース

DirectoryEntry.java
package com.hidecheck.honeycomic;


public class Directory {
	private static DirectoryCategory[] mCategories;
	
	public static void initializeDirectory(){
		
		mCategories = new DirectoryCategory[]{
                new DirectoryCategory("Balloons", new DirectoryEntry[] {
                        new DirectoryEntry("Red Balloon", R.drawable.red_balloon),
                        new DirectoryEntry("Green Balloon", R.drawable.green_balloon),
                        new DirectoryEntry("Blue Balloon", R.drawable.blue_balloon)}),
                new DirectoryCategory("Bikes", new DirectoryEntry[] {
                        new DirectoryEntry("Old school huffy", R.drawable.blue_bike),
                        new DirectoryEntry("New Bikes", R.drawable.rainbow_bike),
                        new DirectoryEntry("Chrome Fast", R.drawable.chrome_wheel)}),
                new DirectoryCategory("Androids", new DirectoryEntry[] {
                        new DirectoryEntry("Steampunk Android", R.drawable.punk_droid),
                        new DirectoryEntry("Stargazing Android", R.drawable.stargazer_droid),
                        new DirectoryEntry("Big Android", R.drawable.big_droid) }),
                new DirectoryCategory("Pastries", new DirectoryEntry[] {
                        new DirectoryEntry("Cupcake", R.drawable.cupcake),
                        new DirectoryEntry("Donut", R.drawable.donut),
                        new DirectoryEntry("Eclair", R.drawable.eclair),
                        new DirectoryEntry("Froyo", R.drawable.froyo), }),
               };
	}

	public static int getmCategoryCount() {
		return mCategories.length;
	}
	
	public static DirectoryCategory getCategory(int i) {
		return mCategories[i];
	}
	
}
DirectoryCategory.java
package com.hidecheck.honeycomic;


public class DirectoryCategory {
	private String name;
	private DirectoryEntry[] entries;
	
	public DirectoryCategory(String name, DirectoryEntry[] entries) {
		super();
		this.name = name;
		this.entries = entries;
	}

	public String getName() {
		return name;
	}

    public DirectoryEntry getEntry(int i) {
        return entries[i];
    }
	
	public int getEntryCount(){
		return entries.length;
	}
	
}
Directory.java
package com.hidecheck.honeycomic;

import android.content.res.Resources;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;

public class DirectoryEntry {
	private String name;
	private int resId;

	public String getName() {
		return name;
	}
	
	public int getId() {
		return resId;
	}
	
	public DirectoryEntry(String name, int id) {
		this.resId = id;
		this.name = name;
	}
	
	public Bitmap getB&#236;tmap(Resources res){
		return BitmapFactory.decodeResource(res, resId);
	}
}
action_bar_custom.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">Hello Action Bar</TextView>

</LinearLayout>
MainActivity.java
package com.hidecheck.honeycomic;

import android.app.ActionBar;
import android.app.ActionBar.Tab;
import android.app.Activity;
import android.app.FragmentTransaction;
import android.os.Bundle;
import android.view.View;

public class MainActivity extends Activity implements ActionBar.TabListener{
	
	private View actionvBarView;
	
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        Directory.initializeDirectory();
        
        //Create ActionBar
        ActionBar bar = getActionBar();
        
        
        //TODO add action item and detail lator
        for(int i = 0; i < Directory.getmCategoryCount(); i++){
        	bar.addTab(bar.newTab().setText(Directory.getCategory(i).getName()).setTabListener(this));
        }
        
        // bar customizition.
		actionvBarView = getLayoutInflater().inflate(R.layout.action_bar_custom, null);
        bar.setCustomView(actionvBarView);
        bar.setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM | ActionBar.DISPLAY_USE_LOGO);
        bar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
        bar.setDisplayShowHomeEnabled(true);
    }

	@Override
	public void onTabReselected(Tab tab, FragmentTransaction ft) {
		// TODO Auto-generated method stub
		
	}

	@Override
	public void onTabSelected(Tab tab, FragmentTransaction ft) {
		// TODO Auto-generated method stub
		
	}

	@Override
	public void onTabUnselected(Tab tab, FragmentTransaction ft) {
		// TODO Auto-generated method stub
		
	}
}