ConstraintLayout的一个例子

最新推荐文章于 2023-01-29 16:58:55 发布
最新推荐文章于 2023-01-29 16:58:55 发布
阅读量252 收藏
点赞数
分类专栏： Android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq873044564/article/details/107825809
版权

 一般项目中要在最外层里面套一个ConstraintLayout,然后设置成9:16的宽高比,然后控制比例的话是使用Guideline去划分比例

 

 

<androidx.constraintlayout.widget.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:background="@color/colorWhite"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/pop_constraint"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="9:16"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <ImageView
            android:id="@+id/iv_video"
            android:layout_width="55dp"
            android:layout_height="55dp"
            android:background="@mipmap/icon_new_video_dk"
            app:layout_constraintBottom_toBottomOf="@+id/iv_wake_sleep"
            app:layout_constraintEnd_toStartOf="@+id/guideline4"
            app:layout_constraintStart_toStartOf="@+id/guideline3"
            app:layout_constraintTop_toTopOf="@+id/iv_wake_sleep"
            app:layout_constraintVertical_bias="0.0" />

        <androidx.constraintlayout.widget.Guideline
            android:id="@+id/guideline4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="317dp"
            android:orientation="vertical"
            app:layout_constraintBottom_toTopOf="@+id/constraintLayout"
            app:layout_constraintGuide_percent="0.7518248"
            app:layout_constraintTop_toTopOf="parent" />

        <ImageView
            android:id="@+id/iv_learn"
            android:layout_width="55dp"
            android:layout_height="55dp"
            android:background="@mipmap/icon_study_timing_post"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toStartOf="@+id/guideline2"
            app:layout_constraintHorizontal_bias="0.51"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/ll_diary"
            app:layout_constraintVertical_bias="0.19" />

        <ImageView
            android:id="@+id/iv_library"
            android:layout_width="55dp"
            android:layout_height="55dp"
            android:background="@mipmap/icon_new_library"
            app:layout_constraintBottom_toBottomOf="@+id/iv_video"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="@+id/guideline4"
            app:layout_constraintTop_toTopOf="@+id/iv_video" />

        <ImageView
            android:id="@+id/iv_wake_sleep"
            android:layout_width="55dp"
            android:layout_height="55dp"
            android:background="@mipmap/icon_new_wake_sleep"
            app:layout_constraintBottom_toBottomOf="@+id/iv_learn"
            app:layout_constraintEnd_toStartOf="@+id/guideline3"
            app:layout_constraintStart_toStartOf="@+id/guideline2"
            app:layout_constraintTop_toTopOf="@+id/iv_learn"
            app:layout_constraintVertical_bias="1.0" />

        <androidx.constraintlayout.widget.Guideline
            android:id="@+id/guideline2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintGuide_percent="0.25"
            app:layout_constraintHorizontal_bias="0.5"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <androidx.constraintlayout.widget.Guideline
            android:id="@+id/guideline3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:drawable/ic_menu_close_clear_cancel"
            android:orientation="vertical"
            app:layout_constraintGuide_percent="0.5" />

        <TextView
            android:id="@+id/textView5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="学习计时"
            android:textColor="#000000"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toStartOf="@+id/guideline2"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/iv_learn"
            app:layout_constraintVertical_bias="0.1" />

        <TextView
            android:id="@+id/textView6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="起床睡觉"
            android:textColor="#000000"
            app:layout_constraintBottom_toBottomOf="@+id/textView5"
            app:layout_constraintEnd_toStartOf="@+id/guideline3"
            app:layout_constraintHorizontal_bias="0.465"
            app:layout_constraintStart_toStartOf="@+id/guideline2"
            app:layout_constraintTop_toTopOf="@+id/textView5" />

        <TextView
            android:id="@+id/textView8"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="视频打卡"
            android:textColor="#000000"
            app:layout_constraintBottom_toBottomOf="@+id/textView6"
            app:layout_constraintEnd_toStartOf="@+id/guideline4"
            app:layout_constraintStart_toStartOf="@+id/guideline3"
            app:layout_constraintTop_toTopOf="@+id/textView6" />

        <TextView
            android:id="@+id/textView9"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="图书馆"
            android:textColor="#000000"
            app:layout_constraintBottom_toBottomOf="@+id/textView8"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="@+id/guideline4"
            app:layout_constraintTop_toTopOf="@+id/textView8" />


        <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/ll_create"
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:layout_marginStart="15dp"
            android:layout_marginLeft="15dp"
            android:layout_marginEnd="15dp"
            android:layout_marginRight="15dp"
            android:background="@drawable/background_button"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="1.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/textView8"
            app:layout_constraintVertical_bias="0.382">


        </androidx.constraintlayout.widget.ConstraintLayout>

        <ImageView
            android:id="@+id/imageView6"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:background="@mipmap/icon_post_add"
            app:layout_constraintBottom_toBottomOf="@+id/ll_create"
            app:layout_constraintEnd_toStartOf="@+id/guideline3"
            app:layout_constraintStart_toStartOf="@+id/guideline2"
            app:layout_constraintTop_toTopOf="@+id/ll_create" />

        <TextView
            android:id="@+id/tv_create"
            android:layout_width="94dp"
            android:layout_height="wrap_content"
            android:layout_marginEnd="95dp"
            android:layout_marginRight="95dp"
            android:text="@string/create_group"
            android:textColor="@color/colorAccent"
            android:textSize="18sp"
            app:layout_constraintBottom_toBottomOf="@+id/imageView6"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@+id/imageView6"
            app:layout_constraintTop_toTopOf="@+id/imageView6" />

        <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/ll_diary"
            android:layout_width="0dp"
            android:layout_height="98dp"
            android:layout_marginStart="8dp"
            android:layout_marginLeft="8dp"
            android:layout_marginEnd="8dp"
            android:layout_marginRight="8dp"
            android:background="@drawable/background_button_yellow"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toStartOf="@+id/guideline3"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent">


            <TextView
                android:id="@+id/textView2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/post_diary"
                android:textColor="#FFFFFF"
                android:textSize="18sp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintVertical_bias="0.8" />

            <ImageView
                android:id="@+id/imageView4"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:background="@mipmap/icon_post_video"
                app:layout_constraintBottom_toBottomOf="@+id/textView2"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="0.505"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintVertical_bias="0.19" />

        </androidx.constraintlayout.widget.ConstraintLayout>

        <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/constraintLayout"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginStart="8dp"
            android:layout_marginLeft="8dp"
            android:layout_marginEnd="8dp"
            android:layout_marginRight="8dp"
            android:background="@drawable/background_button_orange"
            android:orientation="vertical"
            app:layout_constraintBottom_toBottomOf="@+id/ll_diary"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toStartOf="@+id/guideline3"
            app:layout_constraintTop_toTopOf="@+id/ll_diary">

            <TextView
                android:id="@+id/textView3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/post_video"
                android:textColor="#FFFFFF"
                android:textSize="18sp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintVertical_bias="0.8" />

            <ImageView
                android:id="@+id/imageView5"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:background="@mipmap/icon_new_post_diary"
                app:layout_constraintBottom_toBottomOf="@+id/textView3"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintVertical_bias="0.19" />
        </androidx.constraintlayout.widget.ConstraintLayout>

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@mipmap/close"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/ll_create"
            app:layout_constraintVertical_bias="0.29000002" />
    </androidx.constraintlayout.widget.ConstraintLayout>


