如何用圆角制作视图?
Posted
技术标签:
【中文标题】如何用圆角制作视图?【英文标题】:How to make a view with rounded corners? 【发布时间】:2014-09-27 12:41:53 【问题描述】:我正在尝试在具有圆角边缘的 android 中创建视图。到目前为止我找到的解决方案是定义一个圆角形状并将其用作该视图的背景。
这是我所做的,如下定义一个可绘制对象:
<padding
android:top="2dp"
android:bottom="2dp"/>
<corners android:bottomRightRadius="20dp"
android:bottomLeftRadius="20dp"
android:topLeftRadius="20dp"
android:topRightRadius="20dp"/>
现在我用它作为我的布局的背景,如下所示:
<LinearLayout
android:orientation="vertical"
android:layout_
android:layout_
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginBottom="10dp"
android:clipChildren="true"
android:background="@drawable/rounded_corner">
这很好用,我可以看到视图的边缘是圆角的。
但我的布局中有许多其他子视图,比如 ImageView 或 MapView
。当我在上面的布局中放置一个ImageView
时,图像的角没有被剪裁/剪裁,而是显得完整。
我已经看到了其他解决方法,以使其像 here 解释的那样工作。
但是有没有一种方法可以为视图及其所有设置圆角 子视图包含在已舍入的主视图中 角落?
【问题讨论】:
如果您使用自定义布局扩展至 LinearLayout,并在创建其对象时,迭代该布局的所有子级并为其应用圆角边框背景? android.support.v7.widget.CardView 似乎是解决这个问题的方法 这个解决方案为我解决了这个问题,但需要子类化:https://***.com/questions/5574212/android-view-clipping 谷歌有新框架,新技术更好[Jetpack Compose][1] [1]:***.com/questions/6054562/… 【参考方案1】:另一种方法是制作一个自定义布局类,如下所示。此布局首先将其内容绘制到屏幕外位图,用圆角矩形遮盖屏幕外位图,然后在实际画布上绘制屏幕外位图。
我试过了,它似乎有效(至少对于我的简单测试用例)。与常规布局相比,它当然会影响性能。
package com.example;
import android.content.Context;
import android.graphics.*;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.util.TypedValue;
import android.widget.FrameLayout;
public class RoundedCornerLayout extends FrameLayout
private final static float CORNER_RADIUS = 40.0f;
private Bitmap maskBitmap;
private Paint paint, maskPaint;
private float cornerRadius;
public RoundedCornerLayout(Context context)
super(context);
init(context, null, 0);
public RoundedCornerLayout(Context context, AttributeSet attrs)
super(context, attrs);
init(context, attrs, 0);
public RoundedCornerLayout(Context context, AttributeSet attrs, int defStyle)
super(context, attrs, defStyle);
init(context, attrs, defStyle);
private void init(Context context, AttributeSet attrs, int defStyle)
DisplayMetrics metrics = context.getResources().getDisplayMetrics();
cornerRadius = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, CORNER_RADIUS, metrics);
paint = new Paint(Paint.ANTI_ALIAS_FLAG);
maskPaint = new Paint(Paint.ANTI_ALIAS_FLAG | Paint.FILTER_BITMAP_FLAG);
maskPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
setWillNotDraw(false);
@Override
public void draw(Canvas canvas)
Bitmap offscreenBitmap = Bitmap.createBitmap(canvas.getWidth(), canvas.getHeight(), Bitmap.Config.ARGB_8888);
Canvas offscreenCanvas = new Canvas(offscreenBitmap);
super.draw(offscreenCanvas);
if (maskBitmap == null)
maskBitmap = createMask(canvas.getWidth(), canvas.getHeight());
offscreenCanvas.drawBitmap(maskBitmap, 0f, 0f, maskPaint);
canvas.drawBitmap(offscreenBitmap, 0f, 0f, paint);
private Bitmap createMask(int width, int height)
Bitmap mask = Bitmap.createBitmap(width, height, Bitmap.Config.ALPHA_8);
Canvas canvas = new Canvas(mask);
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setColor(Color.WHITE);
canvas.drawRect(0, 0, width, height, paint);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
canvas.drawRoundRect(new RectF(0, 0, width, height), cornerRadius, cornerRadius, paint);
return mask;
像普通布局一样使用它:
<com.example.RoundedCornerLayout
android:layout_
android:layout_>
<ImageView
android:layout_
android:layout_
android:src="@drawable/test"/>
<View
android:layout_
android:layout_
android:background="#ff0000"
/>
</com.example.RoundedCornerLayout>
【讨论】:
我在这个布局中使用了带有缩放功能的图像视图,但是当我尝试缩放时这个布局无法检测到触摸监听器,如何在这个布局中添加触摸监听器功能? 我使用了这种方法,效果很好。但是当我在布局中放置一个 EditText 时,我输入时屏幕不会更新。当我关闭窗口时,文本会显示出来。一旦我关闭键盘,屏幕就会更新。有什么解决办法吗? 当您将它与 Recycler 视图一起使用时,唯一的问题是它没有等待加载完整的项目集。并仅对几项进行轮换。发生这种情况有原因吗? 这不适用于从使用占位符过渡的滑翔库加载的图像(或实际上任何其他动画儿童)。我有一个替代解决方案,但它要求您的背景颜色是纯色。见gist.github.com/grennis/da9f86870c45f3b8ae00912edb72e868 很好且有用的解决方案,但太贵了。仅包含一张图片的六个元素的 RecyclerView 无法平滑滚动。而且它不取决于设备功率(三星 S9 或 Wileyfox Swift 2)。 ***.com/a/41098690/4399323 是更好的答案!【参考方案2】:或者您可以像这样使用android.support.v7.widget.CardView
:
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_
android:layout_
card_view:cardBackgroundColor="@color/white"
card_view:cardCornerRadius="4dp">
<!--YOUR CONTENT-->
</android.support.v7.widget.CardView>
【讨论】:
我尝试了很多方法,你的方法是解决我问题的最佳方法。谢谢! 无法移除海拔高度。如果设计需要高程,效果很好。 @AbdalrahmanShatou developer.android.com/reference/android/support/v7/widget/… 有相应的属性。您是否尝试将它们设置为“0”? 一个缺点是不支持 非常适合 API => 27,我使用 MaterialCardView 和 app:cardCornerRadius、app:strokeColor、app:strokeWidth 和 app:cardElevation = 0dp【参考方案3】:shape.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#f6eef1" />
<stroke
android:
android:color="#000000" />
<padding
android:bottom="5dp"
android:left="5dp"
android:right="5dp"
android:top="5dp" />
<corners android:radius="5dp" />
</shape>
在你的内部布局
<LinearLayout
android:orientation="vertical"
android:layout_
android:layout_
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginBottom="10dp"
android:clipChildren="true"
android:background="@drawable/shape">
<ImageView
android:layout_
android:layout_
android:src="@drawable/your image"
android:background="@drawable/shape">
</LinearLayout>
【讨论】:
@Zach:它以什么方式失败了?与您提出原始问题时应用的工作方式相同? clipChildren 没用,图像视图仍然延伸到视图之外。 我希望我能给你一个赏金。谢谢 如果图像是矩形图像,我认为这种方法行不通,因为背景将绘制在图像内容的后面。这可能仅适用于具有透明度且本身具有圆角的图像。【参考方案4】:Jaap van Hengstum's answer 效果很好,但我认为它很昂贵,如果我们将这种方法应用到 Button 上,触摸效果会丢失,因为视图被渲染为位图。
对我来说,最好也是最简单的方法是在视图上应用蒙版,如下所示:
@Override
protected void onSizeChanged(int width, int height, int oldWidth, int oldHeight)
super.onSizeChanged(width, height, oldWidth, oldHeight);
float cornerRadius = <whatever_you_want>;
this.path = new Path();
this.path.addRoundRect(new RectF(0, 0, width, height), cornerRadius, cornerRadius, Path.Direction.CW);
@Override
protected void dispatchDraw(Canvas canvas)
if (this.path != null)
canvas.clipPath(this.path);
super.dispatchDraw(canvas);
【讨论】:
这个怎么用? @MaksimKniazev 创建一个你想要的布局的子类(例如:FrameLayout),然后将这两个方法粘贴到这个子类中,并用你想要的圆角半径值替换'在drawable
文件夹中创建一个名为round.xml
的xml 文件并粘贴此内容:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid android:color="#FFFFFF" />
<stroke android: android:color="#d2d2d2" />
<corners android:topLeftRadius="5dp" android:topRightRadius="5dp" android:bottomRightRadius="5dp" android:bottomLeftRadius="5dp"/>
</shape>
然后将round.xml
作为background
用于任何项目。然后它会给你圆角。
【讨论】:
【参考方案6】:如果您在向布局添加触摸侦听器时遇到问题。将此布局用作父布局。
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.RectF;
import android.graphics.Region;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.util.TypedValue;
import android.view.View;
import android.widget.FrameLayout;
public class RoundedCornerLayout extends FrameLayout
private final static float CORNER_RADIUS = 6.0f;
private float cornerRadius;
public RoundedCornerLayout(Context context)
super(context);
init(context, null, 0);
public RoundedCornerLayout(Context context, AttributeSet attrs)
super(context, attrs);
init(context, attrs, 0);
public RoundedCornerLayout(Context context, AttributeSet attrs, int defStyle)
super(context, attrs, defStyle);
init(context, attrs, defStyle);
private void init(Context context, AttributeSet attrs, int defStyle)
DisplayMetrics metrics = context.getResources().getDisplayMetrics();
cornerRadius = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, CORNER_RADIUS, metrics);
setLayerType(View.LAYER_TYPE_SOFTWARE, null);
@Override
protected void dispatchDraw(Canvas canvas)
int count = canvas.save();
final Path path = new Path();
path.addRoundRect(new RectF(0, 0, canvas.getWidth(), canvas.getHeight()), cornerRadius, cornerRadius, Path.Direction.CW);
canvas.clipPath(path, Region.Op.REPLACE);
canvas.clipPath(path);
super.dispatchDraw(canvas);
canvas.restoreToCount(count);
作为
<?xml version="1.0" encoding="utf-8"?>
<com.example.view.RoundedCornerLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_
android:layout_>
<RelativeLayout
android:id="@+id/patentItem"
android:layout_
android:layout_
android:paddingRight="20dp">
... your child goes here
</RelativeLayout>
</com.example.view.RoundedCornerLayout>
【讨论】:
如果屏幕上没有太多动画效果很好,这会使屏幕反复绘制多次;因为,它会严重降低性能。应该尝试cardview,它有一个有效的圆角方法(不使用剪切路径或canvas.drawRoundRect - 在API 17下面不好,但使用porterFilterDuffColor)【参考方案7】:使用材质组件库制作带圆角的View
的最佳方法是使用MaterialShapeDrawable
。
创建一个带有自定义圆角的 ShapeAppearanceModel:
ShapeAppearanceModel shapeAppearanceModelLL1 = new ShapeAppearanceModel()
.toBuilder()
.setAllCorners(CornerFamily.ROUNDED,radius16)
.build();
创建MaterialShapeDrawable
:
MaterialShapeDrawable shapeDrawableLL1 = new MaterialShapeDrawable(shapeAppearanceModeLL1);
如果您还想为深色主题应用elevationOverlay,请使用:
MaterialShapeDrawable shapeDrawableLL1 = MaterialShapeDrawable.createWithElevationOverlay(this, 4.0f);
shapeDrawableLL1.setShapeAppearanceModel(shapeAppearanceModelLL1);
可选:对 shapeDrawable 应用背景颜色和描边
shapeDrawableLL1.setFillColor(
ContextCompat.getColorStateList(this,R.color...));
shapeDrawableLL1.setStrokeWidth(2.0f);
shapeDrawableLL1.setStrokeColor(
ContextCompat.getColorStateList(this,R.color...));
最后在LinearLayout
(或其他视图)中应用 shapeDrawable 作为背景:
LinearLayout linearLayout1= findViewById(R.id.ll_1);
ViewCompat.setBackground(linearLayout1,shapeDrawableLL1);
【讨论】:
应该是公认的答案。迄今为止最简单的解决方案!【参考方案8】:在 Android L 中,您只需使用 View.setClipToOutline 即可获得该效果。在以前的版本中,无法将随机 ViewGroup 的内容裁剪为特定形状。
你必须想出一些能给你类似效果的东西:
如果您只需要 ImageView 中的圆角,您可以使用着色器在您用作背景的形状上“绘制”图像。以this library 为例。
如果你真的需要每个孩子都被剪裁,也许你可以在你的布局上换一个视图?一个背景是你使用的任何颜色,中间有一个圆形“洞”?您实际上可以创建一个自定义 ViewGroup,在覆盖 onDraw 方法的每个孩子上绘制该形状。
【讨论】:
【参考方案9】:使用以下代码在您的可绘制文件夹下创建一个 xml 文件。 (我创建的文件名是rounded_corner.xml)
rounded_corner.xml
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<!-- view background color -->
<solid
android:color="#a9c5ac" >
</solid>
<!-- view border color and width -->
<stroke
android:
android:color="#1c1b20" >
</stroke>
<!-- If you want to add some padding -->
<padding
android:left="4dp"
android:top="4dp"
android:right="4dp"
android:bottom="4dp" >
</padding>
<!-- Here is the corner radius -->
<corners
android:radius="10dp" >
</corners>
</shape>
并将此drawable
保留为background
,以获取要保留圆角边框的视图。让我们把它留给LinearLayout
<LinearLayout android:layout_
android:layout_
android:background="@drawable/rounded_corner"
android:layout_centerInParent="true">
<TextView android:layout_
android:layout_
android:text="Hi, This layout has rounded corner borders ..."
android:gravity="center"
android:padding="5dp"/>
</LinearLayout>
【讨论】:
【参考方案10】:如果你想绕过某个特定的角落。
fun setCorners()
val mOutlineProvider = object : ViewOutlineProvider()
override fun getOutline(view: View, outline: Outline)
val left = 0
val top = 0;
val right = view.width
val bottom = view.height
val cornerRadiusDP = 16f
val cornerRadius = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, cornerRadiusDP, resources.displayMetrics).toInt()
// all corners
outline.setRoundRect(left, top, right, bottom, cornerRadius.toFloat())
/* top corners
outline.setRoundRect(left, top, right, bottom+cornerRadius, cornerRadius.toFloat())*/
/* bottom corners
outline.setRoundRect(left, top - cornerRadius, right, bottom, cornerRadius.toFloat())*/
/* left corners
outline.setRoundRect(left, top, right + cornerRadius, bottom, cornerRadius.toFloat())*/
/* right corners
outline.setRoundRect(left - cornerRadius, top, right, bottom, cornerRadius.toFloat())*/
/* top left corner
outline.setRoundRect(left , top, right+ cornerRadius, bottom + cornerRadius, cornerRadius.toFloat())*/
/* top right corner
outline.setRoundRect(left - cornerRadius , top, right, bottom + cornerRadius, cornerRadius.toFloat())*/
/* bottom left corner
outline.setRoundRect(left, top - cornerRadius, right + cornerRadius, bottom, cornerRadius.toFloat())*/
/* bottom right corner
outline.setRoundRect(left - cornerRadius, top - cornerRadius, right, bottom, cornerRadius.toFloat())*/
myView.apply
outlineProvider = mOutlineProvider
clipToOutline = true
可用于具有如下所示子级的 LinearLayout:
到这里:
【讨论】:
好答案!非常适合内部有多个视图的布局,我想把外面的盒子弄圆。【参考方案11】:CardView
在 Android Studio 3.0.1 的 API 27 中为我工作。 colorPrimary
在 res/values/colors.xml
文件中被引用,这只是一个示例。对于0dp
的 layout_width,它将拉伸到父级的宽度。您必须根据需要配置约束和宽度/高度。
<android.support.v7.widget.CardView
android:id="@+id/cardView"
android:layout_
android:layout_
app:cardCornerRadius="4dp"
app:cardBackgroundColor="@color/colorPrimary">
<!-- put your content here -->
</android.support.v7.widget.CardView>
【讨论】:
【参考方案12】:您可以像这样使用androidx.cardview.widget.CardView
:
<androidx.cardview.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_
android:layout_
app:cardCornerRadius="@dimen/dimen_4"
app:cardElevation="@dimen/dimen_4"
app:contentPadding="@dimen/dimen_10">
...
</androidx.cardview.widget.CardView>
或
shape.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#f6eef1" />
<stroke
android:
android:color="#000000" />
<padding
android:bottom="5dp"
android:left="5dp"
android:right="5dp"
android:top="5dp" />
<corners android:radius="5dp" />
</shape>
在你的内部布局
<LinearLayout
android:orientation="vertical"
android:layout_
android:layout_
android:background="@drawable/shape">
...
</LinearLayout>
【讨论】:
【参考方案13】:使用 com.google.android.material:material:1.2.0-beta01 创建圆角图像
float radius = context.getResources().getDimension(R.dimen.border_radius_hug);
shapeAppearanceModel = new ShapeAppearanceModel()
.toBuilder()
.setAllCorners(CornerFamily.ROUNDED,radius)
.build();
imageView.setShapeAppearanceModel(shapeAppearanceModel)
或者如果你想在 xml 文件中使用它:
<com.google.android.material.imageview.ShapeableImageView
android:id="@+id/thumb"
android:layout_
android:layout_
app:shapeAppearanceOverlay="@style/circleImageView"
/>
在 style.xml 中添加:
<style name="circleImageView" parent="">
<item name="cornerFamily">rounded</item>
<item name="cornerSize">10%</item>
</style>
【讨论】:
【参考方案14】:按照本教程以及它下面的所有讨论 - http://www.curious-creature.org/2012/12/11/android-recipe-1-image-with-rounded-corners/
根据整个 Android UI 工具包的主要开发人员之一 Guy Romain 撰写的这篇文章,可以制作一个带有圆角的容器(以及他的所有子视图),但他解释说它太贵了(来自渲染问题的表现)。
我会建议你按照他的帖子去,如果你想要圆角,然后根据这个帖子实现圆角ImageView
。然后,你可以把它放在一个任何背景的容器里,你会得到你想要的效果。
这也是我最终所做的。
【讨论】:
【参考方案15】:public class RoundedCornerLayout extends FrameLayout
private double mCornerRadius;
public RoundedCornerLayout(Context context)
this(context, null, 0);
public RoundedCornerLayout(Context context, AttributeSet attrs)
this(context, attrs, 0);
public RoundedCornerLayout(Context context, AttributeSet attrs, int defStyle)
super(context, attrs, defStyle);
init(context, attrs, defStyle);
private void init(Context context, AttributeSet attrs, int defStyle)
DisplayMetrics metrics = context.getResources().getDisplayMetrics();
setLayerType(View.LAYER_TYPE_SOFTWARE, null);
public double getCornerRadius()
return mCornerRadius;
public void setCornerRadius(double cornerRadius)
mCornerRadius = cornerRadius;
@Override
public void draw(Canvas canvas)
int count = canvas.save();
final Path path = new Path();
path.addRoundRect(new RectF(0, 0, canvas.getWidth(), canvas.getHeight()), (float) mCornerRadius, (float) mCornerRadius, Path.Direction.CW);
canvas.clipPath(path, Region.Op.REPLACE);
canvas.clipPath(path);
super.draw(canvas);
canvas.restoreToCount(count);
【讨论】:
【参考方案16】:与 Jaap van Hengstum 的回答不同:
-
使用 BitmapShader 代替遮罩位图。
只创建一次位图。
public class RoundedFrameLayout extends FrameLayout
private Bitmap mOffscreenBitmap;
private Canvas mOffscreenCanvas;
private BitmapShader mBitmapShader;
private Paint mPaint;
private RectF mRectF;
public RoundedFrameLayout(Context context)
super(context);
init();
public RoundedFrameLayout(Context context, AttributeSet attrs)
super(context, attrs);
init();
public RoundedFrameLayout(Context context, AttributeSet attrs, int defStyleAttr)
super(context, attrs, defStyleAttr);
init();
private void init()
setWillNotDraw(false);
@Override
public void draw(Canvas canvas)
if (mOffscreenBitmap == null)
mOffscreenBitmap = Bitmap.createBitmap(canvas.getWidth(), canvas.getHeight(), Bitmap.Config.ARGB_8888);
mOffscreenCanvas = new Canvas(mOffscreenBitmap);
mBitmapShader = new BitmapShader(mOffscreenBitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mPaint.setShader(mBitmapShader);
mRectF = new RectF(0f, 0f, canvas.getWidth(), canvas.getHeight());
super.draw(mOffscreenCanvas);
canvas.drawRoundRect(mRectF, 8, 8, mPaint);
【讨论】:
【参考方案17】:您提供的教程链接似乎建议您需要将子元素的 layout_width 和 layout_height 属性设置为 match_parent。
<ImageView
android:layout_
android:layout_>
【讨论】:
【参考方案18】:用你的线性布局试试这个属性,它会有所帮助 工具:context=".youractivity"
【讨论】:
【参考方案19】:public static Bitmap getRoundedCornerBitmap(Bitmap bitmap, int pixels)
Bitmap roundedBitmap = Bitmap.createBitmap(bitmap.getWidth(), bitmap
.getHeight(), Config.ARGB_8888);
Canvas canvas = new Canvas(roundedBitmap);
final int color = 0xff424242;
final Paint paint = new Paint();
final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
final RectF rectF = new RectF(rect);
final float roundPx = pixels;
paint.setAntiAlias(true);
canvas.drawARGB(0, 0, 0, 0);
paint.setColor(color);
canvas.drawRoundRect(rectF, roundPx, roundPx, paint);
paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
canvas.drawBitmap(bitmap, rect, rect, paint);
return roundedBitmap;
【讨论】:
【参考方案20】:在 xml 中使用带有矩形的形状。根据需要设置底部或上部半径的属性。然后将该 xml 作为背景应用到您的视图中......或者......使用渐变从代码中完成。
【讨论】:
我已经做过了,但是想知道有没有更好的方法? 请求者在他的问题中已经提到尝试这种方法。以上是关于如何用圆角制作视图?的主要内容,如果未能解决你的问题,请参考以下文章
如何用边框(阴影)包装 UICollectionView 部分和项目?
java在线聊天项目 使用SWT快速制作登录窗口,可视化窗口Design 更换窗口默认皮肤(切换Swing自带的几种皮肤如矩形带圆角)