Android 安卓：我如何实现这样的布局？

我可以用下面的代码来做这件事。但问题是“配送地址”和“1”TextView必须以垂直线为中心（在“1”下面应该有“配送地址”TextView的中心）

layout.xml的必要部分

       <RelativeLayout
            android:id="@+id/fcm_rl_scroll"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="50dp"
            android:layout_marginRight="50dp">


            <ProgressBar
                android:id="@+id/mProgressBar"
                style="@android:style/Widget.DeviceDefault.Light.ProgressBar.Horizontal"
                android:layout_width="wrap_content"
                android:layout_height="5dp"
                android:layout_centerInParent="true"
                android:layout_weight="1"
                android:focusable="false"
                android:nestedScrollingEnabled="false"
                android:progress="100"
                android:progressDrawable="@drawable/custom_progress_bar"
                android:secondaryProgress="100"
                android:visibility="visible" />

            <TextView
                android:id="@+id/fcm_tv_step1"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:layout_alignBaseline="@+id/mProgressBar"
                android:layout_alignLeft="@+id/mProgressBar"
                android:layout_alignStart="@+id/mProgressBar"
                android:layout_centerVertical="true"
                android:background="@drawable/bg_round_filled_white"
                android:gravity="center"
                android:text="1"
                android:textColor="@color/colorPrimary"
                android:textSize="@dimen/sp16" />


            <TextView
                android:id="@+id/fcm_tv_step1text"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/fcm_tv_step1"
                android:layout_marginTop="@dimen/dp40"
                android:text="Shopping Address"
                android:textColor="@color/white"
                android:textSize="@dimen/sp16" />


            <TextView
                android:id="@+id/fcm_tv_step22"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:layout_alignBaseline="@+id/mProgressBar"
                android:layout_alignLeft="@+id/mProgressBar"
                android:layout_alignStart="@+id/mProgressBar"
                android:layout_centerVertical="true"
                android:layout_marginLeft="150dp"
                android:layout_toRightOf="@+id/fcm_tv_step1"
                android:background="@drawable/bg_round_filled_white"
                android:gravity="center"
                android:text="2"
                android:textColor="@color/colorPrimary"
                android:textSize="@dimen/sp16" />


            <TextView
                android:id="@+id/fcm_tv_step22text"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/fcm_tv_step22"
                android:layout_marginLeft="150dp"
                android:layout_marginTop="@dimen/dp40"
                android:layout_toRightOf="@+id/fcm_tv_step1text"
                android:text="Address"
                android:textColor="@color/white"
                android:textSize="@dimen/sp16" />
        </RelativeLayout>

这是我使用上述代码实现的：

问题细节： 我有一个白色的

ProgressBar

（您可以临时查看任何视图），我想在其上查看带有步骤号的

TextView

。在每个数字下面，我希望步骤标题彼此居中对齐

---

我怎样才能做到这一点？我试着把它放在布局中，但这打破了与进度条的依赖关系。

检查这个漂亮的库以获得步骤视图

样品

HorizontalStepView setpview5=（HorizontalStepView）mView.findViewById（R.id.step_view5）；
List stepsBeanList=新建ArrayList（）；
StepBean stepBean0=新StepBean（“接单",1);
StepBean stepBean1=新StepBean（“打包",1);
StepBean stepBean2=新StepBean（“出发",1);
StepBean stepBean3=新StepBean（“送单",0);
StepBean stepBean4=新StepBean（“完成",-1);
步骤BeanList.add（步骤Bean0）；
步骤BeanList.add（步骤Bean1）；
步骤BeanList.add（步骤Bean2）；
步骤BeanList.add（步骤Bean3）；
步骤BeanList.add（步骤Bean4）；
setpview5
.SetStepViewText（步骤BeanList）//总步骤
.setTextSize（12）//设置textSize
.setStepsViewIndicatorCompletedLineColor（ContextCompat.getColor（getActivity（），android.R.color.white））//设置StepsViewIndicator完成线的颜色
.SetStepsViewindicator UncompletedLineColor（ContextCompat.getColor（getActivity（），R.color.uncompleted_text_color））//设置StepsViewIndicator未完成线的颜色
.SetStepViewCompletedTextColor（ContextCompat.getColor（getActivity（），android.R.color.white））//设置StepsView文本完成线的颜色
.setStepViewUnComplectedTextColor（ContextCompat.getColor（getActivity（），R.color.uncompleted_text_color））//设置StepsView文本未完成线的颜色
.setStepsViewIndicatorCompleteIcon（ContextCompat.getDrawable（getActivity（），R.drawable.complted））//设置StepsViewIndicator CompleteIcon
.setStepsViewIndicatorDefaultIcon（ContextCompat.getDrawable（getActivity（），R.drawable.default_图标））//设置StepsViewIndicator默认图标
.setstepsviewindicatoratensionicon（ContextCompat.getDrawable（getActivity（），R.drawable.attention））//设置StepsViewIndicator注意事项

