Đường viền cho chế độ xem Hình ảnh trong Android?

Làm cách nào tôi có thể đặt đường viền cho một ImageViewvà thay đổi màu của nó trong Android?

Tôi đặt xml bên dưới thành nền của Chế độ xem hình ảnh dưới dạng có thể vẽ được. Nó hoạt động.

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

Và sau đó thêm android:background="@drawable/yourXmlFileName"vào của bạnImageView

Sau đây là mã mà tôi từng có viền đen. Lưu ý rằng tôi đã không sử dụng thêm tệp xml cho đường viền.

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/red_minus_icon"
    android:background="#000000"
    android:padding="1dp"/>

Đây là một bài viết cũ tôi biết, nhưng tôi nghĩ rằng điều này có thể giúp đỡ ai đó ngoài kia.

Nếu bạn muốn mô phỏng đường viền mờ không trùng màu "rắn" của hình dạng, thì hãy sử dụng đường viền này trong xml của bạn. Lưu ý rằng tôi hoàn toàn không sử dụng thẻ "đột quỵ" vì nó dường như luôn trùng với hình dạng được vẽ thực 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 trong tập tin 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" />

lưu mã bên dưới với tên của border_image.xmlnó và nó sẽ nằm trong thư mục drawable

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

nếu bạn muốn cung cấp góc tròn cho đường viền của hình ảnh thì bạn có thể thay đổi một dòng trong tệp Border.xml

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

Tạo viền

Tạo một tệp xml (ví dụ: "frame_image_view.xml") với nội dung sau trong thư mục có thể vẽ của bạn:

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

Thay thế @dimen/borderThicknessvà@color/borderColor với bất cứ điều gì bạn muốn hoặc thêm mờ / màu tương ứng.

Thêm Drawable làm nền cho ImageView của bạn:

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

Bạn phải sử dụng android:cropToPadding="true", nếu không thì phần đệm được xác định không có hiệu lực. Hoặc sử dụng android:padding="@dimen/borderThickness"trong ImageView của bạn để đạt được điều tương tự. Nếu đường viền đóng khung cha mẹ thay vì ImageView của bạn, hãy thử sử dụngandroid:adjustViewBounds="true" .

Thay đổi màu của viền

Cách dễ nhất để thay đổi màu đường viền của bạn trong mã là sử dụng thuộc tính tintBackgound.

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

hoặc là

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

Đừng quên xác định của bạn newColor.

Thêm một nền Drawable như 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>

Cập nhật nền ImageView trong 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" />
...

Loại trừ phần đệm ImageView nếu bạn muốn src vẽ trên nền.

Điều này đã được sử dụng ở trên nhưng không được đề cập riêng.

setCropToPadding(boolean);

Nếu đúng , hình ảnh sẽ được cắt để phù hợp với phần đệm của nó.

Điều này sẽ làm cho ImageView nguồn phù hợp với phần đệm được thêm vào nền của nó.

Thông qua XML, nó có thể được thực hiện như dưới đây-

android:cropToPadding="true"

bạn phải tạo một tệp nền trong tệp res / drawable mã này

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

Đối với những người đang tìm kiếm đường viền và hình dạng tùy chỉnh của ImageView. Bạn có thể sử dụng android-shape-fantasyeview

Chỉ cần thêm compile 'com.github.siyamed:android-shape-imageview:0.9.+@aar'vào của bạnbuild.gradle .

Và sử dụng trong bố trí của bạn.

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

Tôi gần như đã từ bỏ về điều này.

Đây là điều kiện của tôi khi sử dụng glide để tải hình ảnh, xem vấn đề trượt chi tiết ở đây về các phép biến đổi góc tròn và tại đây

Tôi cũng có các thuộc tính tương tự cho tôi ImageView, cho mọi người trả lời ở đây 1 , ở đây 2 & ở đây 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"

Nhưng vẫn không thành công.

Sau khi nghiên cứu một lúc, sử dụng một foregroundthuộc tính từ câu trả lời SO này tại đây sẽ cho kết quảandroid:foreground="@drawable/all_round_border_white"

Thật không may, nó cho tôi góc biên giới "không đẹp" như hình ảnh dưới đây:

Tôi thấy nó dễ dàng hơn nhiều để làm điều này:

1) Chỉnh sửa khung để có nội dung bên trong (với công cụ 9patch).

2) Đặt ImageViewbên trong a Linearlayoutvà đặt nền khung hoặc màu bạn muốn làm nền của Linearlayout. Khi bạn đặt khung để có nội dung bên trong chính nó, bạn ImageViewsẽ ở trong khung (ngay tại nơi bạn đặt nội dung bằng công cụ 9patch).

Sau đây là giải pháp đơn giản nhất của tôi cho rắc rối kéo dài này.

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

Trong câu trả lời sau tôi đã giải thích nó đủ tốt, xin vui lòng xem xét điều đó quá!

Tôi hy vọng điều này sẽ hữu ích cho người khác ngoài kia!

Trong cùng một xml tôi đã sử dụng tiếp theo:

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

Trước tiên, thêm màu nền mà bạn muốn làm màu của đường viền, sau đó

thay đổi cropToPadding thành true và sau đó thêm phần đệm.

Sau đó, bạn sẽ có đường viền cho imageView của bạn.