Android - 围绕ImageView设置边框

时间:2012-09-24 20:20:03

标签: android android-layout android-emulator android-widget 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背景填充整个100x100px单元格的空间,因此,如果图像的宽度小于100px,则顶部和底部边框将显得更大。

注意黄色边框,我需要它在ImageView周围正好1px:

enter image description here

任何帮助,想法,任何建议都非常受欢迎。

9 个答案:

答案 0 :(得分:46)

如果你将padding = 1和背景颜色放在LinearLayout中,你将有一个1px的黄色边框。

答案 1 :(得分:25)

这对我有用......

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

这是我使用带有边框的viewpager和imageview得到的结果。

Example imageview with border 1dp black.

答案 2 :(得分:9)

如果图像的大小可变,那么您将始终获得该效果。我想你需要为ImageView设置一个固定的大小,并给它一个设置的背景颜色 - 从你的例子黑色的外观是有意义的。将imageview包装在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(我认为)

答案 3 :(得分:4)

您可以使用自定义imageview,从中可以获取边框,这里是代码。您还可以根据需要更改填充宽度和笔触宽度。它在第一行代码下方指定,谢谢

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 :(得分:3)

只需将属性adjustViewBounds添加到ImageView。

<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_widthandroid:layout_height

答案 5 :(得分:3)

这对我有用:

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

答案 6 :(得分:1)

只需在ImageView布局中添加波纹管线

如果imageview的layout_width和layout_height不是match_parent而不是use,

android:adjustViewBounds = "true"

android:adjustViewBounds = "true"
android:scaleType="fitXY"

android:adjustViewBounds = "true"
android:scaleType="centerCrop"

答案 7 :(得分: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>

如果您想进一步解释,请查看以下link我已经解释得很好的内容。

希望这对你们任何人都有帮助!

干杯!

答案 8 :(得分:0)

您必须在imageview中添加缩放样式。之后你的形象就会合适。

机器人:scaleType =&#34; fitXY&#34;