アスペクト比を維持するためにImageViewで画像をスケーリングする方法


526

アンドロイドでは、私が定義されたImageViewのをlayout_widthするfill_parent(電話の全幅を占めています)。

配置した画像ImageViewがより大きい場合layout_width、Androidはそれをスケーリングします。しかし、高さはどうですか?Androidが画像を拡大縮小しても、アスペクト比は維持されますか?

私が見つけたのは、ImageViewAndroidがより大きい画像を拡大縮小するときに、の上下に空白があることですImageView。本当?はいの場合、どうすればその空白を削除できますか?

回答:


799
  1. はい、デフォルトでAndroidは縦横比を維持しながらImageViewに合わせて画像を縮小します。ただし、android:src="..."ではなくを使用して画像をImageViewに設定していることを確認してくださいandroid:background="..."src=アスペクト比を維持しながら画像を拡大縮小しますが、ImageViewのサイズに正確に合うようにbackground=拡大縮小て画像を変形させます。(ただし、背景とソースを同時に使用できます。これは、1つのImageViewを使用してメイン画像の周りにフレームを表示する場合などに役立ちます。)

  2. またandroid:adjustViewBounds、ImageView自体がサイズ変更された画像に合わせてサイズ変更されることも確認してください。たとえば、通常は正方形のImageViewに長方形の画像がある場合、adjustViewBounds = trueを指定すると、ImageViewのサイズも長方形に変更されます。これは、ImageViewの周囲に他のビューがどのように配置されるかに影響します。

    その後、Samuhが書いたように、android:scaleTypeパラメータを使用してデフォルトで画像を拡大縮小する方法を変更できます。ちなみに、これがどのように機能するかを発見する最も簡単な方法は、少し自分で実験することでした!Eclipseでのプレビューは通常間違っているため、エミュレーター(または実際の電話)でレイアウトを確認することを忘れないでください。


18
それは同じことで、XMLではなくコードで行われます。setImageBitmap同じであるandroid:src="..."setBackground...であるandroid:background="..."
スティーブ・ヘイリー

4
@SuperUser image.setImageDrawable(...)android:src="..."xmlに含まれています。
PureSpider 2013年

11
「android:adjustViewBounds」は、ここで注目すべき便利なものです。これを追加しないと、ImageViewのborder / bounds / containerが正しくスケーリングしないという問題が発生する可能性が高くなります。
Angry 84

2
src = vs background =が私にとっての違いでした!
Christopher Rathgeb

21
android:adjustViewBounds私のパズルの最後のピースでした、ありがとう!
themarketka 2016年

281

を参照してくださいandroid:adjustViewBounds

ドローアブルのアスペクト比を維持するためにImageViewの境界を調整する場合は、これをtrueに設定します。


6
これは問題の正しい修正です。これは画像ビューにあり、高さにはこの余分な空白がすべて含まれていました。幅にfill_parent、高さにwrap_contentを指定したため、「透明ピクセル」ではありません。adjustViewBounds = trueがない場合は、余分な空白が取得されます。これをtrueに設定すると、問題はなくなりました。ありがとう!
クリストファーコットン2010

3
おかげで、これと背景の代わりにsrcに設定すると完全に機能しました!
Cameron


1
これは問題の完全な修正です。また、サイズについては、親コンテナーを使用してサイズを設定し、ImageViewでmatch_parentを設定します。これは多くのトラブルを解決します。
Nimila Hiranya

ポイントを獲得するための+1。私は当初、それをより「口語的」な言葉で書いており、sofはそれを提出することを禁じていました。羽毛をフリルにするのではなく、PCを使います。
Jacksonkr 2016年

168

この特定の問題を抱えている他の人に。あなたはImageViewそれにfill_parent比例してスケーリングされた幅と高さを持ちたいと思っています:

これらの2つの属性をに追加しますImageView

android:adjustViewBounds="true"
android:scaleType="centerCrop"

ImageView幅をにfill_parent、高さをに設定しwrap_contentます。

また、画像をトリミングしたくない場合は、次のことを試してください。

 android:adjustViewBounds="true"
 android:layout_centerInParent="true"

16
はい、しかしあなたの画像は切り取られます。完璧なソリューションは、幅に合わせて拡大し、アスペクト比を維持し、トリミングしないことです。なぜこれが
そんなにうんざり

