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

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

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)