Android: Drawable oder Hintergrundbild skalieren?

In einem Layout möchte ich das Hintergrundbild (unter Beibehaltung des Seitenverhältnisses) auf den Platz skalieren, der beim Erstellen der Seite zugewiesen wurde. Hat jemand eine Idee, wie das geht?

Ich verwende layout.setBackgroundDrawable()und ein BitmapDrawable()zum Einstellen gravityzum Ausschneiden und Füllen, sehe aber keine Option zum Skalieren.

Um die Skalierung von Hintergrundbildern anzupassen, erstellen Sie eine Ressource wie folgt:

<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
    android:gravity="center"
    android:src="@drawable/list_bkgnd" />

Dann wird es in der Ansicht zentriert, wenn es als Hintergrund verwendet wird. Es gibt auch andere Flags: http://developer.android.com/guide/topics/resources/drawable-resource.html

Ich habe nicht versucht, genau das zu tun, was Sie wollen, aber Sie können eine ImageView mit skalieren android:scaleType="fitXY"
und sie wird so dimensioniert, dass sie in die Größe passt, die Sie der ImageView geben.

Sie können also ein FrameLayout für Ihr Layout erstellen, die ImageView darin platzieren und dann alle anderen Inhalte, die Sie im FrameLayout benötigen, mit einem transparenten Hintergrund versehen.

<FrameLayout  
android:layout_width="fill_parent" android:layout_height="fill_parent">

  <ImageView 
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:src="@drawable/back" android:scaleType="fitXY" />

  <LinearLayout>your views</LinearLayout>
</FrameLayout>

Es gibt eine einfache Möglichkeit, dies vom Drawable aus zu tun:

your_drawable.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item android:drawable="@color/bg_color"/>
    <item>
        <bitmap
            android:gravity="center|bottom|clip_vertical"
            android:src="@drawable/your_image" />
    </item>

</layer-list>

Der einzige Nachteil ist, dass Ihr Bild nicht vollständig angezeigt wird, wenn nicht genügend Speicherplatz vorhanden ist. Es wird jedoch abgeschnitten. Ich konnte keinen Weg finden, dies direkt von einem Zeichenobjekt aus zu tun. Aber von den Tests, die ich gemacht habe, funktioniert es ziemlich gut und es schneidet nicht so viel vom Bild ab. Sie könnten mehr mit den Schwerkraftoptionen spielen.

Ein anderer Weg , wird es sein, nur ein Layout zu erstellen, in dem Sie eine verwenden ImageViewund stellen Sie das scaleTypean fitCenter.

Halten Sie das Bildformat Sie verwenden müssen android:scaleType=fitCenteroder fitStartusw. verwenden fitXYnicht das ursprüngliche Seitenverhältnis des Bildes zu halten!

Beachten Sie, dass dies nur für Bilder mit einem srcAttribut funktioniert , nicht für das Hintergrundbild.

Verwenden Sie das Bild als Hintergrundgröße für das Layout:

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

    <ImageView
        android:id="@+id/imgPlaylistItemBg"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:adjustViewBounds="true"
        android:maxHeight="0dp"
        android:scaleType="fitXY"
        android:src="@drawable/img_dsh" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical" >


    </LinearLayout>

</FrameLayout>

Wenn Sie das Drawable einer ImageView mithilfe der setBackgroundDrawableMethode festlegen , wird das Bild immer skaliert. Parameter wie adjustViewBoundsoder anders ScaleTypeswerden einfach ignoriert. Die einzige Lösung, um das gefundene Seitenverhältnis ImageViewbeizubehalten , besteht darin, die Größe nach dem Laden Ihres Zeichens zu ändern . Hier ist das Code-Snippet, das ich verwendet habe:

// bmp is your Bitmap object
int imgHeight = bmp.getHeight();
int imgWidth = bmp.getWidth();
int containerHeight = imageView.getHeight();
int containerWidth = imageView.getWidth();
boolean ch2cw = containerHeight > containerWidth;
float h2w = (float) imgHeight / (float) imgWidth;
float newContainerHeight, newContainerWidth;

