constrainlayout用法总结(一)

       constrainlayout字面之意约束布局,是google推出的用于最大化的解决布局嵌套问题,同时减少布局渲染时间,提升性能的布局。与相对布局Relativelayout有些类似,约束布局的原理与相对布局是一样的,都是根据视图与视图之间的相互依赖,相对父级布局的位置来进行布局的。但是比Relativelayout更加的灵活,功能更加强大。

        该笔记按照几个步骤来进行展开描述,阐释。

  • 开始

     在项目当中的gradle当中添加constraint-layout依赖:

implementation 'com.android.support.constraint:constraint-layout:1.1.2'
  • 新建布局
<?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"
    tools:context=".MainActivity">


</android.support.constraint.ConstraintLayout>
  • 添加约束

       添加约束的方式常见两种方式:

       手动进行拖拽:将控件拖进布局空间,然后通过constraint-layout为控件提供的课件的操作部件进行约束的添加。这种方式简便快捷,效率较高,一句话android终于有了一种可以抗衡ios的操作,但是给我的感觉说真的还是差那么一点,体验过ios操作的朋友们能够明白我的意思。当然笔者并不建议以拖拽的方式添加约束。笔者的习惯绝对是会去手敲去添加约束的。

      手敲xml:可能有朋友会说,放着简单便捷的操作不用而去手敲,不是自己找麻烦吗?是的你说的很对。但是我就是愿意去找这个麻烦的。首先我手写的方式能够让我更深刻的去理解constraint-layout为我们提供的属性的特性,并且根据组合属性方式去观察展示效果,这个过程是一个最简单有效的去理解记忆属性特点的好方法。有一部分朋友在使用拖拽方式完成布局后基本上不会再去看xml中自动生成的属性了,等到需求界面一旦发生改变的时候,如果不知道具体的属性产生什么效果,那么你绝对会后悔的,其中苦痛自己体会。

首先,先说一下拖拽方式:

这里写图片描述

可以看到,上下左右都有一个小圆圈,这个圆圈就是用来添加约束的。 
四个角的矩形,是用来扩大或缩小控件的。

这里写图片描述:删除选中控件的所有约束。 
这里写图片描述:编辑基线,用于基线对齐(下面会说)。

现在我们来为这个 Button 添加约束:

这里写图片描述

  • 属性介绍      
  • layout_constraintRight_toLeftOf
  • layout_constraintRight_toRightOf
  • layout_constraintTop_toTopOf
  • layout_constraintTop_toBottomOf
  • layout_constraintBottom_toTopOf
  • layout_constraintBottom_toBottomOf
  • layout_constraintBaseline_toBaselineOf
  • layout_constraintDimensionRatio
  • layout_constraintHorizontal_weight
  • layout_constraintVertical_weight
  • layout_constraintHorizontal_bias
  • layout_constraintVertical_bias
  • layout_constraintHorizontal_chainStyle
  • layout_constraintVertical_chainStyle

      如上面列出来的属性都是我们开发过程中经常需要用到的属性,大家还可以注意到上面的属性我分别用不同的几种颜色标注了。那么我们就来一一的解读吧。

  首先看红色的部分,这部分的属性跟相对布局(Relativelayout)比较类似,例如app:layout_constraintRight_toLeftOf="@+id/idview"意思为当前控件的右侧在其他控件的左侧,其他的此类属性都是类似的意思。那么最简单的我们想布局中拖入一个控件例如button:

 <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:text="button"/>

   大家肯定注意到了其中的四个属性后面的值是“parent”,这样的四个属性同时作用下,控件button居于父级布局的中央。大家可能有疑问,为什么控件button不在父布局的左上角。constraint-layout约束布局,如果我们只添加左侧或者顶部的属性那么效果会是怎么样呢? 

只添加左上约束:此时的button就出现了停留在左上角的位置,当然如果添加其他的属性,大家可自行实验。

此时我们在顶部在次添加一个button。

 <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:text="button"/>

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/button1"
        app:layout_constraintRight_toRightOf="parent"
        android:text="button"/>

我们想实现一个button1在左侧,然后button占满右侧空间,如上代码所示却并不能得到我们想要的结果,上述代码的效果是

而想要达到这样的效果我们button2的宽度需要修改为0dp效果即为:

<Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:text="button"/>

    <Button
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/button1"
        app:layout_constraintRight_toRightOf="parent"
        android:text="button"/>

你会发现button2,好像疯了一样,我们设置的在button1右侧,和与parent右侧对齐完全失效了!!!

别怕,接下来就让你认识到为什么这个控件叫做constraint-layout

在当控件有自己设置的宽度,例如warp_content、固定值时,我们为控件添加的都是约束“Constraint”,这个约束有点像橡皮筋一样会拉这个控件,但是并不会改变控件的尺寸(RL很明显不是这样的)。

