webentwicklung-frage-antwort-db.com.de

welche Größe sollte das Zeichnungskopfbild haben?

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

Ich möchte ein Bild in die Schublade einfügen und es sollte den gesamten Bereich der Kopfzeile der Schublade abdecken. Ich möchte wissen, wie groß das Bild sein soll (Auflösung); was für jedes Telefon mit verschiedenen Bildschirmauflösungen geeignet ist. Wie kann ich die Größe des Fotos minimieren?

In diesem Screenshot umfasst das Kopfzeilenbild nicht den gesamten Bereich der Schublade

 enter image description here

8
Deepak Malhotra

ich habe kürzlich eine App erstellt und gründlich zu fast allen Aspekten des Materialdesigns recherchiert. Ich möchte meine Erfahrungen hier teilen und könnte Ihnen dabei helfen.

1. Gehen Sie durch this wunderbarer Artikel. Er wird Sie bei der Einrichtung der Nav-Schublade mit allen Eigenschaften und Ansichten unterstützen.

Das Schubladenbild sollte 16/9 der Breite Ihres Nav-Schubladen betragen. (HeaderHeight = NavDrawerWidth * 9/16)

Ich habe ein Bild mit 576x324 Pixeln (ziemlich sauber und schönes Bild, fast 27 KB) verwendet und in drawable-nodpi eingefügt, um Probleme mit der automatischen Skalierung und des Speichers zu vermeiden.

Ich verwende die nav-Schublade mit einer Breite von 304dp (meistens findet man sie bei Google-Apps, aber sie hat auch 320dp für einige Apps verwendet, wie z. B. Play Music, Hangouts usw.).

Die Höhe von HeaderImage bleibt wahrscheinlich für fast alle Geräte außer Tablets gleich.

Für Geräte bis sw-480dp-xxxhdpi verwenden Sie die Schubladenbreite 304dp und die Kopfhöhe von 170dp.

Verwenden Sie von den oben angegebenen Geräten sw-600dp mindestens die Breite der Schublade 400 dp und die Höhe des Header-Bildes 225dp.

Dies ist mein drawer_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>

Und so habe ich es in NavigationView verwendet

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

Nun ist es Zeit, ihre Grenzen zu setzen, /res/values/dimens/

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

Für Tablets: /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

Hoffe das hilft jemandem.

25

Die Faustregel für die Kopfhöhe ist 

HeaderHeight = NavDrawerWidth * 9/16

Im Grunde sind es zwischen 140 und 169 dB. 

0
shekar

Wenn HeaderImageView so eingestellt ist, dass sie der Breite und Höhe der Schublade entspricht, setzen Sie einfach die ScaleType auf FIT_CENTER. Dann skaliert Ihr Bild so, dass es die gesamte Schublade ausfüllt.

0
Chris Stillwell

Verwenden Sie den folgenden Code, um ein Bild in ein relatives oder lineares Layout in der Kopfzeile der Navigations-Schublade zu laden 

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