快乐分享Android学习心得---模型学习方探究App布局学习

模型一： 水平三列坐拥式
      效果图：
      
      说明：水平三列，两边分别是"返回"，"提交"的按钮，中间是必须居中的几个字，一般都是标题名称。
              仿佛标题内容的背景坐拥左右两位美女般的按钮。
      方法：主要使用FrameLayout布局
      素材：
              、

 

<!--这种布局: 02 缺点是，标题只能就几个字，字多了就会撑开并和两边的按钮重叠 03 优点是，代码简洁;--> 04 <?xml version="1.0" encoding="utf-8"?> 05 <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" 06 android:layout_width="fill_parent" 07 android:layout_height="wrap_content" 08 android:background="@drawable/layout01_bg" 09 android:paddingLeft="10dip" 10 android:paddingRight="10dip" 11 > 12 <Button android:layout_gravity="left|center_vertical" 13 android:layout_width="wrap_content" 14 android:layout_height="wrap_content" 15 android:background="@drawable/layout01_tool" 16 android:text="返回" 17 android:padding="8dip" 18 /> 19 20 <TextView android:layout_gravity="center" 21 android:layout_width="wrap_content" 22 android:layout_height="wrap_content" 23 android:text="标题内容" 24 android:textSize="18dip" 25 android:textColor="#000000" /> 26 27 <Button android:layout_gravity="right|center_vertical" 28 android:layout_width="wrap_content" 29 android:layout_height="wrap_content" 30 android:background="@drawable/layout01_tool" 31 android:text="前进" 32 android:padding="8dip" 33 /> 34 </FrameLayout>

 

 

模型二：水平三列双耳式
      效果图：
 
      说明： 水平三列，两边分别是"返回"，"提交"的按钮，中间是几个字，这几个字可以居左，居中，居右，而不与两边的按钮重叠。
               此模型和坐拥式模型相似，但是中间的部分不是把左右按钮坐拥入怀，而是单独占据，且也只占据中间部分。
               这种模型能够实现坐拥式模型的效果，而且能偏左偏右而不和两边按钮重叠。
               但是因为这种情况使用RelativeLayout布局比较好，需要定义ID，稍微麻烦了一点点。 
      方法：主要是RelativeLayout布局
      素材：同上
      layout代码：

<!--这种布局： 02 缺点是代码还算简洁，但是比坐拥式要稍微复杂一点 03 有点是比坐拥式更强大，更灵活 04 --> 05 <?xml version="1.0" encoding="utf-8"?> 06 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 07 android:layout_width="fill_parent" 08 android:layout_height="wrap_content" 09 android:background="@drawable/layout01_bg" 10 android:paddingLeft="10dip" 11 android:paddingRight="10dip" 12 > 13 <Button android:id="@+id/left_button" 14 android:layout_alignParentLeft="true" 15 android:layout_centerVertical="true" 16 android:layout_width="wrap_content" 17 android:layout_height="wrap_content" 18 android:background="@drawable/layout01_tool" 19 android:text="返回列表" 20 android:padding="8dip" 21 /> 22 <Button android:id="@+id/right_button" 23 android:layout_alignParentRight="true" 24 android:layout_centerVertical="true" 25 android:layout_width="wrap_content" 26 android:layout_height="wrap_content" 27 android:background="@drawable/layout01_tool" 28 android:text="评论" 29 android:padding="8dip" 30 /> 31 <!--设置LeftOf和RightOf，可填充中间空余部分--> 32 <TextView android:layout_toRightOf="@id/left_button" 33 android:layout_toLeftOf="@id/right_button" 34 android:layout_centerVertical="true" 35 android:gravity="left" 36 android:paddingLeft="5dip" 37 android:layout_width="fill_parent" 38 android:layout_height="wrap_content" 39 android:text="资讯>>正文" 40 android:textSize="18dip" 41 android:textColor="#000000" /> 42 43 </RelativeLayout>

 

 

关于这个模型，我补充一点，很多人认为这个用LinearLayout布局，设置两边的控件居左居右，中间的设置layout_gravity想偏左就偏左，想偏右就偏右。
      但是，LinearLayout布局方向为"horizontal" ,layout_gravity是无效的。

模型三： 水平四列双耳互补式
      效果图：
 
 
      说明： 两边是按钮，中间部分被两个控件互补式分割，主要是左边的会随内容填充，但是必须两者内容宽度之和不能大于中间部分。
               这个和双耳式差不多，也说明了，双耳式在保证有空余空间的基础上，可以扩充到4列，5列等多列。
      方法：主要是RelativeLayout布局
      素材：同上
      layout代码：

