2017Google Study Jams系列之课程1B-打造布

2017-03-12 本文已影响26人娄叔啊喂

@极简主义患者/社交控/伪技术宅/沉迷幻想不能自拔的文艺少年
不定期更新的文字平台:微博简书

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)

2017Google Study Jams系列之课程1B-打造布

1. 线性布局(LinearLayout)

2.相对布局(RelativeLayout)

3.与Google的Kirill Grouchnikov聊天

猜你喜欢

热点阅读