Rahmen für eine Bildansicht in Android?

337

Wie kann ich einen Rahmen für ein festlegen ImageViewund seine Farbe in Android ändern?

Praveen
quelle
1
Ich habe eine Antwort für das Ändern der Farbe eines ImageView, Hoffnung kann helfen.
Ruidge

Antworten:

566

Ich habe die folgende XML-Datei als zeichnbar auf den Hintergrund der Bildansicht gesetzt. Es klappt.

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#FFFFFF" />
    <stroke android:width="1dp" android:color="#000000" />
    <padding android:left="1dp" android:top="1dp" android:right="1dp"
        android:bottom="1dp" />
</shape>

Und dann android:background="@drawable/yourXmlFileName"zu Ihrem hinzufügenImageView

Praveen
quelle
112
Und dann hinzufügen android:background="@drawable/yourXmlFileName"zuImageView
Mithun Sreedharan
10
Der Rand funktioniert sowohl links als auch rechts, aber oben und unten füllt er das übergeordnete Element bis zum oberen Rand.
Maurice
3
Oh gut, das will ich auch. Denken Sie daran, die Auffüllung für Ihre ImageView festzulegen.
Smaragdhieu
5
@Maurice Sie können cropToPadding auf true setzen.
MikkoP
4
nicht vergessen set cropToPadding = "true"
landry
164

Das Folgende ist der Code, den ich verwendet habe, um schwarzen Rand zu haben. Beachten Sie, dass ich keine zusätzliche XML-Datei für den Rahmen verwendet habe.

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/red_minus_icon"
    android:background="#000000"
    android:padding="1dp"/>
user609239
quelle
29
Ja, es sieht aus wie eine Grenze. Wenn Sie jedoch ein zeichnbares Bild mit transparentem Hintergrund verwenden, wird Ihr Bild mit Rand nicht richtig angezeigt. Es zeigt schwarze Farbe, wo immer Sie die transparente haben. Ihre Antwort ist also nicht der beste Ansatz.
Praveen
19
Ja! Sie haben jedoch einen Rahmen, ohne eine weitere XML-Datei zu erstellen.
user609239
7
Dies funktioniert nicht, wenn Sie die Bildgröße mit ändern android:scaleType="centerCrop".
Silox
8
Das ist schlecht, weil es unnötige Überziehung schafft
Jay Soyer
1
@ Silox für scaleType="centerCrop", stellen Sie sicher, auch hinzuzufügencropToPadding="true"
Adam Johns
24

Dies ist ein alter Beitrag, den ich kenne, aber ich dachte, dies könnte möglicherweise jemandem da draußen helfen.

Wenn Sie einen durchscheinenden Rand simulieren möchten, der die "Vollton" -Farbe der Form nicht überlappt, verwenden Sie diesen in Ihrer XML-Datei. Beachten Sie, dass ich das "Strich" -Tag hier überhaupt nicht verwende, da es die tatsächlich gezeichnete Form immer zu überlappen scheint.

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

    <item>
        <shape android:shape="rectangle" >
            <solid android:color="#55111111" />

            <padding
                android:bottom="10dp"
                android:left="10dp"
                android:right="10dp"
                android:top="10dp" />

            <corners android:radius="5dp" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle" >
            <padding
                android:bottom="5dp"
                android:left="5dp"
                android:right="5dp"
                android:top="5dp" />

            <solid android:color="#ff252525" />
        </shape>
    </item>
</layer-list>
mdupls
quelle
Ich mag das auch, aber wenn Sie die Außenkanten zu klein machen, sind die Ecken leer. Es funktioniert gut mit allem, was 2dp und höher ist.
John Stack
Der Vorteil dieser Methode ist, dass abgerundete Ecken möglich sind. Wenn sich der Rand der vorherigen Antwort nicht überlappen soll, fügen Sie dem ImageView-Tag einen Abstand hinzu. Der Nachteil dieser Methode besteht darin, dass der Rand bei Verwendung eines durchscheinenden Hintergrunds in den Bildbereich übergeht. Deshalb wähle ich die vorherige Methode, weil mir der durchscheinende Hintergrund besser gefällt als die abgerundeten Ecken.
Leo Landau
24

