边界的图像视图在Android?

如何在Android中为ImageView设置边界并更改其颜色?

342769 次浏览
小开
最佳答案

我将下面的xml设置为可绘制的图像视图的背景。它的工作原理。

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

然后将android:background="@drawable/yourXmlFileName"添加到你的ImageView

小开

以下是我曾经有黑色边框的代码。注意，我没有使用额外的xml文件为边界。

<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/red_minus_icon"
android:background="#000000"
android:padding="1dp"/>
小开

这是我知道的一个老帖子，但我想这可能会帮助到一些人。

如果你想模拟一个半透明的边框，不重叠形状的“纯”色，然后在你的xml中使用这个。注意，我在这里根本没有使用“stroke”标签，因为它似乎总是与实际绘制的形状重叠。

  <?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >


<item>
<shape android:shape="rectangle" >
<solid android:color="#55111111" />


<padding
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp" />


<corners android:radius="5dp" />
</shape>
</item>
<item>
<shape android:shape="rectangle" >
<padding
android:bottom="5dp"
android:left="5dp"
android:right="5dp"
android:top="5dp" />


<solid android:color="#ff252525" />
</shape>
</item>
</layer-list>
小开

我发现这样做容易得多:

1)编辑帧内有内容(用9patch工具)。

2)将ImageView放在Linearlayout中，并设置你想要的框架背景或颜色作为Linearlayout的背景。当你将框架设置为在其内部有内容时，你的ImageView将在框架内(就在你用9patch工具设置内容的地方)。

小开

ImageView在xml文件

<ImageView
android:id="@+id/myImage"
android:layout_width="100dp"
android:layout_height="100dp"


android:padding="1dp"
android:scaleType="centerCrop"
android:cropToPadding="true"
android:background="@drawable/border_image"


android:src="@drawable/ic_launcher" />

以border_image.xml的名称保存下面的代码，它应该在可绘制文件夹中

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">


<gradient
android:angle="270"
android:endColor="#ffffff"
android:startColor="#ffffff" />


<corners android:radius="0dp" />


<stroke
android:width="0.7dp"
android:color="#b4b4b4" />
</shape>

如果你想给图像的边界圆角，那么你可以改变border.xml文件中的一行

<corners android:radius="4dp" />
小开

你必须在res/drawable这段代码中创建一个background.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#FFFFFF" />
<corners android:radius="6dp" />
<stroke
android:width="6dp"
android:color="@android:color/white" />
<padding
android:bottom="6dp"
android:left="6dp"
android:right="6dp"
android:top="6dp" />
</shape>
小开

下面是我对这个漫长麻烦的最简单的解决方案。

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

在下面的回答中，我已经解释得足够好了，请也看看!

我希望这将有助于其他人在那里!

小开

上面已经使用过，但没有专门提到。

setCropToPadding(boolean);

如果真正的，图像将被裁剪以适合它的填充。

这将使ImageView源符合添加到其背景的填充。

通过XML它可以做到如下-

android:cropToPadding="true"
小开

在相同的xml中，我使用了下一个:

    <RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#ffffff" <!-- border color -->
android:padding="3dp"> <!-- border width -->


<ImageView
android:layout_width="160dp"
android:layout_height="120dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:scaleType="centerCrop" />
</RelativeLayout>
小开

添加一个类似res/drawables/background.xml的背景Drawable:

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="@android:color/white" />
<stroke android:width="1dp" android:color="@android:color/black" />
</shape>

更新ImageView背景res/layout/foo.xml:

...
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="1dp"
android:background="@drawable/background"
android:src="@drawable/bar" />
...

如果你想让src在背景上绘制，排除ImageView填充。

小开

对于那些正在搜索自定义边界和形状的ImageView。你可以使用android-shape-imageview

image

只要将compile 'com.github.siyamed:android-shape-imageview:0.9.+@aar'添加到你的build.gradle。

并使用在你的布局。

<com.github.siyamed.shapeimageview.BubbleImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/neo"
app:siArrowPosition="right"
app:siSquare="true"/>
小开

首先添加的背景颜色，你想作为你的边界的颜色，然后 enter image description here < / p >

更改cropToPadding为true，然后添加填充。

然后你就有了imageView的边框。

小开

创建边界

创建一个xml文件(例如:"frame_image_view.xml")和以下内容在你的可绘制文件夹:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<stroke
android:width="@dimen/borderThickness"
android:color="@color/borderColor" />
<padding
android:bottom="@dimen/borderThickness"
android:left="@dimen/borderThickness"
android:right="@dimen/borderThickness"
android:top="@dimen/borderThickness" />
<corners android:radius="1dp" /> <!-- remove line to get sharp corners -->
</shape>

用你想要的替换@dimen/borderThickness和@color/borderColor，或者添加相应的dimen / color。

添加Drawable作为ImageView的背景:

<ImageView
android:id="@+id/my_image_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/frame_image_view"
android:cropToPadding="true"
android:adjustViewBounds="true"
android:scaleType="fitCenter" />

