android - タブ付きアクションバーへのAndroidメニュー

Question

私は4つの主要なセクションを持つアプリを作成しています。非常に簡単なナビゲーション方法が必要です。つまり、電話がアクションバーをサポートしている場合は、タブ付きのアクションバーを表示したいと思います。それ以外の場合は、メニューを表示する通常のメニューボタンで問題ありません。

問題は、実際にアクションバーをサポートするSDKバージョンの電話で試してみると、アクションバーの継ぎ目が管理できないか作成されていないことです。

menu / menu.xmlファイルを使用して、表示したいメニューとアイテムを作成しています。次に、onCreateOptionsMenu（）とMenuInflaterを使用して、各アクティビティのメニューにデータを入力しています。これはすべての電話で問題なく機能しますが、アクションバーを使用する電話では、左端にアプリアイコン、横に現在のアクティビティタイトルが表示され、右端に次のアイコンが表示されるタイトルタイプのバーが表示されます。最初のメニュー項目の後に3つの正方形が続きます（これらをクリックすると、残りのメニュー項目が表示されます）。この状況は、私が行っているアクティビティに関係なく同じです。

私が欲しいのは、アイコンとテキスト（テキスト用のスペースがある場合）の代わりにタブ付きアクションバーを表示し、ユーザーが表示している現在のアクティビティをタブ付きアクションバーで「選択」することです。ここに示されているのと同じ方法：

http://developer.android.com/images/ui/actionbar.png（新規ユーザーのため画像にできません）

これが私が使用しているコードです：

マニフェスト.xml

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

    <uses-permission
        android:name="android.permission.INTERNET" />
    <uses-permission
        android:name="android.permission.ACCESS_FINE_LOCATION" />
    <uses-permission
        android:name="android.permission.READ_PHONE_STATE" />

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

    <application
        android:icon="@drawable/icon"
        android:label="@string/app_name"
        android:theme="@android:style/Theme.Holo">

        <uses-library android:name="com.google.android.maps" />

        <activity
            android:name=".ActivityLoad"
            android:label="label">

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

        ....more activities....

    </application>

</manifest>

menu.xml

<?xml version="1.0" encoding="utf-8"?>

<menu
    xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/menuMap"
        android:title="@string/A_MAP_TITLE"
        android:icon="@drawable/nav_map"
        android:showAsAction="ifRoom|withText">
    </item>

    <item
        android:id="@+id/menuList"
        android:title="@string/A_LIST_TITLE"
        android:icon="@drawable/nav_list"
        android:showAsAction="ifRoom|withText">
    </item>

    <item
        android:id="@+id/menuMore"
        android:title="@string/A_MORE_TITLE"
        android:icon="@drawable/nav_more"
        android:showAsAction="ifRoom|withText">
    </item>

    <item
        android:id="@+id/menuReport"
        android:title="@string/A_REPORT_TITLE"
        android:icon="@drawable/nav_report"
        android:showAsAction="ifRoom|withText">
    </item>

</menu>

MyActivity.java

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    MenuInflater inflater = getMenuInflater();
    inflater.inflate(R.menu.options, menu);
    return super.onCreateOptionsMenu(menu);
}

アクティビティのonCreate（）メソッドでこのコードを使用してアクションバーのナビゲーションモードを設定しようとしましたが、デフォルトで表示される「不良」アクションバーの下に空白のアクションバーが表示されます。

ActionBar actionBar = getActionBar();
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

すべてのチュートリアルは、「スタイルを使用する」などと言っているだけですが、スタイルxmlファイルをどこに配置するか、これをメニューに設定する方法、または実際にここで何をすべきかがわかりません。誰かが助けることができればそれは大いにありがたいです！

score 4 · Accepted Answer

まず、MyActivity.javaが ActionBar.TabListener を実装していることを確認してください。つまり、3 つの関数をオーバーライドする必要があります。フラグメントをどのように作成したかはわかりませんが、これはMyActivity.javaで行った方法です:

public class MyActivity extends FragmentActivity implements ActionBar.TabListener {

    private static final String STATE_SELECTED_NAVIGATION_ITEM = "selected_navigation_item";

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

        // Set up the action bar.
        final ActionBar actionBar = getActionBar();
        actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

