Android的 - 设置边框周围ImageView的(Android - Set a border

2019-07-31 20:55发布

站内文章 / 前沿技术

8 0

三岁会撩人

女 | 书童

私信

我有一个固定的宽度和高度的细胞，让它成为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细胞的空间，从而，如果图像的宽度小于100像素，则顶部和底部的边界会出现大。

注意黄色边框，我需要它是完全围绕ImageView的1px的：

任何帮助，想法，任何形式的建议是多少，大加赞赏。

Answer 1:

如果你把填充= 1，并在LinearLayout中的背景颜色，你就会有一个1px的黄色边框。

Answer 2:

这里是我工作...

<!-- @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的一个边界得到。

Answer 3:

如果图像的大小可变，那么您总能获得这种效果。我猜你需要设置一个固定大小的ImageView的，并给它一组背景色 - 黑将使感的外观的例子。包裹在所述的FrameLayout ImageView的或只是一个视图黄色背景和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像素的宽度和不同的高度。

此不处理具有透明背景为则（在本例中）图像黄绿色示出了穿过。你可以通过在包装的FrameLayout每个ImageView的解决这个问题。使得ImageView的背景上的黑色和设置的FrameLayout有需要的填充到WrapContent（我认为）

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

Answer 5:

就在物业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"仅适用于android:layout_width和android:layout_height设置为“WRAP_CONTENT”。

Answer 6:

这是对我工作：

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

Answer 7:

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

如果ImageView的的layout_width和layout_height不大于使用match_parent，

android:adjustViewBounds = "true"

要么

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

要么

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

Answer 8:

以下是代码片段，我在我的简单的解决方案使用。

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

如果您想进一步的解释，请看看下面的链接，我会解释的不够好。

希望这可能有助于你人在那里！

干杯!