recyclerview 中的项目重叠
Item overlap in recyclerview
我想在回收站视图中将第一项重叠在第二项上。
这就是我想要达到的效果:
这是我的回收站视图现在的样子:
[]
绿色边框内的内容实际上是一个 recyclerView 父 recycler view 中的第一项,评级栏布局是父 recyclerview 中的第二项。
请建议我如何将第一项重叠到第二项
我试过了
item_rating_layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
style="@style/LayoutHeightWrapWidthMatchStyling"
android:layout_width="match_parent"
android:gravity="center_horizontal"
android:orientation="vertical"
android:padding="@dimen/padding_large">
<TextView
android:id="@+id/tvRatingMessage"
style="@style/TextStyleNormal.XXLarge"
android:text="@string/rating_exp" />
<RatingBar
android:id="@+id/ratingBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="@dimen/margin_medium"
android:numStars="5"
android:progressBackgroundTint="@color/gray"
android:stepSize="1.0"
android:progressTint="@color/primaryColor"
android:rating="2.5" />
<TextView
android:id="@+id/tvWriteFeedBack"
style="@style/TextStyleNormal.XXXLarge.primary"
android:padding="@dimen/padding_medium"
android:text="Write Feedback"
android:visibility="gone" />
</LinearLayout>
item_recycler_view:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tool="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/margin_24dp"
android:layout_marginEnd="@dimen/margin_24dp"
android:background="@color/warranty_card_background">
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/btn_shap_without_solid_green"
android:gravity="center_horizontal"
android:orientation="vertical">
<ImageView
android:id="@+id/ivProductImage"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginTop="@dimen/margin_medium"
android:scaleType="fitXY"
app:srcCompat="@drawable/ic_original_placeholder" />
<TextView
android:id="@+id/tvName"
style="@style/TextStyleNormal.XXLarge.black"
android:textStyle="bold"
tool:text="Steelbird Air" />
<TextView
android:id="@+id/tvModel"
style="@style/TextStyleNormal.XXLarge"
tool:text="SBA-2 Horn Matt Black With Red " />
<TextView
android:id="@+id/tvId"
style="@style/TextStyleNormal.XXLarge.gray"
android:text="@string/product_id" />
<TextView
android:id="@+id/tvViewProductDetails"
style="@style/TextStyleNormal.XLarge.primary"
android:text="View product Details" />
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/rvWarrantyCard"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/margin_medium"
android:layout_marginBottom="@dimen/margin_medium">
</androidx.recyclerview.widget.RecyclerView>
</LinearLayout>
</androidx.core.widget.NestedScrollView>
</LinearLayout>
使用主布局Relative否则Frame布局
您可以使用以下 ItemDecoration:
public class OverlapDecoration extends RecyclerView.ItemDecoration {
private final static int vertOverlap = -90;
@Override
public void getItemOffsets (Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
outRect.set(0, vertOverlap, 0, 0);
}
}
现在,当您添加上面的装饰时,您的下一行将绘制在您的前一行之上。要纠正此问题,请使用 setReverseLayout(true)
使您的 recyclerview 反向
可以参考 几乎一样的要求
我只是在第一个项目的底部添加了一些与评级栏背景相同的颜色,以某种方式解决了我的问题。
现在这是最终的 xml 相似之处:
item_recycler_view:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tool="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:id="@+id/llOverlapView"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_gravity="bottom"
android:background="@color/rating_bar"
android:orientation="vertical"/>
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginStart="@dimen/margin_24dp"
android:layout_marginEnd="@dimen/margin_24dp"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/btn_shap_without_solid_green"
android:gravity="center_horizontal"
android:orientation="vertical">
<ImageView
android:id="@+id/ivProductImage"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginTop="@dimen/margin_medium"
android:scaleType="fitXY"
app:srcCompat="@drawable/ic_original_placeholder" />
<TextView
android:id="@+id/tvName"
style="@style/TextStyleNormal.XXLarge.black"
android:textStyle="bold"
tool:text="Steelbird Air" />
<TextView
android:id="@+id/tvModel"
style="@style/TextStyleNormal.XXLarge"
tool:text="SBA-2 Horn Matt Black With Red " />
<TextView
android:id="@+id/tvId"
style="@style/TextStyleNormal.XXLarge.gray"
android:text="@string/product_id" />
<TextView
android:id="@+id/tvViewProductDetails"
style="@style/TextStyleNormal.XLarge.primary"
android:text="View product Details" />
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/rvWarrantyCard"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/margin_medium"
android:layout_marginBottom="@dimen/margin_medium">
</androidx.recyclerview.widget.RecyclerView>
</LinearLayout>
</androidx.core.widget.NestedScrollView>
</FrameLayout>
非常感谢@Pawel
我想在回收站视图中将第一项重叠在第二项上。
这就是我想要达到的效果:
这是我的回收站视图现在的样子:
[
绿色边框内的内容实际上是一个 recyclerView 父 recycler view 中的第一项,评级栏布局是父 recyclerview 中的第二项。
请建议我如何将第一项重叠到第二项
我试过了
item_rating_layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
style="@style/LayoutHeightWrapWidthMatchStyling"
android:layout_width="match_parent"
android:gravity="center_horizontal"
android:orientation="vertical"
android:padding="@dimen/padding_large">
<TextView
android:id="@+id/tvRatingMessage"
style="@style/TextStyleNormal.XXLarge"
android:text="@string/rating_exp" />
<RatingBar
android:id="@+id/ratingBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="@dimen/margin_medium"
android:numStars="5"
android:progressBackgroundTint="@color/gray"
android:stepSize="1.0"
android:progressTint="@color/primaryColor"
android:rating="2.5" />
<TextView
android:id="@+id/tvWriteFeedBack"
style="@style/TextStyleNormal.XXXLarge.primary"
android:padding="@dimen/padding_medium"
android:text="Write Feedback"
android:visibility="gone" />
</LinearLayout>
item_recycler_view:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tool="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/margin_24dp"
android:layout_marginEnd="@dimen/margin_24dp"
android:background="@color/warranty_card_background">
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/btn_shap_without_solid_green"
android:gravity="center_horizontal"
android:orientation="vertical">
<ImageView
android:id="@+id/ivProductImage"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginTop="@dimen/margin_medium"
android:scaleType="fitXY"
app:srcCompat="@drawable/ic_original_placeholder" />
<TextView
android:id="@+id/tvName"
style="@style/TextStyleNormal.XXLarge.black"
android:textStyle="bold"
tool:text="Steelbird Air" />
<TextView
android:id="@+id/tvModel"
style="@style/TextStyleNormal.XXLarge"
tool:text="SBA-2 Horn Matt Black With Red " />
<TextView
android:id="@+id/tvId"
style="@style/TextStyleNormal.XXLarge.gray"
android:text="@string/product_id" />
<TextView
android:id="@+id/tvViewProductDetails"
style="@style/TextStyleNormal.XLarge.primary"
android:text="View product Details" />
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/rvWarrantyCard"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/margin_medium"
android:layout_marginBottom="@dimen/margin_medium">
</androidx.recyclerview.widget.RecyclerView>
</LinearLayout>
</androidx.core.widget.NestedScrollView>
</LinearLayout>
使用主布局Relative否则Frame布局
您可以使用以下 ItemDecoration:
public class OverlapDecoration extends RecyclerView.ItemDecoration {
private final static int vertOverlap = -90;
@Override
public void getItemOffsets (Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
outRect.set(0, vertOverlap, 0, 0);
}
}
现在,当您添加上面的装饰时,您的下一行将绘制在您的前一行之上。要纠正此问题,请使用 setReverseLayout(true)
可以参考
我只是在第一个项目的底部添加了一些与评级栏背景相同的颜色,以某种方式解决了我的问题。
现在这是最终的 xml 相似之处:
item_recycler_view:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tool="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:id="@+id/llOverlapView"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_gravity="bottom"
android:background="@color/rating_bar"
android:orientation="vertical"/>
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginStart="@dimen/margin_24dp"
android:layout_marginEnd="@dimen/margin_24dp"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/btn_shap_without_solid_green"
android:gravity="center_horizontal"
android:orientation="vertical">
<ImageView
android:id="@+id/ivProductImage"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginTop="@dimen/margin_medium"
android:scaleType="fitXY"
app:srcCompat="@drawable/ic_original_placeholder" />
<TextView
android:id="@+id/tvName"
style="@style/TextStyleNormal.XXLarge.black"
android:textStyle="bold"
tool:text="Steelbird Air" />
<TextView
android:id="@+id/tvModel"
style="@style/TextStyleNormal.XXLarge"
tool:text="SBA-2 Horn Matt Black With Red " />
<TextView
android:id="@+id/tvId"
style="@style/TextStyleNormal.XXLarge.gray"
android:text="@string/product_id" />
<TextView
android:id="@+id/tvViewProductDetails"
style="@style/TextStyleNormal.XLarge.primary"
android:text="View product Details" />
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/rvWarrantyCard"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/margin_medium"
android:layout_marginBottom="@dimen/margin_medium">
</androidx.recyclerview.widget.RecyclerView>
</LinearLayout>
</androidx.core.widget.NestedScrollView>
</FrameLayout>
非常感谢@Pawel