if (h2w > 1) {
    // height is greater than width
    if (ch2cw) {
        newContainerWidth = (float) containerWidth;
        newContainerHeight = newContainerWidth * h2w;
    } else {
        newContainerHeight = (float) containerHeight;
        newContainerWidth = newContainerHeight / h2w;
    }
} else {
    // width is greater than height
    if (ch2cw) {
        newContainerWidth = (float) containerWidth;
        newContainerHeight = newContainerWidth / h2w; 
    } else {
        newContainerWidth = (float) containerHeight;
        newContainerHeight = newContainerWidth * h2w;       
    }
}
Bitmap copy = Bitmap.createScaledBitmap(bmp, (int) newContainerWidth, (int) newContainerHeight, false);
imageView.setBackgroundDrawable(new BitmapDrawable(copy));
LayoutParams params = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
imageView.setLayoutParams(params);
imageView.setMaxHeight((int) newContainerHeight);
imageView.setMaxWidth((int) newContainerWidth);

Im obigen Code-Snippet ist bmp das Bitmap-Objekt, das angezeigt werden soll, und imageView ist dasImageView Objekt

Ein wichtiger Punkt ist die Änderung der Layoutparameter . Dies ist notwendig , da setMaxHeightund setMaxWidthnur einen Unterschied machen , wenn die Breite und Höhe definiert , um den Inhalt zu wickeln, nicht die Eltern zu füllen. Fill Eltern auf der anderen Seite ist die am Anfang gewünschte Einstellung, da sonst containerWidthund containerHeightbeide werden Werte auf 0 Also gleich, in Ihrer Layout - Datei so etwas wie dies werden Sie für Ihre Image haben:

...
<ImageView android:id="@+id/my_image_view"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"/>
...

Dies ist nicht die leistungsstärkste Lösung, aber wie jemand vorgeschlagen hat, können Sie anstelle des Hintergrunds FrameLayout oder RelativeLayout erstellen und ImageView als Pseudohintergrund verwenden - andere Elemente werden einfach darüber positioniert:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="match_parent"
    android:layout_width="match_parent">

    <ImageView
        android:id="@+id/ivBackground"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:scaleType="fitStart"
        android:src="@drawable/menu_icon_exit" />

    <Button
        android:id="@+id/bSomeButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="61dp"
        android:layout_marginTop="122dp"
        android:text="Button" />

</RelativeLayout>

