抽屉标题图像的大小应该是多少？答案

【问题标题】：what should be the size of Drawer Header Image?抽屉标题图像的大小应该是多少？
【发布时间】：2016-12-19 20:32:47
【问题描述】：

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

我想在抽屉中添加一张图片，它应该覆盖抽屉标题的整个区域。我想知道图像（分辨率）的大小应该是多少；这将适用于具有各种屏幕分辨率的每部手机。如何最小化照片的尺寸？

在这个截图中，标题图像没有覆盖整个抽屉区域

【问题讨论】：

标签： android android-layout navigation-drawer drawerlayout image-size

【解决方案1】：

我最近做了一个应用程序，并且对几乎所有材料设计方面都进行了深入研究，所以我想在这里分享我的经验，它可能会对你有所帮助。

第一次浏览this的精彩文章，它将指导您设置导航抽屉，并使用它使用的每个属性和视图。

抽屉图像应该或通常是导航抽屉宽度的 16/9。 (HeaderHeight = NavDrawerWidth * 9/16)

我使用了一张 576x324 像素的图片（非常干净漂亮的图片，将近 27KB）并将其放入 drawable-nodpi 中以避免自动缩放和内存问题。

我使用宽度为 304dp 的导航抽屉（大多数情况下，您会在 google 应用上找到它，但他们也在某些应用上使用 320dp，例如 Play Music、Hangouts 等）。

几乎所有设备（平板电脑除外）的 HeaderImage 高度可能保持不变。

对于直到sw-480dp-xxxhdpi 的设备，使用抽屉宽度 304dp 和标题高度 170dp。

从上面的设备sw-600dp，至少使用抽屉宽度400dp和标题图像高度225dp。

这是我的 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>

这就是我在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" />

现在是时候设定他们的界限了，/res/values/dimens/

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

对于平板电脑：/res/values-sw600dp/、/res/values/sw-720dp

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

希望这对某人有所帮助。

【讨论】：

在我的项目中，我没有使用 xml。我怎样才能在java中做同样的事情？
这里不知道 HeaderViewImage 类的机制是什么，如果这个类支持 HeaderViewImage.setBounds(0,0, width in px, height in px) 这里放值相应地。
这很好，但是将您的值与 gmail/inbox/其他 google 应用程序进行比较，您会发现它们的抽屉宽度不是 304dp。用我的 nexus 5x 测试
感谢您的信息！你知道如何删除标题图像和第一个菜单项之间的空白吗？就像你图片中显示的那样。

【解决方案2】：

鉴于HeaderImageView 设置为与抽屉的宽度和高度匹配，只需将ScaleType 设置为FIT_CENTER，您的图像就会缩放以填满整个抽屉。

【讨论】：

它可以工作，但图像仍然没有覆盖整个区域。图片尺寸应该是多少？

【解决方案3】：

使用下面的代码将图像加载到导航抽屉标题中的相对或线性布局中

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

【讨论】：

【解决方案4】：

标题视图高度的经验法则是

HeaderHeight = NavDrawerWidth * 9/16。

所以基本上它在 140 到 169dp 之间。

在不同的屏幕上使用不同的尺寸文件以获得最佳效果

hdpi - 高度 = 170dp xhdpi - 高度 = 180dp

【讨论】：