我想让任何图像从我的ImageView是圆形的边界。
我搜索了一下,但没有找到任何有用的信息(我尝试的任何方法都不管用)。
如何通过XML实现这一点: 创建一个ImageView与某些src,并使它与边界圆形?
我想让任何图像从我的ImageView是圆形的边界。
我搜索了一下,但没有找到任何有用的信息(我尝试的任何方法都不管用)。
如何通过XML实现这一点: 创建一个ImageView与某些src,并使它与边界圆形?
当前回答
如果您希望将图像切割成圆形显示,可以这样做
public static Bitmap getCircularBitmap(Bitmap bitmap) {
Bitmap output;
if (bitmap.getWidth() > bitmap.getHeight()) {
output = Bitmap.createBitmap(bitmap.getHeight(), bitmap.getHeight(), Bitmap.Config.ARGB_8888);
} else {
output = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getWidth(), Bitmap.Config.ARGB_8888);
}
Canvas canvas = new Canvas(output);
final int color = 0xff424242;
final Paint paint = new Paint();
final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
float r = 0;
if (bitmap.getWidth() > bitmap.getHeight()) {
r = bitmap.getHeight() / 2;
} else {
r = bitmap.getWidth() / 2;
}
paint.setAntiAlias(true);
canvas.drawARGB(0, 0, 0, 0);
paint.setColor(color);
canvas.drawCircle(r, r, r, paint);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
canvas.drawBitmap(bitmap, rect, rect, paint);
return output;
}
其他回答
这是我设计的最简单的方法。试试这个。
依赖关系
implementation 'androidx.appcompat:appcompat:1.3.0-beta01' implementation 'androidx.cardview:cardview:1.0.0' <android.support.v7.widget.CardView android:layout_width="80dp" android:layout_height="80dp" android:elevation="12dp" android:id="@+id/view2" app:cardCornerRadius="40dp" android:layout_centerHorizontal="true" android:innerRadius="0dp" android:shape="ring" android:thicknessRatio="1.9"> <ImageView android:layout_height="80dp" android:layout_width="match_parent" android:id="@+id/imageView1" android:src="@drawable/YOUR_IMAGE" android:layout_alignParentTop="true" android:layout_centerHorizontal="true"> </ImageView> </android.support.v7.widget.CardView> If you are working on android versions above lollipop <android.support.v7.widget.CardView android:layout_width="80dp" android:layout_height="80dp" android:elevation="12dp" android:id="@+id/view2" app:cardCornerRadius="40dp" android:layout_centerHorizontal="true"> <ImageView android:layout_height="80dp" android:layout_width="match_parent" android:id="@+id/imageView1" android:src="@drawable/YOUR_IMAGE" android:scaleType="centerCrop"/> </android.support.v7.widget.CardView>
添加边界圆ImageView -最新版本
用另一个比内部CardView稍大的CardView包装它,并设置它的背景色,为圆形图像添加边框。你可以增加外部CardView的大小来增加边框的厚度。
<androidx.cardview.widget.CardView
android:layout_width="155dp"
android:layout_height="155dp"
app:cardCornerRadius="250dp"
app:cardBackgroundColor="@color/white">
<androidx.cardview.widget.CardView
android:layout_width="150dp"
android:layout_height="150dp"
app:cardCornerRadius="250dp"
android:layout_gravity="center">
<ImageView
android:layout_width="150dp"
android:layout_height="150dp"
android:src="@drawable/default_user"
android:scaleType="centerCrop"/>
</androidx.cardview.widget.CardView>
</androidx.cardview.widget.CardView>
另一个想法是使用ImageView的clipToOutline属性。
这是一个布局示例:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- Simple view to draw borders for an image,
borders will be rounded because of the oval-shaped background. -->
<View
android:id="@+id/v_border"
android:layout_width="50dp"
android:layout_height="50dp"
android:background="@drawable/shape_border"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<!-- Image itself: fits the border view,
a margin serves as a border width;
the key point here - is a background shape which will clip the view to its forms. -->
<ImageView
android:id="@+id/iv_image"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="4dp"
android:background="@drawable/shape_oval"
android:src="@mipmap/ic_launcher"
app:layout_constraintBottom_toBottomOf="@+id/v_border"
app:layout_constraintEnd_toEndOf="@+id/v_border"
app:layout_constraintStart_toStartOf="@+id/v_border"
app:layout_constraintTop_toTopOf="@+id/v_border" />
</androidx.constraintlayout.widget.ConstraintLayout>
这是我们的shape_border可绘制对象:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
<solid android:color="#FF00FF" />
</shape>
和shape_oval drawable:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" />
你在代码中唯一要做的就是启用clipToOutline属性:
binding.ivImage.clipToOutline = true
当然,您甚至可以使用一些BindingAdapter来避免这一行代码。
我希望这对你有所帮助。
1) 可塑性图像视图
<com.google.android.material.imageview.ShapeableImageView
android:layout_width="250dp"
android:layout_height="250dp"
android:padding="5dp"
app:strokeWidth="10dp"
app:strokeColor="@android:color/darker_gray"
app:shapeAppearanceOverlay="@style/circleImageView"
android:src="@drawable/profile"
android:layout_margin="10dp"/>
Style add here: res/values/styles.xml
<style name="circleImageView" parent="">
<item name="cornerFamily">rounded</item>
<item name="cornerSize">50%</item>
</style>
完整的描述请查看这里:来源在这里。
2) 圆图像视图
<de.hdodenhof.circleimageview.CircleImageView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/profile_image"
android:layout_width="96dp"
android:layout_height="96dp"
android:src="@drawable/profile"
app:civ_border_width="2dp"
app:civ_border_color="#FF000000"/>
别忘了实现:Gradle Scripts > build。gradle (Module: app) >依赖项
implementation 'de.hdodenhof:circleimageview:3.1.0'
完整的描述请查看这里:来源在这里。
3) 循环图像视图
<com.mikhaellopez.circularimageview.CircularImageView
android:layout_width="250dp"
android:layout_height="250dp"
android:src="@drawable/image"
app:civ_border_color="#3f51b5"
app:civ_border_width="4dp"
app:civ_shadow="true"
app:civ_shadow_radius="10"
app:civ_shadow_color="#3f51b5"/>
别忘了实现:Gradle Scripts > build。gradle (Module: app) >依赖项
implementation 'com.mikhaellopez:circularimageview:4.3.1'
完整的描述请查看这里:来源在这里。
创建一个CustomImageview,然后简单地覆盖它的onDraw()方法如下:
@Override
protected void onDraw(Canvas canvas) {
float radius = this.getHeight()/2;
Path path = new Path();
RectF rect = new RectF(0, 0, this.getWidth(), this.getHeight());
path.addRoundRect(rect, radius, radius, Path.Direction.CW);
canvas.clipPath(path);
super.onDraw(canvas);
}
如果你想要的代码自定义小部件以及:-
CircularImageView.java
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Path;
import android.graphics.RectF;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.widget.ImageView;
import androidx.annotation.Nullable;
public class CircularImageView extends ImageView {
private Drawable image;
public CircularImageView(Context context) {
super(context);
init(null, 0);
}
public CircularImageView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
init(attrs, 0);
}
public CircularImageView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init(attrs, defStyleAttr);
}
@Override
protected void onDraw(Canvas canvas) {
float radius = this.getHeight()/2;
Path path = new Path();
RectF rect = new RectF(0, 0, this.getWidth(), this.getHeight());
path.addRoundRect(rect, radius, radius, Path.Direction.CW);
canvas.clipPath(path);
super.onDraw(canvas);
}
private void init(AttributeSet attrs, int defStyle) {
TypedArray a = Utils.CONTEXT.getTheme().obtainStyledAttributes(attrs, R.styleable.CircularImageView, 0, 0);
try {
image = a.getDrawable(R.styleable.CircularImageView_src);
} finally {
a.recycle();
}
this.setImageDrawable(image);
}
}
此外,在res/attrs.xml中添加以下代码来创建所需的属性
<declare-styleable name="CircularImageView">
<attr name="src" format="reference" />
</declare-styleable>
把这个答案贴出来供将来参考。你可以在com.google.android.material:material中使用ShapeableImageView。
<com.google.android.material.imageview.ShapeableImageView
android:id="@+id/img_launcher_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_margin="5dp"
android:adjustViewBounds="true"
android:background="@android:color/transparent"
android:elevation="5dp"
android:maxWidth="50dp"
android:maxHeight="50dp"
android:scaleType="fitXY"
android:src="@mipmap/ic_launcher"
app:shapeAppearance="?attr/actionButtonStyle"
app:shapeAppearanceOverlay="@style/imageViewRounded"
app:strokeColor="@android:color/white" />
在你的styles.xml中添加imageviewraded样式
<style name="imageViewRounded">
<item name="cornerFamily">rounded</item>
<item name="cornerSize">51%</item>
</style>
如果没有添加,可以添加材料设计依赖项。
implementation 'com.google.android.material:material:1.4.0'
设计是这样的