例如上例,当button2的宽度较小时,我们为其左侧设置了一个约束(button1右侧),右侧设置了一个约束(parent右侧对其),当两个约束同时生效的时候(你可以认为两边都是相同的一个拉力),button2会居中。

当btn02特别大的时候,依然是这两个力,那么会发生什么?会造成左侧和右侧超出的距离一样大。

那么现在大家肯定有些疑问:

  • 怎么样才能和上面的RL一样,宽度刚好占据剩下的距离呢(btn01右侧到屏幕右侧的距离)?

这个问题,问得很好,我们刚才所有的尝试都是在控件自身拥有特定的宽度情况下执行的;那么如果希望控件的宽度根据由约束来控件,不妨去掉这个特定的宽度,即设置为0试试?

对!当我们将btn02的宽度设置为0时,一切又变得很完美

大家可能疑惑为什么match_parent不是将控件填满剩下的水平空间呢,之前我也想不明白,但是我查阅了官方资料,如下

那么这里,你可能会问0值是什么含义,其实在ConstraintLayout中0代表:MATCH_CONSTRAINT,看到这个常量,是不是瞬间觉得好理解了一点。

  • 最后一个问题,MATCH_PARENT哪去了?

看官网的解释:

Important: MATCH_PARENT is not supported for widgets contained in a ConstraintLayout, though similar behavior can be defined by using MATCH_CONSTRAINT with the corresponding left/right or top/bottom constraints being set to “parent”.`

所以你可以认为:在ConstraintLayout中已经不支持MATCH_PARENT这个值了,你可以通过MATCH_CONSTRAINT配合约束实现类似的效果。当然在我们在将button2的宽度设为wrap_content时候,button2却位于右侧的中央部分,产生这种情况的原因是因为在constraint-layout中每个控件的属性设置当中默认都包含两个属性:

  • layout_constraintHorizontal_bias
  • layout_constraintVertical_bias

他们表示的意思就是控件在设置了水平或者垂直方向上的约束后,表示在水平或者垂直方向的拉力的大小,默认不添加这两个属性的话,他们的默认值是两个方向都是50%,即0.5。如果两侧拉力不是0.5,那么就不是位于中间的位置,请大家自行实践。

好了,到这里,目前我们已经看到其已经和RelativeLayout势均力敌了,接下来我们看一下RL做不到的特性

 现在的要求是我们要做一个banner,宽高比为16:9,如果在之前的话我们只能在代码中动态设置宽高比,可是呢constraint-layout在我们xml里面设置一个属性就可以实现了。

layout_constraintDimensionRatio

没错就是这个属性,使用的时候

 <Button
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/button1"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintDimensionRatio="16:6"
        android:text="button"/>

那么这样启动的作用就是宽高比为16:6当然控件的宽高都是 MATCH_CONSTRAINT即0dp。写法可以是app:layout_constraintDimensionRatio="H,16:6"或者是app:layout_constraintDimensionRatio="W,16:6",这就是宽高方向上的比例。效果就是

下面我们再来看如果我要做一个tab,怎么做呢?

<TextView
        android:id="@+id/tab1"
        android:layout_width="0dp"
        android:layout_height="30dp"
        android:background="#f67"
        android:gravity="center"
        android:text="Tab1"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/tab2" />


    <TextView
        android:id="@+id/tab2"
        android:layout_width="0dp"
        android:layout_height="30dp"
        android:background="#A67"
        android:gravity="center"
        android:text="Tab2"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@id/tab1"
        app:layout_constraintRight_toLeftOf="@+id/tab3" />


    <TextView
        android:id="@+id/tab3"
        android:layout_width="0dp"
        android:layout_height="30dp"
        android:background="#767"
        android:gravity="center"
        android:text="Tab3"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@id/tab2"
        app:layout_constraintRight_toRightOf="parent" />

看下效果:

 

我们设置了tab的左右两两依赖,并且都是设置了宽度0dp,我们实现了等分的效果,使用text冒充tab成功了。

当然大家都知道我们通过linearlayout配合weight也可以实现这样的效果。是的constraint-layout同样支持这样的效果。这个属性就是app:layout_constraintHorizontal_weight,app:layout_constraintVertical_weight见名知意,假设我把他们设置为2,1,1那么效果就是:

大家都看到了到这里constraint-layout是可以达到了relativelayout和linearlayout同样的效果,可以使用constraint-layout替代他们。当然还有一些特性是相对布局与线性布局不可达到的特性。

copy一下官方文档:

Chain heads

Chains are controlled by attributes set on the first element of the chain (the "head" of the chain):

 
Fig. 10 - Chain Head

The head is the left-most widget for horizontal chains, and the top-most widget for vertical chains.

Chain Style

When setting the attribute layout_constraintHorizontal_chainStyle or layout_constraintVertical_chainStyle on the first element of a chain, the behavior of the chain will change according to the specified style (default is CHAIN_SPREAD).

  • CHAIN_SPREAD -- the elements will be spread out (default style)
  • Weighted chain -- in CHAIN_SPREAD mode, if some widgets are set to MATCH_CONSTRAINT, they will split the available space
  • CHAIN_SPREAD_INSIDE -- similar, but the endpoints of the chain will not be spread out
  • CHAIN_PACKED -- the elements of the chain will be packed together. The horizontal or vertical bias attribute of the child will then affect the positioning of the packed elements

 

 
Fig. 11 - Chains Styles

横向的相当于组成了一个链chains,同时配合上weight可以实现上图所示的效果。

chains styles:

  • layout_constraintHorizontal_chainStyle
  • layout_constraintVertical_chainStyle

前提是需要配合app:layout_constraintHorizontal_weight

1.spread + 宽度0dp   效果既是等分的效果并且占满各自的空间

2.spread + 宽度非0  

3.spread_inside + 宽度非0 

4.packed + 宽度非0

以上的条件都是宽度非0的情况下实现的效果。

下面一个属性为:layout_constraintBaseline_toBaselineOf

这个属性是对其两个控件文本部分,这个属性就不在详细的去说了。

下面还有一个叫做android.support.constraint.Guideline,这个类使用起来较为简单。

所以其有个属性为:

android:orientation取值为”vertical”和”horizontal”.

除此以外,还差个属性,决定该辅助线的位置:

  • layout_constraintGuide_begin
  • layout_constraintGuide_end
  • layout_constraintGuide_percent

可以通过上面3个属性其中之一来确定属性值位置。

begin=30dp,即可认为距离顶部30dp的地方有个辅助线,根据orientation来决定是横向还是纵向。

end=30dp,即为距离底部。 
percent=0.8即为距离顶部80%。

好了,下面看一个例子,刚才我们的浮点按钮,我决定通过两根辅助线来定位,一根横向距离底部80%,一个纵向距离顶部80%,浮点按钮就定位在他们交叉的地方。

<android.support.constraint.Guideline
        android:id="@+id/guideline_h"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.8" />


    <android.support.constraint.Guideline
        android:id="@+id/guideline_w"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.8" />

    <TextView
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:background="#612"
        app:layout_constraintLeft_toRightOf="@id/guideline_w"
        app:layout_constraintTop_toBottomOf="@id/guideline_h" />

看下效果图吧:

到这里constraint-layout的用法即属性总结了差不多了,后续还有一些属性的用法会陆续添加上来。 

       

阅读更多
换一批

TreeView用法总结(一)

10-05

[code=C#]rnprotected void Page_Load(object sender, EventArgs e)rn rn if (!IsPostBack)rn rn Bind();rn rn rn protected void Bind()rn rn BLL.Type_1 t_1 = new BLL.Type_1();rn BLL.Type_2 t_2 = new BLL.Type_2();rn DataTable dt = t_1.type_1list("");rn //文件名最好不要用控件名,否则需要用全路径.有时候可能会晕了.呵呵.rn System.Web.UI.WebControls.TreeView TreeView1 = new System.Web.UI.WebControls.TreeView();rn TreeNode RootNode = new TreeNode();rn RootNode.Text = "目录查询请点击展开";rn RootNode.Value = "1";rn RootNode.NavigateUrl = "search.aspx?id="+RootNode.Value;//链接.rn RootNode.ImageUrl = "images/menu.gif";rn RootNode.Expanded = false;//?rn TreeView1.Nodes.Add(RootNode);//添加节点.rnrn foreach (DataRow dr in dt.Rows)rn rn TreeNode node = new TreeNode();rn node.Expanded = false;rn node.Text = dr["TypeName"].ToString();rn node.Value = dr["TypeID_1"].ToString();rn node.NavigateUrl = "search.aspx?id=" + node.Value;rn this.TreeView1.Nodes.Add(node);rn rnrn int k = this.TreeView1.Nodes.Count;//第一级节点总数.rn for (int i = 0; i < k; i++)rn rn int id = Convert.ToInt32(this.TreeView1.Nodes[i].Value.ToString().Trim());rn DataTable dt1 = t_2.type_2list(id, "");rnrn foreach (DataRow dr in dt1.Rows)rn rn TreeNode node = new TreeNode();rn node.Expanded = false;rn node.Text = dr["type_2name"].ToString();rn node.Value = dr["TypeID_2"].ToString();rn this.TreeView1.Nodes[i].ChildNodes.Add(node);rn rn rn rn rn[/code]

没有更多推荐了,返回首页