如何在Android中使用自定义button实现自定义操作栏?

我想实现自定义的ActionBar ,它看起来像这样:

在这里输入图像描述

所以问题:

  1. 我如何实现像自定义视图的button:只是一些图像?
  2. 我怎样才能在ActionBar的顶部画一条线?
  3. 我怎样才能实现没有分隔线的button:添加标签上的ActionBar或什么?

在这里输入图像描述

如果您想使用ActionBar API,这与您将得到的结果非常接近。 我不确定你可以在ActionBar上面放置色条,而不用做一些奇怪的Window黑客,这是不值得的麻烦。 只要改变MenuItems ,你可以通过一个风格来使这些更紧密。 这将是这样的,但我没有testing它。

 <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> 

以下是如何膨胀并将自定义布局添加到您的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"); 

这是自定义布局:

 <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> 

这里是彩色条的布局:要使用它,只需在setContentView中的任何布局中使用merge

 <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" /> 

这里是Button样式:

 <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> 

这里是我使用的颜色和尺寸:

 <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> 

如果你想自定义它比这更多,你可以考虑不使用ActionBar ,但我不会build议。 您也可以考虑阅读Androiddevise指南 ,以更好地了解如何devise您的ActionBar.

如果您select放弃ActionBar并使用您自己的布局,则应确保在用户长按“MenuItems”时添加Toasts 。 这可以很容易地实现使用这个Gist 。

1你可以使用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为操作栏创build一个样式并使用自定义背景:

 <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再次风格android:actionBarDivider

Android文档是非常有用的。

请在menu.xml文件中input以下代码:

 <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> 

还要在活动类文件中写下这个java代码:

 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; } } 

这是在操作栏中显示菜单最简单的方法。