1
私のいずれか:(申し訳ありませんが私の解決策は、あなたを助けにはならなかったが、それが助けに私をした場合。
ケビン・パーカー

2
ケビン、あなたが言ったことはまさに私が探していたものでした、画像のサイズが画面のサイズよりも小さい場合は、ズームインして中央に表示され、完璧です。ありがとう。
ソハム2013年

1
+1、「(またはその他View)」を除く。AFAICT他のビューにはadjustViewBoundsscaleType属性はありません。
LarsH

android:scaleType = "centerCrop"の代わりにandroid:scaleType = "centerInside"を使用するのはどうですか?また、画像をトリミングが、幅と高さの両方が未満であるか、ImageViewのの幅と高さを等しくすることを確実にしません:)ここでscaletypesのために良いのビジュアルガイドです:thoughtbot.com/blog/android-imageview-scaletype-a-visual-ガイド
vida

57

ImageView適切なアスペクト比を維持しながら拡大と縮小の両方が必要な場合は、これをXMLに追加します。

android:adjustViewBounds="true"
android:scaleType="fitCenter"

これをコードに追加します。

// We need to adjust the height if the width of the bitmap is
// smaller than the view width, otherwise the image will be boxed.
final double viewWidthToBitmapWidthRatio = (double)image.getWidth() / (double)bitmap.getWidth();
image.getLayoutParams().height = (int) (bitmap.getHeight() * viewWidthToBitmapWidthRatio);

これが機能するまで少し時間がかかりましたが、画像が画面の幅よりも小さく、画面の幅よりも大きい場合、および画像をボックス化しない場合の両方で機能するようです。


1
android:scaleType = "centerCrop"を使用しないのはなぜですか?
ルーカスバトー

ありがとうございます scaleTypeは状況に依存します。たとえば、これが必要でした。
David

これは、ビューのサイズを変更する野蛮な方法です。ビットマップをImageViewに設定した後でビューの境界が変更されるとどうなりますか これが、ImageViewのカスタムサブクラスを作成する場合に実装できるonMeasure()で実行する必要がある理由です。
Aron Lorincz 2014年

1
必要なのはfitCenterとadjustViewBoundsだけで、残りのコードは少なくとも私にとっては不要でした
kingargyle

これは私にとっては機能し、コードを追加する必要はありません。画像の幅がimageViewの幅よりも小さい場合、adjustViewBoundsを使用しないと、拡大されなかったため、高さがネイティブの高さに止まり、幅にいくつかのバンドが表示されました。
Cristi Băluță 2019

15

これは私のために働きました:

android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxWidth="39dip"
android:scaleType="centerCrop"
android:adjustViewBounds ="true"


9

以下のコードは、アスペクト比としてスケール画像を処理します:

Bitmap bitmapImage = BitmapFactory.decodeFile("Your path");
int nh = (int) ( bitmapImage.getHeight() * (512.0 / bitmapImage.getWidth()) );
Bitmap scaled = Bitmap.createScaledBitmap(bitmapImage, 512, nh, true);
your_imageview.setImageBitmap(scaled);

8

ImageView.ScaleTypeを見て、でサイズ変更が行われる方法を制御および理解してくださいImageView。画像のサイズを変更すると(アスペクト比を維持したまま)、画像の高さまたは幅がImageViewの寸法より小さくなる可能性があります。


6

ImageViewでこれらのプロパティを使用して、アスペクト比を維持します。

android:adjustViewBounds="true"
android:scaleType="fitXY"

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:adjustViewBounds="true"
    android:scaleType="fitXY"
    />

この答えだけが私を助けました。ありがとう!
ドミトリー

6

これは、ConstraintLayout内での動作です。

<ImageView
    android:id="@+id/myImg"
    android:layout_width="300dp"
    android:layout_height="300dp"
    android:scaleType="fitCenter"
    android:adjustViewBounds="true"/>

次に、コードで、ドロアブルを次のように設定します。

ImageView imgView = findViewById(R.id.myImg);
imgView.setImageDrawable(ResourcesCompat.getDrawable(getResources(), R.drawable.image_to_show, null));

これは、アスペクト比に応じて画像にうまくフィットし、中央に保ちます。


5

画面よりも小さい画像です。最大に比例して拡大し、ビューの中央に配置するには、次のコードを使用する必要がありました。

<ImageView
    android:id="@+id/my_image"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_centerInParent="true"
    android:adjustViewBounds="true"
    android:layout_weight="1"
    android:scaleType="fitCenter" />

ただし、相対的なレイアウトがあり、いくつかの要素がImageViewの上または下に設定されている場合は、画像と重なる可能性が高いことに注意してください。


4

画質が低下した場合:使用

android:adjustViewBounds="true"

の代わりに

android:adjustViewBounds="true"
android:scaleType="fitXY"

3

画像を適切なスケーリングでトリミングせずに正確に画像ビューに合わせたい場合

imageView.setScaleType(ScaleType.FIT_XY);

ここで、imageViewは、ImageViewを表すビューです。


4
いいえ、これはアスペクト比を変更します。ドキュメントは言う:「XとYを個別に拡大縮小して、srcがdstと正確に一致するようにします。これにより、srcのアスペクト比が変わる可能性があります。」
ローズペローネ2013年

