wake-up-neo.com

Android - Legen Sie einen Rahmen um eine ImageView fest

Ich habe eine Zelle mit fester Breite und Höhe, sei 100x100px. In dieser Zelle möchte ich ein ImageView mit einem Rahmen anzeigen.
Meine erste Idee war es, eine Hintergrundressource für ImageView zu verwenden und eine Auffüllung von 1dp hinzuzufügen, um den Randeffekt zu erzeugen:

<LinearLayout
        Android:layout_width="100dp"
        Android:layout_height="100dp" >

    <ImageView
        Android:id="@+id/imageView"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:background="@drawable/image_border"
        Android:padding="1dp"
        Android:src="@drawable/test_image" />

</LinearLayout>

Anscheinend sollte dies funktionieren, aber nicht oder nicht wie erwartet.
Das Problem ist, dass der ImageView-Hintergrund den gesamten Bereich der 100x100px-Zelle ausfüllt. Wenn also die Bildbreite weniger als 100px beträgt, wird der obere und untere Rand größer angezeigt.

Beachten Sie die gelbe Umrandung, ich brauche es genau um die Bildansicht herum: 

enter image description here

Jede Hilfe, Idee, Anregung jeglicher Art wird sehr geschätzt.

27
Andy Res

Wenn Sie die Auffüllung = 1 und die Hintergrundfarbe in das LinearLayout setzen, haben Sie einen gelben Rand von 1 Pixel.

45
Christine

Hier ist was für mich gearbeitet hat ...

<!-- @drawable/image_border -->
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android">
  <solid Android:color="@color/colorPrimary"/>
  <stroke Android:width="1dp" Android:color="#000000"/>
  <padding Android:left="1dp" Android:top="1dp" Android:right="1dp" Android:bottom="1dp"/>
</shape>

<ImageView
  Android:layout_width="300dp"
  Android:layout_height="300dp"
  Android:layout_gravity="center"
  Android:padding="1dp"
  Android:cropToPadding="true"
  Android:scaleType="centerCrop"
  Android:background="@drawable/image_border"/>

Hier erhalte ich das Ergebnis, das ich mit einem Viewpager und einem Imageview mit einem Rand bekomme.

Example imageview with border 1dp black.

25
Ray Hunter

Wenn die Größe der Bilder unterschiedlich ist, erhalten Sie immer diesen Effekt. Ich denke, Sie müssen eine feste Größe für ImageView festlegen und ihr eine festgelegte Hintergrundfarbe geben - Schwarz würde aus Ihrem Beispiel Sinn machen. Wickeln Sie die Bildansicht in ein FrameLayout oder nur in eine Ansicht mit gelbem Hintergrund und 1 Pixel Auffüllung ein.

BEARBEITEN


Ich hatte darüber nachgedacht und meine Antwort fühlte sich nicht richtig an, also ...

Wenn Sie für jedes ImageView eine feste Größe, einen Abstand und einen Abstand festlegen. und stellen Sie dann die Hintergrundfarbe wie gewünscht ein. Sie können den gewünschten Effekt erzielen.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:tools="http://schemas.Android.com/tools"
    Android:layout_width="wrap_content"
    Android:layout_height="fill_parent" >


        <ImageView
            Android:id="@+id/imageView1"
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:layout_gravity="center"
            Android:background="#52D017"
            Android:padding="1dp"
            Android:layout_margin="5dp"
            Android:src="@drawable/test1"
            tools:ignore="ContentDescription" />

        <ImageView
            Android:id="@+id/imageView2"
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            Android:layout_gravity="center"
            Android:layout_margin="5dp"
            Android:background="#52D017"
            Android:padding="1dp"
            Android:src="@drawable/test2"
            tools:ignore="ContentDescription" />

</LinearLayout>

Im Screenshot sind beide Bilder weniger als 100 Pixel breit und in unterschiedlichen Höhen.

example