我终于用

ConstraintLayout

解决了这个问题。感谢“谷歌”提供了如此好的布局，可以更好地进行定制

<HorizontalScrollView
    android:id="@+id/checkout_hsv_scrollview"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorPrimary"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    tools:layout_constraintLeft_creator="1"
    tools:layout_constraintRight_creator="1">

    <android.support.constraint.ConstraintLayout
        android:layout_width="wrap_content"
        android:layout_height="@dimen/checkout_steps_view_height"
        android:layout_marginBottom="@dimen/checkout_steps_view_margin_bottom"
        android:layout_marginTop="@dimen/checkout_steps_view_margin_top"
        android:minWidth="@dimen/checkout_steps_view_minwidth">

        <ProgressBar
            android:id="@+id/progressBar2"
            style="?android:attr/progressBarStyleHorizontal"
            android:layout_width="@dimen/checkout_progressbar_width"
            android:layout_height="@dimen/checkout_progressbar_height"
            android:layout_marginLeft="@dimen/checkout_steps_side_margin"
            android:layout_marginRight="@dimen/checkout_steps_side_margin"
            android:progressDrawable="@drawable/custom_progress_bar"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/fcm_tv_step1"
            android:layout_width="@dimen/checkout_step_small_node_size"
            android:layout_height="@dimen/checkout_step_small_node_size"
            android:background="@drawable/bg_round_filled_white"
            android:gravity="center"

            android:text="@string/str_checkout_step1"
            android:textColor="@color/colorPrimary"
            android:textSize="@dimen/checkout_step_small_node_font_size"
            app:layout_constraintBottom_toBottomOf="@+id/progressBar2"
            app:layout_constraintRight_toLeftOf="@+id/progressBar2"
            app:layout_constraintTop_toTopOf="@+id/progressBar2" />

        <TextView
            android:id="@+id/fcm_tv_step1text"
            android:layout_width="@dimen/checkout_step_name_width"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:padding="@dimen/dp10"
            android:text="@string/str_checkout_step_name1"
            android:textColor="@color/white"
            android:textSize="@dimen/checkout_step_small_node_font_size"
            app:layout_constraintLeft_toLeftOf="@+id/fcm_tv_step1"
            app:layout_constraintRight_toRightOf="@+id/fcm_tv_step1"
            app:layout_constraintTop_toBottomOf="@+id/fcm_tv_step1" />

        <TextView
            android:id="@+id/fcm_tv_step2"
            android:layout_width="@dimen/checkout_step_big_node_size"
            android:layout_height="@dimen/checkout_step_big_node_size"
            android:layout_marginLeft="@dimen/checkout_step_two_node_margin"
            android:layout_marginStart="@dimen/checkout_step_two_node_margin"
            android:background="@drawable/bg_round_filled_white"
            android:gravity="center"
            android:text="@string/str_checkout_step2"
            android:textColor="@color/colorPrimary"
            android:textSize="@dimen/checkout_step_small_node_font_size"
            app:layout_constraintBottom_toBottomOf="@+id/progressBar2"
            app:layout_constraintLeft_toRightOf="@+id/fcm_tv_step1"
            app:layout_constraintTop_toTopOf="@+id/progressBar2" />

        <TextView
            android:id="@+id/fcm_tv_step2text"
            android:layout_width="@dimen/checkout_step_name_width"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:padding="@dimen/dp10"
            android:text="@string/str_checkout_step_name2"
            android:textColor="@color/white"
            android:textSize="@dimen/checkout_step_big_node_font_size"
            app:layout_constraintLeft_toLeftOf="@+id/fcm_tv_step2"
            app:layout_constraintRight_toRightOf="@+id/fcm_tv_step2"
            app:layout_constraintTop_toBottomOf="@+id/fcm_tv_step2" />

        <TextView
            android:id="@+id/fcm_tv_step3"
            android:layout_width="@dimen/checkout_step_small_node_size"
            android:layout_height="@dimen/checkout_step_small_node_size"
            android:layout_marginLeft="@dimen/checkout_step_two_node_margin"
            android:layout_marginStart="@dimen/checkout_step_two_node_margin"
            android:background="@drawable/bg_round_filled_white"
            android:gravity="center"
            android:text="@string/str_checkout_step3"
            android:textColor="@color/colorPrimary"
            android:textSize="@dimen/checkout_step_small_node_font_size"
            app:layout_constraintBottom_toBottomOf="@+id/progressBar2"
            app:layout_constraintLeft_toRightOf="@+id/fcm_tv_step2"
            app:layout_constraintTop_toTopOf="@+id/progressBar2" />

        <TextView
            android:id="@+id/fcm_tv_step3text"
            android:layout_width="@dimen/checkout_step_name_width"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:padding="@dimen/dp10"
            android:text="@string/str_checkout_step_name3"
            android:textColor="@color/white"
            android:textSize="@dimen/checkout_step_small_node_font_size"
            app:layout_constraintLeft_toLeftOf="@+id/fcm_tv_step3"
            app:layout_constraintRight_toRightOf="@+id/fcm_tv_step3"
            app:layout_constraintTop_toBottomOf="@+id/fcm_tv_step3" />

        <TextView
            android:id="@+id/fcm_tv_step4"
            android:layout_width="@dimen/checkout_step_small_node_size"
            android:layout_height="@dimen/checkout_step_small_node_size"
            android:layout_marginLeft="@dimen/checkout_step_two_node_margin"
            android:layout_marginStart="@dimen/checkout_step_two_node_margin"
            android:background="@drawable/bg_round_filled_white"
            android:gravity="center"
            android:text="@string/str_checkout_step4"
            android:textColor="@color/colorPrimary"
            android:textSize="@dimen/checkout_step_small_node_font_size"
            app:layout_constraintBottom_toBottomOf="@+id/progressBar2"
            app:layout_constraintLeft_toRightOf="@+id/fcm_tv_step3"
            app:layout_constraintTop_toTopOf="@+id/progressBar2" />

        <TextView
            android:id="@+id/fcm_tv_step4text"
            android:layout_width="@dimen/checkout_step_name_width"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:padding="@dimen/dp10"
            android:text="@string/str_checkout_step_name4"
            android:textColor="@color/white"
            android:textSize="@dimen/checkout_step_small_node_font_size"
            app:layout_constraintLeft_toLeftOf="@+id/fcm_tv_step4"
            app:layout_constraintRight_toRightOf="@+id/fcm_tv_step4"
            app:layout_constraintTop_toBottomOf="@+id/fcm_tv_step4" />

        <TextView
            android:id="@+id/fcm_tv_step5"
            android:layout_width="@dimen/checkout_step_small_node_size"
            android:layout_height="@dimen/checkout_step_small_node_size"
            android:layout_marginLeft="@dimen/checkout_step_two_node_margin"
            android:layout_marginStart="@dimen/checkout_step_two_node_margin"
            android:background="@drawable/bg_round_filled_white"
            android:gravity="center"
            android:text="@string/str_checkout_step5"
            android:textColor="@color/colorPrimary"
            android:textSize="@dimen/checkout_step_small_node_font_size"
            app:layout_constraintBottom_toBottomOf="@+id/progressBar2"
            app:layout_constraintLeft_toRightOf="@+id/fcm_tv_step4"
            app:layout_constraintTop_toTopOf="@+id/progressBar2" />

        <TextView
            android:id="@+id/fcm_tv_step5text"
            android:layout_width="@dimen/checkout_step_name_width"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:padding="@dimen/dp10"
            android:text="@string/str_checkout_step_name5"
            android:textColor="@color/white"
            android:textSize="@dimen/checkout_step_small_node_font_size"
            app:layout_constraintLeft_toLeftOf="@+id/fcm_tv_step5"
            app:layout_constraintRight_toRightOf="@+id/fcm_tv_step5"
            app:layout_constraintTop_toBottomOf="@+id/fcm_tv_step5" />
    </android.support.constraint.ConstraintLayout>