ImageView in XML-Datei

<ImageView
            android:id="@+id/myImage"
            android:layout_width="100dp"
            android:layout_height="100dp"

            android:padding="1dp"
            android:scaleType="centerCrop"
            android:cropToPadding="true"
            android:background="@drawable/border_image"

            android:src="@drawable/ic_launcher" />

Speichern Sie den folgenden Code mit dem Namen border_image.xmlund er sollte sich in einem Zeichenordner befinden

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

    <gradient
        android:angle="270"
        android:endColor="#ffffff"
        android:startColor="#ffffff" />

    <corners android:radius="0dp" />

    <stroke
        android:width="0.7dp"
        android:color="#b4b4b4" />
</shape>

Wenn Sie dem Bildrand eine abgerundete Ecke geben möchten, können Sie eine Zeile in der Datei border.xml ändern

<corners android:radius="4dp" />
Ashish Saini
quelle
2
Nur eine Anmerkung dazu: Wenn das Bild dynamisch festgelegt wird, muss der Rand erneut im Code festgelegt werden. Andernfalls befindet sich das Bild über dem Rand.
Rob85
4

Rahmen erstellen

Erstellen Sie eine XML-Datei (z. B. "frame_image_view.xml") mit dem folgenden Inhalt in Ihrem Zeichenordner:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke
        android:width="@dimen/borderThickness"
        android:color="@color/borderColor" />
    <padding
        android:bottom="@dimen/borderThickness"
        android:left="@dimen/borderThickness"
        android:right="@dimen/borderThickness"
        android:top="@dimen/borderThickness" />
    <corners android:radius="1dp" /> <!-- remove line to get sharp corners -->
</shape>

Ersetzen Sie @dimen/borderThicknessund @color/borderColordurch was auch immer Sie wollen oder fügen Sie entsprechendes Maß / Farbe hinzu.

Fügen Sie das Drawable als Hintergrund zu Ihrer ImageView hinzu:

<ImageView
        android:id="@+id/my_image_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/frame_image_view"
        android:cropToPadding="true"
        android:adjustViewBounds="true"
        android:scaleType="fitCenter" />

Sie müssen verwenden android:cropToPadding="true", sonst hat die definierte Polsterung keine Auswirkung. Alternativ können Sie dies auch android:padding="@dimen/borderThickness"in Ihrer ImageView verwenden, um dasselbe zu erreichen. Wenn der Rahmen das übergeordnete Element anstelle Ihrer ImageView umrahmt, versuchen Sie es zu verwenden android:adjustViewBounds="true".

Ändern Sie die Farbe des Rahmens

Der einfachste Weg, Ihre Rahmenfarbe im Code zu ändern, ist das Attribut tintBackgound.

