[英]Imageview not showing rounded corners
我正在嘗試使我的布局像這樣,但我無法使我的 imageview 像這樣帶有圓角。 它在 Android 工作室的布局編輯器中完美顯示,但在真實設備中我得到了平角。 我厭倦了 XML 以及代碼,但沒有一個對我有用。 請幫我制作像這個示例圖像一樣的布局。
我的布局文件
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:clickable="true"
android:background="?android:attr/colorBackground"
android:focusable="true">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="170dp"
android:paddingBottom="10dp"
android:paddingTop="10dp"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:paddingStart="5dp"
android:paddingEnd="5dp"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_alignParentEnd="true">
<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/User_CoverPhoto"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
<ImageView
android:layout_width="150dp"
android:layout_height="match_parent"
android:layout_marginEnd="8dp"
android:background="@drawable/round_shape_only"
android:scaleType="centerCrop"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/User_CoverPhoto"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/User_ProfilePictures"
app:layout_constraintTop_toTopOf="parent"
/>
<ImageView
android:layout_width="230dp"
android:layout_height="match_parent"
android:background="@drawable/round_shape_only"
android:scaleType="centerCrop"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/User_ProfilePictures"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:background="#40000000"
android:backgroundTint="#CC000000"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:text="Profile Picture"
android:textColor="@color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="@+id/User_ProfilePictures"
app:layout_constraintHorizontal_bias="0.01"
app:layout_constraintStart_toStartOf="@+id/User_ProfilePictures" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:background="#40000000"
android:backgroundTint="#CC000000"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:text="Cover Photo"
android:textColor="@color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="@+id/User_CoverPhoto" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.recyclerview.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipToPadding="false"
android:paddingTop="13dp"
android:id="@+id/Grid_Recycler">
</androidx.recyclerview.widget.RecyclerView>
</RelativeLayout>
XML 圓形
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#CCCCCC"/>
<padding android:left="1dp"
android:top="1dp"
android:right="1dp"
android:bottom="1dp"/>
<corners android:radius="15dp"/>
</shape>
只需使用 Material Components 庫中的ShapeableImageView
。
就像是:
<com.google.android.material.imageview.ShapeableImageView
...
app:shapeAppearanceOverlay="@style/roundedCornersImageView"
app:srcCompat="@drawable/ic_image" />
和:
<style name="roundedCornersImageView" parent="">
<item name="cornerFamily">rounded</item>
<item name="cornerSize">xxdp</item>
</style>
*注意:它至少需要1.2.0-alpha03
版本。
您可以使用滑翔
只需為 ImageView 編寫擴展名 function:
制作圓角矩形圖像
fun ImageView.loadImageWithCustomCorners(@DrawableRes resId: Int, radius: Int) = Glide.with(this).load(resId).transform(RoundedCorners(radius)).into(this)
制作帶圓角的方形圖像
fun ImageView.loadImageWithCustomCorners(@DrawableRes resId: Int, radius: Int) = Glide.with(this).load(resId).transform(CenterCrop(), RoundedCorners(radius)).into(this)
在代碼中使用
iv_service_avatar.loadImageWithCustomCorners(R.drawable.ic_default_avatar, 15)
iv_service_avatar 是 ImageView ID
當使用具有radius
的background
時,您應該調用setClipToOutline
為true
,它只能以編程方式調用,不能由 XML 設置
imageView.setClipToOutline(true);
您可以將ImageView
放入CardView
並使用app:cardCornerRadius
設置圖像角
對於圓角,您可以使用以下自定義布局:
Java:圓角圖像布局。java
public class RoundedCornerImageLayout extends FrameLayout {
private final static float CORNER_RADIUS = 10.0f;
private float cornerRadius;
public RoundedCornerImageLayout(Context context) {
super(context);
init(context, null, 0);
}
public RoundedCornerImageLayout(Context context, AttributeSet attrs) {
super(context, attrs);
init(context, attrs, 0);
}
public RoundedCornerImageLayout(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.INTERSECT);
canvas.clipPath(path);
super.dispatchDraw(canvas);
canvas.restoreToCount(count);
}
}
您可以更改private final static float CORNER_RADIUS = 10.0f;
根據您的要求
在 XMl 文件中
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".RoundedImageViewActivity">
<com.example.stackdemo.ui.RoundedCornerImageLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent">
<ImageView
android:layout_width="150dp"
android:layout_height="150dp"
android:src="@drawable/ocean"
android:scaleType="centerCrop"/>
</com.example.stackdemo.ui.RoundedCornerImageLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
上述代碼的 Output 是:
我希望這可以幫助你
以這種方式使用androidx.cardview.widget.CardView
:
<androidx.cardview.widget.CardView
android:layout_width="148dp"
android:layout_height="148dp"
card_view:cardCornerRadius="4dp"
>
<ImageView
android:id="@+id/some_id"
android:layout_width="148dp"
android:layout_height="148dp"
android:layout_gravity="center_vertical"
android:radius="10dp"
android:scaleType="fitXY"
tools:background="#EDEDED" />
</androidx.cardview.widget.CardView>
card_view
將無法解析,因此為了解決它,請將xmlns:card_view="http://schemas.android.com/apk/res-auto"
添加到根元素。
這是文檔的鏈接: https://developer.android.com/guide/topics/ui/layout/cardview#CardView
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.