Obramowanie widoku obrazu w systemie Android?

337

Jak ustawić granicę ImageViewi zmienić jej kolor w Androidzie?

Praveen
źródło
1
Mam odpowiedź na zmianę koloru ImageView, mam nadzieję, że może pomóc.
ruidge

Odpowiedzi:

566

Ustawiłem poniższy xml na tle widoku obrazu jako Drawable. To działa.

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

A następnie dodaj android:background="@drawable/yourXmlFileName"do swojegoImageView

Praveen
źródło
112
A następnie dodaj android:background="@drawable/yourXmlFileName"doImageView
Mithun Sreedharan,
10
Obramowanie działa zarówno po lewej, jak i po prawej stronie, ale dla góry i dołu wypełnia element nadrzędny do góry.
Maurice
3
Och dobrze, tego też chcę. Pamiętaj, aby ustawić wypełnienie dla ImageView.
emeraldhieu
5
@ Maurice Możesz ustawić cropToPadding na true.
MikkoP,
4
nie zapomnij ustawić cropToPadding = "true"
lądowanie
164

Poniżej znajduje się kod, który kiedyś miałem czarną ramką. Zauważ, że nie użyłem dodatkowego pliku xml do obramowania.

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/red_minus_icon"
    android:background="#000000"
    android:padding="1dp"/>
użytkownik609239
źródło
29
tak .. wygląda jak granica. Ale jeśli użyjesz rysowalnego obrazu z przezroczystym tłem, nie będzie on poprawnie wyświetlał obrazu z ramką. pokazuje czarny kolor, gdziekolwiek masz przezroczysty. Twoja odpowiedź nie jest najlepszym podejściem.
Praveen,
19
Tak! ale masz ramkę bez tworzenia kolejnego pliku xml.
user609239,
7
Nie działa to przy zmianie rozmiaru obrazu za pomocą android:scaleType="centerCrop".
Silox
8
jest to złe, ponieważ powoduje niepotrzebne przekroczenie
Jay Soyer,
1
@Silox dla scaleType="centerCrop", pamiętaj również o dodaniucropToPadding="true"
Adam Johns
24

To stary post, który znam, ale pomyślałem, że to może pomóc komuś tam.

Jeśli chcesz zasymulować półprzezroczystą ramkę, która nie zachodzi na „jednolity” kolor kształtu, użyj tego w swoim pliku xml. Zauważ, że w ogóle nie używam tagu „stroke”, ponieważ wydaje się, że zawsze nakłada się na faktycznie narysowany kształt.

  <?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
źródło
Też mi się podoba, ale jeśli sprawisz, że zewnętrzne krawędzie będą zbyt małe, rogi będą puste. Działa dobrze z czymkolwiek 2dp i wyższym.
John Stack
Zaletą tej metody jest to, że pozwala ona na zaokrąglone rogi. Jeśli nie chcesz, aby ramka z poprzedniej odpowiedzi nakładała się, dodaj dopełnienie do znacznika ImageView. Wadą tej metody jest to, że obramowanie będzie krwawić do obszaru obrazu, jeśli zostanie użyte półprzezroczyste tło. Wybrałem więc poprzednią metodę, ponieważ bardziej podoba mi się półprzezroczyste tło niż zaokrąglone rogi.
Leo Landau,
24

ImageView w pliku xml

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

zapisz poniższy kod z nazwą border_image.xmli powinien on znajdować się w folderze do rysowania

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

jeśli chcesz nadać zaokrąglony róg granicy obrazu, możesz zmienić linię w pliku border.xml

<corners android:radius="4dp" />
Ashish Saini
źródło
2
uwaga na ten temat: jeśli obraz jest ustawiany dynamicznie, wówczas należy ponownie ustawić ramkę w kodzie, w przeciwnym razie obraz jest ponad ramką.
Rob85,
4

Utwórz granicę

