如何构建如图所示的布局
我使用线性布局和重量，但在不同的屏幕尺寸（仅手机）上看起来并不一致。我需要文本应该正好在图像图标下方。所以有没有办法在android中创建这个布局 这是我的xml代码
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:id="@+id/progress_count_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="23.5dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:gravity="center_vertical"
android:orientation="horizontal">
<Space
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1.5"/>
<ImageView
android:id="@+id/one_ic_iv"
android:layout_width="48dp"
android:layout_height="48dp"
android:scaleType="fitCenter"
android:gravity="center_vertical"
android:src="@drawable/ic_wizard_5step_step01c_active_incomplete"/>
<View
android:layout_width="0dp"
android:layout_height="3dp"
android:layout_weight="9.5"
android:background="@color/CelestialBlue"
android:gravity="center_horizontal"/>
<ImageView
android:id="@+id/two_ic_iv"
android:layout_width="32dp"
android:layout_height="32dp"
android:src="@drawable/ic_wizard_5step_step02a_inactive_incomplete"/>
<View
android:layout_width="0dp"
android:layout_height="3dp"
android:layout_weight="12"
android:background="@color/CelestialBlue"
android:gravity="center_horizontal"/>
<ImageView
android:id="@+id/three_ic_iv"
android:layout_width="32dp"
android:layout_height="32dp"
android:src="@drawable/ic_wizard_5step_step03a_inactive_incomplete"/>
<View
android:layout_width="0dp"
android:layout_height="3dp"
android:layout_weight="12"
android:background="@color/CelestialBlue"
android:gravity="center_horizontal"/>
<ImageView
android:id="@+id/four_ic_iv"
android:layout_width="32dp"
android:layout_height="32dp"
android:src="@drawable/ic_wizard_5step_step04a_inactive_incomplete"/>
<View
android:layout_width="0dp"
android:layout_height="3dp"
android:layout_weight="12"
android:background="@color/CelestialBlue"
android:gravity="center_horizontal"/>
<ImageView
android:id="@+id/five_ic_iv"
android:layout_width="32dp"
android:layout_height="32dp"
android:src="@drawable/ic_wizard_5step_step05a_inactive_incomplete"/>
<Space
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="5"/>
</LinearLayout>
<LinearLayout
android:id="@+id/progress_text_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:weightSum="10"
android:orientation="horizontal">
<TextView
android:id="@+id/create_acc_progress_tv"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1.8"
android:text="Create\nAccount"
android:textSize="14sp"
android:textColor="@color/CelestialBlue"
android:gravity="center"
fontPath="HVD Fonts - BrandonText-Light.otf"/>
<Space
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.25" />
<TextView
android:id="@+id/accept_terms_progress_tv"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1.8"
android:text="Verify\nPhone"
android:textSize="14sp"
android:textColor="@color/CelestialBlue"
android:gravity="center"
fontPath="HVD Fonts - BrandonText-Light.otf"/>
<Space
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.25" />
<TextView
android:id="@+id/verify_phone_progress_tv"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1.8"
android:text="Accept\nTerms"
android:textSize="14sp"
android:textColor="@color/CelestialBlue"
android:gravity="center"
fontPath="HVD Fonts - BrandonText-Light.otf"/>
<Space
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.25" />
<TextView
android:id="@+id/link_bank_progress_tv"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1.8"
android:text="Link\nBank"
android:textSize="14sp"
android:textColor="@color/CelestialBlue"
android:gravity="center"
fontPath="HVD Fonts - BrandonText-Light.otf"/>
<Space
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.25" />
<TextView
android:id="@+id/get_approved_tv"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1.8"
android:text="Get\nApproved"
android:textSize="14sp"
android:textColor="@color/CelestialBlue"
android:gravity="center"
fontPath="HVD Fonts - BrandonText-Light.otf"/>
</LinearLayout>
</LinearLayout>
6 个答案:
答案 0 :(得分：2)
如果您的文字与图片不同步，您可能会尝试为每个组件（图片和文字）添加垂直LinearLayout。
所以使用一个大的水平LinearLayout，里面有5个垂直LinearLayouts 。而不是像现在这样的两个水平LinearLayouts。
作为另一种选择，您可以尝试使用ConstraintLayout构建它。它可以让你调整不同步的东西。
https://developer.android.com/training/constraint-layout/index.html
答案 1 :(得分：0)
word-wrap: break-word答案 2 :(得分：0)
试试这个库，它会给你结果
https://github.com/baoyachi/StepView
https://github.com/anton46/Android-StepsView
https://github.com/oli107/material-range-bar
Java代码
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
<强>输出
答案 3 :(得分：0)
根据您的要求，您可以这样使用。
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Space
android:layout_width="10dp"
android:layout_height="wrap_content"/>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/one_ic_iv"
android:layout_width="48dp"
android:layout_height="48dp"
android:gravity="center_vertical"
android:scaleType="fitCenter"
android:src="@drawable/circle_crop" />
<TextView
android:id="@+id/create_acc_progress_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/one_ic_iv"
android:gravity="center"
android:text="Create\nAccount"
android:textColor="@color/colorPrimary"
android:textSize="14sp" />
</RelativeLayout>
<View
android:layout_width="30dp"
android:layout_height="3dp"
android:layout_gravity="center"
android:background="@color/colorAccent"
android:gravity="center_horizontal" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/one_ic_iv1"
android:layout_width="48dp"
android:layout_height="48dp"
android:gravity="center_vertical"
android:scaleType="fitCenter"
android:src="@drawable/circle_crop" />
<TextView
android:id="@+id/create_acc_progress_tv1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/one_ic_iv1"
android:gravity="center"
android:text="Create\nAccount"
android:textColor="@color/colorPrimary"
android:textSize="14sp" />
</RelativeLayout>
答案 4 :(得分：0)
我建议您将LinearLayout与android:layout_toLeftOf一起使用，然后为每个进程添加单独的RelativeLayouts。我建议使用RelativeLayout，因为您可以使用其#printtable() function - will take string list and display in rjustified table
tabledata = [['apples', 'oranges', 'cherries', 'banana'],
['Alice', 'Bob', 'Carol', 'David'],
['dogs', 'cats', 'moose', 'goose']]
def printtable():
colwidths = [0] * len(tabledata)
strlen = 0
#find parameter for rjust
for i in range(len(tabledata)):
for k in range(len(tabledata[i])):
wordlength = (len(tabledata[i][k]))
if wordlength > strlen:
colwidths[i] = wordlength
strlen = wordlength
maxword = max(colwidths)
#print as table : 'invert'
x=0
while x<int(len(tabledata[0])):
for i in range(len(tabledata)):
print(tabledata[i][x].rjust(maxword, ' '), end=''),
x+=1
print('\n')
printtable()
等位置标记来对齐文字或图像视图。
答案 5 :(得分：0)
这是我的问题的解决方案，我使用约束布局
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="@dimen/top_margin_wizard_bar"
android:layout_marginBottom="@dimen/bottom_margin_wizard_bar">
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/guideline1"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.06" />
<ImageView
android:id="@+id/imageView"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginLeft="0dp"
android:layout_marginRight="0dp"
app:layout_constraintDimensionRatio="H, 1:1"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toRightOf="@+id/guideline1"
app:layout_constraintRight_toLeftOf="@+id/guideline2"
app:srcCompat="@drawable/ic_wizard_5step_step01c_active_incomplete"
app:layout_constraintTop_toTopOf="@+id/imageView2"
app:layout_constraintBottom_toBottomOf="@+id/imageView2" />
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="0dp"
android:layout_marginRight="0dp"
android:gravity="center_horizontal"
android:text="Create\nAccount"
android:textColor="@color/CelestialBlue"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintLeft_toLeftOf="@+id/imageView"
app:layout_constraintRight_toRightOf="@+id/imageView"
android:textSize="@dimen/font_size_small_14sp"
app:layout_constraintBaseline_toBaselineOf="@+id/textView2" />
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/guideline2"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.1506666" />
<View
android:id="@+id/view_1"
android:layout_width="0dp"
android:layout_height="@dimen/height_wizard_line"
android:background="@color/CelestialBlue"
android:gravity="center_horizontal"
android:layout_marginLeft="0dp"
android:layout_marginRight="0dp"
app:layout_constraintLeft_toLeftOf="@+id/guideline2"
app:layout_constraintRight_toLeftOf="@+id/guideline3"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintBottom_toBottomOf="@+id/imageView"
app:layout_constraintTop_toTopOf="@+id/imageView"
app:layout_constraintVertical_bias="0.5" />
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/guideline3"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.2573333" />
<ImageView
android:id="@+id/imageView2"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="0dp"
android:layout_marginBottom="0dp"
app:layout_constraintDimensionRatio="H, 1:1"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toRightOf="@+id/guideline3"
app:layout_constraintRight_toLeftOf="@+id/guideline4"
app:srcCompat="@drawable/ic_wizard_5step_step02a_inactive_incomplete"
app:layout_constraintTop_toTopOf="@+id/imageView3"
app:layout_constraintBottom_toBottomOf="@+id/imageView3"/>
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="0dp"
android:layout_marginRight="0dp"
android:gravity="center_horizontal"
android:text="Verify\nMobile"
android:textColor="@color/CelestialBlue"
app:layout_constraintLeft_toLeftOf="@+id/imageView2"
app:layout_constraintRight_toLeftOf="@+id/guideline4"
android:textSize="@dimen/font_size_small_14sp"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintBaseline_toBaselineOf="@+id/textView3" />
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/guideline4"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.348" />
<View
android:id="@+id/view_2"
android:layout_width="0dp"
android:layout_height="@dimen/height_wizard_line"
android:background="@color/CelestialBlue"
android:gravity="center_horizontal"
android:layout_marginLeft="0dp"
android:layout_marginRight="0dp"
app:layout_constraintLeft_toLeftOf="@+id/guideline4"
app:layout_constraintRight_toLeftOf="@+id/guideline5"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintBottom_toBottomOf="@+id/imageView2"
app:layout_constraintTop_toTopOf="@+id/imageView2"
app:layout_constraintVertical_bias="0.5" />
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/guideline5"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.4333333" />
<ImageView
android:id="@+id/imageView3"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="0dp"
android:layout_marginBottom="0dp"
app:layout_constraintDimensionRatio="H, 1:1"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toRightOf="@+id/guideline5"
app:layout_constraintRight_toLeftOf="@+id/guideline6"
app:srcCompat="@drawable/ic_wizard_5step_step03c_active_incomplete"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="@+id/textView3" />
<TextView
android:id="@+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="0dp"
android:layout_marginRight="0dp"
android:gravity="center_horizontal"
android:text="Accept\nTerms"
android:textColor="@color/CelestialBlue"
app:layout_constraintLeft_toLeftOf="@+id/imageView3"
app:layout_constraintRight_toRightOf="@+id/imageView3"
app:layout_constraintTop_toBottomOf="@+id/imageView3"
app:layout_constraintHorizontal_bias="0.5"
android:textSize="@dimen/font_size_small_14sp" />
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/guideline6"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.5666666" />
<View
android:id="@+id/view_3"
android:layout_width="0dp"
android:layout_height="@dimen/height_wizard_line"
android:background="@color/CelestialBlue"
android:gravity="center_horizontal"
android:layout_marginLeft="0dp"
android:layout_marginRight="0dp"
app:layout_constraintLeft_toLeftOf="@+id/guideline6"
app:layout_constraintRight_toLeftOf="@+id/guideline7"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintBottom_toBottomOf="@+id/imageView3"
app:layout_constraintTop_toTopOf="@+id/imageView3"
app:layout_constraintVertical_bias="0.5" />
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/guideline7"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.652" />
<ImageView
android:id="@+id/imageView4"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="0dp"
android:layout_marginBottom="0dp"
app:layout_constraintDimensionRatio="H, 1:1"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toRightOf="@+id/guideline7"
app:layout_constraintRight_toLeftOf="@+id/guideline8"
app:srcCompat="@drawable/ic_wizard_5step_step04a_inactive_incomplete"
app:layout_constraintTop_toTopOf="@+id/imageView3"
app:layout_constraintBottom_toBottomOf="@+id/imageView3" />
<TextView
android:id="@+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="0dp"
android:layout_marginRight="0dp"
android:gravity="center_horizontal"
android:text="Link\nBank"
android:textColor="@color/CelestialBlue"
app:layout_constraintBaseline_toBaselineOf="@+id/textView3"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintLeft_toLeftOf="@+id/imageView4"
app:layout_constraintRight_toRightOf="@+id/imageView4"
android:textSize="@dimen/font_size_small_14sp"/>
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/guideline8"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.7426666" />
<View
android:id="@+id/view_4"
android:layout_width="0dp"
android:layout_height="@dimen/height_wizard_line"
android:background="@color/CelestialBlue"
android:gravity="center_horizontal"
android:layout_marginLeft="0dp"
android:layout_marginRight="0dp"
app:layout_constraintLeft_toLeftOf="@+id/guideline8"
app:layout_constraintRight_toLeftOf="@+id/guideline9"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintBottom_toBottomOf="@+id/imageView4"
app:layout_constraintTop_toTopOf="@+id/imageView4"
app:layout_constraintVertical_bias="0.5" />
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/guideline9"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.8493333" />
<ImageView
android:id="@+id/imageView5"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="0dp"
android:layout_marginBottom="0dp"
app:layout_constraintDimensionRatio="H, 1:1"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toRightOf="@+id/guideline9"
app:layout_constraintRight_toLeftOf="@+id/guideline10"
app:srcCompat="@drawable/ic_wizard_5step_step05a_inactive_incomplete"
app:layout_constraintTop_toTopOf="@+id/imageView4"
app:layout_constraintBottom_toBottomOf="@+id/imageView4" />
<TextView
android:id="@+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="0dp"
android:layout_marginRight="0dp"
android:gravity="center_horizontal"
android:text="Get\nApproved"
android:textColor="@color/CelestialBlue"
app:layout_constraintBaseline_toBaselineOf="@+id/textView4"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintLeft_toLeftOf="@+id/imageView5"
app:layout_constraintRight_toRightOf="@+id/imageView5"
android:textSize="@dimen/font_size_small_14sp"/>
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/guideline10"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.94" />
</android.support.constraint.ConstraintLayout>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？