你必须使用android:cropToPadding="true"，否则定义的填充无效。或者在ImageView中使用android:padding="@dimen/borderThickness"来实现相同的功能。 如果边框框架父视图而不是ImageView，请尝试使用android:adjustViewBounds="true".

改变边框颜色

在代码中更改边框颜色的最简单方法是使用tintbackground属性。

ImageView img = findViewById(R.id.my_image_view);
img.setBackgroundTintList(ColorStateList.valueOf(Color.RED); // changes border color to red

或

ImageView img = findViewById(R.id.my_image_view);
img.setBackgroundTintList(getColorStateList(R.color.newColor));

不要忘记定义你的newColor。

小开

我差点就放弃了。

这是我使用滑动加载图像的条件，参见关于圆角转换的详细滑翔问题和在这里

我也为我的ImageView设置了相同的属性，对于每个人回答这里1， 这里2 &这里3

android:cropToPadding="true"
android:adjustViewBounds="true"
android:scaleType="fitCenter"`
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/path_to_rounded_drawable"

但还是没有成功。

经过一段时间的研究，使用这里的SO答案中的foreground属性得到一个结果android:foreground="@drawable/all_round_border_white"

不幸的是，它给我“不太好”的边界角如下图:

enter image description here

小开

你可以在Android Studio中使用9个补丁来制作边框!

我一直在寻找解决方案，但我没有找到，所以我跳过了这部分。

然后我去Firebase资产的谷歌图像，我偶然发现他们使用9patch。

9patch in action

下面是链接:https://developer.android.com/studio/write/draw9patch

你只需要拖动边缘所在的位置。

这就像Unity中的border edge。

小开

只需在ImageView中添加以下代码:

<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">


<solid
android:color="@color/white"/>


<size
android:width="20dp"
android:height="20dp"/>
<stroke
android:width="4dp" android:color="@android:color/black"/>
<padding android:left="1dp" android:top="1dp" android:right="1dp"
android:bottom="1dp" />
</shape>
小开

indent border

添加以下代码到一个形状:

<gradient
android:angle="135"
android:endColor="#FF444444"
android:centerColor="#FFAAAAAA"
android:startColor="#FFFFFFFF"/>

ét瞧，你得到了一个(或多或少)缩进的边界，光源设置在左上方。调整位图的大小(相对于imageview的大小，我在示例中使用200dp x 200dp imageview和196dp x 196dp的位图，角的半径为14dp)和填充来获得最好的结果。切换结束和开始颜色的斜面效果。

下面是你在图片中看到的形状的完整代码(保存在res/drawable中，例如border_shape.xml):

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:angle="135"
android:endColor="#FF444444"
android:centerColor="#FFAAAAAA"
android:startColor="#FFFFFFFF"/>
<padding
android:top="2dp"
android:left="2dp"
android:right="2dp"
android:bottom="2dp"/>
<corners
android:radius="30dp"/>
</shape>

然后像这样在imageview中调用它:

android:scaleType="center"
android:background="@drawable/border_shape"
android:cropToPadding="true"
android:adjustViewBounds="true"

下面是圆角位图的代码:

Bitmap getRoundedRectBitmap(Bitmap bitmap, float radius) {
Paint paint = new Paint();
PorterDuffXfermode pdmode = new PorterDuffXfermode(PorterDuff.Mode.SRC_IN);
Bitmap bm = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bm);
Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
RectF rectF = new RectF(rect);
canvas.drawARGB(0, 0, 0, 0);
paint.setColor(0xff424242);
canvas.drawRoundRect(rectF, radius, radius, paint);
paint.setXfermode(pdmode);
canvas.drawBitmap(bitmap, rect, rect, paint);
return bm;
}
小开

有了Material design和新的ShapeableImageView小部件，你可以使用strokeColor和strokeWidth属性轻松创建一个有边框的图像。这很简单，不需要创建任何额外的XML文件。

<com.google.android.material.imageview.ShapeableImageView
android:layout_width="200dp"
android:layout_height="200dp"
app:strokeColor="@color/black"
app:strokeWidth="2dp"
app:srcCompat="@drawable/sample_image" />

上面的代码创建了一个宽度为2dp的黑色边框。

如果你想给圆角图像添加描边，你可以使用shapeAppearanceOverlay属性。这允许您使用所提供的形状(在本例中为圆形)绘制位图。查看下面的代码了解更多细节:

<com.google.android.material.imageview.ShapeableImageView
android:layout_width="200dp"
android:layout_height="200dp"
app:shapeAppearanceOverlay="@style/circleImageView"
app:srcCompat="@drawable/sample_image"
app:strokeColor="@color/black"
app:strokeWidth="2dp" />

将以下代码添加到你的styles.xml文件中:

<!-- Circle Shape -->
<style name="circleImageView" parent="">
<item name="cornerFamily">rounded</item>
<item name="cornerSize">50%</item>
</style>

确保你的应用扩展了材质设计主题以便使用ShapeableImageView。


提交答案