Obramowanie widoku obrazu w systemie Android?

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

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

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

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>

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

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.

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.

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"

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>

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

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

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:

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

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!

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>

Najpierw dodaj żądany kolor tła jako kolor obramowania

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

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