所需的设计是一个可滚动的屏幕,其中有3到4个几乎相似的块:
这就是我一直在尝试的
<?xml version="1.0" encoding="utf-8"?>
<androidx.core.widget.NestedScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:custom="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fillViewport="true"
android:background="@color/colorWhite"
tools:context=".MainActivity">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.santalu.diagonalimageview.DiagonalImageView
android:id="@+id/image"
android:layout_width="match_parent"
android:layout_height="350dp"
android:scaleType="centerCrop"
android:src="@drawable/demo"
app:di_borderColor="#FF5722"
app:di_borderEnabled="false"
app:di_direction="left"
app:di_overlap="60dp"
app:di_position="bottom" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_margin="16dp"
android:text="Maternity care plan"
android:textColor="#040303"
android:textSize="20sp" />
<TextView
android:id="@+id/tv2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="240dp"
android:text="Maternity care plan"
android:textColor="#050505"
android:textSize="20sp" />
<com.example.diagnalimageview.DividerView
android:id="@+id/line1"
android:layout_width="4dp"
android:layout_height="150dp"
android:layout_below="@+id/tv2"
android:layout_centerHorizontal="true"
android:layerType="software"
custom:color="#050505"
custom:dashGap="2dp"
custom:dashLength="5dp"
custom:dashThickness="1dp"
custom:orientation="vertical" />
<!-- A CardView that contains a TextView -->
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/pregnancy_plane_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@id/line1"
android:layout_centerHorizontal="true"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp">
<RelativeLayout
android:id="@+id/circle_progress_container"
android:layout_width="75dp"
android:layout_height="75dp"
android:translationZ="90dp"
custom:layout_constraintEnd_toEndOf="parent"
custom:layout_constraintStart_toStartOf="parent"
custom:layout_constraintTop_toTopOf="parent">
<com.timqi.sectorprogressview.ColorfulRingProgressView
android:id="@+id/circle_progress"
android:layout_width="75dp"
android:layout_height="75dp"
app:bgColor="#e1e1e1"
app:fgColorEnd="#5900FF"
app:fgColorStart="#5900FF"
app:percent="0"
app:startAngle="0"
app:strokeWidth="8dp"
android:background="@color/colorWhite"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0%"
android:layout_centerInParent="true"/>
</RelativeLayout>
<!--determine center to circular shape-->
<Button
android:id="@+id/dummy_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Dummy view"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="@id/circle_progress_container"
app:layout_constraintEnd_toEndOf="@id/circle_progress_container"
app:layout_constraintStart_toStartOf="@+id/circle_progress_container"
app:layout_constraintTop_toTopOf="@id/circle_progress_container"
tools:ignore="HardcodedText" />
<androidx.cardview.widget.CardView
android:id="@+id/pregnancy_plane"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
app:cardElevation="12dp"
app:cardUseCompatPadding="true"
android:translationY="-20dp"
app:layout_constraintTop_toBottomOf="@+id/dummy_view"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
card_view:cardBackgroundColor="@color/colorPrimary"
card_view:contentPadding="1dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="@color/colorWhite">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="48dp"
android:gravity="center"
android:text="PLAN YOUT PREGNANCY\nTHE WAY YOU WANT"
android:textSize="20sp" />
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="center"
android:layout_margin="32dp"
android:src="@mipmap/ic_launcher" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorPrimary"
android:text="PLANNING MY PREGNANCY"
android:textSize="20sp" />
</LinearLayout>
</androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>
<com.example.diagnalimageview.DividerView
android:id="@+id/line2"
android:layout_width="4dp"
android:layout_height="150dp"
android:layout_below="@+id/pregnancy_plane_container"
android:layout_centerHorizontal="true"
android:translationY="-36dp"
android:layerType="software"
custom:color="#050505"
custom:dashGap="2dp"
custom:dashLength="5dp"
custom:dashThickness="1dp"
custom:orientation="vertical" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@id/line2"
android:layout_centerHorizontal="true"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp">
<RelativeLayout
android:id="@+id/circle_progress_container2"
android:layout_width="75dp"
android:layout_height="75dp"
android:translationZ="90dp"
custom:layout_constraintEnd_toEndOf="parent"
custom:layout_constraintStart_toStartOf="parent"
custom:layout_constraintTop_toTopOf="parent">
<com.timqi.sectorprogressview.ColorfulRingProgressView
android:id="@+id/pregnancy_choices_progress"
android:layout_width="75dp"
android:layout_height="75dp"
android:background="@color/colorWhite"
app:bgColor="#e1e1e1"
app:fgColorEnd="#5900FF"
app:fgColorStart="#5900FF"
app:percent="0"
app:startAngle="0"
app:strokeWidth="8dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="0%" />
</RelativeLayout>
<!--determine center to circular shape-->
<Button
android:id="@+id/dummy_view2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Dummy view"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="@id/circle_progress_container2"
app:layout_constraintEnd_toEndOf="@id/circle_progress_container2"
app:layout_constraintStart_toStartOf="@+id/circle_progress_container2"
app:layout_constraintTop_toTopOf="@id/circle_progress_container2"
tools:ignore="HardcodedText" />
<androidx.cardview.widget.CardView
android:id="@+id/pregnancy_choices"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:translationY="-20dp"
app:cardElevation="12dp"
app:cardUseCompatPadding="true"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/dummy_view2"
card_view:cardBackgroundColor="@color/colorPrimary"
card_view:contentPadding="1dp">
<!--<androidx.cardview.widget.CardView
android:id="@+id/card_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
app:layout_constraintTop_toBottomOf="@+id/dummy_view">-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorWhite"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="48dp"
android:gravity="center"
android:text="PLAN YOUT PREGNANCY\nTHE WAY YOU WANT"
android:textSize="20sp" />
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="center"
android:layout_margin="32dp"
android:src="@mipmap/ic_launcher" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorPrimary"
android:text="PLANNING MY PREGNANCY"
android:textSize="20sp" />
</LinearLayout>
<!-- </androidx.cardview.widget.CardView>-->
</androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>
</RelativeLayout>
</androidx.core.widget.NestedScrollView>
现在的问题是块视图层次结构是
ConstraintLayout
RelativeLayout. -for progress chart
Button(dummyview) -to determine center of progress chart
cardview -to give elevated look I used compact padding 12dp
填充在约束布局和cardview之间形成了底部空间。所以当我试着在第一块和第二块之间画垂直线的时候。第一行是比我用translationY= -12dp修复的块低12dp,但现在垂直线正在接触第二个块。
我的输出:
发布于 2020-08-10 19:56:53
我设法解决了这个问题,用LinearLayout替换了cardview,并对LinearLayout使用了可绘制的阴影,使其看起来像cardview。
https://stackoverflow.com/questions/63143150
复制相似问题