一起学Android之Layout

于今腐草无萤火,终古垂杨有暮鸦。这篇文章主要讲述一起学Android之Layout相关的知识,希望能为你提供帮助。
本文简述在android开发中布局的简单应用,属于基础知识,仅供学习分享使用。
概述在Android UI开发中,布局类型主要有两种:LinearLayout(线性布局)和RelativeLayout(相对布局),两种布局类型各有各的优势与使用场景。
LinearLayout(线性布局)线性布局允许所有的子元素,以单独的方向进行排列(水平或垂直),所有的元素像栈一样一个接一个的插入,所以如果是垂直(vertical)方向,则每一行只有一个元素。如果是水平(  horizontal)方向,则只有一行。(如下图1所示)
线性布局重要属性android:orientation 设置排列的方向。主要有两个值:horizontal(水平),vertical(垂直)。
android:layout_weight 权重,按比例分配剩余空间。

一起学Android之Layout

文章图片
 
一起学Android之Layout

文章图片

(图1)                                                        (图2)
RelativeLayout(相对布局)相对布局是指所有子元素以相对的位置进行定位。一个元素可以通过相对于指定的同级元素(如,左边,右边,上边,下边)进行定位,也可以通过父元素进行定位(如,布局控件的顶端,左端,右端,底部等)(如上图2 所示)。如果发现页面中有多个线性布局进行嵌套,那么你就应该用一个相对布局来替换它。
相对布局重要属性
  • android:layout_alignParentTop 是否位于父控件的顶部(true 或 false)
  • android:layout_alignParentBottom  是否位于父控件的底部(true 或 false)
  • android:layout_alignParentLeft  是否位于父控件的左边(true 或 false)
  • android:layout_alignParentRight  是否位于父控件的右边(true 或 false)
  • android:layout_centerInParent  是否位于父控件的中心(true 或 false)
  • android:layout_toLeftOf 位于指定控件的左边(值为控件的ID)
  • android:layout_toRightOf 位于指定控件的右边(值为控件的ID)
  • android:layout_above  位于指定控件的上边(值为控件的ID)
  • android:layout_below  位于指定控件的下边(值为控件的ID)
实例截图如下图1所示为线性布局(相对简单),如下图2所示,为相对布局(相对复杂)
一起学Android之Layout

文章图片
 
一起学Android之Layout

文章图片

                      图3                                                                          图4
布局源程序线性布局
一起学Android之Layout

文章图片
一起学Android之Layout