ImageView img = findViewById(R.id.my_image_view);
img.setBackgroundTintList(ColorStateList.valueOf(Color.RED); // changes border color to red

oder

ImageView img = findViewById(R.id.my_image_view);
img.setBackgroundTintList(getColorStateList(R.color.newColor));

Vergessen Sie nicht, Ihre zu definieren newColor.

SuperSmartWorld
quelle
3

Hintergrund hinzufügen Drawable wie res / drawables / background.xml:

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
  <solid android:color="@android:color/white" />
  <stroke android:width="1dp" android:color="@android:color/black" />
</shape>

Aktualisieren Sie den ImageView-Hintergrund in res / layout / foo.xml:

...
<ImageView
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:padding="1dp"
  android:background="@drawable/background"
  android:src="@drawable/bar" />
...

Schließen Sie die ImageView-Auffüllung aus, wenn der Quellcode über den Hintergrund gezeichnet werden soll.

Stephen Niedzielski
quelle
3

Dies wurde oben verwendet, aber nicht ausschließlich erwähnt.

setCropToPadding(boolean);

Wenn dies der Fall ist , wird das Bild so zugeschnitten, dass es in die Polsterung passt.

Dadurch ImageViewpasst die Quelle in die Polsterung, die dem Hintergrund hinzugefügt wurde.

Über XML kann dies wie folgt erfolgen:

android:cropToPadding="true"
Atul O Holic
quelle
2

Sie müssen eine background.xml in res / drawable dieses Codes erstellen

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#FFFFFF" />
<corners android:radius="6dp" />
<stroke
    android:width="6dp"
    android:color="@android:color/white" />
<padding
    android:bottom="6dp"
    android:left="6dp"
    android:right="6dp"
    android:top="6dp" />
</shape>
Cabezas
quelle
2

Für diejenigen, die nach benutzerdefinierten Rahmen und Formen von ImageView suchen. Sie können Android-Shape-Imageview verwenden

Bild

Fügen compile 'com.github.siyamed:android-shape-imageview:0.9.+@aar'Sie einfach zu Ihrembuild.gradle .

Und in Ihrem Layout verwenden.

<com.github.siyamed.shapeimageview.BubbleImageView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:src="@drawable/neo"
    app:siArrowPosition="right"
    app:siSquare="true"/>
Khemraj
quelle
1

Ich hätte das fast aufgegeben.

Dies ist meine Bedingung beim Verwenden von Gleiten zum Laden des Bildes. Siehe ausführliches Gleitproblem hier über Transformationen mit abgerundeten Ecken und hier

Ich habe auch die gleichen Attribute für meine ImageView, für alle antworten hier 1 , hier 2 & hier 3

android:cropToPadding="true"
android:adjustViewBounds="true"
android:scaleType="fitCenter"`
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/path_to_rounded_drawable"

Aber immer noch kein Erfolg.

Nach einer Weile der Recherche ergibt die Verwendung von foregroundAttributen aus dieser SO-Antwort hier ein Ergebnisandroid:foreground="@drawable/all_round_border_white"

Leider gibt es mir die "nicht schöne" Randecke wie unten abgebildet:

Geben Sie hier die Bildbeschreibung ein

Mochadwi
quelle
0

Ich fand es so viel einfacher, dies zu tun:

1) Bearbeiten Sie den Rahmen so, dass der Inhalt darin enthalten ist (mit dem 9patch-Werkzeug).

2) Platzieren Sie das ImageViewInnere a Linearlayoutund legen Sie den gewünschten Rahmenhintergrund oder die gewünschte Farbe als Hintergrund für das Bild fest Linearlayout. Wenn Sie den Frame so einstellen, dass der Inhalt in sich selbst enthalten ist, befindet sich Ihr ImageViewFrame innerhalb des Frames (genau dort, wo Sie den Inhalt mit dem 9patch-Tool festlegen).

Noloman
quelle
0

Das Folgende ist meine einfachste Lösung für dieses langwierige Problem.

<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>

In der folgenden Antwort habe ich es gut genug erklärt, bitte schauen Sie sich das auch an!

Ich hoffe, das wird jemand anderem da draußen helfen!

Randika Vishman
quelle
0

In der gleichen XML, die ich als nächstes verwendet habe:

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#ffffff" <!-- border color -->
        android:padding="3dp"> <!-- border width -->

        <ImageView
            android:layout_width="160dp"
            android:layout_height="120dp"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:scaleType="centerCrop" />
    </RelativeLayout>
porquero
quelle
0

Fügen Sie dann zuerst die gewünschte Hintergrundfarbe als Farbe Ihres Rahmens hinzu Geben Sie hier die Bildbeschreibung ein

Ändern Sie das cropToPadding in true und fügen Sie anschließend das Padding hinzu.

Dann haben Sie Ihren Rand für Ihre imageView.

Achintha Isuru
quelle