Come posso implementare la barra azioni personalizzata con pulsanti personalizzati in Android?

Question

Voglio realizzare su misura ActionBar che deve assomigliare a questo:

Così domande:

1. Come posso implementare un pulsante mi piace visualizzazione personalizzata: basta qualche immagine?
2. Come posso disegnare una linea in cima allo ActionBar?
3. E come posso implementare i pulsanti senza linee di separazione: aggiungere schede su ActionBar o cosa?

Answer 1

questo è praticamente il più vicino si otterrà se si desidera utilizzare le API ActionBar. Non sono sicuro che tu possa posizionare una striscia di colore sopra lo ActionBar senza fare qualche strano hacking Window, non ne vale la pena. Per quanto riguarda la modifica dello MenuItems, puoi renderlo più stretto tramite uno stile. Sarebbe qualcosa di simile, ma non l'ho provato.

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

Ecco come gonfiare e aggiungere il layout personalizzato al vostro 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"); 

Ecco il layout personalizzato:

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

Ecco il layout di striscia di colore: Per usarlo, basta usare merge in qualsiasi layout che si gonfia 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" /> 

Ecco i Button stili:

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

Qui ci sono i colori e dimensioni che ho usato:

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

Se si desidera personalizzare lo più di questo , potresti considerare di non utilizzare affatto lo ActionBar, ma non lo consigliereiSi può anche prendere in considerazione la lettura attraverso il Android Design Guidelines per avere una migliore idea su come progettare il ActionBar.

Se si sceglie di rinunciare al ActionBar e utilizzare il proprio layout di, invece, si dovrebbe essere sicuri di aggiungere lunga azione in grado Toasts quando gli utenti premi il tuo "MenuItems". Questo può essere facilmente raggiunto using this Gist.

Answer 2

1 È possibile utilizzare un disegnabile

<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 Creare uno stile per la barra delle azioni e utilizzare uno sfondo personalizzato:

<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 Stile nuovo Android: actionBarDivider

Il android documentation è molto utile per questo.

Answer 3

Si prega di scrivere codice riportato di seguito in un file 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> 

scrivere anche questo codice java in file di classe di attività:

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

questo è il modo più semplice per visualizzare i menu a barra delle operazioni.