ConstrainLayout解决复杂的嵌套布局

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qwe0754444/article/details/60132373

       最近,项目比较忙,没什么时间写博客。

       今天我要讲的是,项目中复杂的嵌套布局你讲采取何种方式呢?如果按常规方式去做,估计你做完一个界面,估计够呛。我将推荐你们使用谷歌推出的ConstrainLayout,虽然还没有出正式版本,但用于复杂嵌套布局,能解决你很多问题。

       首先你要在项目中依赖于compile 'com.android.support.constraint:constraint-layout:1.0.0-beta4',很明显你能看到beta版本,这就是谷歌对外发布的测试版本,他就是要通过公测,收集各项反馈意见。以往我们觉得写布局是最没有技术含量,是因为布局太过于简单。现在我们就来玩玩ConstraintLayout。

       其次,你要明确,ConstrainLayout可能颠覆你以往写布局的方式,因为现在的一切你可能是直接在界面操作的。

       1.创建一个ConstrainsLayout的xml文件,你将看到直接可以查找ConstrainLayout。

     2.xml文件的起始和结束

<android.support.constraint.ConstraintLayout

    xmlns:android=" http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

</android.support.constraint.ConstraintLayout>

    3.当你看不到布局栏目红圈的内容,请注意在图片右下角,你要把它点击出来


    4.以前我们写布局,直接嵌套在LinearLayout或者RelativeLayout中,直接的约束条件就是layout_width和layout_height。但是,ConstrainLayout并不是这样子,他是通过你在布局界面
拖动控件,然后手动给他添加约束。因为不知道你到底要讲控件放置在哪里。如下图
 

我们可以看出,控件我们必须给它束缚左上右下,如果我们不这样子,控件就会默认跳到左上角,因为它不知道哪个地方属于它的。通过我们确认束缚它几个方向后,我们就可以去拖动,把它拖到你想要放置的位置。

5.接下来讲讲如何删除束缚,就是我们给他四个方向添加了束缚后,我们不要了,如何取消。总共有三种办法。

第一种,将鼠标放置在空间上,四个方向上分辨有红色圆圈,点击一个消除一个方向上的束缚


第二种,将鼠标放置在控件上出现一个带X的图标,点击它,自动清除该控件上的所有束缚


第三种,点击栏目上带有X的图标,自动清除所有束缚

6.接下来讲讲比较重要的辅助线,分为水平和处置,能很好针对嵌套布局

因为我们不可能每次通过屏幕四个边去束缚控件,这样长距离拖动它,心太累了。所以,有这两个辅助线,实在很方便。注意拖动水平或者垂直线,它都会动态有一个相对于X轴和Y轴的距离值,这样我们就很清楚布局中,我们该把控件放置在哪个位置上。

第一种,垂直

第二种,水平

这里有个注意点,如果在嵌套布局中,这个两根辅助线不可以随意删除,这样控件就会少去一个或多个方向上的束缚,代码将会报红,有error。

7.各种束缚和辅助还有删除都讲了,现在应该讲讲嵌套布局中,如何去定义这个控件的大小和放置位置了,这个就是properties了,你应该注意到右边这块区域

第一,我们可以不用在布局中拖动上下左右,这里,我们便可以去操作


第二,你应该注意到properites中,这个控件四个方向上都有一个16,那是默认束缚该控件相对于一个方向上的距离,当我们将控件拖动到边边,我们发现一直拖不到边,一直有一点距离,那是因为这个properties束缚了它。

注意控件四个方向相对于边的束缚距离,我们可以选择也可以去定义。

第三,我们在这里可以修改控件的宽高还有名字,这里我就不演示了。

          最近项目比较忙,这篇文章也是抽时间出来写得,还有很多东西写不完善,因为这篇文章我保存到草稿箱很多次了,强迫症的我,要求我必须赶完发表一篇关于ConstrointLayout。我就先演示一些基础的东西,以后想到,再演示其他给大家。赶出来的东西,还有很多不足,以后我再完善。

猜你喜欢

转载自blog.csdn.net/qwe0754444/article/details/60132373