ActionBar – vue personnalisée avec ImageView centrée, éléments d’action sur les côtés

Je suis obligé de centrer un logo personnalisé (en utilisant un ImageView) dans la barre d’action pour l’activité “Accueil”. J’utilise ABS pour ce projet. Ceci est très similaire à une autre question postée sur SO ( logo ActionBar centré et éléments d’action sur les côtés ), mais je ne suis pas sûr que le menu ImageView ou recherche fasse une différence, car je n’obtiens pas les résultats que je cherche pour (une image centrée), ou si je viens de me tromper. Fondamentalement, je définis une icône sur la gauche, insère la vue personnalisée au centre et une icône de recherche sur la droite (OptionsMenu). L’image apparaît un peu à droite de l’icône, mais elle rest centrée. Tout pointeur sur la façon de centrer une ImageView dans la barre d’action serait grandement apprécié.

Home.java:

public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_home); LayoutInflater inflater = (LayoutInflater) getSupportActionBar().getThemedContext() .getSystemService(LAYOUT_INFLATER_SERVICE); final View customActionBarView = inflater.inflate( R.layout.actionbar_custom_view_home, null); /* Show the custom action bar view and hide the normal Home icon and title */ final ActionBar actionBar = getSupportActionBar(); actionBar.setHomeButtonEnabled(true); actionBar.setDisplayHomeAsUpEnabled(false); actionBar.setDisplayShowTitleEnabled(false); actionBar.setIcon(R.drawable.ic_ab_som); actionBar.setCustomView(customActionBarView); actionBar.setDisplayShowCustomEnabled(true); } @Override public boolean onCreateOptionsMenu(Menu menu) { MenuInflater inflater = new MenuInflater(this); inflater.inflate(R.menu.search, menu); return true; } 

res / layout / actionbar_custom_view_home.xml:

     

res / menu / search.xml:

      

Expliqué:

entrer la description de l'image ici

Le conteneur rose, est le véritable espace où vous allez append la vue.

L’astuce consiste à faire des calculs, à centrer la vue (peu importe) sur le milieu.

Dans mon cas, la vue était un TextView. Voici ma méthode complète:

 public void addTextToActionBar( Ssortingng textToSet ) { mActionbar.setDisplayShowCustomEnabled( true ); // Inflate the custom view LayoutInflater inflater = LayoutInflater.from( this ); View header = inflater.inflate( R.layout.actionbar_header, null ); //Here do whatever you need to do with the view (set text if it's a textview or whatever) TextView tv = (TextView) header.findViewById( R.id.program_title ); tv.setText( textToSet ); // Magic happens to center it. int actionBarWidth = DeviceHelper.getDeviceWidth( this ); //Google for this method. Kinda easy. tv.measure( 0, 0 ); int tvSize = tv.getMeasuredWidth(); try { int leftSpace = 0; View homeButton = findViewById( android.R.id.home ); final ViewGroup holder = (ViewGroup) homeButton.getParent(); View firstChild = holder.getChildAt( 0 ); View secondChild = holder.getChildAt( 1 ); leftSpace = firstChild.getWidth()+secondChild.getWidth(); } catch ( Exception ignored ) {} mActionbar.setCustomView( header ); if ( null != header ) { ActionBar.LayoutParams params = (ActionBar.LayoutParams) header.getLayoutParams(); if ( null != params ) { int leftMargin = ( actionBarWidth / 2 - ( leftSpace ) ) - ( tvSize / 2 ) ; params.leftMargin = 0 >= leftMargin ? 0 : leftMargin; } } } 

Disposition:

    

Prendre plaisir.

Si vous voulez imageview dans Center of ActionBar, utilisez:

entrer la description de l'image ici

remplacez simplement getActionBar(); getSupportActionBar(); en dessous du code

 public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); final ActionBar actionBar = getActionBar(); actionBar.setCustomView(R.layout.actionbar_custom_view_home); actionBar.setDisplayShowTitleEnabled(false); actionBar.setDisplayShowCustomEnabled(true); } @Override public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.activity_main, menu); return true; } 

votre actionbar_custom_view_home.xml

     

Masquer l’icône de la barre d’action

entrer la description de l'image ici

 final ActionBar actionBar = getActionBar(); actionBar.setCustomView(R.layout.actionbar_custom_view_home); actionBar.setDisplayShowTitleEnabled(false); actionBar.setDisplayShowCustomEnabled(true); actionBar.setDisplayUseLogoEnabled(false); actionBar.setDisplayShowHomeEnabled(false); 

Note: pour <11 API, utilisez getSupportActionBar () et> 11 API utilisez getActionBar ()


EDITED: 02/03/16 pour Toolbar

    

J’ai rencontré ce problème, voici ma solution:

  ActionBar.LayoutParams layoutParams = new ActionBar.LayoutParams(ActionBar.LayoutParams.MATCH_PARENT, ActionBar.LayoutParams.MATCH_PARENT); layoutParams.gravity = Gravity.CENTER_HORIZONTAL|Gravity.CENTER_HORIZONTAL; actionBar.setCustomView(yourCustomView,layoutParams); 

ImageView dans votre code est centré par rapport à LinearLayout, pas à la barre d’action. Vous pouvez append une marge gauche (android: layout_marginLeft) à la disposition pour ajuster la position de l’image.

Une autre manière de le faire n’est pas d’append une icône et des éléments d’action à la barre d’action, mais d’utiliser une disposition personnalisée avec une icône et des boutons à l’intérieur. Mais dans ce cas, vous devrez gérer vous-même les actions.

La seule chose que j’ai trouvé de travail est de mettre (mettre à droite ou à gauche au besoin, ou les deux):

 android:layout_marginLeft|Right="?attr/actionBarSize" 

que j’ai trouvé ici: http://sourcey.com/android-custom-centered-actionbar-with-material-design/

En retard à la fête, mais au cas où cela aiderait quelqu’un d’autre – utilisez une liste de calques et définissez-la comme arrière-plan. Sinon, le logo sera centré en fonction de l’espace restant et non de la barre d’outils complète, comme le mentionne Reinherd.

Vous pouvez utiliser une liste de calques avec une couleur d’arrière-plan statique et une image avec la gravité définie au centre comme ci-dessous. J’espère que cela aide!

toolbar.axml

   

toolbar_background.xml

           

Je suis confronté au même problème et je suggère la solution suivante:

  1. dans votre res / layout / actionbar_custom_view_home.xml, changez la largeur de la présentation en wrap_content:

     android:layout_width="wrap_content" 
  2. Obtenir la largeur de la barre d’action comme ceci:

     Display display = getWindowManager().getDefaultDisplay(); Point size = new Point(); display.getSize(size); //width of action bar is the same as width of whole screen final int actionBarWidth = size.x; 
  3. Ajoutez layoutListener à votre customActionBarView:

     customActionBarView.addOnLayoutChangeListener( new OnLayoutChangeListener() { @Override public void onGlobalLayout() { float x = customActionBarView.getX(); int logoImageWidth = imageLogo.getWidth(); int logoPosition = actionBarWidth / 2 - logoImageWidth / 2; if (x != logoPosition) { customActionBarView.setX(logoPosition); customActionBarView.requestLayout(); } else { customActionBarView.removeOnLayoutChangeListener(this); } } } );