文章图片
1 < ?xml version="1.0" encoding="utf-8"?> 2 < LinearLayout 3xmlns:android="http://schemas.android.com/apk/res/android" 4xmlns:tools="http://schemas.android.com/tools" 5android:layout_width="match_parent" 6android:layout_height="match_parent" 7android:paddingBottom="@dimen/activity_vertical_margin" 8android:paddingLeft="@dimen/activity_horizontal_margin" 9android:paddingRight="@dimen/activity_horizontal_margin" 10android:paddingTop="@dimen/activity_vertical_margin" 11android:orientation="vertical" 12tools:context="com.hex.demolayout.LinearActivity"> 13< TextView 14android:id="@+id/tv_text" 15android:text="@string/tv_name" 16android:textSize="20dp" 17android:layout_marginTop="5dp" 18android:textColor="@color/colorBlue" 19android:layout_width="match_parent" 20android:layout_height="wrap_content"/> 21< EditText 22android:id="@+id/txt_name" 23android:hint="@string/hint_name" 24android:layout_width="match_parent" 25android:layout_height="wrap_content"/> 26< TextView 27android:id="@+id/tv_age" 28android:text="@string/tv_age" 29android:textSize="20dp" 30android:layout_marginTop="5dp" 31android:textColor="@color/colorBlue" 32android:layout_width="match_parent" 33android:layout_height="wrap_content"/> 34< EditText 35android:id="@+id/txt_age" 36android:hint="@string/hint_name" 37android:layout_width="match_parent" 38android:layout_height="wrap_content"/> 39< TextView 40android:id="@+id/tv_sex" 41android:text="@string/tv_sex" 42android:textSize="20dp" 43android:layout_marginTop="5dp" 44android:textColor="@color/colorBlue" 45android:layout_width="match_parent" 46android:layout_height="wrap_content"/> 47< RadioGroup 48android:id="@+id/rg_sex" 49android:layout_marginTop="5dp" 50android:orientation="horizontal" 51android:layout_width="match_parent" 52android:layout_height="wrap_content"> 53< RadioButton 54android:id="@+id/rb_male" 55android:text="@string/male" 56android:textSize="20sp" 57android:checked="true" 58android:layout_width="wrap_content" 59android:layout_height="wrap_content"/> 60< RadioButton 61android:id="@+id/rb_female" 62android:textSize="20sp" 63android:text="@string/female" 64android:layout_marginLeft="30dp" 65android:layout_width="wrap_content" 66android:layout_height="wrap_content"/> 67< /RadioGroup> 68< TextView 69android:id="@+id/tv_love" 70android:text="@string/love" 71android:textSize="20dp" 72android:layout_marginTop="5dp" 73android:textColor="@color/colorBlue" 74android:layout_width="match_parent" 75android:layout_height="wrap_content"/> 76< LinearLayout 77android:layout_width="match_parent" 78android:layout_height="wrap_content" 79android:layout_marginTop="10dp" 80android:orientation="horizontal"> 81< CheckBox 82android:id="@+id/ck_basketball" 83android:text="@string/basketball" 84android:textSize="20dp" 85android:layout_width="wrap_content" 86android:layout_height="wrap_content"/> 87< CheckBox 88android:id="@+id/ck_football" 89android:text="@string/football" 90android:textSize="20dp" 91android:layout_marginLeft="30dp" 92android:layout_width="wrap_content" 93android:layout_height="wrap_content"/> 94< CheckBox 95android:id="@+id/ck_game" 96android:text="@string/game" 97android:textSize="20dp" 98android:layout_marginLeft="30dp" 99android:layout_width="wrap_content" 100android:layout_height="wrap_content"/> 101< /LinearLayout> 102< TextView 103android:id="@+id/tv_school" 104android:text="@string/school" 105android:textSize="20dp" 106android:layout_marginTop="5dp" 107android:textColor="@color/colorBlue" 108android:layout_width="match_parent" 109android:layout_height="wrap_content"/> 110< EditText 111android:id="@+id/txt_school" 112android:hint="@string/hint_school" 113android:layout_width="match_parent" 114android:layout_height="wrap_content"/> 115< TextView 116android:id="@+id/tv_addr" 117android:text="@string/addr" 118android:textSize="20dp" 119android:layout_marginTop="5dp" 120android:textColor="@color/colorBlue" 121android:layout_width="match_parent" 122android:layout_height="wrap_content"/> 123< EditText 124android:id="@+id/txt_addr" 125android:hint="@string/hint_addr" 126android:layout_width="match_parent" 127android:layout_height="wrap_content"/> 128< Button 129android:id="@+id/bn_submit" 130android:text="@string/bn_submit" 131android:textColor="@color/colorBlue" 132android:layout_width="match_parent" 133android:layout_height="wrap_content"/> 134 < /LinearLayout>

View Code【一起学Android之Layout】相对布局
一起学Android之Layout

文章图片
一起学Android之Layout