</HorizontalScrollView>

---

如果有人需要帮助设计这种类型的布局，请与我联系。我想我现在是在我的布局中使用

ConstantLayout

的专家，我是否必须添加多个id为stepview0、stepview1到5的

？您好，您有完整的示例，或者尺寸和背景样式吗？谢谢

<HorizontalScrollView
    android:id="@+id/checkout_hsv_scrollview"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorPrimary"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    tools:layout_constraintLeft_creator="1"
    tools:layout_constraintRight_creator="1">

    <android.support.constraint.ConstraintLayout
        android:layout_width="wrap_content"
        android:layout_height="@dimen/checkout_steps_view_height"
        android:layout_marginBottom="@dimen/checkout_steps_view_margin_bottom"
        android:layout_marginTop="@dimen/checkout_steps_view_margin_top"
        android:minWidth="@dimen/checkout_steps_view_minwidth">

        <ProgressBar
            android:id="@+id/progressBar2"
            style="?android:attr/progressBarStyleHorizontal"
            android:layout_width="@dimen/checkout_progressbar_width"
            android:layout_height="@dimen/checkout_progressbar_height"
            android:layout_marginLeft="@dimen/checkout_steps_side_margin"
            android:layout_marginRight="@dimen/checkout_steps_side_margin"
            android:progressDrawable="@drawable/custom_progress_bar"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/fcm_tv_step1"
            android:layout_width="@dimen/checkout_step_small_node_size"
            android:layout_height="@dimen/checkout_step_small_node_size"
            android:background="@drawable/bg_round_filled_white"
            android:gravity="center"

            android:text="@string/str_checkout_step1"
            android:textColor="@color/colorPrimary"
            android:textSize="@dimen/checkout_step_small_node_font_size"
            app:layout_constraintBottom_toBottomOf="@+id/progressBar2"
            app:layout_constraintRight_toLeftOf="@+id/progressBar2"
            app:layout_constraintTop_toTopOf="@+id/progressBar2" />

        <TextView
            android:id="@+id/fcm_tv_step1text"
            android:layout_width="@dimen/checkout_step_name_width"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:padding="@dimen/dp10"
            android:text="@string/str_checkout_step_name1"
            android:textColor="@color/white"
            android:textSize="@dimen/checkout_step_small_node_font_size"
            app:layout_constraintLeft_toLeftOf="@+id/fcm_tv_step1"
            app:layout_constraintRight_toRightOf="@+id/fcm_tv_step1"
            app:layout_constraintTop_toBottomOf="@+id/fcm_tv_step1" />

        <TextView
            android:id="@+id/fcm_tv_step2"
            android:layout_width="@dimen/checkout_step_big_node_size"
            android:layout_height="@dimen/checkout_step_big_node_size"
            android:layout_marginLeft="@dimen/checkout_step_two_node_margin"
            android:layout_marginStart="@dimen/checkout_step_two_node_margin"
            android:background="@drawable/bg_round_filled_white"
            android:gravity="center"
            android:text="@string/str_checkout_step2"
            android:textColor="@color/colorPrimary"
            android:textSize="@dimen/checkout_step_small_node_font_size"
            app:layout_constraintBottom_toBottomOf="@+id/progressBar2"
            app:layout_constraintLeft_toRightOf="@+id/fcm_tv_step1"
            app:layout_constraintTop_toTopOf="@+id/progressBar2" />

        <TextView
            android:id="@+id/fcm_tv_step2text"
            android:layout_width="@dimen/checkout_step_name_width"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:padding="@dimen/dp10"
            android:text="@string/str_checkout_step_name2"
            android:textColor="@color/white"
            android:textSize="@dimen/checkout_step_big_node_font_size"
            app:layout_constraintLeft_toLeftOf="@+id/fcm_tv_step2"
            app:layout_constraintRight_toRightOf="@+id/fcm_tv_step2"
            app:layout_constraintTop_toBottomOf="@+id/fcm_tv_step2" />

        <TextView
            android:id="@+id/fcm_tv_step3"
            android:layout_width="@dimen/checkout_step_small_node_size"
            android:layout_height="@dimen/checkout_step_small_node_size"
            android:layout_marginLeft="@dimen/checkout_step_two_node_margin"
            android:layout_marginStart="@dimen/checkout_step_two_node_margin"
            android:background="@drawable/bg_round_filled_white"
            android:gravity="center"
            android:text="@string/str_checkout_step3"
            android:textColor="@color/colorPrimary"
            android:textSize="@dimen/checkout_step_small_node_font_size"
            app:layout_constraintBottom_toBottomOf="@+id/progressBar2"
            app:layout_constraintLeft_toRightOf="@+id/fcm_tv_step2"
            app:layout_constraintTop_toTopOf="@+id/progressBar2" />

        <TextView
            android:id="@+id/fcm_tv_step3text"
            android:layout_width="@dimen/checkout_step_name_width"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:padding="@dimen/dp10"
            android:text="@string/str_checkout_step_name3"
            android:textColor="@color/white"
            android:textSize="@dimen/checkout_step_small_node_font_size"
            app:layout_constraintLeft_toLeftOf="@+id/fcm_tv_step3"
            app:layout_constraintRight_toRightOf="@+id/fcm_tv_step3"
            app:layout_constraintTop_toBottomOf="@+id/fcm_tv_step3" />

        <TextView
            android:id="@+id/fcm_tv_step4"
            android:layout_width="@dimen/checkout_step_small_node_size"
            android:layout_height="@dimen/checkout_step_small_node_size"
            android:layout_marginLeft="@dimen/checkout_step_two_node_margin"
            android:layout_marginStart="@dimen/checkout_step_two_node_margin"
            android:background="@drawable/bg_round_filled_white"
            android:gravity="center"
            android:text="@string/str_checkout_step4"
            android:textColor="@color/colorPrimary"
            android:textSize="@dimen/checkout_step_small_node_font_size"
            app:layout_constraintBottom_toBottomOf="@+id/progressBar2"
            app:layout_constraintLeft_toRightOf="@+id/fcm_tv_step3"
            app:layout_constraintTop_toTopOf="@+id/progressBar2" />

        <TextView
            android:id="@+id/fcm_tv_step4text"
            android:layout_width="@dimen/checkout_step_name_width"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:padding="@dimen/dp10"
            android:text="@string/str_checkout_step_name4"
            android:textColor="@color/white"
            android:textSize="@dimen/checkout_step_small_node_font_size"
            app:layout_constraintLeft_toLeftOf="@+id/fcm_tv_step4"
            app:layout_constraintRight_toRightOf="@+id/fcm_tv_step4"
            app:layout_constraintTop_toBottomOf="@+id/fcm_tv_step4" />

        <TextView
            android:id="@+id/fcm_tv_step5"
            android:layout_width="@dimen/checkout_step_small_node_size"
            android:layout_height="@dimen/checkout_step_small_node_size"
            android:layout_marginLeft="@dimen/checkout_step_two_node_margin"
            android:layout_marginStart="@dimen/checkout_step_two_node_margin"
            android:background="@drawable/bg_round_filled_white"
            android:gravity="center"
            android:text="@string/str_checkout_step5"
            android:textColor="@color/colorPrimary"
            android:textSize="@dimen/checkout_step_small_node_font_size"
            app:layout_constraintBottom_toBottomOf="@+id/progressBar2"
            app:layout_constraintLeft_toRightOf="@+id/fcm_tv_step4"
            app:layout_constraintTop_toTopOf="@+id/progressBar2" />

        <TextView
            android:id="@+id/fcm_tv_step5text"
            android:layout_width="@dimen/checkout_step_name_width"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:padding="@dimen/dp10"
            android:text="@string/str_checkout_step_name5"
            android:textColor="@color/white"
            android:textSize="@dimen/checkout_step_small_node_font_size"
            app:layout_constraintLeft_toLeftOf="@+id/fcm_tv_step5"
            app:layout_constraintRight_toRightOf="@+id/fcm_tv_step5"
            app:layout_constraintTop_toBottomOf="@+id/fcm_tv_step5" />
    </android.support.constraint.ConstraintLayout>
</HorizontalScrollView>