Das Problem mit ImageView besteht darin, dass nur die verfügbaren scaleTypes verfügbar sind: CENTER, CENTER_CROP, CENTER_INSIDE, FIT_CENTER, FIT_END, FIT_START, FIT_XY, MATRIX ( http://etcodehome.blogspot.de/2011/05/android-imageview-scaletype-samples.samples )

und um "das Hintergrundbild zu skalieren (sein Seitenverhältnis beizubehalten)" in einigen Fällen, wenn Sie möchten, dass ein Bild den gesamten Bildschirm ausfüllt (z. B. Hintergrundbild) und das Seitenverhältnis des Bildschirms sich von dem des Bildes unterscheidet, ist der erforderliche Skalentyp freundlich von TOP_CROP, weil:

CENTER_CROP zentriert das skalierte Bild, anstatt die Oberkante an der Oberkante der Bildansicht auszurichten, und FIT_START passt die Bildschirmhöhe an und füllt nicht die Breite. Und wie Benutzer Anke bemerkte, behält FIT_XY das Seitenverhältnis nicht bei.

Gerne hat jemand ImageView erweitert, um TOP_CROP zu unterstützen

public class ImageViewScaleTypeTopCrop extends ImageView {
    public ImageViewScaleTypeTopCrop(Context context) {
        super(context);
        setup();
    }

    public ImageViewScaleTypeTopCrop(Context context, AttributeSet attrs) {
        super(context, attrs);
        setup();
    }

    public ImageViewScaleTypeTopCrop(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        setup();
    }

    private void setup() {
        setScaleType(ScaleType.MATRIX);
    }

    @Override
    protected boolean setFrame(int frameLeft, int frameTop, int frameRight, int frameBottom) {

        float frameWidth = frameRight - frameLeft;
        float frameHeight = frameBottom - frameTop;

        if (getDrawable() != null) {

            Matrix matrix = getImageMatrix();
            float scaleFactor, scaleFactorWidth, scaleFactorHeight;

            scaleFactorWidth = (float) frameWidth / (float) getDrawable().getIntrinsicWidth();
            scaleFactorHeight = (float) frameHeight / (float) getDrawable().getIntrinsicHeight();

            if (scaleFactorHeight > scaleFactorWidth) {
                scaleFactor = scaleFactorHeight;
            } else {
                scaleFactor = scaleFactorWidth;
            }

            matrix.setScale(scaleFactor, scaleFactor, 0, 0);
            setImageMatrix(matrix);
        }

        return super.setFrame(frameLeft, frameTop, frameRight, frameBottom);
    }

}

https://stackoverflow.com/a/14815588/2075875

Jetzt wäre IMHO perfekt, wenn jemand ein benutzerdefiniertes Drawable schreiben würde, das das Bild so skaliert. Dann könnte es als Hintergrundparameter verwendet werden.

Reflog empfiehlt, Drawable vor der Verwendung vorab zu skalieren. Hier ist eine Anleitung, wie es geht: Java (Android): Wie skaliere ich ein Drawable ohne Bitmap? Obwohl dies den Nachteil hat, dass die hochskalierte Drawable / Bitmap mehr RAM benötigt, während die von ImageView verwendete Skalierung im laufenden Betrieb nicht mehr Speicher benötigt. Vorteil könnte eine geringere Prozessorlast sein.

Der folgende Code macht die Bitmap perfekt mit der gleichen Größe der Bildansicht. Holen Sie sich die Höhe und Breite des Bitmap-Bilds und berechnen Sie die neue Höhe und Breite mithilfe der Parameter der Bildansicht. Dadurch erhalten Sie das gewünschte Bild mit dem besten Seitenverhältnis.

int bwidth=bitMap1.getWidth();
int bheight=bitMap1.getHeight();
int swidth=imageView_location.getWidth();
int sheight=imageView_location.getHeight();
new_width=swidth;
new_height = (int) Math.floor((double) bheight *( (double) new_width / (double) bwidth));
Bitmap newbitMap = Bitmap.createScaledBitmap(bitMap1,new_width,new_height, true);
imageView_location.setImageBitmap(newbitMap)

Was Dweebo vorschlug, funktioniert. Aber meiner bescheidenen Meinung nach ist es unnötig. Ein Hintergrund zeichnbar skaliert gut für sich. Die Ansicht sollte eine feste Breite und Höhe haben, wie im folgenden Beispiel:

 < RelativeLayout 
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@android:color/black">

    <LinearLayout
        android:layout_width="500dip"
        android:layout_height="450dip"
        android:layout_centerInParent="true"
        android:background="@drawable/my_drawable"
        android:orientation="vertical"
        android:padding="30dip"
        >
        ...
     </LinearLayout>
 < / RelativeLayout>

Eine Möglichkeit, es zu versuchen, besteht darin, das Bild in das Feld einzufügen drawable-nodpi Ordner und den Hintergrund eines Layouts auf die ID der zeichnbaren Ressource festzulegen.

Dies funktioniert definitiv mit Skalierung, ich habe jedoch nicht mit Skalierung getestet.

Kotlin:

Wenn Sie eine Bitmap in einer Ansicht zeichnen müssen, skaliert auf FIT.

Sie können die richtigen Berechnungen durchführen, um bm die Höhe gleich dem Container festzulegen und die Breite anzupassen, falls das Verhältnis von bm Breite zu Höhe geringer ist als das Verhältnis von Containerbreite zu Höhe oder umgekehrt im umgekehrten Szenario.

Bilder:

// binding.fragPhotoEditDrawCont is the RelativeLayout where is your view
// bm is the Bitmap
val ch = binding.fragPhotoEditDrawCont.height
val cw = binding.fragPhotoEditDrawCont.width
val bh = bm.height
val bw = bm.width
val rc = cw.toFloat() / ch.toFloat()
val rb = bw.toFloat() / bh.toFloat()

if (rb < rc) {
    // Bitmap Width to Height ratio is less than Container ratio
    // Means, bitmap should pin top and bottom, and have some space on sides.
    //              _____          ___
    // container = |_____|   bm = |___| 
    val bmHeight = ch - 4 //4 for container border
    val bmWidth = rb * bmHeight //new width is bm_ratio * bm_height
    binding.fragPhotoEditDraw.layoutParams = RelativeLayout.LayoutParams(bmWidth.toInt(), bmHeight)
}
else {
    val bmWidth = cw - 4 //4 for container border
    val bmHeight = 1f/rb * cw
    binding.fragPhotoEditDraw.layoutParams = RelativeLayout.LayoutParams(bmWidth, bmHeight.toInt())
}

Sie müssen dieses Zeichen vorab skalieren, bevor Sie es als Hintergrund verwenden können

Sie können eine der folgenden Optionen verwenden:

android :vity = "fill_horizontal | clip_vertical"

Oder

android :vity = "fill_vertical | clip_horizontal"