文章图片
1 < ?xml version="1.0" encoding="utf-8"?> 2 < RelativeLayout 3xmlns:android="http://schemas.android.com/apk/res/android" 4xmlns:tools="http://schemas.android.com/tools" 5android:layout_width="match_parent" 6android:layout_height="match_parent" 7android:paddingBottom="@dimen/activity_vertical_margin" 8android:paddingLeft="@dimen/activity_horizontal_margin" 9android:paddingRight="@dimen/activity_horizontal_margin" 10android:paddingTop="@dimen/activity_vertical_margin" 11tools:context="com.hex.demolayout.MainActivity"> 12 13< TextView 14android:id="@+id/tv_title" 15android:layout_centerHorizontal="true" 16android:layout_alignParentTop="true" 17android:layout_width="wrap_content" 18android:layout_height="wrap_content" 19android:textSize="30dp" 20android:textColor="@color/colorBlue" 21android:layout_margin="3dp" 22android:text="@string/nine_tip"/> 23< TextView 24android:id="@+id/tv_center" 25android:text="@string/center" 26android:textSize="30dp" 27android:layout_margin="3dp" 28android:onClick="open" 29android:textColor="@color/colorRed" 30android:layout_centerInParent="true" 31android:layout_width="wrap_content" 32android:layout_height="wrap_content"/> 33< TextView 34android:id="@+id/tv_east" 35android:text="@string/east" 36android:textSize="30dp" 37android:layout_margin="3dp" 38android:textColor="@color/colorRed" 39android:layout_alignParentLeft="true" 40android:layout_centerVertical="true" 41android:layout_width="wrap_content" 42android:layout_height="wrap_content"/> 43< TextView 44android:id="@+id/tv_west" 45android:text="@string/west" 46android:textSize="30dp" 47android:layout_margin="3dp" 48android:textColor="@color/colorRed" 49android:layout_alignParentRight="true" 50android:layout_centerVertical="true" 51android:layout_width="wrap_content" 52android:layout_height="wrap_content"/> 53< TextView 54android:id="@+id/tv_north" 55android:text="@string/north" 56android:textSize="30dp" 57android:layout_margin="3dp" 58android:textColor="@color/colorRed" 59android:layout_alignParentBottom="true" 60android:layout_centerHorizontal="true" 61android:layout_width="wrap_content" 62android:layout_height="wrap_content"/> 63< TextView 64android:id="@+id/tv_south" 65android:text="@string/south" 66android:textSize="30dp" 67android:layout_margin="3dp" 68android:textColor="@color/colorRed" 69android:layout_below="@id/tv_title" 70android:layout_centerHorizontal="true" 71android:layout_width="wrap_content" 72android:layout_height="wrap_content"/> 73< TextView 74android:id="@+id/tv_east_south" 75android:text="@string/east_south" 76android:textSize="30dp" 77android:layout_margin="3dp" 78android:textColor="@color/colorRed" 79android:layout_below="@id/tv_title" 80android:layout_alignParentLeft="true" 81android:layout_width="wrap_content" 82android:layout_height="wrap_content"/> 83< TextView 84android:id="@+id/tv_west_south" 85android:text="@string/west_south" 86android:textSize="30dp" 87android:layout_margin="3dp" 88android:textColor="@color/colorRed" 89android:layout_below="@id/tv_title" 90android:layout_alignParentRight="true" 91android:layout_width="wrap_content" 92android:layout_height="wrap_content"/> 93< TextView 94android:id="@+id/tv_east_north" 95android:text="@string/east_north" 96android:textSize="30dp" 97android:layout_margin="3dp" 98android:textColor="@color/colorRed" 99android:layout_alignParentBottom="true" 100android:layout_width="wrap_content" 101android:layout_height="wrap_content"/> 102< TextView 103android:id="@+id/tv_west_north" 104android:text="@string/west_north" 105android:textSize="30dp" 106android:layout_margin="3dp" 107android:textColor="@color/colorRed" 108android:layout_alignParentBottom="true" 109android:layout_alignParentRight="true" 110android:layout_width="wrap_content" 111android:layout_height="wrap_content"/> 112< TextView 113android:id="@+id/tv_xun" 114android:text="@string/xun" 115android:textSize="30dp" 116android:layout_margin="3dp" 117android:textColor="@color/colorGreen" 118android:layout_below="@id/tv_east_south" 119android:layout_width="wrap_content" 120android:layout_height="wrap_content"/> 121< TextView 122android:id="@+id/tv_li" 123android:text="@string/li" 124android:textSize="30dp" 125android:layout_margin="3dp" 126android:textColor="@color/colorGreen" 127android:layout_below="@id/tv_south" 128android:layout_centerHorizontal="true" 129android:layout_width="wrap_content" 130android:layout_height="wrap_content"/> 131< TextView 132android:id="@+id/tv_kun" 133android:text="@string/kun" 134android:textSize="30dp" 135android:layout_margin="3dp" 136android:textColor="@color/colorGreen" 137android:layout_below="@id/tv_west_south" 138android:layout_alignParentRight="true" 139android:layout_width="wrap_content" 140android:layout_height="wrap_content"/> 141< TextView 142android:id="@+id/tv_zen" 143android:text="@string/zen" 144android:textSize="30dp" 145android:layout_margin="3dp" 146android:textColor="@color/colorGreen" 147android:layout_toRightOf="@id/tv_east" 148android:layout_centerVertical="true" 149android:layout_width="wrap_content" 150android:layout_height="wrap_content"/> 151< TextView 152android:id="@+id/tv_dui" 153android:text="@string/dui" 154android:textSize="30dp" 155android:layout_margin="3dp" 156android:textColor="@color/colorGreen" 157android:layout_toLeftOf="@id/tv_west" 158android:layout_centerVertical="true" 159android:layout_width="wrap_content" 160android:layout_height="wrap_content"/> 161< TextView 162android:id="@+id/tv_gen" 163android:text="@string/gen" 164android:textSize="30dp" 165android:layout_margin="3dp" 166android:textColor="@color/colorGreen" 167android:layout_above="@id/tv_east_north" 168android:layout_width="wrap_content" 169android:layout_height="wrap_content"/> 170< TextView 171android:id="@+id/tv_kan" 172android:text="@string/kan" 173android:textSize="30dp" 174android:layout_margin="3dp" 175android:layout_above="@id/tv_north" 176android:textColor="@color/colorGreen" 177android:layout_centerHorizontal="true" 178

    推荐阅读