2013-03-20 163 views
54

我要實現自定義ActionBar必須是這樣的:如何在Android中使用自定義按鈕實現自定義操作欄?

enter image description here

所以問題:

  1. 我怎樣才能實現,如自定義視圖按鈕:只是一些形象?
  2. 如何在ActionBar的頂部繪製一條線?
  3. 我該如何實現沒有分隔線的按鈕:在ActionBar上添加標籤或什麼?
+1

檢查這個圖書館有很多例子可用:http://actionbarsherlock.com/ – 2013-03-20 09:11:37

回答

142

enter image description here

這是非常接近,如果你想使用ActionBar的API,你會得到。我不確定你可以在ActionBar之上放置色標而不用做一些奇怪的Window黑客攻擊,這是不值得的。至於改變MenuItems去,你可以通過一種風格使這些更緊。這將是這樣的,但我沒有測試它。

<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,但我不會推薦。您也可以考慮通過Android Design Guidelines閱讀中獲得。如果您選擇放棄ActionBar,並使用自己的佈局,而不是如何設計ActionBar.

一個更好的主意,你應該是一定要加的動作,能夠Toasts當用戶長按下你的「MenuItems」。這可以很容易地實現using this Gist

+1

謝謝男人!很好的答案 – MainstreamDeveloper00 2013-03-20 13:05:07

+1

+1偉大的東西。 – meh 2013-05-27 07:45:24

+1

+1很好的答案!您可能還想查看[官方ActionBar開發者指南](http://developer.android.com/guide/topics/ui/actionbar.html),其中提供了許多建議 – Michael 2013-08-22 11:27:26

3

1,您可以使用繪製

<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操作欄創建樣式和使用自定義背景:

<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風格再次安卓actionBarDivider

android documentation對此非常有用。

1

請寫在menu.xml文件文件下面的代碼:

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

這是顯示在操作欄菜單中的最簡單的方法。

+2

請將代碼作爲文本發佈,而不是圖像。 – laalto 2016-10-27 08:52:30

+0

好的,謝謝.. :-) – 2017-07-12 17:07:57