<!--双耳式在多列情况下的扩展式--> 02 <?xml version="1.0" encoding="utf-8"?> 03 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 04 android:layout_width="fill_parent" 05 android:layout_height="wrap_content" 06 android:background="@drawable/layout01_bg" 07 android:paddingLeft="10dip" 08 android:paddingRight="10dip" 09 > 10 <Button android:id="@+id/left_button" 11 android:layout_alignParentLeft="true" 12 android:layout_centerVertical="true" 13 android:layout_width="wrap_content" 14 android:layout_height="wrap_content" 15 android:background="@drawable/layout01_tool" 16 android:text="返回列表" 17 android:padding="8dip" 18 /> 19 <Button android:id="@+id/right_button" 20 android:layout_alignParentRight="true" 21 android:layout_centerVertical="true" 22 android:layout_width="wrap_content" 23 android:layout_height="wrap_content" 24 android:background="@drawable/layout01_tool" 25 android:text="评论" 26 android:padding="8dip" 27 /> 28 <!-- 下面这个宽度是wrap_content,在左边按钮的右边，能够随内容加宽 --> 29 <TextView android:id="@+id/center_text_01" 30 android:layout_toRightOf="@id/left_button" 31 android:layout_centerVertical="true" 32 android:gravity="left" 33 android:paddingLeft="5dip" 34 android:layout_width="wrap_content" 35 android:layout_height="wrap_content" 36 android:background="#aabbcc" 37 android:text="夫妇+小三" 38 android:textSize="18dip" 39 android:textColor="#000000" /> 40 <!-- 下面这个宽度是fill_parent,自动填充中间部分的空余空间，分别定义了左右依赖的控件，所以放在最后 --> 41 <TextView android:id="@+id/center_text_02" 42 android:layout_toRightOf="@id/center_text_01" 43 android:layout_toLeftOf="@id/right_button" 44 android:layout_centerVertical="true" 45 android:gravity="right" 46 android:paddingLeft="5dip" 47 android:layout_width="fill_parent" 48 android:layout_height="wrap_content" 49 android:background="#ccaabb" 50 android:text="何求" 51 android:textSize="18dip" 52 android:textColor="#000000" /> 53 </RelativeLayout>

 

模型四：水平多列分摊式(增强版)
      效果图：
 
      说明：几大模块均占所有区域，之间以小小的分割线隔离。
              因为分割线只占很小的部分，所有模块和分割线并不是分摊的，但是模块标题本身占据大头，他们之间是分摊的。
      素材：
 
      方法： 直接用LinearLayout布局，模块均摊，都设置layout_weight="1"，分割线不分摊，不设置layout_weight,默认自包裹，不延伸。
      layout代码：

 

<!--此代码采用动态生成，只要稍加判断，效果一样--> 02 <?xml version="1.0" encoding="utf-8"?> 03 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 04 android:layout_width="fill_parent" 05 android:layout_height="25dip" 06 android:background="#ffffff" 07 > 08 <TextView android:text="首页" 09 android:layout_weight="1" 10 android:gravity="center" 11 android:layout_gravity="center_vertical" 12 android:layout_width="wrap_content" 13 android:layout_height="wrap_content" 14 /> 15 <ImageView android:gravity="center" 16 android:layout_gravity="center_vertical" 17 android:layout_width="10dip" 18 android:layout_height="wrap_content" 19 android:src="@drawable/layout04_split" 20 /> 21 <TextView android:text="资讯" 22 android:layout_weight="1" 23 android:gravity="center" 24 android:layout_gravity="center_vertical" 25 android:layout_width="wrap_content" 26 android:layout_height="wrap_content" 27 /> 28 <ImageView android:gravity="center" 29 android:layout_gravity="center_vertical" 30 android:layout_width="10dip" 31 android:layout_height="wrap_content" 32 android:src="@drawable/layout04_split"/> 33 <TextView android:text="博客" 34 android:layout_weight="1" 35 android:gravity="center" 36 android:layout_gravity="center_vertical" 37 android:layout_width="wrap_content" 38 android:layout_height="wrap_content" 39 /> 40 <ImageView android:gravity="center" 41 android:layout_gravity="center_vertical" 42 android:layout_width="10dip" 43 android:layout_height="wrap_content" 44 android:src="@drawable/layout04_split"/> 45 <TextView android:text="图片" 46 android:layout_weight="1" 47 android:gravity="center" 48 android:layout_gravity="center_vertical" 49 android:layout_width="wrap_content" 50 android:layout_height="wrap_content" 51 /> 52 <ImageView android:gravity="center" 53 android:layout_gravity="center_vertical" 54 android:layout_width="10dip" 55 android:layout_height="wrap_content" 56 android:src="@drawable/layout04_split"/> 57 <TextView android:text="论坛" 58 android:layout_weight="1" 59 android:gravity="center" 60 android:layout_gravity="center_vertical" 61 android:layout_width="wrap_content" 62 android:layout_height="wrap_content" 63 /> 64 </LinearLayout>

 

