Android:如何实现这样的布局？-6ren

Android:如何实现这样的布局？

转载作者：塔克拉玛干更新时间：2023-11-03 00:19:33

我可以使用下面的代码来做到这一点。但问题是“送货地址”和“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(您可以临时查看任何 View )，我希望在其上带有步骤编号的 TextView。在每个数字下方，我希望步骤标题彼此居中对齐。

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

最佳答案

我终于使用 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>

如果有人需要帮助设计此类布局，请与我联系。我想我现在是使用 ConstaintLayout 的专家了。

关于Android:如何实现这样的布局？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42671289/

文章推荐： c++ - STL 容器及其元素的常量性——何时使用常量？

文章推荐： c++ - 在 C++ 中使用枚举类值调用数组元素

文章推荐： c++ - 如何修复 LNK4204 或摆脱它？

java - 自定义 JPA 实现//现有的无 SQL JPA 实现
背景: 我最近一直在使用 JPA，我为相当大的关系数据库项目生成持久层的轻松程度给我留下了深刻的印象。我们公司使用大量非 SQL 数据库，特别是面向列的数据库。我对可能对这些数据库使用 JPA 有一
java - 未由 S3FileSystem FileSystem 实现 Hadoop Jar 实现
我已经在我的 maven pom 中添加了这些构建配置，因为我希望将 Apache Solr 依赖项与 Jar 捆绑在一起。否则我得到了 SolarServerException: ClassNotF
c# - 实现 "Inherit"(实现)通用接口(interface)的接口(interface)？
interface ITurtle { void Fight(); void EatPizza(); } interface ILeonardo : ITurtle {
java - 任何 JPA 实现(或更广泛的 Java ORM 实现)是否支持可更新游标
我希望可用于 Java 的对象/关系映射 (ORM) 工具之一能够满足这些要求: 使用 JPA 或 native SQL 查询获取大量行并将其作为实体对象返回。允许在行(实体)中进行迭代，并在对当前
generics - 如果我为 B 实现 From ，是否也会为 Vec 实现 From>？
好像没有，因为我有实现From for 的代码, 我可以转换 A到 B与 .into() , 但同样的事情不适用于 Vec .into()一个Vec . 要么我搞砸了阻止实现派生的事情，要么这不应该发

c# - 在 C# 中，如果 A 实现 IX 并且 B 继承自 A ，是否必然遵循 B 实现 IX？
在 C# 中，如果 A 实现 IX 并且 B 继承自 A ，是否必然遵循 B 实现 IX？如果是，是因为 LSP 吗？之间有什么区别吗: 1. Interface IX; Class A : IX;

OpenVG 实现？
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the

performance - 实现 (^)
我正在阅读标准haskell库的(^)的实现代码: (^) :: (Num a, Integral b) => a -> b -> a x0 ^ y0 | y0 a -> b ->a expo x0

博弈树的C++实现
我将把国际象棋游戏表示为 C++ 结构。我认为，最好的选择是树结构(因为在每个深度我们都有几个可能的移动)。这是一个好的方法吗？ struct TreeElement{ SomeMoveType

字符串匹配alg的c++实现
我正在为用户名数据库实现字符串匹配算法。我的方法采用现有的用户名数据库和用户想要的新用户名，然后检查用户名是否已被占用。如果采用该方法，则该方法应该返回带有数据库中未采用的数字的用户名。例子: “贾

图算法的C++实现
我正在尝试实现 Breadth-first search algorithm , 为了找到两个顶点之间的最短距离。我开发了一个 Queue 对象来保存和检索对象，并且我有一个二维数组来保存两个给定顶点

Python A* 实现
我目前正在 ika 中开发我的 Python 游戏，它使用 python 2.5 我决定为 AI 使用 A* 寻路。然而，我发现它对我的需要来说太慢了(3-4 个敌人可能会落后于游戏，但我想供应 4-

DHT的C++实现
我正在寻找 Kademlia 的开源实现C/C++ 中的分布式哈希表。它必须是轻量级和跨平台的(win/linux/mac)。它必须能够将信息发布到 DHT 并检索它。最佳答案 OpenDHT是

C++实现
我在一本书中读到这一行:-“当我们要求 C++ 实现运行程序时，它会通过调用此函数来实现。” 而且我想知道“C++ 实现”是什么意思或具体是什么。帮忙!？最佳答案 “C++ 实现”是指编译器加上链接

背包分支定界的C++实现
我正在尝试使用分支定界的 C++ 实现这个背包问题。此网站上有一个 Java 版本:Implementing branch and bound for knapsack 我试图让我的 C++ 版本打印

FNV哈希的C#实现
在很多情况下，我需要在 C# 中访问合适的哈希算法，从重写 GetHashCode 到对数据执行快速比较/查找。我发现 FNV 哈希是一种非常简单/好/快速的哈希算法。但是，我从未见过 C# 实现的

LRU缓存替换策略及C#实现
目录 LRU缓存替换策略核心思想不适用场景算法基本实现算法优化

大角度非迭代的空间坐标旋转C#实现
1. 绪论在前面文章中提到空间直角坐标系相互转换，测绘坐标转换时，一般涉及到的情况是：两个直角坐标系的小角度转换。这个就是我们经常在测绘数据处理中，WGS-84坐标系、54北京坐标系

实现.Net7下的数据库定时检查
在软件开发过程中，有时候我们需要定时地检查数据库中的数据，并在发现新增数据时触发一个动作。为了实现这个需求，我们在 .Net 7 下进行一次简单的演示. PeriodicTimer .

查找算法之二分查找的C++实现
二分查找二分查找算法，说白了就是在有序的数组里面给予一个存在数组里面的值key，然后将其先和数组中间的比较，如果key大于中间值，进行下一次mid后面的比较，直到找到相等的，就可以得到它的位置。

塔克拉玛干

个人简介
我是一名优秀的程序员,十分优秀！

作者热门文章

iOS/Objective-C 元类和类别

objective-c - -1001 错误，当 NSURLSession 通过 httpproxy 和/etc/hosts

java - 使用网络类获取 url 地址

ios - 推送通知中不播放声音

滴滴打车优惠券免费领取

全站热门文章

Nuxt.js应用中的schema：extend事件钩子详解

基于surging的木舟平台如何通过Tcp或者UDP网络组件接入设备

使用Boost.asio与Boost.beast基于协程连接ws

精选2款C#/.NET开源且功能强大的网络通信框架

内核源码+vscode+bear+clang实现函数任意跳转，无缝跳转，无缝阅读，无缝开发

权限系统：一文搞懂功能权限、数据权限

一文彻底弄懂JUC工具包的Semaphore

鸿蒙Navigation页面生命周期

新手入门Java自动化测试的利器：SeleniumWebDriver

TinyVuev3.19.0正式发布！Tree组件终于支持虚拟滚动啦！UI也升级啦，更更符合现代审美~

首页

博学

6Ren·AI

商城