CardView:让子项重叠
CardView: Let child item overlap
我的 RecyclerView 有问题。
我想设计一些如下所示的 CardView:
因此我需要左上角的ImageView与CardView重叠。我已经知道负边距的用法,但我的问题主要是
即使 clipToPadding 设置为 false,Cardviews 中的重叠也会被裁剪
有人解决这个问题吗?
只需将 ImageView
(Twitter 图标)elevation
设置得比 CardView
高。
将android:elevation="10dp"
设置为ImageView
并将card_view:cardElevation="2dp"
设置为CardView
。
举个例子:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="16dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true">
<android.support.v7.widget.CardView
android:id="@+id/card_view"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_marginTop="20dp"
card_view:cardElevation="2dp"
card_view:cardCornerRadius="4dp"
card_view:cardUseCompatPadding="false"
card_view:cardPreventCornerOverlap="false">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:scaleType="centerCrop"
android:src="@drawable/sample_1" />
<TextView
android:id="@+id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignBottom="@+id/image"
android:padding="8dp"
android:background="#CCFFFFFF"
android:text="This is simple title"
android:textColor="#000000" />
</RelativeLayout>
</android.support.v7.widget.CardView>
<ImageView
android:id="@+id/icon_play"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_marginLeft="10dp"
android:elevation="10dp"
android:src="@mipmap/ic_launcher"/>
</RelativeLayout>
</RelativeLayout>
输出:
希望对你有所帮助~
您可以尝试在 CardView 中创建另一个布局作为主要内容气泡,并为其添加顶部边距,而不是图像上的负边距(这可能是不可预测的)。
<CardView>
<FrameLayout
background="bubble"
marginTop="15dp">
<!-- stuff here -->
</FrameLayout>
<ImageView ... />
</CardView>
需要Overlap CardView的Child给child添加这个属性
Note : The child elevation must be greater than CardView elevation
android:elevation="10dp"
在Constraint layout中.....我已经做了左侧你可以根据你的要求改变。
<?xml version="1.0" encoding="utf-8"?>
<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=".SecondActivity">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent">
<androidx.cardview.widget.CardView
android:id="@+id/card"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_margin="20dp"
app:cardCornerRadius="100dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_margin="20dp"
android:src="@drawable/ic_box"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>
<ImageView
android:layout_width="20dp"
android:layout_height="30dp"
android:layout_marginStart="170dp"
android:layout_marginLeft="170dp"
android:layout_marginTop="25dp"
android:src="@drawable/ic_box"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
我的 RecyclerView 有问题。 我想设计一些如下所示的 CardView:
因此我需要左上角的ImageView与CardView重叠。我已经知道负边距的用法,但我的问题主要是
即使 clipToPadding 设置为 false,Cardviews 中的重叠也会被裁剪
有人解决这个问题吗?
只需将 ImageView
(Twitter 图标)elevation
设置得比 CardView
高。
将android:elevation="10dp"
设置为ImageView
并将card_view:cardElevation="2dp"
设置为CardView
。
举个例子:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="16dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true">
<android.support.v7.widget.CardView
android:id="@+id/card_view"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_marginTop="20dp"
card_view:cardElevation="2dp"
card_view:cardCornerRadius="4dp"
card_view:cardUseCompatPadding="false"
card_view:cardPreventCornerOverlap="false">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:scaleType="centerCrop"
android:src="@drawable/sample_1" />
<TextView
android:id="@+id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignBottom="@+id/image"
android:padding="8dp"
android:background="#CCFFFFFF"
android:text="This is simple title"
android:textColor="#000000" />
</RelativeLayout>
</android.support.v7.widget.CardView>
<ImageView
android:id="@+id/icon_play"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_marginLeft="10dp"
android:elevation="10dp"
android:src="@mipmap/ic_launcher"/>
</RelativeLayout>
</RelativeLayout>
输出:
希望对你有所帮助~
您可以尝试在 CardView 中创建另一个布局作为主要内容气泡,并为其添加顶部边距,而不是图像上的负边距(这可能是不可预测的)。
<CardView>
<FrameLayout
background="bubble"
marginTop="15dp">
<!-- stuff here -->
</FrameLayout>
<ImageView ... />
</CardView>
需要Overlap CardView的Child给child添加这个属性
Note : The child elevation must be greater than CardView elevation
android:elevation="10dp"
在Constraint layout中.....我已经做了左侧你可以根据你的要求改变。
<?xml version="1.0" encoding="utf-8"?>
<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=".SecondActivity">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent">
<androidx.cardview.widget.CardView
android:id="@+id/card"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_margin="20dp"
app:cardCornerRadius="100dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_margin="20dp"
android:src="@drawable/ic_box"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>
<ImageView
android:layout_width="20dp"
android:layout_height="30dp"
android:layout_marginStart="170dp"
android:layout_marginLeft="170dp"
android:layout_marginTop="25dp"
android:src="@drawable/ic_box"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>