模型五：垂直三行天地式
      效果图：

      说明：类似于水平三列双耳式，上下固定，中间自适应（自填充），不多说。
      方法：同水平三列双耳式，使用RelativeLayout布局
      layout代码：
<?xml version="1.0" encoding="utf-8"?> 02 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 03 android:layout_width="fill_parent" 04 android:layout_height="fill_parent"> 05 <TextView android:id="@+id/top_text" 06 android:layout_alignParentTop="true" 07 android:layout_width="fill_parent" 08 android:layout_height="wrap_content" 09 android:gravity="center" 10 android:text="上海车展" 11 android:textColor="#ffffff"/> 12 <LinearLayout android:id="@+id/bottom_linear" 13 android:layout_width="fill_parent" 14 android:layout_height="wrap_content" 15 android:gravity="center" 16 android:layout_alignParentBottom="true" 17 android:background="#123456" 18 android:orientation="horizontal"> 19 <Button android:layout_width="wrap_content" 20 android:layout_height="wrap_content" 21 android:text="上一张"/> 22 <Button android:layout_width="wrap_content" 23 android:layout_height="wrap_content" 24 android:layout_gravity="center" 25 android:text="下一张"/> 26 </LinearLayout> 27 <!-- 下面部分是中间主体部分，我特意用LinearLayout包裹起来，表示这里面可以填充其他任何组合的控件 --> 28 <LinearLayout android:id="@+id/center_linear" 29 android:layout_below="@id/top_text" 30 android:layout_above="@id/bottom_linear" 31 android:layout_width="fill_parent" 32 android:layout_height="fill_parent" 33 android:background="#ffffff" 34 android:gravity="center"> 35 <ImageView android:layout_width="fill_parent" 36 android:layout_height="fill_parent" 37 android:src="@drawable/shanhai" /> 38 </LinearLayout> 39 </RelativeLayout>

 

模型六：垂直三行弹簧式
      效果图：

      说明：这种模型很简单，类似于弹簧，最下面的一行能伸能屈，中间部分随内容固定。
      方法：类似于模式五。
      layout代码：
<?xml version="1.0" encoding="utf-8"?> 02 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 03 android:layout_width="fill_parent" 04 android:layout_height="fill_parent"> 05 <!-- 顶部 --> 06 <TextView android:id="@+id/top_text" 07 android:layout_alignParentTop="true" 08 android:layout_width="fill_parent" 09 android:layout_height="wrap_content" 10 android:gravity="center" 11 android:text="上海车展" 12 android:textColor="#ffffff"/> 13 <!-- 顶部的下面是中间导航部分 --> 14 <LinearLayout android:id="@+id/center_linear" 15 android:layout_below="@id/top_text" 16 android:layout_width="fill_parent" 17 android:layout_height="wrap_content" 18 android:gravity="center" 19 android:background="#123456" 20 android:orientation="horizontal"> 21 <Button android:layout_width="wrap_content" 22 android:layout_height="wrap_content" 23 android:text="上一张"/> 24 <Button android:layout_width="wrap_content" 25 android:layout_height="wrap_content" 26 android:layout_gravity="center" 27 android:text="下一张"/> 28 </LinearLayout> 29 <!-- 最后部分填充剩下的区域 --> 30 <LinearLayout android:id="@+id/bottom_linear" 31 android:layout_below="@id/center_linear" 32 android:layout_width="fill_parent" 33 android:layout_height="fill_parent" 34 android:background="#ffffff" 35 android:gravity="center" 36 android:layout_alignParentBottom="true"> 37 <ImageView android:layout_width="fill_parent" 38 android:layout_height="fill_parent" 39 android:src="@drawable/shanhai" /> 40 </LinearLayout> 41 </RelativeLayout>

 

列举了简单的6中模型，除此之外，本人发现受限于手机屏幕大小的限制和高宽的固定，有很多web的布局其实在手机上的实现是很难的。
      希望看了文章的人，能支持一下，有什么好的经典的布局，给我留言，一起探讨，一起分享。
      最后公布一个大概布局的三字文：

上中下，左中右，多行列，用相对。

线性局，紧凑排，无方向，可居中。

帧布局，定位准，相关弱，代码少。