@极简主义患者/社交控/伪技术宅/沉迷幻想不能自拔的文艺少年
不定期更新的文字平台:微博 简书
Viewgroups是包含了一组视图的视图,与视图一样有矩形边界和各种属性
包含其他视图的视图为父视图,被包含的视图则称为子视图,同被一个父视图包含的所有子视图称为兄弟视图
1. 线性布局(LinearLayout)
-
例子:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orintentation="vertical" android:layout_width="wrap_content" android:layout_height="wrap_content"> <TextView android:text="Guest List" android:layout_height="wrap_content" android:layout_width="wrap_content"/> <TextView android:text="Kunal" android:layout_width="wrap_content" android:layout_height="wrap_content"/> </LinearLayout> ``` - 还记得1A课程中我们提到的**独立结束标签**和**自结束标签**吗? 在上面的示例代码中`<LinearLayout ...></LinearLayout>`就是一个独立结束标签,而在第一个**>**之前的代码属于线性组视图的标签属性,所以并没有**/**哦! - Google我们没见到过的属性:**android:orintentation**,在开发者文档里面找到有如下解释: > __android:orientation__ Should the layout be a column or a row? Use "horizontal" for a row, "vertical" for a column. The default is horizontal. 所以我们可以知道orintentation这个属性是用来控制线性布局的排列方向:**水平(horizontal)or垂直(vertical)** - 第一行属性xmlns是XML命名空间(namespace)声明，是为了防止属性名称冲突而需要遵守的.比如**A.width和B.width**就是两个拥有不同命名空间但同属性名的属性,有了命名空间后他们不会发生冲突 -
布局要点:(宽度&高度/等权重子视图/布局权重)
- 宽度&高度:在1A课程里我们也说过设定视图固定宽度和高度时使用dp作为单位,设定自动化宽高dp值使用wrap_content,在这里同样适用,而有了Viewgroup之后我们多了一种属性值叫match_parent,可设置子视图的宽度或高度与父视图一致.
- 等权重子视图(Equally weighted children):设置子视图高度(或者宽度,相对于竖直和水平布局)属性为0dp,布局权重属性(layout_weight)为1
- 布局权重即将屏幕进行比例分割,然后根据每个视图所设置的权重进行布局
2.相对布局(RelativeLayout)
-
根据子视图与父视图的相对位置进行布局
- 子视图与父视图的位置关系有四种:Left edge/Top edge/Right edge/Bottom edge,所以决定子视图位置的属性有:
android:layout_alignParentTop="true"//false可缺省,下同 android:layout_alignParentBottom="true" android:layout_alignParentLeft="true" android:layout_alignParentRight="true" android:layout_centerHorizontal="true" android:layout_centerVertical="true"这些属性称为布局参数,而且可同时使用,从而实现子视图的各种摆放位置，下面为一个例子:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:padding="16dp"> <TextView android:text="I’m in this corner" android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_alignParentBottom="true" android:layout_alignParentLeft="true" /> <TextView android:text="No, up here" android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_alignParentTop="true" android:layout_alignParentLeft="true" /> <TextView android:text="Wait, I’m here" android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_alignParentBottom="true" android:layout_alignParentRight="true" /> <TextView android:text="Actually, I’m here" android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_alignParentTop="true" android:layout_alignParentRight="true" /> </RelativeLayout> -
根据子视图与兄弟视图的相对位置进行布局
- 首先需要有锚点视图,即已经利用相对父视图固定好位置的子视图,其他子视图可以根据锚点视图进行布局,属性包括:
//我们在进行相对定位时需要知道锚点视图的ID名称,ID名称是每个视图可定义的唯一的标识 android:id="@+id/xx_xx" //在需要定位的视图属性加入如下属性即可相对"xx_xx"进行定位 android:layout_toLeftof="@id/xx_xx" android:layot_above="@id/xx_xx"更多布局属性需要Google咯,下面给出视频中的例子:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:id="@+id/lyla_text_view" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_alignParentLeft="true" android:textSize="24sp" android:text="Lyla" /> <TextView android:id="@+id/me_text_view" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_toRightOf="@id/lyla_text_view" android:textSize="24sp" android:text="Me" /> <TextView android:id="@+id/natalie_text_view" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_above="@id/lyla_text_view" android:textSize="24sp" android:text="Natalie" /> <TextView android:id="@+id/jennie_text_view" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_alignParentRight="true" android:textSize="24sp" android:text="Jennie" /> <TextView android:id="@+id/omoju_text_view" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_above="@id/jennie_text_view" android:textSize="24sp" android:text="Omoju" /> <TextView android:id="@+id/amy_text_view" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_above="@id/omoju_text_view" android:textSize="24sp" android:text="Amy" /> <TextView android:id="@+id/ben_text_view" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:layout_centerHorizontal="true" android:textSize="24sp" android:text="Ben" /> <TextView android:id="@+id/kunal_text_view" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:layout_toLeftOf="@id/ben_text_view" android:textSize="24sp" android:text="Kunal" /> <TextView android:id="@+id/kagure_text_view" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_toRightOf="@id/ben_text_view" android:textSize="24sp" android:text="Kagure" /> </RelativeLayout> -
内边距(padding)和外边距(maigin)
- 内边距的设定方法:
android:padding="Ndp" or android:paddingLeft="Ndp" android:paddingRightt="Ndp" android:paddingTop="Ndp" android:paddingBottom="Ndp"- 外边距的设置需要在ViewGroup 中,设定方法：
android:layout_margin="Ndp" or android:layout_marginLeft="Ndp" android:layout_marginRight="Ndp" android:layout_marginTop="Ndp" android:layout_marginBottom="Ndp"- 设置边距的值:
Material Design指南中建议8dp的倍数
如在App应用设计界面从左至右划三条线:**16dp/72dp/-16dp**
做到排列有序,会使应用更容易阅读和使用 - 给出视频中的例子:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <ImageView android:src="@drawable/ocean" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" android:scaleType="centerCrop" /> <TextView android:text="You're invited!" android:layout_width="match_parent" android:layout_height="wrap_content" android:paddingTop="16dp" android:paddingLeft="16dp" android:paddingBottom="8dp" android:textColor="@android:color/white" android:textSize="45sp" android:background="#009688"/> <TextView android:text="Bonfire at the beach" android:layout_width="match_parent" android:layout_height="wrap_content" android:paddingLeft="16dp" android:paddingBottom="16dp" android:textColor="@android:color/white" android:textSize="24sp" android:background="#009688"/> </LinearLayout>
3.与Google的Kirill Grouchnikov聊天
在这个聊天中Kirill Grouchnikov提到了在布局设计中的**模块复用**思想,感兴趣的童鞋可以看看这个:
[模块化的意义何在？](https://www.zhihu.com/question/21552857)
[软件开发思路：整合，复用，分享](http://blog.csdn.net/chgaowei/article/details/4585325)