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

我終於使用ConstraintLayout解決了這個問題。 感謝'Google'提供了這樣一個良好的布局，可以更好地進行自定義。

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

如果有人想要幫助設計這種類型的布局，請聯系我。 我想我現在是專家使用ConstaintLayout 。

Answer 2

檢查這個漂亮的庫以獲取步驟視圖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