被邀请做刷客会不会碰到钓鱼网站,最新的新闻,徐州城乡建设局安监处网站,郑州网站开发的公司约束布局#xff08;ConstraintLayout#xff09;与相对布局差不多#xff0c;是创建一个应用后默认的布局方式#xff0c;比相对布局更加灵活#xff0c;一般用于平铺的布局#xff08;不适用于层叠布局#xff09;#xff0c;常用于托拖拽方式构建页面#xff0c;最… 约束布局ConstraintLayout与相对布局差不多是创建一个应用后默认的布局方式比相对布局更加灵活一般用于平铺的布局不适用于层叠布局常用于托拖拽方式构建页面最特色的地方在于布局中可以设置参考线、通过托拉拽方式去放置好组件、需要设置约束否则会设置为绝对定位。一般采用设计界面进行开发。 拖拉拽设计方式
如果此时直接拖入一个按钮想要放置在正中央会看到出现水平虚线和垂直虚线参考线 如果不想放置在正重要也可以点击参考线可以添加水平参考线和垂直参考线以及其他参考线 当添加水平参考线后出现了一条水平方向上的虚线左侧显示为三角形 点击三角形可以改变三角形方向测出下方距离 继续点击三角形可以将三角形变为百分号% 代表的意思是该水平参考线距离顶部2%的位置如果你想要设置为垂直居中的位置则需要拖动参考线直到显示的百分比为50% 垂直方向的参考线也是一样的操作方法
首先添加一条垂直方向的参考线连续点击三角形使其变为百分比的形式拖动线直到其显示为50% 绘制参考线的目的是为了方便放置组件运行的时候该参考线是看不见的。此时拖入一个按钮放置在垂直水平居中的位置看到两条虚线加粗后则表示位置放置准确再放开鼠标。 此时再拖入一个按钮等待垂直方向上的参考线变粗后放开鼠标 添加约束点击新组件的下方的圆点连接搭配旧组件的上方圆点意思是新组件相对旧组件来的垂直上方位置 结果发现按钮往下移动了位置 如果不想两个组件爱的太近可以点击新组件设置下边距为50dp 设计如下界面就容易了 代码解读
因为其他组件都是参考中间这个组件来的所以看代码的时候优先看参考组件发现id是button 再看上方组件的代码在参考组件的上方且下边距为50dp。与相对布局不同的是设置在参考组件的某个方位的属性中都带有constraint。 一般使用约束布局就很少去看代码直接设计即可。作为初学者还是可以看看代码。代码方式能精准定位托拉拽很难精确定位如果是熟悉了两种方法均可做出同样效果配合使用更高效。
测试
使用拖拉拽方式设计一个登录界面 需要注意的是排版好了一定要添加约束否则设计图和运行出来的结果不一致。
添加约束 参考代码
?xml version1.0 encodingutf-8?
androidx.constraintlayout.widget.ConstraintLayout xmlns:androidhttp://schemas.android.com/apk/res/androidxmlns:apphttp://schemas.android.com/apk/res-autoxmlns:toolshttp://schemas.android.com/toolsandroid:layout_widthmatch_parentandroid:layout_heightmatch_parenttools:context.MainActivityandroidx.constraintlayout.widget.Guidelineandroid:idid/guideline3android:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:orientationverticalapp:layout_constraintGuide_percent0.1 /androidx.constraintlayout.widget.Guidelineandroid:idid/guideline4android:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:orientationverticalapp:layout_constraintGuide_percent0.5 /androidx.constraintlayout.widget.Guidelineandroid:idid/guideline5android:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:orientationhorizontalapp:layout_constraintGuide_percent0.5 /androidx.constraintlayout.widget.Guidelineandroid:idid/guideline6android:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:orientationhorizontalapp:layout_constraintGuide_percent0.25 /androidx.constraintlayout.widget.Guidelineandroid:idid/guideline7android:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:orientationhorizontalapp:layout_constraintGuide_percent0.75 /androidx.constraintlayout.widget.Guidelineandroid:idid/guideline8android:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:orientationverticalapp:layout_constraintGuide_percent0.9 /ImageViewandroid:idid/imageViewandroid:layout_width409dpandroid:layout_heightwrap_contentandroid:layout_marginTop128dpapp:layout_constraintEnd_toEndOfparentapp:layout_constraintHorizontal_bias0.5app:layout_constraintStart_toStartOfparentapp:layout_constraintTop_toTopOfparentapp:srcCompatdrawable/ic_launcher_background /TextViewandroid:idid/textView2android:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:layout_marginStart30dpandroid:layout_marginTop100dpandroid:textSize18spandroid:text用户名app:layout_constraintStart_toStartOfparentapp:layout_constraintTop_toBottomOfid/imageView /TextViewandroid:idid/textView3android:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:layout_marginStart30dpandroid:layout_marginTop50dpandroid:text密 码android:textSize18spapp:layout_constraintStart_toStartOfparentapp:layout_constraintTop_toTopOfid/guideline5 /EditTextandroid:idid/editTextTextandroid:layout_width256dpandroid:layout_height44dpandroid:layout_marginStart10dpandroid:layout_marginTop90dpandroid:layout_marginEnd40dpandroid:ems10android:hint请输入用户名android:inputTypetextapp:layout_constraintEnd_toEndOfparentapp:layout_constraintStart_toEndOfid/textView2app:layout_constraintTop_toBottomOfid/imageView /EditTextandroid:idid/editTextTextPasswordandroid:layout_width259dpandroid:layout_height41dpandroid:layout_marginStart10dpandroid:layout_marginTop7dpandroid:layout_marginEnd40dpandroid:ems10android:hint请输入密码android:inputTypetextPasswordapp:layout_constraintEnd_toEndOfparentapp:layout_constraintStart_toEndOfid/textView3app:layout_constraintTop_toBottomOfid/editTextText /Buttonandroid:idid/button6android:layout_width321dpandroid:layout_height48dpandroid:layout_marginStart30dpandroid:layout_marginTop50dpandroid:layout_marginEnd30dpandroid:text登录app:layout_constraintEnd_toEndOfparentapp:layout_constraintStart_toStartOfparentapp:layout_constraintTop_toBottomOfid/textView3 //androidx.constraintlayout.widget.ConstraintLayout
模拟器效果 真机效果 大致看起来差不多但是仔细点看会发现无论是模拟器还是真机都和设计图有差别这是因为屏幕尺寸不同。 所以拖拉拽的方式虽然简单但是很难做出适合各种屏幕尺寸的效果主要原因是使用拖拉拽的方式添加约束看起来很近的时候我们会习惯性设置边距其次设置了参考线但是除了水平居中和垂直居中外其他参考线都无法使得其变粗放置组件就会去设置边距。 所以初学开发者通常宁愿写代码不愿意拖拉拽。这样更容易按照设计图出相应的程序。
