Androidの画像ビューの境界線?


回答:


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
境界線は左と右の両方で機能しますが、上部と下部の場合は、親を上部まで塗りつぶします。
モーリス

3
ああ、それも私が欲しいものです。ImageViewのパディングを忘れずに設定してください。
emeraldhieu 2012

5
@モーリスあなたはcropToPaddingをtrueに設定することができます。
MikkoP 2013

4
設定を忘れないでください。cropToPadding= "true"を設定してください
Landry

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 2013

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タグにパディングを追加します。この方法の欠点は、半透明の背景を使用すると、境界が画像領域ににじむことです。丸みを帯びたコーナーよりも半透明の背景が好きなので、前の方法を選択しました。
レオ・ランダウ

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 /色を追加。

ImageViewに背景としてDrawableを追加します。

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

場合は、画像はそのパディング内に収まるように切り取られます。

これにより、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このSO回答の属性を使用すると、ここで結果が得られますandroid:foreground="@drawable/all_round_border_white"

残念ながら、それは私に下の画像のような「良くない」ボーダーコーナーを与えます:

ここに画像の説明を入力してください


0

私はこれを行う方がはるかに簡単だと感じました:

1)フレームを編集して、コンテンツを内側に配置します(9patchツールを使用)。

2)をImageView内側に配置し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.