        // For each of the section, add a tab to the action bar.
        actionBar.addTab(actionBar.newTab().setText(R.string.title_status).setTabListener(this));
        actionBar.addTab(actionBar.newTab().setText(R.string.title_configuration).setTabListener(this));
    }

    @Override
    public void onRestoreInstanceState(Bundle savedInstanceState) {
        if (savedInstanceState.containsKey(STATE_SELECTED_NAVIGATION_ITEM)) {
            getActionBar().setSelectedNavigationItem(
                    savedInstanceState.getInt(STATE_SELECTED_NAVIGATION_ITEM));
        }
    }

    @Override
    public void onSaveInstanceState(Bundle outState) {
        outState.putInt(STATE_SELECTED_NAVIGATION_ITEM,
                getActionBar().getSelectedNavigationIndex());
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        //getMenuInflater().inflate(R.menu.activity_main, menu);
        return true;
    }



    @Override
    public void onTabUnselected(ActionBar.Tab tab, FragmentTransaction fragmentTransaction) {
    }

    @Override
    public void onTabSelected(ActionBar.Tab tab, FragmentTransaction fragmentTransaction) {
        // When the given tab is selected, show the tab contents in the container
        Fragment fragment = new DummySectionFragment();
        Bundle args = new Bundle();
        args.putInt(DummySectionFragment.ARG_SECTION_NUMBER, tab.getPosition() + 1);
        fragment.setArguments(args);
        getSupportFragmentManager().beginTransaction()
                .replace(R.id.container, fragment)
                .commit();
    }

    @Override
    public void onTabReselected(ActionBar.Tab tab, FragmentTransaction fragmentTransaction) {
    }

    /**
     * A dummy fragment representing a section of the app, but that simply displays dummy text.
     */
    public static class DummySectionFragment extends Fragment {
        public DummySectionFragment() {
        }

        public static final String ARG_SECTION_NUMBER = "section_number";

        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
                Bundle savedInstanceState) {
            TextView textView = new TextView(getActivity());
            textView.setGravity(Gravity.CENTER);
            Bundle args = getArguments();
            textView.setText(Integer.toString(args.getInt(ARG_SECTION_NUMBER)));
            return textView;
        }
    }
}

アクションバーをカスタマイズするには、親として Theme.Holo を持つカスタムスタイルを使用する必要があります。このようにして、Holo テーマからすべてを継承しますが、必要なものを上書きすることができます。manifest.xml内で以下を使用します。

 <application
        android:theme="@style/AppTheme">

それ以外の：

 <application
        android:theme="@android:style/Theme.Holo">

次に、 values/styles.xml内にカスタムスタイルを配置します。

<resources xmlns:android="http://schemas.android.com/apk/res/android">
    <style name="AppTheme" parent="android:Theme.Holo.Light">
       <item name="android:actionBarStyle">@style/MyActionBar</item>
       <item name="android:actionBarTabStyle">@style/MyActionBarTabStyle</item>
       <item name="android:actionBarTabBarStyle">@style/MyActionBarTabBar</item>
    </style>

ここが少しややこしいところです。同じファイル ( values/styles.xml ) 内で、上記で参照した各スタイルを定義する必要があります。

<style name="MyActionBar" parent="@android:style/Widget.Holo.Light.ActionBar">
    <item name="android:background">@drawable/menu_bar</item> <!-- remove if you don't have custom background for action bar -->
    <item name="android:displayOptions"></item>  <!-- get rid of logo on left and title, if you want logo on left put useLogo here -->
    <item name="android:customNavigationLayout">@layout/custom_action_bar</item> <!-- This is where you define how you want things to layout in your actionbar. I use a relative layout -->     
</style>


<!-- Style for tab bar -->
<style name="MyActionBarTabBar" parent="@android:style/Widget.Holo.Light.ActionBar.TabBar">
    <item name="android:showDividers">none</item>
    <item name="android:paddingLeft">20dp</item>
</style>

<!-- Style for action bar tabs -->
<style name="MyActionBarTabStyle" parent="@android:style/Widget.Holo.Light.ActionBar.TabView">
    <item name="android:background">@drawable/menu_tab</item> <!-- I use a background for my tabs also -->
</style>

各タブのカスタム背景を気にしない場合は、上の最後のスタイルを削除してください。各タブにカスタムの背景がある場合 (選択された状態の .9.png 画像と選択されていない状態の .9.png 画像が必要になります)、drawable/menu_tab.xmlが必要になります。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"
    android:constantSize="false"
    android:dither="true"
    android:variablePadding="false" >
    <item android:state_selected="true" >
        <inset android:insetTop="23dp"
               android:insetBottom="26dp" >
               <bitmap android:src="@drawable/menu_selected" ></bitmap>
        </inset> 
    </item>
    <item android:state_selected="false" > 
        <inset android:insetTop="20dp"
               android:insetBottom="26dp" >
               <bitmap android:src="@drawable/menu_not_selected" ></bitmap>
        </inset> 
    </item>      
</selector>

ここで、 layout/custom_action_bar.xmlを作成します

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >
    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:contentDescription="@string/LogoText"
        android:paddingRight="20dp"
        android:paddingTop="20dp"
        android:src="@drawable/ic_launcher" />

</RelativeLayout>

ただし、custom_action_bar は、残りのアクションバー要素をレイアウトしたい場合があります。右側にロゴを配置しただけですが、あなたの場合はオーバーフローメニューボタンなどを使用できます。アクションバーと各タブにカスタム背景を使用しています。その場合、異なる画面と互換性があることを確認するために、.9.png ファイルを作成する必要があります。

完成した結果は次のようになります。カスタムアクションバー

android - タブ付きアクションバーへのAndroidメニュー

1 に答える 1

Related

Reference