12

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

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

plzは私に事前に感謝します....

4

3 に答える 3

55

ImageViewの「境界」(実際には背景)のリソース (レイヤ ドローアブル xml) を作成し、の背景リソースがドローアブル xml でthemeあることを宣言できます。ImageView

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

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

ボーダー付きエフテリング

必ず

  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>

最後に、レイアウト xml でスタイルを指定ImageViewます

<ImageView android:id="@+id/my_image" 
    android:layout_width="100dp" android:layout_height="100dp"
    android:src="@drawable/efteling"
    style="@style/myImageView" />
于 2011-04-30T10:36:06.437 に答える
9

この 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>
于 2012-11-17T06:47:19.317 に答える
2

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

次の記事で 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! のように次のようになります。

ボーダー付きの ImageView のプレビュー

長所と短所:

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

于 2015-06-19T06:42:01.507 に答える