Android - 约束布局 - 如何将视图居中于其他视图的边缘?

2024-03-27

我想建立一个这样的布局:

在约束布局内,有一个图像视图,其作用类似于横幅,然后有一个与横幅底部边缘居中对齐的卡片,然后还有另一个与卡片顶部边缘居中对齐的图像视图。

我面临的问题是,第二个图像视图(绿色的)与卡片对齐时会进入后台而不是留在前景。

这是 XML,

<android.support.constraint.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:fitsSystemWindows="true"
            app:layout_collapseMode="parallax"
            android:paddingBottom="@dimen/padding_10">

            <ImageView
                android:id="@+id/imageView_jobBackdrop_jobDetails"
                android:layout_width="match_parent"
                android:layout_height="175dp"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                android:src="@drawable/backdrop_job_details"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_collapseMode="parallax"/>

            <ImageView
                android:id="@+id/imageView_companyLogo_jobDetails"
                android:layout_width="75dp"
                android:layout_height="75dp"
                android:fitsSystemWindows="true"
                app:layout_collapseMode="parallax"
                app:layout_constraintBottom_toTopOf="@+id/cardView_jobHeader_jobDetails"
                app:layout_constraintEnd_toEndOf="@id/cardView_jobHeader_jobDetails"
                app:layout_constraintStart_toStartOf="@id/cardView_jobHeader_jobDetails"
                app:layout_constraintTop_toTopOf="@+id/cardView_jobHeader_jobDetails" />

            <android.support.v7.widget.CardView
                android:id="@+id/cardView_jobHeader_jobDetails"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginBottom="24dp"
                android:layout_marginEnd="16dp"
                android:layout_marginStart="16dp"
                app:layout_constraintBottom_toBottomOf="@+id/imageView_jobBackdrop_jobDetails"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/imageView_jobBackdrop_jobDetails"
                app:layout_constraintVertical_bias="0.5">

                <android.support.constraint.ConstraintLayout
                    android:id="@+id/parent"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">

                    <TextView
                        android:id="@+id/textView_jobTitle_jobDetails"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginEnd="16dp"
                        android:layout_marginStart="16dp"
                        android:layout_marginTop="32dp"
                        android:gravity="center"
                        android:text="Fresher Software Developer Job. Urgent Openning. Angular Js, HTML, JavaScript, CSS"
                        app:layout_constraintEnd_toEndOf="parent"
                        app:layout_constraintStart_toStartOf="parent"
                        app:layout_constraintTop_toTopOf="parent" />

                </android.support.constraint.ConstraintLayout>
            </android.support.v7.widget.CardView>
        </android.support.constraint.ConstraintLayout>

尝试这个:

<?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="match_parent"
    android:orientation="vertical"
    android:padding="20dp">

    <android.support.v7.widget.CardView
        android:id="@+id/card_1"
        android:layout_width="0dp"
        android:layout_height="200dp"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginTop="8dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <android.support.v7.widget.CardView
        android:id="@+id/card_2"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_marginBottom="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginTop="0dp"
        app:cardBackgroundColor="#69F"
        app:layout_constraintBottom_toBottomOf="@+id/card_1"
        app:layout_constraintStart_toStartOf="@+id/card_1"
        app:layout_constraintEnd_toEndOf="@+id/card_1"
        app:layout_constraintTop_toBottomOf="@+id/card_1" />

</android.support.constraint.ConstraintLayout>

解释:- 这之所以有效是因为这四行

以下几行将蓝色 CardView 设置为位于白色 CardView 底部边缘的中心。

<!-- top constraint is set to bottom of White CardView -->
app:layout_constraintTop_toBottomOf="@+id/card_1"

<!-- bottom constraint is set to bottom of White CardView -->
app:layout_constraintBottom_toBottomOf="@+id/card_1"

以下几行将蓝色 CardView 设置为水平居中

<!-- left/start constraint is set to left/start of White CardView -->
app:layout_constraintStart_toStartOf="@+id/card_1"

