Android:如何实现这样的布局? [英] Android: How can I achieve layout like this?
本文介绍了Android:如何实现这样的布局?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我可以使用下面的代码来做到这一点.但是问题是送货地址"和"1" TextView 必须居中于垂直线(在"1"下方，应该是送货地址" TextView 的中心).
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>
这是我使用上面的代码所实现的:
我有白色的ProgressBar(您可以暂时查看任何视图)，并且要在我的TextView上添加步骤编号.在每个数字下面，我希望步骤标题都彼此对齐.
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.
推荐答案
我终于使用ConstraintLayout解决了这个问题.感谢"Google"提供的布局如此出色，可以更好地进行自定义.
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>
如果有人需要帮助设计这种布局，请与我联系.我想我现在是使用ConstaintLayout的专家.
Contact me if anyone wants help design this type of layout. I think I am expert now to use ConstaintLayout.
这篇关于Android:如何实现这样的布局?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