Utwórz plik xml (np. „Frame_image_view.xml”) z następującą zawartością w folderze do rysowania:

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

Zastąp @dimen/borderThicknessi @color/borderColorcokolwiek chcesz lub dodaj odpowiedni dimen / kolor.

Dodaj Drawable jako tło do ImageView:

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

Musisz użyć android:cropToPadding="true", w przeciwnym razie zdefiniowane wypełnienie nie przyniesie żadnego efektu. Alternatywnie użyj android:padding="@dimen/borderThickness"w ImageView, aby osiągnąć to samo. Jeśli ramka obramia element nadrzędny zamiast ImageView, spróbuj użyć android:adjustViewBounds="true".

Zmień kolor obramowania

Najłatwiejszym sposobem zmiany koloru obramowania w kodzie jest użycie atrybutu tintBackgound.

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

lub

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

Nie zapomnij zdefiniować swojego newColor.

SuperSmartWorld
źródło
3

Dodaj tło do rysowania, takie jak 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>

Zaktualizuj tło ImageView w 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" />
...

Wyklucz dopełnienie ImageView, jeśli chcesz, aby src rysował nad tłem.

Stephen Niedzielski
źródło
3

Zostało to wykorzystane powyżej, ale nie wspomniano wyłącznie.

setCropToPadding(boolean);

Jeśli to prawda , obraz zostanie przycięty w celu dopasowania do wypełnienia.

Spowoduje to, że ImageViewźródło zmieści się w dopełnieniu dodanym do tła.

Za pomocą XML można to zrobić, jak poniżej-

android:cropToPadding="true"
Atul O Holic
źródło
2

musisz utworzyć background.xml w res / drawable tym kodzie

<?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
źródło
2

Dla tych, którzy szukają niestandardowej ramki i kształtu ImageView. Możesz użyć podglądu obrazu w kształcie androida

wizerunek

Po prostu dodaj compile 'com.github.siyamed:android-shape-imageview:0.9.+@aar'do swojego build.gradle.

I użyj w swoim układzie.

<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
źródło
1

Prawie się poddałem.

Jest to mój warunek użycia przesuwania w celu załadowania obrazu, zobacz szczegółowy problem przesuwania tutaj o przekształceniach zaokrąglonego rogu i tutaj

Mam te same atrybuty dla siebie ImageView, bo każdy odpowiada tutaj 1 , tutaj 2 i tutaj 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"

Ale wciąż nie ma sukcesu.

Po dłuższym badaniu, użycie foregroundatrybutów z tej SO odpowiedzi tutaj daje wynikandroid:foreground="@drawable/all_round_border_white"

niestety daje mi to „nie miły” narożnik jak na poniższym obrazku:

wprowadź opis zdjęcia tutaj

mochadwi
źródło
0

O wiele łatwiej mi to zrobić:

1) Edytuj ramkę, aby mieć zawartość w środku (za pomocą narzędzia 9patch).

2) Umieść ImageViewwnętrze a Linearlayouti ustaw żądane tło lub kolor ramki jako tło Linearlayout. Gdy ustawisz ramkę tak, aby zawartość była w sobie, ImageViewbędziesz w jej wnętrzu (dokładnie tam, gdzie ustawiasz zawartość za pomocą narzędzia 9patch).

noloman
źródło
0

Poniżej znajduje się moje najprostsze rozwiązanie tego długiego problemu.

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

W poniższej odpowiedzi wyjaśniłem to wystarczająco dobrze, spójrz na to też!

Mam nadzieję, że będzie to pomocne komuś innemu!

Randika Vishman
źródło
0

W tym samym pliku XML, którego użyłem dalej:

    <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
źródło
0

Najpierw dodaj żądany kolor tła jako kolor obramowania wprowadź opis zdjęcia tutaj

zmień cropToPadding na true, a następnie dodaj dopełnienie.

Następnie będziesz mieć obramowanie dla swojego imageView.

Achintha Isuru
źródło