问题
I am able to do this using below code. But problem is "Shipping Address" and "1" TextView must be centered to vertical line(below "1" there should be center of "Shipping Address" 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>
This is what I have achieved using above code:
Problem in Detail:
I have white ProgressBar(you can take any view temporary) on which I want TextView with step numbers. and below each number I want step title both aligned centered to each-other.
How can I achieve this? I tried to put it in layout but that breaks dependency with progress bar.
回答1:
I have finally solved this using ConstraintLayout. Thanks to 'Google' for providing such a good layout which allows better customisation.
<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>
Contact me if anyone wants help design this type of layout. I think I am expert now to use ConstaintLayout.
回答2:
Check this beautiful library for step view https://github.com/baoyachi/StepView?utm_source=android-arsenal.com&utm_medium=referral&utm_campaign=3774
Sample
<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
来源：https://stackoverflow.com/questions/42671289/android-how-can-i-achieve-layout-like-this