</androidx.constraintlayout.widget.ConstraintLayout>

 

_火焰猫
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ConstraintLayout全解&实例，官方推荐的约束布局
05-25
ConstraintLayout，官方强推的约束布局。特点是可视化操作。且能替代RelativeLayout，解决多层嵌套布局，以及实现类似前端flexible布局的控件。
可能是你最需要的ConstraintLayout示例集锦
weixin_30625691的博客
06-30 99
以往的关于ConstraintLayout的文章都是讲解它的各种属性的用法，到底这些用法和属性怎么达到效果却说不清，只干巴巴说些属性的作用有什么用，希望直接能上手来用，因此以目标为导向，来看看这个控件如何展示它强大的功能! 说明 有些效果完全可以用嵌套实现，但却不能仅用一个层次的控件实现，所以可以多用ConstraintLayout进行视图层次的优化, 最好就是一开始直接用ConstraintL...
Android ConstraintLayout 详解及示例
热门推荐
klylove的博客
12-16 1万+
前言 ConstraintLayout 可让您使用扁平视图层次结构（无嵌套视图组）创建复杂的大型布局。它与 RelativeLayout 相似，其中所有的视图均根据同级视图与父布局之间的关系进行布局，但其灵活性要高于 RelativeLayout，并且更易于与 Android Studio 的布局编辑器配合使用。 ConstraintLayout 的所有功能均可直接通过布局编辑器的可视化工具来使用，因为布局 API 和布局编辑器是专为彼此构建的。 因此，您完全可以使用 ConstraintLayout 通过
ConstraintLayout布局示例
唐诺
09-16 1026
ConstraintLayout布局实战示例
ConstraintLayout 使用详解，减少嵌套 UI， 提升性能
徐公，微信公众号同名
01-29 925
对于初学者来说，可能觉得ConstraintLayout属性多，且属性长而弃用它，那你错失了这个大宝贝。因为在复杂布局，我们会一直用RelativeLayout和LinearLayout去嵌套，因为嵌套的ViewGroup会导致手机多次测量和绘制，从而影响性能，如果嵌套严重可能出现掉帧或卡顿。使用ConstraintLayout一招入魂。一句话概括是：传统布局能实现的，它能轻松实现实现。传统布局不能实现的，它也能实现。
ConstraintLayout Demo
07-15
Android ConstraintLayout的一些特性的示例， 基于androidx.constraintlayout:constraintlayout:2.0.0-beta6, 详见我的博客: https://blog.csdn.net/EthanCo/article/details/105722610
ConstraintLayout学习
07-26
ConstraintLayout学习
ConstraintLayout一看就懂
12-18
ConstraintLayout一看就懂。。。。。。。。。。。 解压密码：lemisky
ConstraintLayout
04-30
ConstraintLayout这个demo 的参考地址效果图自己参考写了一个demo 顺便说下自己的思路,之前一直以为约束布局它是拖拽类型的每次都是直接删除掉了这次自己把它理解为相对布局,但是不是说是,android:layout_marginLeft...
android 布局之ConstraintLayout的使用
08-27
主要介绍了android 布局之ConstraintLayout的使用,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Android-ConstraintLayout示例
08-12
1、2016年Google I/O推出的约束布局 2、优势：减少布局层次与嵌套、提升渲染性能 3、集RelativeLayout和百分比布局优势于一身
android studio项目-ConstraintLayout布局案例
11-26
android studio项目-ConstraintLayout布局案例。 新版本的android studio开发工具新增的一个非常厉害的布局ConstraintLayout，可以高效率地进行应用界面的布局开发。
Android ConstraintLayout 使用实例
meixi_android的博客
10-14 310
ConstraintLayout Android开发约束布局ConstraintLayout
代码控制约束布局ConstraintLayout
曲幽
12-02 4702
实例化布局，同其他布局一样，new 一个根布局出来用来放置控件。控件的定位和约束控制需要借助 `ConstraintLayout.LayoutParams` 来设置，在设置约束时，要知道所参考的控件的 ID 值，如果是自定义的控件，记得给控件加上 `setId()` 。定位参考父布局，首先要拿到根布局的ID值，在xml中我们直接使用 parent 在代码里，也有相对应的ID值`ConstraintLayout.LayoutParams.PARENT_ID`。
最全面的ConstraintLayout教程
郭霖
02-03 5307
亲自执笔，给大家带来新年第一篇原创文章
约束布局ConstraintLayout（官翻篇）
梦想家Eva的专栏
11-15 2681
想写一篇关于约束布局ConstraintLayout的使用，看了网上其他人总结的很全面，一下子不知道自己该写什么了，索性翻译下官网文章，顺便锻炼下英文阅读能力。 原文地址： ConstraintLayout https://developer.android.com/reference/androidx/constraintlayout/widget/ConstraintLayout
ConstraintLayout 布局应用
IT小蔡的博客
07-07 492
ConstrainLayout官方文档 https://developer.android.google.cn/reference/android/support/constraint/ConstraintLayout.html 目录 ConstraintLayout常用标签 1、相对位置约束 2、Circular positioning (Added in 1.1) 圆形定位 3、D...
Android中ConstraintLayout的基础知识和创建动画
fjnu_se的博客
06-11 539
目录什么是ConstraintLayout简要介绍如何使用ConstraintLayout配置依赖基本属性用法示例居中偏移基线对齐实例GuidelineGroupBarrier如何利用ConstraintLayout创建动画基本思想动画效果总结 什么是ConstraintLayout 简要介绍 ConstraintLayout名为约束布局，如它的名字所示，ConstrainLayout可以通过约束一个控件相对于另一个控件的位置来得到你想要的布局。这么一说，似乎RelativeLayout也能做到，但是Con
Android新布局组件ConstainLayout了解使用
hn_lgc的专栏
02-05 5114
Android新布局组件ConstainLayout了解使用  一、概述 ConstrainLayout约束布局，它算是一个重量级的组件了。在Google 2016 I/O上发布的，需要Android Studio 2.2及以上的支持，使用支持包最低可支持到Android OS 2.3版本的系统上。为什么它是一个重量级的组件呢？1、Studio专门修改了xml界面的design界面用于
用代码举个例子
最新发布
05-31
好的，下面是使用代码创建约束布局的一个例子： ``` <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app=...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值