web-dev-qa-db-ja.com

Imageviewに境界線を表示する方法は？

友達Imageviewに境界線を表示する方法は？

モバイルギャラリーのように結果を出したいすべての画像が境界線付きで表示されます。

plzは私に前もって感謝します....

androidimageimageviewborderandroid-imageview
12
Piyush

ImageViewの「境界」（実際にはバックグラウンド）のリソース（レイヤードローアブルxml）を作成し、themeでImageViewのバックグラウンドリソースがドローアブルxmlであることを宣言できます。 。

この「境界線」をImageViewの状態（focused、selectedなど）に基づいて変更する必要がある場合は、さらにレイヤードローアブルを作成して配置する必要があります。一緒にセレクターxml（状態ドローアブル）にします。
次に、テーマでImageViewの背景をこのselector.xmlに設定する必要があります。

更新
以下は、画像に単純な境界線を指定する方法のサンプルです。

efteling with border

必ず

  1. 新しいレイヤードローアブルファイル（image_border.xml）を作成します。
  2. styles.xmlファイルを変更/作成する
  3. colors.xmlファイルを変更/作成します
  4. レイアウトxmlファイル（またはコード）を変更して、ImageViewにスタイルを適用します。

res/drawable/image_border.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item>
        <shape Android:shape="rectangle">
            <gradient Android:angle="90" 
                Android:startColor="@color/image_border_start" 
                Android:centerColor="@color/image_border_center"
                Android:endColor="@color/image_border_end" />
        </shape>
    </item>
    <item Android:top="2dp" Android:left="2dp" 
        Android:right="2dp" Android:bottom="2dp">
        <shape Android:shape="rectangle">
            <solid Android:color="@color/default_back_color" />
        </shape>
    </item>
</layer-list>

res/values/styles.xml
次の行を追加します。

<style name="myImageView">
    <!-- 3dp so the background border to be visible -->
    <item name="Android:padding">3dp</item>
    <item name="Android:background">@drawable/image_border</item>
    <item name="Android:scaleType">fitCenter</item>
</style>

res/values/colors.xml
次の行を追加します。

<color name="image_border_start">#40990000</color>
<color name="image_border_end">#FF660000</color>
<color name="image_border_center">#FFFF3333</color>

そして最後に、layout xmlでImageViewのスタイルを指定します。

<ImageView Android:id="@+id/my_image" 
    Android:layout_width="100dp" Android:layout_height="100dp"
    Android:src="@drawable/efteling"
    style="@style/myImageView" />
55
rekaszeru

このXMLファイルを複数のファイルの代わりにドローアブルとして使用できますが、このファイルはドローアブルフォルダーに配置されます。 ImageViewでは、次のように、このXMLファイルを背景ドローアブルとして使用します。Android:background="@drawable/following code file name"。

これがお役に立てば幸いです。

<?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>
9
Ajit Kumar Dubey

上記のすべての解決策を試しましたが、うまくいきませんでした。だから私はこれに対する簡単な解決策を見つけました！ :-)

次のAndroid）のFrameLayoutについて読んだことを覚えています 記事 UI要素を同じ順序で積み重ねるのに役立つと言っていますそれらを合計します。

解決策：

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

プレビュー：

以上です。あなたはimageViewのような次のようになります！

preview of the ImageView with boarder

長所と短所：

これは他の場所で使用するのに非常に簡単なソリューションだと思います。あなたが行うことはすべて1つの場所にあるので、変更が簡単です。ただし、2つのImageViewを追加する必要はありません。

2
Randika Vishman