web-dev-qa-db-ja.com

Android-ImageViewの周囲に境界線を設定する

幅と高さが固定されたセルがあり、100x100pxにします。そのセル内に、ImageViewの周りにボーダーを表示します。
最初のアイデアは、ImageViewにバックグラウンドリソースを配置し、1dpのパディングを追加して境界効果を作成することでした。

<LinearLayout
        Android:layout_width="100dp"
        Android:layout_height="100dp" >

    <ImageView
        Android:id="@+id/imageView"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:background="@drawable/image_border"
        Android:padding="1dp"
        Android:src="@drawable/test_image" />

</LinearLayout>

どうやらこれは動作するはずですが、動作しないか、少なくとも期待どおりではありません。
[。

黄色の境界線に注意してください。ImageViewの周りに正確に1pxである必要があります。

enter image description here

どんな種類の助け、アイデア、提案も大歓迎です。

androidandroid-layoutandroid-emulatorandroid-widgetandroid-imageview
29
Andy Res

LinearLayoutにpadding = 1と背景色を配置すると、1ピクセルの黄色の境界線ができます。

46
Christine

ここに私のために働いたものがあります...

<!-- @drawable/image_border -->
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android">
  <solid Android:color="@color/colorPrimary"/>
  <stroke Android:width="1dp" Android:color="#000000"/>
  <padding Android:left="1dp" Android:top="1dp" Android:right="1dp" Android:bottom="1dp"/>
</shape>

<ImageView
  Android:layout_width="300dp"
  Android:layout_height="300dp"
  Android:layout_gravity="center"
  Android:padding="1dp"
  Android:cropToPadding="true"
  Android:scaleType="centerCrop"
  Android:background="@drawable/image_border"/>

ここでは、ビューページャーとボーダー付きのイメージビューで得られた結果です。

Example imageview with border 1dp black.

26
Ray Hunter

画像のサイズが可変の場合、常にその効果が得られます。 ImageViewに固定サイズを設定し、設定された背景色を与える必要があると思います-例の外観からは黒が理にかなっています。 ImageLayoutをFrameLayoutまたは黄色の背景と1pxパディングのあるビューでラップします。

編集

私はこれについて考えました、そして、私の答えはそう感じませんでした...

各ImageViewを固定サイズ、パディング、およびマージンで設定する場合。必要に応じて背景色を設定すると、必要な効果を得ることができます。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:tools="http://schemas.Android.com/tools"
    Android:layout_width="wrap_content"
    Android:layout_height="fill_parent" >


        <ImageView
            Android:id="@+id/imageView1"
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:layout_gravity="center"
            Android:background="#52D017"
            Android:padding="1dp"
            Android:layout_margin="5dp"
            Android:src="@drawable/test1"
            tools:ignore="ContentDescription" />

        <ImageView
            Android:id="@+id/imageView2"
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            Android:layout_gravity="center"
            Android:layout_margin="5dp"
            Android:background="#52D017"
            Android:padding="1dp"
            Android:src="@drawable/test2"
            tools:ignore="ContentDescription" />

</LinearLayout>

スクリーンショットでは、表示される画像は両方とも幅が100ピクセル未満で、高さが異なります。

example

（この場合）黄緑色が透けて見えるので、これは背景が透明な画像を処理しません。これを解決するには、各ImageViewをFrameLayoutにラップします。 ImageViewの背景を黒にし、必要なパディングでFrameLayoutをWrapContentに設定します（私は思う）

9
Paul D'Ambra

カスタム画像ビューを使用して、境界線を取得できる場所からコードを作成できます。必要に応じてパディングの幅とストロークの幅を変更することもできます。それはコードの最初の行のすぐ下に指定されています、ありがとう

public class FreeCollage extends ImageView {

    private static final int PADDING = 8;
    private static final float STROKE_WIDTH = 5.0f;

    private Paint mBorderPaint;

    public FreeCollage(Context context) {
        this(context, null);
    }

    public FreeCollage(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
        setPadding(PADDING, PADDING, PADDING, PADDING);
    }

    public FreeCollage(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        initBorderPaint();
    }

    private void initBorderPaint() {
        mBorderPaint = new Paint();
        mBorderPaint.setAntiAlias(true);
        mBorderPaint.setStyle(Paint.Style.STROKE);
        mBorderPaint.setColor(Color.WHITE);
        mBorderPaint.setStrokeWidth(STROKE_WIDTH);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawRect(PADDING, PADDING, getWidth() - PADDING, getHeight() - PADDING, mBorderPaint);
    }
}
4
Shubham Kamlapuri

ImageViewにadjustViewBoundsプロパティを追加するだけです。

<ImageView
        Android:id="@+id/imageView"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:background="@drawable/image_border"
        Android:padding="1dp"
        Android:adjustViewBounds="true"
        Android:src="@drawable/test_image" />

Android:adjustViewBounds="true"は、[wrap_content]に設定されたAndroid:layout_widthおよびAndroid:layout_heightでのみ機能することに注意してください。

3
rricarrdo

これは私のために働いたものです：

    <ImageView
        Android:id="@+id/dialpad_phone_country_flag"
        Android:layout_width="22dp"
        Android:layout_height="15dp"
        Android:scaleType="fitXY"
        Android:background="@color/gen_black"
        Android:padding="1px"/>
3
Goran Horia Mihail

imageViewレイアウトに次の行を追加するだけです

imageviewのlayout_widthとlayout_heightがuseよりmatch_parentではない場合、

Android:adjustViewBounds = "true"

または

Android:adjustViewBounds = "true"
Android:scaleType="fitXY"

または

Android:adjustViewBounds = "true"
Android:scaleType="centerCrop"
1
varotariya vajsi

Imageviewにscaletyleを追加する必要があります。その後、あなたの画像はフィットします。

Android：scaleType = "fitXY"

0
Shubham

以下は、私の最も簡単なソリューションで使用したコードスニペットです。

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

さらに説明が必要な場合は、次の link をご覧ください。ここで十分に説明しました。

これが皆さんの役に立つことを願っています！

乾杯！

0
Randika Vishman