web-dev-qa-db-fra.com

Comment créer une barre d'outils avec un bouton personnalisé à gauche?

Je suis nouveau dans le développement Android et j'ai de gros problèmes avec la création d'une barre d'outils personnalisée. Mes exigences:

  1. Bouton personnalisé à gauche (icône + texte)
  2. Diviseur après le bouton personnalisé
  3. La hauteur des boutons doit être identique à celle de la barre d’outils (pas de marges)

Voici un exemple d'image qui explique mes besoins:  enter image description here

J'essayais d'utiliser actionBar.setCustomView(v); mais cela n'a pas résolu mes problèmes:

  1. Les boutons de droite ont une marge supérieure/inférieure - ils sont plus petits que la barre d'outils
  2. Je n'ai pas pu ajouter le diviseur.
  3. Le bouton gauche (dans la vue personnalisée) était plus petit que la hauteur de la barre d’outils.

Mes questions:

  1. Ai-je vraiment besoin d'une vue personnalisée pour ajouter un bouton personnalisé à gauche?
  2. Comment ajouter un séparateur à gauche?
  3. Comment faire pour que les boutons aient la même hauteur que la barre d’outils?
androidappcompatandroid-toolbarappcompat-v7-r23
11
fedor.belov

La Toolbar est fondamentalement une FrameLayout, vous pouvez donc ajouter ce que vous voulez dans la balise layout Dans votre cas, quelque chose comme ceci semble suffisant:

layout.xml

<Android.support.v7.widget.Toolbar
    Android:id="@+id/toolbar"
    Android:layout_width="match_parent"
    Android:layout_height="?actionBarSize"
    Android:background="?colorPrimary"
    app:contentInsetLeft="0dp"
    app:contentInsetStart="0dp"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

    <LinearLayout
        Android:layout_width="wrap_content"
        Android:layout_height="?attr/actionBarSize"
        Android:divider="@drawable/divider"
        Android:dividerPadding="8dp"
        Android:orientation="horizontal"
        Android:showDividers="end">

        <TextView
            Android:id="@+id/toolbar_save"
            style="@style/TextAppearance.Widget.AppCompat.Toolbar.Subtitle"
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            Android:background="?attr/selectableItemBackground"
            Android:drawableLeft="@drawable/ic_action_check"
            Android:drawablePadding="8dp"
            Android:gravity="center_vertical"
            Android:paddingLeft="16dp"
            Android:paddingRight="16dp"
            Android:text="Save"
            Android:textAllCaps="true" />

    </LinearLayout>
</Android.support.v7.widget.Toolbar>

divider.xml

Ajoutez ceci à votre dossier /res/drawable. Ceci est utilisé comme diviseur LinearLayout dans le code ci-dessus.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:shape="rectangle">

    <size Android:width="1dp" />

    <solid Android:color="@Android:color/white" />

</shape>

Code

private void setupToolbar() {
    Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(mToolbar);
    // Hide the title
    getSupportActionBar().setTitle(null);
    // Set onClickListener to customView
    TextView tvSave = (TextView) findViewById(R.id.toolbar_save);
    tvSave.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            // TODO
        }
    });
}

En termes d'éléments à droite: utilisez simplement la méthode onCreateOptionsMenu par défaut et gonflez la ressource R.menu.* correspondante.

Résultat

 result image

29
reVerse
 <Android.support.v7.widget.Toolbar
        Android:layout_width="match_parent"
        Android:layout_height="?actionBarSize"
        app:contentInsetLeft="0dp"
        app:contentInsetStart="0dp"
        app:contentInsetStartWithNavigation="0dp"
      />

Vous avez également besoin de app: contentInsetStartWithNavigation = "0dp" to Toolbar

0
jerboy