web-dev-qa-db-fra.com

quelle devrait être la taille de l'image d'en-tête de tiroir?

 public DrawerProfile(Context context) {
        super(context);
        HeaderImageView = new ImageView(context);
        HeaderImageView.setVisibility(VISIBLE);
        HeaderImageView.setScaleType(ImageView.ScaleType.CENTER);
        HeaderImageView.setImageResource(R.mipmap.drawer_background_image);
        addView(HeaderImageView);
}

Je veux ajouter une image dans le tiroir et elle devrait couvrir toute la zone de l'en-tête du tiroir. Je veux savoir quelle devrait être la taille de l'image (résolution); qui conviendra à chaque téléphone avec une variété de résolution d'écran. Comment puis-je réduire la taille de la photo?

Ici, dans cette capture d'écran, l'image d'en-tête ne couvre pas toute la surface du tiroir.

 enter image description here

androidandroid-layoutnavigation-drawerdrawerlayoutimage-size
8
Deepak Malhotra

j'ai récemment créé une application et effectué des recherches approfondies sur presque tous les aspects de la conception de matériaux. J'aimerais donc partager mon expérience ici. Cela pourrait vous aider.

Premier article sur ce merveilleux article, il vous guidera pour configurer Nav Drawer avec toutes les propriétés et vues utilisées.

Image du tiroir doit être ou généralement 16/9 de la largeur de votre tiroir Nav. (HeaderHeight = NavDrawerWidth * 9/16)

J'ai utilisé une image de 576x324 pixels (assez nette et belle image, près de 27 Ko) et je l'ai mise dans drawable-nodpi pour éviter les problèmes de mise à l'échelle automatique et de mémoire.

J'utilise le tiroir de navigation d'une largeur de 304dp (vous le trouverez principalement sur Google Apps, mais ils ont également utilisé 320dp sur certaines applications, comme Play Music, Hangouts, etc.).

Hauteur de l'en-tête: l'image reste probablement la même pour presque tous les appareils, à l'exception des tablettes.

Pour les appareils jusqu’au sw-480dp-xxxhdpi, utilisez la largeur du tiroir 304dp et une hauteur d’en-tête de 170dp.

À partir des périphériques sw-600dp ci-dessus, utilisez la largeur du tiroir 400dp et la hauteur de l'image d'en-tête au moins 225dp.

Ceci est mon tiroir_header.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:layout_width="match_parent"
    Android:layout_height="@dimen/navDrawer_header_height"
    Android:background="@drawable/img_navdrawer_header"
    Android:gravity="bottom"
    Android:orientation="vertical"
    Android:padding="16dp"
    Android:theme="@style/ThemeOverlay.AppCompat.Dark" >    
</LinearLayout>

Et voici comment je l’ai utilisé à l’intérieur de NavigationView

  <Android.support.design.widget.NavigationView
    Android:id="@+id/navigation_view"
    Android:layout_width="@dimen/nav_drawer_width"
    Android:layout_height="match_parent"
    Android:layout_gravity="start"
    app:headerLayout="@layout/drawer_header"
    app:menu="@menu/drawer" />

Il est maintenant temps de définir leurs limites, /res/values/dimens/

<dimen name="nav_drawer_width">304dp</dimen>
<dimen name="navDrawer_header_height">170dp</dimen>

Pour les tablettes: /res/values-sw600dp/, /res/values/sw-720dp

<dimen name="nav_drawer_width">400dp</dimen>
<dimen name="navDrawer_header_height">225dp</dimen>

 enter image description here

J'espère que ça aide quelqu'un.

25
Muhammad Faisal Hyder

La règle empirique pour la hauteur de vue d'en-tête est 

HeaderHeight = NavDrawerWidth * 9/16. 

Donc, fondamentalement, il se situe entre 140 et 169dp. 

0
shekar

Étant donné que HeaderImageView est défini pour correspondre à la largeur et à la hauteur du tiroir, définissez simplement la ScaleType sur FIT_CENTER, puis votre image sera redimensionnée pour remplir le tiroir en entier.

0
Chris Stillwell

Utilisez le code ci-dessous pour charger une image dans une disposition relative ou linéaire dans l'en-tête du tiroir de navigation. 

RelativeLayout imgNavHeaderBg = navHeader.findViewById(R.id.headerRelativelayout);

imgNavHeaderBg.post(new Runnable(){
            public void run(){
                Glide.with("Your Class".this).load("URL").asBitmap().into(new SimpleTarget<Bitmap>(imgNavHeaderBg.getMeasuredWidth(), imgNavHeaderBg.getMeasuredHeight()) {
                    @Override
                    public void onResourceReady(Bitmap resource, GlideAnimation<? super Bitmap> glideAnimation) {
                        Drawable drawable = new BitmapDrawable(getResources(), resource);
                        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
                            imgNavHeaderBg.setBackground(drawable);
                        }
                    }
                });
            }
        });
0
Samuel Adiela - SAMZY