ちなみに、このFIT_XYはimageviewに表示するための画像の幅/高さを変更するために使用することはできません。
ベイ

3

画面幅を計算できます。また、ビットマップを拡大縮小できます。

 public static float getScreenWidth(Activity activity) {
        Display display = activity.getWindowManager().getDefaultDisplay();
        DisplayMetrics outMetrics = new DisplayMetrics();
        display.getMetrics(outMetrics);
        float pxWidth = outMetrics.widthPixels;
        return pxWidth;
    }

画面幅と画面幅によってスケーリングされた画像の高さを計算します。

float screenWidth=getScreenWidth(act)
  float newHeight = screenWidth;
  if (bitmap.getWidth() != 0 && bitmap.getHeight() != 0) {
     newHeight = (screenWidth * bitmap.getHeight()) / bitmap.getWidth();
  }

ビットマップを拡大縮小した後。

Bitmap scaledBitmap=Bitmap.createScaledBitmap(bitmap, (int) screenWidth, (int) newHeight, true);

3

これをプログラムで行う場合は、正しい順序でセッターを呼び出すようにしてください。

imageView.setAdjustViewBounds(true)
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP)

2

画像が可能な最大のスペースを占めるようにしたい場合、最良のオプションは

android:layout_weight="1"
android:scaleType="fitCenter"

2

あなたはJavaコードを必要としません。あなたはただ:

<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:scaleType="centerCrop" />

キーは、幅と高さの一致する親にあります


1

android:layout_gravityImageViewに使用してみてください。

android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_gravity="center_vertical|center_horizontal"
android:layout_weight="1"

上記の例は私のために働いた。


1
android:layout_weight = "1"が重要です。
nima 2014年

1

アスペクト比を維持しながら、コンテナのサイズに合わせてビットマップをスケーリングするアルゴリズムがあります。ここで私の解決策を見つけてください

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


0

私はこれを使います:

<ImageView
android:id="@+id/logo"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_centerInParent="true"
android:scaleType="centerInside"
android:src="@drawable/logo" />

0

cardview丸めに使用してヘッダーimageviewを修正した場合、android:layout_heightこれは私が画像をロードするのに役立ちましたGlide

    <?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
             xmlns:tools="http://schemas.android.com/tools"
             android:layout_width="match_parent"
             android:layout_height="220dp"
             xmlns:card_view="http://schemas.android.com/apk/res-auto"
             >

    <android.support.v7.widget.CardView
            android:id="@+id/card_view"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center|top"
            card_view:cardBackgroundColor="@color/colorPrimary"
            card_view:cardCornerRadius="10dp"
            card_view:cardElevation="10dp"
            card_view:cardPreventCornerOverlap="false"
            card_view:cardUseCompatPadding="true">

        <ImageView
                android:adjustViewBounds="true"
                android:maxHeight="220dp"
                android:id="@+id/iv_full"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:scaleType="fitCenter"/>

    </android.support.v7.widget.CardView>
</FrameLayout>

0

画像のサイズを縮小する画像を拡大縮小できます。ダウンロードして使用できるライブラリがあります。 https://github.com/niraj124124/Images-Files-scale-and-compress.git

使用方法1)compressor-v1.0をインポートします。プロジェクトにjarします。2)以下のサンプルコードを追加してテストします。ResizeLimiter resize = ImageResizer.build(); resize.scale( "inputImagePath"、 "outputImagePath"、imageWidth、imageHeight); あなたの要件に応じてより多くの方法があります


0

ImageViewを渡し、画面の高さと幅に基づいて作成できます

    public void setScaleImage(EventAssetValueListenerView view){
        // Get the ImageView and its bitmap
        Drawable drawing = view.getDrawable();
        Bitmap bitmap = ((BitmapDrawable)drawing).getBitmap();
        // Get current dimensions
        int width = bitmap.getWidth();
        int height = bitmap.getHeight();

        float xScale = ((float) 4) / width;
        float yScale = ((float) 4) / height;
        float scale = (xScale <= yScale) ? xScale : yScale;

        Matrix matrix = new Matrix();
        matrix.postScale(scale, scale);

        Bitmap scaledBitmap = Bitmap.createBitmap(bitmap, 0, 0, width, height, matrix, true);
        BitmapDrawable result = new BitmapDrawable(scaledBitmap);
        width = scaledBitmap.getWidth();
        height = scaledBitmap.getHeight();

        view.setImageDrawable(result);

        LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) view.getLayoutParams();
        params.width = width;
        params.height = height;
        view.setLayoutParams(params);
    }


0

素早い回答:

<ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="center"
        android:src="@drawable/yourImage"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.