Dies behandelt keine Bilder mit transparentem Hintergrund, da dann (in diesem Fall) die gelbgrüne Farbe durchscheint. Sie können dies lösen, indem Sie jede ImageView in ein FrameLayout einbetten. Den ImageView-Hintergrund schwarz machen und das FrameLayout mit der erforderlichen Auffüllung auf WrapContent setzen (denke ich)

9
Paul D'Ambra

sie können die benutzerdefinierte Bildansicht verwenden, von der Sie den Rand abrufen können. Hier ist der Code. Sie können auch die Breite der Polsterung und die Strichbreite nach Ihren Wünschen ändern. Es ist genau unter der ersten Codezeile angegeben, vielen Dank

public class FreeCollage extends ImageView {

    private static final int PADDING = 8;
    private static final float STROKE_WIDTH = 5.0f;

    private Paint mBorderPaint;

    public FreeCollage(Context context) {
        this(context, null);
    }

    public FreeCollage(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
        setPadding(PADDING, PADDING, PADDING, PADDING);
    }

    public FreeCollage(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        initBorderPaint();
    }

    private void initBorderPaint() {
        mBorderPaint = new Paint();
        mBorderPaint.setAntiAlias(true);
        mBorderPaint.setStyle(Paint.Style.STROKE);
        mBorderPaint.setColor(Color.WHITE);
        mBorderPaint.setStrokeWidth(STROKE_WIDTH);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawRect(PADDING, PADDING, getWidth() - PADDING, getHeight() - PADDING, mBorderPaint);
    }
}
4

Fügen Sie einfach die Eigenschaft adjustViewBounds zur ImageView hinzu.

<ImageView
        Android:id="@+id/imageView"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:background="@drawable/image_border"
        Android:padding="1dp"
        Android:adjustViewBounds="true"
        Android:src="@drawable/test_image" />

Bitte beachten Sie, dass Android:adjustViewBounds="true" nur funktioniert, wenn Android:layout_width und Android:layout_height auf "wrap_content" gesetzt sind. 

3
rricarrdo

Das hat bei mir funktioniert:

    <ImageView
        Android:id="@+id/dialpad_phone_country_flag"
        Android:layout_width="22dp"
        Android:layout_height="15dp"
        Android:scaleType="fitXY"
        Android:background="@color/gen_black"
        Android:padding="1px"/>
3

fügen Sie einfach die folgende Linie in Ihr ImageView-Layout ein

wenn layout_width und layout_height von imageview nicht match_parent als use ist,

Android:adjustViewBounds = "true"

oder

Android:adjustViewBounds = "true"
Android:scaleType="fitXY"

oder 

Android:adjustViewBounds = "true"
Android:scaleType="centerCrop"
1

Sie müssen Scaletyle in Ihrer Bildansicht hinzufügen. Danach wäre dein Bild passend.

Android: scaleType = "fitXY"

0
Shubham

Im Folgenden finden Sie das Code-Snippet, das ich in meiner einfachsten Lösung verwendet habe.

<FrameLayout
    Android:layout_width="112dp"
    Android:layout_height="112dp"
    Android:layout_marginLeft="16dp" <!-- May vary according to your needs -->
    Android:layout_marginRight="16dp" <!-- May vary according to your needs -->
    Android:layout_centerVertical="true">
    <!-- following imageView acts as the boarder which sitting in the background of our main container ImageView -->
    <ImageView
        Android:layout_width="112dp"
        Android:layout_height="112dp"
        Android:background="#000"/>
    <!-- following imageView holds the image as the container to our image -->
    <!-- layout_margin defines the width of our boarder, here it's 1dp -->
    <ImageView
        Android:layout_width="110dp"
        Android:layout_height="110dp"
        Android:layout_margin="1dp"
        Android:id="@+id/itemImageThumbnailImgVw"
        Android:src="@drawable/banana"
        Android:background="#FFF"/>
</FrameLayout>

Wenn Sie weitere Erklärungen wünschen, schauen Sie sich bitte den folgenden Link an wo ich es gut genug erklärt habe.

Hoffe, das kann für jeden da draußen hilfreich sein!

Prost!

0
Randika Vishman