Set menu items centered and full-width with Action

2019-07-17 08:34发布

问题:

I'm attempting to display an action bar with two items, Cancel and Save, but I want these laid out to span the entire length of the action bar, like so:

______________________________
|____Cancel____|____Save ____|
|                            |
|                            |
|                            |
|                            |

So basically I need a way to display only two action items, centered, and spanning the entire action bar.

What's the easiest way to accomplish this? I'm considering using a customlayout, but as I'm still new to using actionbars and menus, I'm not sure how I would be able to do this and have these still be menu action items.

Is there some kind of styling solution? What's the best and most painless way to accomplish this?

EDIT

As this is my first go with Action Bars and custom layouts, I've got no feel for what will work and what is a hopelessly idiotic approach that simply won't work. For example, setting a custom layout to this:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_gravity="center_horizontal">

    <item android:id="@+id/menu_item_cancel"
            android:showAsAction="always"
            android:title="Cancel"/>

    <item android:id="@+id/menu_item_save"
            android:showAsAction="always"
            android:title="Save" />
</menu>

causes an inflation exception and won't work, and though others with more experience will rightaway know this can't work, I'm left bungling about burning time until I can feel my way out of this or someone points me in the right direction.

So for those asking me what I've tried, I'll keep posting, but expect much of the same.

2nd try

Getting a ClassNotFoundException: Didn't find class "android.view.menu" on path

<?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:layout_gravity="center_horizontal">

    <menu android:layout_gravity="center_horizontal">

        <item android:id="@+id/menu_item_cancel"
                android:showAsAction="always"
                android:title="Cancel"/>

        <item android:id="@+id/menu_item_save"
                android:showAsAction="always"
                android:title="Save" />
    </menu>

</LinearLayout>

3rd try

This almost works, except I only see the top half of each button. The lower half is cut off, even though the action bar seems to have enough room for it to draw itself properly.

I also lose the action item styling since these are normal buttons, as well as the divider. I'd much rather find a solution that uses the native action items, as it will make it easier to style along with the rest of the action bars throughout the app.

<?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:layout_gravity="center_horizontal">

                <Button
                    android:id="@+id/cancel_btn"
                    android:layout_width="0dp"
                    android:layout_height="fill_parent"
                    android:layout_weight="1"
                    android:text="Cancel" />

                <Button
                    android:id="@+id/save_btn"
                    android:layout_width="0dp"
                    android:layout_height="fill_parent"
                    android:layout_weight="1"
                    android:text="Save" />
</LinearLayout>

4th try

This one is pretty close. I was going through the ActionBarSherlock demo project, and noticed when the split menu bar is used, the layout tends to center itself. So I reverted to the original menu I've been using, and added the showAsAction ifRoom value.

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android" >

    <item android:id="@+id/menu_item_cancel"
            android:showAsAction="ifRoom"
            android:title="Cancel"/>

    <item android:id="@+id/menu_item_save"
            android:showAsAction="ifRoom"
            android:title="Save"/>
</menu>

I also added this to my activity in the manifest:

android:uiOptions="splitActionBarWhenNarrow"

This gives me the exact styling I want...but it's in the split action bar. I want this at the top, not at the bottom. Running this on the emulator with Android 2.2 works, but seems to center the two options proportional to the length of the text, so the area for Cancel is larger than the area for Save.

If someone knows a way to get this exact styling but in the top action bar, that would fix everything.

回答1:

Doesn't seem to be a way to do this with native action bar styling or options. Had to use a custom view, similar to my third try, with revised styling and backgrounds to mimic the action bar.