Question

因此，我目前正在开发一个Android应用程序，该应用程序需要一个有趣的设计，以便将卡片列表显示为交替的时间轴，如下所示（它的快速模型）：

现在我正在使用RecyclerView和RecyclerAdapter来容纳物品并处理数据集更改，我的问题是卡片项目本身。

无论每个项目位于左侧还是右侧，我都有两个视图，如下所示：

routes_item_right.xml

<?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:tools="http://schemas.android.com/tools"
              android:layout_height="wrap_content"
              android:layout_width="match_parent"
              android:orientation="horizontal"
              android:layoutDirection="rtl">

    <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layoutDirection="rtl"
            android:background="@drawable/route_info_popup_border">

        <TextView
                android:id="@+id/tv_route_name"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:textColor="@color/colorPrimary"
                android:textSize="14sp"
                tools:text="@string/app_name"
                android:fontFamily="@font/cairo_semibold"
                android:layout_marginStart="8dp"
                app:layout_constraintStart_toStartOf="parent"
                android:layout_marginTop="8dp"
                app:layout_constraintTop_toTopOf="parent"
                android:layout_marginEnd="8dp"
                app:layout_constraintEnd_toStartOf="@+id/guideline" />

        <TextView
                android:id="@+id/tv_route_city"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                tools:text="@string/app_name"
                android:fontFamily="@font/cairo"
                android:layout_marginTop="8dp"
                app:layout_constraintTop_toBottomOf="@+id/tv_route_name"
                android:layout_marginStart="8dp"
                app:layout_constraintStart_toStartOf="parent" />

        <ImageView
                android:id="@+id/img_hr_separator"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:srcCompat="@drawable/dots_horizontal"
                app:layout_constraintStart_toEndOf="@+id/tv_route_city"
                android:layout_marginStart="8dp"
                app:layout_constraintTop_toTopOf="@+id/tv_route_city"
                app:layout_constraintBottom_toBottomOf="@+id/tv_route_city" />

        <TextView
                android:id="@+id/tv_route_destination"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                tools:text="@string/app_name"
                android:fontFamily="@font/cairo"
                app:layout_constraintBaseline_toBaselineOf="@+id/tv_route_city"
                app:layout_constraintStart_toEndOf="@+id/img_hr_separator"
                android:layout_marginStart="8dp"
                app:layout_constraintEnd_toEndOf="@+id/guideline"
                android:layout_marginEnd="8dp" />

        <TextView
                android:id="@+id/tv_weekly_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:drawableStart="@drawable/circle"
                android:text="@string/weekly"
                android:drawableTint="@color/weekly_circle"
                android:drawablePadding="4dp"
                android:textSize="12sp"
                android:fontFamily="@font/cairo"
                android:layout_marginStart="8dp"
                app:layout_constraintStart_toStartOf="parent"
                android:layout_marginTop="8dp"
                app:layout_constraintTop_toBottomOf="@+id/tv_route_city" />

        <TextView
                android:id="@+id/tv_monthly_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:layout_constraintStart_toEndOf="@+id/tv_weekly_title"
                android:drawableStart="@drawable/circle"
                android:text="@string/monthly"
                android:drawableTint="@color/monthly_circle"
                android:drawablePadding="4dp"
                android:textSize="12sp"
                android:fontFamily="@font/cairo"
                android:layout_marginStart="16dp"
                app:layout_constraintBaseline_toBaselineOf="@+id/tv_weekly_title" />

        <TextView
                android:id="@+id/tv_seasonal_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:drawableStart="@drawable/circle"
                android:text="@string/seasonal"
                android:drawableTint="@color/seasonal_circle"
                android:drawablePadding="4dp"
                android:textSize="12sp"
                android:fontFamily="@font/cairo"
                app:layout_constraintBaseline_toBaselineOf="@+id/tv_monthly_title"
                app:layout_constraintStart_toEndOf="@+id/tv_monthly_title"
                android:layout_marginStart="16dp" />

        <TextView
                android:id="@+id/tv_weekly_price"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="12sp"
                android:fontFamily="@font/cairo"
                app:layout_constraintTop_toBottomOf="@id/tv_weekly_title"
                app:layout_constraintStart_toStartOf="@id/tv_weekly_title" />

        <TextView
                android:id="@+id/tv_monthly_price"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="12sp"
                android:fontFamily="@font/cairo"
                app:layout_constraintTop_toBottomOf="@id/tv_monthly_title"
                app:layout_constraintStart_toStartOf="@id/tv_monthly_title" />

        <TextView
                android:id="@+id/tv_seasonal_price"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="12sp"
                android:fontFamily="@font/cairo"
                app:layout_constraintTop_toBottomOf="@id/tv_seasonal_title"
                app:layout_constraintStart_toStartOf="@id/tv_seasonal_title" />

        <ImageView
                android:id="@+id/img_vehicle"
                android:layout_width="70dp"
                android:layout_height="70dp"
                app:layout_constraintTop_toTopOf="@+id/tv_route_name"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintBottom_toBottomOf="@+id/tv_seasonal_title"
                android:scaleType="fitCenter"
                android:layout_marginTop="8dp"
                android:layout_marginEnd="16dp"
                android:layout_marginBottom="8dp"
                android:layout_marginStart="16dp"
                app:layout_constraintStart_toEndOf="@+id/tv_route_destination" />

    </androidx.constraintlayout.widget.ConstraintLayout>

    <FrameLayout
            android:id="@+id/timeline_layout"
            android:layout_width="wrap_content"
            android:layout_height="match_parent">

        <View
                android:id="@+id/timeline_circle"
                android:layout_width="24dp"
                android:layout_height="24dp"
                android:background="@drawable/circle"
                android:backgroundTint="@color/gradient_start"
                android:layout_gravity="center" />
        <View
                android:id="@+id/timeline"
                android:layout_width="4dp"
                android:layout_height="match_parent"
                android:layout_gravity="center|bottom"
                android:drawableTop="@drawable/circle"
                android:drawableTint="@color/colorPrimary"
                android:background="@color/colorPrimary" />

    </FrameLayout>

</LinearLayout>

我在左侧也有一个类似的东西，我根据列表中该项目的位置为正确的布局充气。

现在我的问题是，我的Recycler视图位于一个占据所有屏幕的ConstraintLayout内，如何实际放置这些项目，以使其仅占用RecyclerView宽度的一半，牢记使用任何绝对值都会使很难为所有屏幕尺寸进行调整吗？

如何确保中间的行匹配？

TimeLine视图有很多库，所有库的时间轴都只在一侧，但是这必须交替。

非常感谢您的提前帮助。

使用RecyclerView的备用TimelineView

0 个答案: