web-dev-qa-db-ja.com

ドロワーヘッダー画像のサイズ

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

ドロワーに画像を追加したいのですが、ドロワーヘッダーの全領域をカバーする必要があります。画像（解像度）のサイズを教えてください。これは、さまざまな画面解像度を持つすべての電話に適しています。写真のサイズを最小化するにはどうすればよいですか？

このスクリーンショットでは、ヘッダー画像がDrawerの全領域を覆っていません。

enter image description here

androidandroid-layoutnavigation-drawerdrawerlayoutimage-size
10
Deepak Malhotra

私は最近アプリを作成し、ほぼすべてのマテリアルデザインの側面について徹底的な調査を行ったので、ここで私の経験を共有したいと思います。

1つ目は this の素晴らしい記事です。NavDrawerで使用するすべてのプロパティとビューを設定します。

Drawer Imageは、Nav Drawerの幅の16/9にする必要があります。 （HeaderHeight = NavDrawerWidth * 9/16）

私は576x324ピクセルの画像（かなりきれいでナイスな画像、ほぼ27KB）を使用し、自動スケーリングとメモリの問題を回避するために、それをdrawable-nodpi内に配置しました。

私は幅304 dpのnav Drawerを使用しています（ほとんどの場合、Googleアプリで見つかりますが、Playミュージック、ハングアウトなどの一部のアプリでも320 dpを使用しています）。

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>

enter image description here

これが誰かを助けることを願っています。

26
Muhammad Faisal Hyder

ヘッダービューの高さの目安は

HeaderHeight = NavDrawerWidth * 9/16。

つまり、基本的には140〜169 dpです。

別の画面で最良の結果を得るために別のdimenファイルを使用する

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

0
shekar

HeaderImageViewがDrawerの幅と高さに一致するように設定されている場合、ScaleTypeをFIT_CENTERに設定するだけで、画像がDrawer全体に拡大されます。

0
Chris Stillwell

以下のコードを使用して、画像をナビゲーションドロワーヘッダーの相対レイアウトまたは線形レイアウトに読み込みます

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