How can I implement custom Action Bar with custom

问题:

I want to implement custom ActionBar which must look like this:

So questions:

1. How can I implement a button like custom view: just some image?
2. How can I draw a line on the top of the ActionBar?
3. And how can I implement buttons without separator lines: add tabs on the ActionBar or what?

回答1:

This is pretty much as close as you\'ll get if you want to use the ActionBar APIs. I\'m not sure you can place a colorstrip above the ActionBar without doing some weird Window hacking, it\'s not worth the trouble. As far as changing the MenuItems goes, you can make those tighter via a style. It would be something like this, but I haven\'t tested it.

<style name=\"MyTheme\" parent=\"android:Theme.Holo.Light\">
    <item name=\"actionButtonStyle\">@style/MyActionButtonStyle</item>
</style>

<style name=\"MyActionButtonStyle\" parent=\"Widget.ActionButton\">
    <item name=\"android:minWidth\">28dip</item>
</style>

Here\'s how to inflate and add the custom layout to your ActionBar.

    // Inflate your custom layout
    final ViewGroup actionBarLayout = (ViewGroup) getLayoutInflater().inflate(
            R.layout.action_bar,
            null);

    // Set up your ActionBar
    final ActionBar actionBar = getActionBar();
    actionBar.setDisplayShowHomeEnabled(false);
    actionBar.setDisplayShowTitleEnabled(false);
    actionBar.setDisplayShowCustomEnabled(true);
    actionBar.setCustomView(actionBarLayout);

    // You customization
    final int actionBarColor = getResources().getColor(R.color.action_bar);
    actionBar.setBackgroundDrawable(new ColorDrawable(actionBarColor));

    final Button actionBarTitle = (Button) findViewById(R.id.action_bar_title);
    actionBarTitle.setText(\"Index(2)\");

    final Button actionBarSent = (Button) findViewById(R.id.action_bar_sent);
    actionBarSent.setText(\"Sent\");

    final Button actionBarStaff = (Button) findViewById(R.id.action_bar_staff);
    actionBarStaff.setText(\"Staff\");

    final Button actionBarLocations = (Button) findViewById(R.id.action_bar_locations);
    actionBarLocations.setText(\"HIPPA Locations\");

Here\'s the custom layout:

<LinearLayout xmlns:android=\"http://schemas.android.com/apk/res/android\"
    android:layout_width=\"wrap_content\"
    android:layout_height=\"wrap_content\"
    android:enabled=\"false\"
    android:orientation=\"horizontal\"
    android:paddingEnd=\"8dip\" >

    <Button
        android:id=\"@+id/action_bar_title\"
        style=\"@style/ActionBarButtonWhite\" />

    <Button
        android:id=\"@+id/action_bar_sent\"
        style=\"@style/ActionBarButtonOffWhite\" />

    <Button
        android:id=\"@+id/action_bar_staff\"
        style=\"@style/ActionBarButtonOffWhite\" />

    <Button
        android:id=\"@+id/action_bar_locations\"
        style=\"@style/ActionBarButtonOffWhite\" />

</LinearLayout>

Here\'s the color strip layout: To use it, just use merge in whatever layout you inflate in setContentView.

<FrameLayout xmlns:android=\"http://schemas.android.com/apk/res/android\"
    android:layout_width=\"match_parent\"
    android:layout_height=\"@dimen/colorstrip\"
    android:background=\"@android:color/holo_blue_dark\" />

Here are the Button styles:

<style name=\"ActionBarButton\">
    <item name=\"android:layout_width\">wrap_content</item>
    <item name=\"android:layout_height\">wrap_content</item>
    <item name=\"android:background\">@null</item>
    <item name=\"android:ellipsize\">end</item>
    <item name=\"android:singleLine\">true</item>
    <item name=\"android:textSize\">@dimen/text_size_small</item>
</style>

<style name=\"ActionBarButtonWhite\" parent=\"@style/ActionBarButton\">
    <item name=\"android:textColor\">@color/white</item>
</style>

<style name=\"ActionBarButtonOffWhite\" parent=\"@style/ActionBarButton\">
    <item name=\"android:textColor\">@color/off_white</item>
</style>

Here are the colors and dimensions I used:

<color name=\"action_bar\">#ff0d0d0d</color>
<color name=\"white\">#ffffffff</color>
<color name=\"off_white\">#99ffffff</color>

<!-- Text sizes -->
<dimen name=\"text_size_small\">14.0sp</dimen>
<dimen name=\"text_size_medium\">16.0sp</dimen>

<!-- ActionBar color strip -->
<dimen name=\"colorstrip\">5dp</dimen>

If you want to customize it more than this, you may consider not using the ActionBar at all, but I wouldn\'t recommend that. You may also consider reading through the Android Design Guidelines to get a better idea on how to design your ActionBar.

If you choose to forgo the ActionBar and use your own layout instead, you should be sure to add action-able Toasts when users long press your \"MenuItems\". This can be easily achieved using this Gist.

回答2:

1 You can use a drawable

<menu xmlns:android=\"http://schemas.android.com/apk/res/android\">
    <item android:id=\"@+id/menu_item1\"
        android:icon=\"@drawable/my_item_drawable\"
        android:title=\"@string/menu_item1\"
        android:showAsAction=\"ifRoom\" />
</menu>

2 Create a style for the action bar and use a custom background:

<resources>
    <!-- the theme applied to the application or activity -->
    <style name=\"CustomActivityTheme\" parent=\"@android:style/Theme.Holo\">
        <item name=\"android:actionBarStyle\">@style/MyActionBar</item>
        <!-- other activity and action bar styles here -->
    </style>
    <!-- style for the action bar backgrounds -->
    <style name=\"MyActionBar\" parent=\"@android:style/Widget.Holo.ActionBar\">
        <item name=\"android:background\">@drawable/background</item>
        <item name=\"android:backgroundStacked\">@drawable/background</item>
        <item name=\"android:backgroundSplit\">@drawable/split_background</item>
    </style>
</resources>

3 Style again android:actionBarDivider

The android documentation is very usefull for that.

回答3:

Please write following code in menu.xml file:

<menu xmlns:android=\"http://schemas.android.com/apk/res/android\"
      xmlns:my_menu_tutorial_app=\"http://schemas.android.com/apk/res-auto\"
      xmlns:tools=\"http://schemas.android.com/tools\"
      tools:context=\"com.example.mymenus.menu_app.MainActivity\">
<item android:id=\"@+id/item_one\"
      android:icon=\"@drawable/menu_icon\"
      android:orderInCategory=\"l01\"
      android:title=\"Item One\"
      my_menu_tutorial_app:showAsAction=\"always\">
      <!--sub-menu-->
      <menu>
          <item android:id=\"@+id/sub_one\"
                android:title=\"Sub-menu item one\" />
          <item android:id=\"@+id/sub_two\"
                android:title=\"Sub-menu item two\" />
      </menu>

Also write this java code in activity class file:

public boolean onOptionsItemSelected(MenuItem item)
{
    super.onOptionsItemSelected(item);
    Toast.makeText(this, \"Menus item selected: \" +
        item.getTitle(), Toast.LENGTH_SHORT).show();
    switch (item.getItemId())
    {
        case R.id.sub_one:
            isItemOneSelected = true;
            supportInvalidateOptionsMenu();
            return true;
        case MENU_ITEM + 1:
            isRemoveItem = true;
            supportInvalidateOptionsMenu();
            return true;
        default:
            return false;
    }
}

This is the easiest way to display menus in action bar.