<!-- right/end constraint is set to right/end of White CardView -->
app:layout_constraintEnd_toEndOf="@+id/card_1"
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Android - 约束布局 - 如何将视图居中于其他视图的边缘? 的相关文章

  • 无法解析导航抽屉中片段中的 getSystemService

    我正在尝试实现一个导航抽屉 其中有一个片段中的地图 这是我的代码 这里是fragment map xml
  • Android 中未找到 PhoneGap 类错误

    我的 PhoneGap Android 应用程序遇到一些问题 到目前为止我明白了 我已经把一切都做好了 这是我所做的 在 Eclipse 中创建项目后 我在 libs 文件夹中添加了 cordova 2 2 0 jar 然后我编辑了Andr
  • 带有电子墨水显示屏的 Android

    我有兴趣使用 AndroidE Ink http www eink com technology howitworks html为基础的平台 我知道已经是证明了 http vimeo com 3162590MOTO 曾经使用过 但我有兴趣将
  • (无限?)JavaScript 代码中的循环

    我有以下 JavaScript 代码来在网站上 显示 XML function createChild node tabindex var child node childNodes var r var tabs for i 0 i
  • Android OpenGLES 渲染到纹理

    我为 iPhone 编写图形应用程序 并且希望将我最新的应用程序 Layers 移植到 Android 平台 Layers 是一款绘画应用程序 允许用户在屏幕上绘画并使用不同的画笔 颜色等创建多层绘画 并导出到 PSD 它有桌面同步 涂抹工
  • ListView.hasWindowFocus==true 但子视图 hasWindowFocus==false

    有时我注意到 对于 View v v hasWindowFocus false View v getParent hasWindowFocus true 如果我正确理解文档 情况就不应该如此 v getParent 是 ListView 的
  • 如何使用 Kotlin 在 ListAdapter 中使用 Filterable?

    我会用一个SearchView过滤我的RecyclerView 在 stackoverflow 和其他网站上我发现只是使用的示例Filterable与 Java 和RecyclerView Adapter当我使用时ListAdapter 所
  • ListView 中的焦点控件

    上下文 我想要一个不会获得焦点的 ListView 例如不会 当用户触摸它时突出显示该行 然而每个行小部件都有它自己的 OnClickListener 这是我在布局 xml 中指定的内容 android choiceMode none an
  • 将文本视图添加到布局中?

    如果我的按钮不移动 我就无法在按钮上方放置文本视图 我该如何解决这个问题 被困在这个问题上 4 个小时了 这很伤心 因为我正在尝试在我的布局上添加一个文本视图 我的布局中心有 4 个按钮 我只想在四个按钮上方添加一个文本视图 如下所示 Te
  • 如何防止机器人程序和垃圾邮件 API 请求?

    我正在使用react native 开发一个Android 应用程序 该应用程序与我正在为该应用程序开发的API 进行通信 该 API 是使用 Laravel 和 Laravel Passport 构建的 我知道 Android 应用程序可
  • Kotlin 1.6.0 的 proguard / R8 删除了数据类元数据

    我有一个包含一些数据类的包 我尝试使用 Kotlin 反射在运行时访问构造函数clazz primaryConstructor 一切都按预期工作 但是当我启用 R8 时 数据类元数据被删除 例如当我检查是否KClass isData它返回
  • Google 的新地点库(实现“com.google.android.libraries.places:1.0.0”)无法解析

    我正在尝试迁移到新的 Places SDK 客户端 但我被告知要安装的依赖项文档 https developers google com places android sdk client migration给我一个 无法解决 错误 我确保
  • PHP DOMDocument 中 XML 内 HTML 表的 Xpath 查询

    我有一个具有以下树结构的 XML 文件
  • Eventbus onMessageEvent 没有被调用

    我已经在我的项目中实现了 EventBus 但我没有获得所有事件 public class MainActivity extends AppCompatActivity Override protected void onCreate Bu
  • android拦截最近的应用程序按钮

    我有一个针对儿童的应用程序 我不希望他们能够单击 最近使用的应用程序 按钮 看起来像两个矩形叠在一起的按钮 我正在负责捕获后退按钮和主页按钮 并且我已经搜索并阅读了很多有关尝试捕获 最近的应用程序 按钮的信息 但大多数人说你不能 或者他们的
  • android tabwidget意图选项卡刷新每次点击

    我想使用具有意图的子选项卡创建一个选项卡 以便当用户单击选项卡意图时刷新 每次用户单击选项卡时 我想刷新并调用子意图选项卡的 oncreate 方法 public class Tabs3 extends TabActivity Overri
  • 为什么Android和IOS11无法通过NFC通信

    目前正在使用 React Native 并尝试使用反应本机 NFC ios https www npmjs com package react native nfc ios and 反应本机 NFC https github com Nov
  • 在 Android 中使用 SQL (JDBC) 数据库

    在旧的 Java 应用程序中 我使用以下代码连接到 SQL 数据库并将其用于某些查询 private Connection dbConnection null System setProperty derby system home C C
  • Android Studio同时为同一个项目构建两个应用程序

    我正在使用 Android Studio v0 5 9 制作一个应用程序 它有一个图书馆项目作为依赖 但是 每次我运行该项目时 都会将两个具有相同名称和图标的 APK 部署到我的设备上 第一个 apk app 包含我的主模块 而第二个是库项
  • 改造中的 SocketTimeoutException

    我在尝试着POST向服务器请求获取数据但有时会发生SocketTimeoutException I used Ok3Client解决它 但我面临同样的异常 我该如何解决它 我的代码如下 public void getNormalLogin

随机推荐