`
renyuan_1991
  • 浏览: 70485 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Android的约束布局ConstaintLayout

阅读更多
ConstaintLayout的初次使用总结
转载请注明出处:[url] http://renyuan-1991.iteye.com/blog/2304152[/url]
最近google I/O大会上带来7.0的一些新的东西,而我们开发最关注的可能就是Adroid Studio2.2和ConstraintLayout这个依赖的约束库了。
    当我们需要用到这个布局的时候我们要准备好2.2以上版本的AS,
然后在项目中添加依赖:

dependencies {  
    	compile 'com.android.support.constraint:constraint-layout:1.0.0-alpha1'  
	}


新增属性:

app:layout_editor_absoluteX
	app:layout_editor_absoluteY


上面这两个属性用于指定控件的绝对位置。通过这个属性指定位置的控件可以不需要约束关系。

app:layout_constraintBottom_toBottomOf="@+id/activity_main" 
    app:layout_constraintLeft_toLeftOf="@+id/activity_main" 
    app:layout_constraintRight_toRightOf="@+id/activity_main" 
    app:layout_constraintTop_toTopOf="@+id/activity_main"

   
以上四个属性用来指定控件相对于任何其他单位的约束关系(约束对象可以是父控件,可以是同级的其他控件)。如果不指定绝对位置也不指定约束条件那么运行后这个控件就会被放置在默认的起始位置即父控件的左上角相对于父控件坐标为(0,0)地方。以上的四个属性是成对出现的,即同一个方向上的两个约束必须成对出现。也就是说,当我们指定layout_constraintBottom_toBottomOf的时候必须要指定layout_constraintTop_toTopOf才会生效,而这个时候该控件的位置才会用layout_constraintVertical_bias这个属性来描述。屏幕的高度减去该控件的高度再减去该控件的margintop和marginbottom剩余的高度我们用100%表示,那么layout_constraintVertical_bias的值表示的就是该控件上边的外边距占剩余高度的比例。
上图中的波浪线A部分加上B部分
就是100%暂且称为波浪线总长度吧。那么layout_constraintVertical_bias就表示A部分占据波浪线总长度的比例。图中的波浪线并没有到达屏幕边缘,距离上边缘72dp距离下边缘16dp。计算比例是在去掉margin之后的剩余空间进行的,与margin无关。水平方向的同理。

app:layout_constraintLeft_toRightOf
	<!--本控件的左边参照约束控件的右边-->
    app:layout_constraintRight_toLeftOf
	<!--本控件的右边参照约束控件的左边-->
    app:layout_constraintTop_toBottomOf
    <!--本控件的上边参照约束控件的下边-->
    app:layout_constraintBottom_toTopOf
    <!--本控件的下边参照约束控件的上边-->

   
以上几个属性主要是控件与控件之间的约束,规则同上。

app:layout_constraintBaseline_toBaselineOf:让控件的基线对其

TextView这种控件就算我们用Wrap_content文字也不会紧贴控件边缘,两个不同字体大小的textview就可以用这个基线进行约束对其。

app:layout_constraintStart_toStartOf
	app:layout_constraintEnd_toEndOf
	app:layout_constraintStart_toEndOf
	app:layout_constraintEnd_toStartOf

这几个约束比较特殊,我们可以理解为这几个属性是用来给控件指定起始位置的,之后的margin是在这个值的基础上进行偏移的。如下图:


app:layout_constraintCenterX_toCenterX
	app:layout_constraintCenterY_toCenterY

以上两个属性,顾名思义就是在X轴或者Y轴方向上中心对其,同样,这个属性的优先级是高于margin的。指定这个值后margin值指定的位置后再次偏移。这个时候一旦拖动控件就会生成leftToright这样的属性,生成这种属性后centertocenter就没什么作用了。

如果需要让控件的宽高以固定的比例展示可以用constraintDimensionRatio来制定(如:app:layout_constraintDimensionRatio="1:3"表示宽高比为1:3)这个属性生效需要以下条件:

* left ,right ,top ,bottom四条边都需要约束,bottom的约束可以用baseline代替。
* 宽高至少有一个是0dp或者-1dp,如果都是0dp的则会以父布局能容下的最大范围显示。

参考线
我们可以再布局中添加水平或垂直的两种参考线Guideline。接下来的三个属性就只能用在Guideline上。

app:relativePercent
	app:relativeBegin
	app:relativeEnd
	app:orientation


前面三个属性只需要任意一个就能确定参考线的位置。orientation用来指定参考线是水平还是垂直。relativePercent是一百分比的形式表示参考线所处的位置。relativeBegin和RelativeEnd分别表示距离起点和终点的距离(水平和垂直方向的分别一屏幕顶端和底端、屏幕左边和右边表示起点和终点)

说明
在ConstraintLayout的子布局中如果有ViewGroup类型的控件(如:相对布局,线性布局)这类控件的子空间不能使用约束的属性。而且该布局不能拖动(AS2.2预览版).


转载请注明出处:[url] http://renyuan-1991.iteye.com/blog/2304152[/url]
希望爱好编程的小伙伴能加这个群,互相帮助,共同学习。群号: 141877583
  • 大小: 131.4 KB
  • 大小: 180 KB
分享到:
评论

相关推荐

    Android约束布局ConstraintLayout使用完全解析

    `ConstraintLayout`是Google在Android Design Support Library中引入的一种布局,它允许开发者通过建立视图间的约束来定位和调整大小,使得布局在不同屏幕尺寸上都能保持良好的适应性。相比传统的线性布局...

    Android约束布局介绍.pptx

    Android约束布局是Google于2016年Google IO 大会推出的新型布局,本PPT对其进行了介绍。

    Android约束布局.docx

    Android 约束布局 Android 约束布局是 Android 中的一种布局方式,用于对控件进行排列和约束。它提供了多种方式来约束控件的位置和尺寸,使得布局更加灵活和灵活。 相对定位是 Android 约束布局中的一种重要概念。...

    ConstraintLayoutDemo:Android 约束布局示例

    Android 约束布局示例 约束布局在2016年IO 谷歌大会早就提出来了,As 2.2早也就有了可以拖拽的拓展,现在As 都3.x了,我现在才来看这个布局也是尴尬。ConstraintLayout有效的解决了多层嵌套复杂布局的问题,加快渲染...

    android demo,ConstraintLayout (约束布局)

    **约束布局(ConstraintLayout)是Android开发中一种强大的布局工具,尤其在构建复杂用户界面时,它的灵活性和高效性使其成为首选。这个“android demo”是专门为开发者展示如何使用ConstraintLayout设计界面而创建的...

    Android-ConstraintLayout约束布局的概念与使用

    ConstraintLayout(约束布局), 是2016年Google I/O最新推出的Android布局, 目前还在完善阶段. 从推出的力度而言, 应该会成为主流布局样式. 在最新版本的Android Studio中, ConstraintLayout已经成为默认布局.

    android布局_Android布局_android_

    6. **约束布局(ConstraintLayout)**:这是Android Studio 2.0引入的新布局,允许开发者创建复杂的界面,无需嵌套布局。通过连接视图间的约束,可以实现响应式设计,适用于不同屏幕尺寸的设备。 7. **百分比布局...

    android常用布局的使用

    在Android开发中,布局(Layout)是构建用户界面的基础元素,它定义了屏幕上控件的排列方式和相互关系。本文将深入探讨Android中常见的几种布局及其使用方法,以帮助开发者更好地构建美观且功能丰富的应用程序。 一...

    android框架布局

    最后,Android 4.0引入了约束布局(ConstraintLayout)。这是一个强大的布局工具,允许开发者创建复杂的、响应式的用户界面,无需嵌套多个布局。通过连接视图之间的关系,约束布局可以自适应屏幕大小,大大简化了...

    Android之布局实例

    本篇文章将详细讲解Android中的五种主要布局:线性布局(LinearLayout)、相对布局(RelativeLayout)、帧布局(FrameLayout)、表格布局(TableLayout)以及约束布局(ConstraintLayout),并结合实例来帮助理解...

    android 中页面布局使用demo

    6. **约束布局(ConstraintLayout)**:是Android Studio 2.2引入的新布局,它使用直观的图形界面来实现复杂的界面设计,允许子视图之间建立各种约束,实现自适应和响应式布局。 7. **绝对布局(AbsoluteLayout)**...

    android框架布局demo

    6. **约束布局(ConstraintLayout)**:是Google推出的最新布局工具,能实现复杂的界面设计,无需嵌套多个布局,通过依赖关系和约束条件实现动态调整。 7. **百分比布局(PercentLayout)**:允许子视图的大小基于...

    Android Studio 界面布局之xml文件中给输入框editText修改下划线颜色 / 为按钮设置圆角和颜色 / 约束布局预览效果和运行效果不一致 问题的解决

    Android Studio 在xml文件中设置界面布局1、xml文件中给输入框editText修改下划线颜色2、设置button按钮为圆角及修改按钮颜色3、运用约束布局时预览效果和运行效果不一致 写一写今天困扰我很久的问题:如何给...

    Android、教程<经典> 2 Android布局

    6. **约束布局(ConstraintLayout)**:这是Android Studio 2.0引入的最新布局,它使用直观的图形化工具,可以创建响应式布局,适应不同屏幕尺寸。 7. **百分比布局(PercentLayout)**:在API 21及更高版本中,...

    android UI布局工具

    在Android开发中,UI设计是至关重要的一环,而"android UI布局工具"则为开发者提供了一种更加直观和高效的界面构建方式。传统的Android界面布局通常需要编写XML代码,这种方式虽然灵活,但对初学者或者追求效率的...

    android常用布局的介绍源码

    本文将深入探讨Android中的几种常用布局,包括线性布局(LinearLayout)、相对布局(RelativeLayout)、帧布局(FrameLayout)、网格布局(GridLayout)以及约束布局(ConstraintLayout),并结合"老罗android视频-...

    android v7包

    7. **Android资源加载器**:改进了对资源的处理,包括颜色、字符串、布局等,使得在不同版本的Android上更加一致。 使用AppCompat_v7库,开发者可以确保他们的应用程序拥有与最新Android版本相匹配的用户体验,同时...

    Android五种布局模式

    本文将深入探讨Android的五种主要布局模式:线性布局(LinearLayout)、相对布局(RelativeLayout)、帧布局(FrameLayout)、网格布局(GridLayout)以及约束布局(ConstraintLayout),并结合源代码实例进行解析。...

    Android优秀布局demo_珍贵学习资料

    在Android应用开发中,布局(Layout)是构建用户界面的核心元素,它决定了应用程序中各个组件的排列方式和交互效果。本资源"Android优秀布局demo_珍贵学习资料"提供了一组精心设计的布局示例,旨在帮助开发者提升...

    android自定义圆形布局CircleLayout

    在Android开发中,自定义布局是提升应用独特性和用户体验的重要手段。`CircleLayout`就是一种特殊的自定义布局,它使得内部的子视图按照圆形排列,增强了界面的视觉效果。本篇文章将深入探讨如何实现这样一个自定义...

Global site tag (gtag.js) - Google Analytics