web-dev-qa-db-fra.com

Comment puis-je implémenter une barre d'action personnalisée avec des boutons personnalisés dans Android?

Je veux implémenter la coutume ActionBar qui doit ressembler à ceci:

enter image description here

Alors des questions:

  1. Comment puis-je implémenter un bouton comme la vue personnalisée: juste une image?
  2. Comment puis-je tracer une ligne en haut de la ActionBar?
  3. Et comment puis-je implémenter des boutons sans séparateurs: ajoutez des onglets sur le ActionBar ou quoi?
javaandroidandroid-actionbar
60
MainstreamDeveloper00

enter image description here

C’est assez proche de ce que vous obtiendrez si vous voulez utiliser les API ActionBar. Je ne suis pas sûr que vous puissiez placer une bande de couleur au-dessus du ActionBar sans faire quelque chose de bizarre Window en bidouillant, ce n'est pas la peine. En ce qui concerne le changement de MenuItems, vous pouvez les resserrer via un style. Ce serait quelque chose comme ça, mais je ne l'ai pas testé.

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

Voici comment gonfler et ajouter la mise en page personnalisée à votre 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");

Voici la mise en page personnalisée: 

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

Voici la disposition des bandes de couleurs: Pour l'utiliser, utilisez simplement merge dans la disposition que vous gonflez dans 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" />

Voici les styles 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>

Voici les couleurs et les dimensions que j'ai utilisées: 

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

Si vous souhaitez le personnaliser davantage, vous pouvez envisager de ne pas utiliser du tout le ActionBar, mais je ne le recommanderais pas. Vous pouvez également envisager de lire Android Design Guidelines pour avoir une meilleure idée de la façon de concevoir votre ActionBar.

Si vous choisissez de renoncer à ActionBar et d'utiliser votre propre présentation à la place, vous devez vous assurer d'ajouter Toasts que vous pouvez activer lorsque les utilisateurs appuient longuement sur vos "MenuItems". Ceci peut être facilement réalisé en utilisant ce Gist .

146
adneal

1 Vous pouvez utiliser un 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 Créez un style pour la barre d'actions et utilisez un arrière-plan personnalisé:

<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 à nouveau Android: actionBarDivider

Le documentation Android est très utile pour cela.

3
JEY

Veuillez écrire le code suivant dans le fichier 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>

Également écrire ceci Java dans le fichier de classe d'activité:

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

C'est le moyen le plus simple d'afficher les menus dans la barre d'action.

1
Sukesha Kumar