안드로이드에서 이미지보기의 테두리?


337

ImageViewAndroid에서 테두리를 설정 하고 색상을 변경하려면 어떻게해야합니까?


1
ImageView의 색상을 변경하는 데 대한 답변 이 있습니다. 희망이 도움이 될 수 있습니다.
ruidge

답변:


566

아래 xml을 이미지 뷰의 배경을 Drawable로 설정했습니다. 효과가있다.

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

그리고 추가 android:background="@drawable/yourXmlFileName"ImageView


112
그리고 추가 android:background="@drawable/yourXmlFileName"ImageView
Mithun Sreedharan

10
테두리는 왼쪽과 오른쪽 모두에서 작동하지만 위쪽과 아래쪽의 경우 부모를 위쪽으로 채 웁니다.
Maurice

3
오, 그게 내가 원하는 것입니다. ImageView에 패딩을 설정해야합니다.
emeraldhieu

5
@Maurice cropToPadding을 true로 설정할 수 있습니다.
MikkoP

4
그나마 = "true"로 설정 cropToPadding을 잊지
랜드 리

164

다음은 검은 색 테두리가있는 코드입니다. 테두리에 추가 xml 파일을 사용하지 않았습니다.

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

29
그래 .. 국경처럼 보인다. 그러나 배경이 투명한 드로어 블 이미지를 사용하면 테두리가있는 이미지가 제대로 표시되지 않습니다. 투명 할 때마다 검은 색을 나타냅니다. 따라서 귀하의 답변은 최선의 방법이 아닙니다.
Praveen

19
네! 그러나 다른 XML 파일을 만들지 않고 테두리가 있습니다.
user609239

7
을 사용하여 이미지 크기를 조정할 때는 작동하지 않습니다 android:scaleType="centerCrop".
Silox

8
이것은 불필요한 오버 드로우를 생성하기 때문에 나쁘다
Jay Soyer

1
@Silox for scaleType="centerCrop", 추가해야합니다cropToPadding="true"
Adam Johns

24

이것은 내가 아는 오래된 게시물이지만, 이것이 누군가를 도울 수 있다고 생각했습니다.

도형의 "단색"색상과 겹치지 않는 반투명 테두리를 시뮬레이션하려면 xml에서이 색상을 사용하십시오. "stroke"태그는 여기서 실제로 그려진 모양과 항상 겹치는 것처럼 보이지 않습니다.

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

나도 이것을 좋아하지만 바깥 쪽 가장자리를 너무 작게하면 모서리가 비어 있습니다. 2dp 이상에서 잘 작동합니다.
존 스택

이 방법의 장점은 둥근 모서리를 허용한다는 것입니다. 이전 답변의 테두리가 겹치지 않게하려면 ImageView 태그에 패딩을 추가하십시오. 이 방법의 단점은 반투명 배경을 사용하는 경우 테두리가 이미지 영역으로 번지는 것입니다. 둥근 모서리보다 반투명 배경이 더 좋기 때문에 이전 방법을 선택합니다.
Leo Landau

24

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

아래 코드를 이름으로 저장하면 border_image.xml드로어 블 폴더에 있어야합니다.

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

이미지의 테두리에 둥근 모서리를 주려면 border.xml 파일의 행을 변경할 수 있습니다

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

2
이미지에 대해 동적으로 설정된 경우 테두리를 코드에서 다시 설정해야합니다. 이미지가 테두리 위에 있습니다.
Rob85

4

테두리 만들기

드로어 블 폴더에 다음 내용이 포함 된 xml 파일 (예 : "frame_image_view.xml")을 만듭니다.

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

교체 @dimen/borderThickness@color/borderColor뭐든 당신이 원하는 또는 DIMEN / 색상을 해당 추가합니다.

Drawable을 배경으로 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" />

를 사용해야합니다 android:cropToPadding="true". 그렇지 않으면 정의 된 패딩이 적용되지 않습니다. 또는 android:padding="@dimen/borderThickness"ImageView에서 사용 하여 동일한 결과를 얻을 수 있습니다. 테두리가 ImageView 대신 부모를 프레임하는 경우을 사용하십시오 android:adjustViewBounds="true".

테두리 색상 변경

코드에서 테두리 색상을 변경하는 가장 쉬운 방법은 tintBackgound 속성을 사용하는 것입니다.

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

또는

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

를 정의하는 것을 잊지 마십시오 newColor.


3

res / drawables / background.xml과 같은 배경 Drawable을 추가하십시오.

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

res / layout / foo.xml에서 ImageView 배경을 업데이트하십시오.

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

src가 배경 위에 그려 지도록하려면 ImageView 패딩을 제외하십시오.


3

이것은 위에서 사용되었지만 독점적으로 언급되지 않았습니다.

setCropToPadding(boolean);

true 인 경우 패딩에 맞게 이미지가 잘립니다.

그러면 ImageView소스가 배경에 추가 된 패딩에 맞도록 소스 가 만들어 집니다.

XML을 통해 다음과 같이 수행 할 수 있습니다.

android:cropToPadding="true"

2

이 코드를 res / drawable에 background.xml을 만들어야합니다.

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

2

ImageView의 사용자 정의 테두리 및 모양을 검색하는 사람들을 위해. android-shape-imageview를 사용할 수 있습니다

영상

에 추가 compile 'com.github.siyamed:android-shape-imageview:0.9.+@aar'하십시오 build.gradle.

그리고 당신의 배치에서 사용하십시오.

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

1

나는 거의 이것에 대해 포기했다.

이것은 부하 이미지 글라이드를 사용하여 내 조건이 참조입니다 둥근 모서리 변환 여기에 대해 자세한 글라이드 문제여기에

나는 또한 ImageView모든 사람이 여기 1 , 여기 2여기 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"

그러나 여전히 성공하지 못했습니다.

잠시 동안 연구 한 후 여기 에이 답변foreground속성을 사용 하면 결과가 나타납니다.android:foreground="@drawable/all_round_border_white"

불행히도 그것은 아래 이미지와 같이 "나쁘지 않은"경계 코너를 제공합니다.

여기에 이미지 설명을 입력하십시오


0

나는 이것을하는 것이 훨씬 쉽다는 것을 알았다.

1) 내용을 안에 넣도록 프레임을 편집합니다 (9patch 도구 사용).

2) ImageView내부를 a Linearlayout에 놓고 원하는 배경 또는 색상을 배경으로 설정합니다 Linearlayout. 프레임 자체에 내용이 들어가도록 프레임을 설정하면 프레임 안에 있습니다 ImageView(9patch 도구를 사용하여 내용을 설정 한 위치).


0

이 긴 문제에 대한 가장 간단한 해결책은 다음과 같습니다.

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

다음 답변에서 나는 충분히 잘 설명했습니다. 이것도 살펴보십시오!

나는 이것이 다른 누군가에게 도움이되기를 바랍니다!


0

동일한 XML에서 다음을 사용했습니다.

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

0

먼저 테두리의 색으로 원하는 배경색을 추가 한 다음 여기에 이미지 설명을 입력하십시오

cropToPadding을 true로 변경 한 후 패딩을 추가하십시오.

그런 다음 imageView 테두리가 생깁니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.