Android：我怎样才能实现这样的布局？

Question

我可以使用以下代码执行此操作。但问题是“送货地址”和“1” TextView 必须以垂直线为中心（“1”以下应该是“送货地址” TextView 的中心）。

neccesary_part_of_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使用步骤编号。在每个数字下面，我希望步骤标题都以彼此为中心对齐。

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

Answer 1

检查这个漂亮的图书馆，查看步骤https://github.com/baoyachi/StepView?utm_source=android-arsenal.com&utm_medium=referral&utm_campaign=3774

  

样品

<com.baoyachi.stepview.HorizontalStepView
            android:id="@+id/step_view"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            />

HorizontalStepView setpview5 = (HorizontalStepView) mView.findViewById(R.id.step_view5);
        List<StepBean> stepsBeanList = new ArrayList<>();
        StepBean stepBean0 = new StepBean("接单",1);
        StepBean stepBean1 = new StepBean("打包",1);
        StepBean stepBean2 = new StepBean("出发",1);
        StepBean stepBean3 = new StepBean("送单",0);
        StepBean stepBean4 = new StepBean("完成",-1);
        stepsBeanList.add(stepBean0);
        stepsBeanList.add(stepBean1);
        stepsBeanList.add(stepBean2);
        stepsBeanList.add(stepBean3);
        stepsBeanList.add(stepBean4);


        setpview5
                .setStepViewTexts(stepsBeanList)//总步骤
                .setTextSize(12)//set textSize
                .setStepsViewIndicatorCompletedLineColor(ContextCompat.getColor(getActivity(), android.R.color.white))//设置StepsViewIndicator完成线的颜色
                .setStepsViewIndicatorUnCompletedLineColor(ContextCompat.getColor(getActivity(), R.color.uncompleted_text_color))//设置StepsViewIndicator未完成线的颜色
                .setStepViewComplectedTextColor(ContextCompat.getColor(getActivity(), android.R.color.white))//设置StepsView text完成线的颜色
                .setStepViewUnComplectedTextColor(ContextCompat.getColor(getActivity(), R.color.uncompleted_text_color))//设置StepsView text未完成线的颜色
                .setStepsViewIndicatorCompleteIcon(ContextCompat.getDrawable(getActivity(), R.drawable.complted))//设置StepsViewIndicator CompleteIcon
                .setStepsViewIndicatorDefaultIcon(ContextCompat.getDrawable(getActivity(), R.drawable.default_icon))//设置StepsViewIndicator DefaultIcon
                .setStepsViewIndicatorAttentionIcon(ContextCompat.getDrawable(getActivity(), R.drawable.attention));//设置StepsViewIndicator AttentionIcon

Answer 2

我终于使用"use strict";解决了这个问题。感谢Google＆＃39;提供这样一个良好的布局，允许更好的定制。

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> 。