[关闭]
@stepbystep 2015-01-27T21:37:21.000000Z 字数 22891 阅读 14447

Android UI框架和常用布局

Android

说明: 本节主要讲解了Android的UI框架View 和ViewGroup等， 同时讲解一些常用的布局，如LinearLayout，RelativeLayout等

课前复习
控件点击事件注册的4中方法:

  1. // Res/layout/xxx.xml
  2. // <Button 
  3. // onClick="click"/>
  4. // 在Activity中写一个如下的方法: 函数名与之对应
  5. Public void click(View view){
  7. }
  1. // button 是查找后赋值的控件
  2. button.setOnClickListener(new OnClickListener(){
  3.     // 重载函数
  4.     Public void onClick(View view){
  6.     }
  7. });
  4. // 在Activity类中再自定义一个MyOnClickListener类
  5. public class MainActivity extends Activity{
  6.     @Override
  7.     protected void onCreate(Bundle savedInstanceState) {
  8.         super.onCreate(savedInstanceState);
  9.         //---其他代码
  10.         // button 是查找后赋值的控件
  11.         button.setOnClickListener(new MyOnClickListener();
  12.     }
  13.     // 自定义内部类
  14.     Private final  class MyOnClickListener implements OnClickListener{
  15.         Public void onClick(View view){
  17.         }
  18.     }
  19. }
  1. Public class MainActivity extends Activity implements OnClickListener{
  2.     @Override
  3.     Public void onClick(View view){
  4.     ///
  5.     }
  6. }

Android UI 框架

Android UI 框架的特点

View和ViewGroup

Android的UI 开发使用嵌套结构，在ViewGroup中嵌套ViewGroup，每一层有任意数目的View。如下图:
此处输入图片的描述

需要注意的是嵌套次数最好不要超过10层，否则会降低效率，上图是3层

View和ViewGroup的结构图
深红色<-蓝色<-粉色<-青色<-土黄色
此处输入图片的描述

常用的UI布局

布局定义方式

在layout目录下新建一个xml文件，按照布局格式布局。
xml中每个元素的是View或者ViewGroup的子孙类的对象。他就像一颗树一样，根节点只有一个ViewGroup，叶节点都是View对象，分支节点都是ViewGroup

常用布局属性

常用布局实验并讲解

首先新建LayoutDemo工程，并新建MainActivity和LayoutActivity。
工程文件结构最后大致如下图:

其中MainActivity为主界面，主要代码如下：

  1. package com.example.shiyanlou.layoutdemo;
  3. import android.app.Activity;
  4. import android.content.Intent;
  5. import android.os.Bundle;
  6. import android.view.View;
  8. public class MainActivity extends Activity implements View.OnClickListener{
  10.     @Override
  11.     protected void onCreate(Bundle savedInstanceState) {
  12.         super.onCreate(savedInstanceState);
  13.         setContentView(R.layout.activity_main);
  14.         //注册点击事件
  15.         findViewById(R.id.btn_linear).setOnClickListener(this);
  16.         findViewById(R.id.btn_relative).setOnClickListener(this);
  17.         findViewById(R.id.btn_table).setOnClickListener(this);
  18.         findViewById(R.id.btn_frame).setOnClickListener(this);
  19.         findViewById(R.id.btn_absolute).setOnClickListener(this);
  20.     }
  22.     @Override
  23.     public void onClick(View v) {
  24.         Intent intent = new Intent();
  25.         intent.setClass(this, LayoutActivity.class);
  26.         String layout_id = "layout_id";
  27.         /**
  28.          * 此处因为只需要展示每个布局文件，用不着新建多个Activity，只需要在LayoutActivity中的onCreate函数导航
  29.          * 布局文件的时候通过intent.getIntent().getIntExtra("layout_id")的方法获取布局文件对应的id号。
  30.          * 即可设置不同的布局文件
  31.          */
  32.         switch (v.getId()){
  33.             case R.id.btn_linear:
  34.                 intent.putExtra(layout_id, R.layout.linear_layout);
  35.                 break;
  36.             case R.id.btn_relative:
  37.                 intent.putExtra(layout_id, R.layout.relative_layout);
  38.                 break;
  39.             case R.id.btn_table:
  40.                 intent.putExtra(layout_id, R.layout.table_layout);
  41.                 break;
  42.             case R.id.btn_frame:
  43.                 intent.putExtra(layout_id, R.layout.frame_layout);
  44.                 break;
  45.             case R.id.btn_absolute:
  46.                 intent.putExtra(layout_id, R.layout.absolute_layout);
  47.                 break;
  48.         }
  49.         startActivity(intent);
  50.     }
  51. }

MainActivity的布局文件res\layout\activity_main.xml如下

  1. <!--这里用到了线性布局， 利用layout_weight="1"使得每个按钮均匀显示在手机中-->
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     xmlns:tools="http://schemas.android.com/tools"
  4.     android:layout_width="match_parent"
  5.     android:layout_height="match_parent"
  6.     android:orientation="vertical"
  7.     android:paddingBottom="20dp"
  8.     >
  10.    <!--应用了style属性，因为这5个按钮除了显示的内容和id号不一样以外，其余属性基本上一样
  11.    此时就可以利用style属性，在res/values/styles.xml文件中添加一个style标签，加上属性内容
  12.    再在控件的属性中用style="@style/**"的方式，引用style
  13.    这样做的好处是当需要改变属性的时候，只要改变style文件中的内容，布局结果就会发生变化-->
  14.     <Button
  15.         android:id="@+id/btn_linear"       
  16.         style="@style/blue_btn_style"
  17.         android:text="LinearLayout"
  18.         />
  19.     <Button
  20.         android:id="@+id/btn_relative"
  21.         style="@style/blue_btn_style"
  22.         android:text="RelativeLayout"
  23.         />
  24.     <Button
  25.         android:id="@+id/btn_table"
  26.         style="@style/blue_btn_style"
  27.         android:text="TableLayout"
  28.         />
  29.     <Button
  30.         android:id="@+id/btn_frame"
  31.         style="@style/blue_btn_style"
  32.         android:text="FrameLayout"
  33.         />
  34.     <Button
  35.         android:id="@+id/btn_absolute"
  36.         style="@style/blue_btn_style"
  37.         android:text="AbsoluteLayout"
  38.         />
  39. </LinearLayout>

其中style="@style/blue_btn_style"引用的style文件内容如下，设置了Button的样式
res\values\styles.xml

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <resources>
  4.     <!-- Base application theme. -->
  5.     <style name="AppTheme" parent="android:Theme.Holo.Light">
  6.         <!-- Customize your theme here. -->
  7.     </style>
  9.     <!--蓝色按钮的背景style，将各种属性集一身，减少布局文件中重复的内容-->
  10.     <style name="blue_btn_style">
  11.         <item name="android:textSize">18sp</item>
  12.         <item name="android:textColor">#fff</item>
  13.         <item name="android:layout_height">match_parent</item>
  14.         <item name="android:layout_width">match_parent</item>
  15.         <!--设置了background为@drawable/selector_btn_blue
  16.         表示背景对应这样的一个drawable文件，实现了背景选择器-->
  17.         <item name="android:background">@drawable/selector_btn_blue</item>
  18.         <item name="android:layout_marginLeft">20dp</item>
  19.         <item name="android:layout_marginRight">20dp</item>
  20.         <item name="android:layout_marginTop">20dp</item>
  21.         <item name="android:layout_weight">1</item>
  22.     </style>
  24. </resources>

背景选择器的内容如下 res\drawable\selector_btn_blue.xml

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <selector xmlns:android="http://schemas.android.com/apk/res/android">
  4.     <!--selector 背景选择器， 每一个item对应一种状态，从上至下扫描，如果满足则选择该item作为背景
  5.         主要用来处理按下的效果，获取获取焦掉与离开焦点的效果
  6.         正常情况下 state_pressed="false" 且 state_focused="false"，此时应选择最后一个item（此item无特殊要求）
  7.         当控件被按下或者获取焦点的时候，就会匹配到第一个item，颜色就会变深，从而得到了按下的效果。
  8.         当然每个item可以有其他的属性，这里的radius就是圆角的意思。
  9.     -->
  10.     <item android:state_pressed="true"><shape>
  11.         <corners android:radius="5dp"/>
  12.         <solid android:color="#2988e4"></solid>
  13.     </shape></item>
  15.     <item android:state_focused="true"><shape>
  16.         <corners android:radius="5dp"/>
  17.         <solid android:color="#2988e4"></solid>
  18.     </shape></item>
  20.     <item><shape>
  21.         <corners android:radius="5dp"/>
  22.         <solid android:color="#4AA9EE"></solid>
  23.     </shape></item>
  25. </selector>

进入界面效果如下:

点击按钮的按下效果如下: 可以看到颜色明显加深了

LayoutActivity为点击按钮进入的布局界面

  1. package com.example.shiyanlou.layoutdemo;
  3. import android.app.Activity;
  4. import android.os.Bundle;
  5. import android.view.Window;
  7. public class LayoutActivity extends Activity {
  9.     private int layout_id;
  10.     @Override
  11.     protected void onCreate(Bundle savedInstanceState) {
  12.         super.onCreate(savedInstanceState);
  14.         // 根据Intent传递的数据，得到导航的布局id号。
  15.         layout_id = getIntent().getIntExtra("layout_id", R.layout.linear_layout);
  16.         // 设置全屏，需要在setContentView之前调用
  17.         requestWindowFeature(Window.FEATURE_NO_TITLE);
  18.         // 将layout_id设置为当前布局文件的id号
  19.         setContentView(layout_id);
  20.     }
  21. }

线性布局

线性布局知识点

线性布局实验

此处输入图片的描述

底部按钮按下效果如下: 可以看到颜色变成了深红色

res\layout\linear_layout.xml文件主要内容如下: 

  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2.     xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
  3.     android:layout_height="match_parent"
  4.     android:orientation="vertical"
  5. >
  6.     <!--内层再使用两个线性布局，分别表示上层的水平方式，和下半部分的垂直方式-->
  7.     <LinearLayout
  8.         android:layout_width="match_parent"
  9.         android:layout_height="match_parent"
  10.         android:layout_weight="2"
  11.         android:padding="10dp"
  12.         android:orientation="horizontal">
  14.         <!--wrap_content和layout_weight一起使用时，控件所占比例跟layout_weight的值成正比-->
  15.         <!--android:text="第\n一\n列" \n在这里用于换行显示内容-->
  16.         <TextView
  17.             android:layout_width="wrap_content"
  18.             android:layout_height="match_parent"
  19.             android:background="#FFDAB9"
  20.             android:gravity="center_horizontal"
  21.             android:textColor="#2a5caa"
  22.             android:text="第\n一\n列"
  23.             android:layout_weight="1"/>
  25.         <TextView
  26.             android:layout_width="wrap_content"
  27.             android:layout_height="match_parent"
  28.             android:background="#FF82AB"
  29.             android:gravity="center_vertical|right"
  30.             android:textColor="#2a5caa"
  31.             android:text="第\n二\n列"
  32.             android:layout_weight="2"/>
  34.         <TextView
  35.             android:layout_width="wrap_content"
  36.             android:layout_height="match_parent"
  37.             android:background="#EEEE00"
  38.             android:gravity="bottom|center_horizontal"
  39.             android:textColor="#2a5caa"
  40.             android:text="第\n三\n列"
  41.             android:layout_weight="3"/>
  43.         <TextView
  44.             android:layout_width="wrap_content"
  45.             android:layout_height="match_parent"
  46.             android:background="#ADFF2F"
  47.             android:gravity="center"
  48.             android:textColor="#2a5caa"
  49.             android:text="第\n四\n列"
  50.             android:layout_weight="4"/>
  52.         </LinearLayout>
  54.     <!--下面的所有Button使用了android:layout_weight="1"属性，
  55.     使得可以在下半部分均匀显示-->
  56.     <LinearLayout
  57.         android:layout_width="match_parent"
  58.         android:layout_height="match_parent"
  59.         android:layout_weight="3"
  60.         android:paddingLeft="10dp"
  61.         android:paddingRight="10dp"
  62.         android:paddingBottom="10dp"
  63.         android:orientation="vertical">
  65.         <!--使用了背景选择器selector_btn_red-->
  66.         <Button
  67.             android:layout_width="match_parent"
  68.             android:layout_height="match_parent"
  69.             android:layout_weight="1"
  70.             android:textColor="#fff"
  71.             android:background="@drawable/selector_btn_red"
  72.             android:text="第一行"/>
  74.         <Button
  75.             android:layout_marginTop="10dp"
  76.             android:layout_width="match_parent"
  77.             android:layout_height="match_parent"
  78.             android:layout_weight="1"
  79.             android:textColor="#fff"
  80.             android:background="@drawable/selector_btn_red"
  81.             android:text="第二行"/>
  83.         <Button
  84.             android:layout_marginTop="10dp"
  85.             android:layout_width="match_parent"
  86.             android:layout_height="match_parent"
  87.             android:layout_weight="1"
  88.             android:textColor="#fff"
  89.             android:background="@drawable/selector_btn_red"
  90.             android:text="第三行"/>
  91.     </LinearLayout>
  93. </LinearLayout>

这里又用到了背景选择器，直接在控件的backgroud设置，注意，引用背景选择器，需要用@drawable方式。红色背景选择器如下,几乎同蓝色selector_btn_blue.xml一样。只不过换了颜色
res/drawable/selector_btn_red.xml

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <selector xmlns:android="http://schemas.android.com/apk/res/android">
  3.     <item android:state_pressed="true"><shape>
  4.         <corners android:radius="5dp"/>
  5.         <solid android:color="#FF1120"></solid>
  6.     </shape></item>
  8.     <item android:state_focused="true"><shape>
  9.         <corners android:radius="5dp"/>
  10.         <solid android:color="#FF1120"></solid>
  11.     </shape></item>
  13.     <item><shape>
  14.         <corners android:radius="5dp"/>
  15.         <solid android:color="#FF6B6B"></solid>
  16.     </shape></item>
  17. </selector>

相对布局

相对布局知识点

相对布局四眼
本实验中相对布局以英雄联盟的英雄介绍为目的，制作了一个简单的布局界面。
用到了如下的图片资源，可以点击右键另存为后作为实验。


布局效果如下:

布局文件res\layout\relative_layout.xml文件如下

  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2.     xmlns:tools="http://schemas.android.com/tools"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="match_parent"
  5.     android:background="#FAEBD7"
  6. >
  7.     <!--内层相对布局，默认暂居屏幕顶端-->
  8.     <RelativeLayout
  9.         android:id="@+id/top_info"
  10.         android:layout_width="match_parent"
  11.         android:layout_height="wrap_content"
  12.         android:background="#ACE383">
  13.         <ImageView
  14.             android:id="@+id/txt_img"
  15.             android:layout_width="wrap_content"
  16.             android:layout_height="wrap_content"
  17.             android:src="@drawable/manwang"
  18.             />
  19.         <!--该控件以左边的ImageView为标识
  20.         android:layout_toRightOf="@id/txt_img"表示居其右-->
  21.         <TextView
  22.             android:id="@+id/txt_name"
  23.             android:layout_width="match_parent"
  24.             android:layout_height="wrap_content"
  25.             android:text="蛮族之王"
  26.             android:textColor="#436EEE"
  27.             android:textSize="22sp"
  28.             android:layout_toRightOf="@id/txt_img"
  29.             android:layout_marginLeft="10dp"
  30.             android:layout_marginTop="5dp"/>
  32.         <!--该控件以上边的TextView为标识
  33.             android:layout_below="@id/txt_name"表示位其下
  34.             android:layout_alignLeft="@id/txt_name"表示左边界相同-->
  35.         <LinearLayout
  36.             android:layout_below="@id/txt_name"
  37.             android:layout_alignLeft="@id/txt_name"
  38.             android:layout_marginTop="5dp"
  39.             android:layout_width="match_parent"
  40.             android:layout_height="wrap_content">
  42.             <TextView
  43.                 android:layout_width="wrap_content"
  44.                 android:layout_height="wrap_content"
  45.                 android:text="近战"
  46.                 android:padding="3dp"
  47.                 android:textSize="12sp"
  48.                 android:textColor="#fff"
  49.                 android:background="#FF7A01"
  50.                 />
  52.             <TextView
  53.                 android:layout_width="wrap_content"
  54.                 android:layout_height="wrap_content"
  55.                 android:text="上单"
  56.                 android:padding="3dp"
  57.                 android:textSize="12sp"
  58.                 android:textColor="#fff"
  59.                 android:layout_marginLeft="5dp"
  60.                 android:background="#FF7A01"
  61.                 />
  63.             <TextView
  64.                 android:layout_width="wrap_content"
  65.                 android:layout_height="wrap_content"
  66.                 android:text="打野"
  67.                 android:padding="3dp"
  68.                 android:textSize="12sp"
  69.                 android:textColor="#fff"
  70.                 android:layout_marginLeft="5dp"
  71.                 android:background="#FF7A01"
  72.                 />
  74.             </LinearLayout>
  76.         <!--android:layout_alignLeft="@id/txt_name"
  77.             android:layout_alignBottom="@id/txt_img"
  78.             表示了该控件首先跟顶部的TextView沿着同一个左边界
  79.         同时也与左边的图片沿着同一个底边界-->
  80.         <TextView
  81.             android:layout_width="match_parent"
  82.             android:layout_height="wrap_content"
  83.             android:textColor="#8B3A3A"
  84.             android:textSize="14sp"
  85.             android:layout_alignLeft="@id/txt_name"
  86.             android:layout_alignBottom="@id/txt_img"
  87.             android:layout_marginBottom="5dp"
  88.             android:text="蛮族之王,别名蛮子,泰达米尔,五秒男,蛮王。灵活性强，可以自由穿越地形切入战场，后期能力非常强."
  89.             />
  90.         </RelativeLayout>
  92.     <!--android:layout_alignParentBottom="true"属性说明了该控件居于父控件的底部-->
  93.     <Button
  94.         android:id="@+id/btn_focus_vedio"
  95.         android:layout_width="match_parent"
  96.         android:layout_height="wrap_content"
  97.         android:layout_weight="1"
  98.         android:textColor="#fff"
  99.         android:background="#B22222"
  100.         android:layout_alignParentBottom="true"
  101.         android:text="英雄视频"/>
  103.     <!--android:layout_above="@+id/btn_focus_vedio"属性说明了该控件居于Button的上方
  104.     注意，此处需要先布局Button，再根据其id布局下面的内容，尽管Button显示在最底部-->
  105.     <RelativeLayout
  106.         android:id="@+id/layout_q_info"
  107.         android:layout_width="match_parent"
  108.         android:layout_height="wrap_content"
  109.         android:layout_above="@+id/btn_focus_vedio"
  110.         android:padding="10dp">
  112.         <!--android:layout_centerVertical="true"
  113.         表示了该控件始终位于父控件的垂直中部-->
  114.         <ImageView
  115.             android:id="@+id/img_q"
  116.             android:layout_width="80dp"
  117.             android:layout_height="80dp"
  118.             android:layout_centerVertical="true"
  119.             android:src="@drawable/manwang_q"
  120.             />
  122.         <TextView
  123.             android:id="@+id/txt_q_name"
  124.             android:layout_width="match_parent"
  125.             android:layout_height="wrap_content"
  126.             android:layout_toRightOf="@+id/img_q"
  127.             android:layout_marginLeft="10dp"
  128.             android:textColor="#9B30FF"
  129.             android:textSize="18sp"
  130.             android:text="嗜血杀戮【快捷键Q】"/>
  132.         <TextView
  133.             android:id="@+id/txt_q_info"
  134.             android:layout_width="match_parent"
  135.             android:layout_height="wrap_content"
  136.             android:text="泰达米尔对战斗极度饥渴，他受伤程度越高，攻击力越强。他能通过释放嗜血杀戮消耗怒气并治疗自己。"
  137.             android:layout_alignLeft="@+id/txt_q_name"
  138.             android:layout_below="@+id/txt_q_name"
  139.             android:textSize="12sp"
  140.             android:textColor="#595959"
  141.             android:layout_marginTop="5dp"
  142.             />
  144.         <RelativeLayout
  145.             android:layout_width="match_parent"
  146.             android:layout_height="wrap_content"
  147.             android:layout_alignLeft="@+id/txt_q_name"
  148.             android:layout_below="@+id/txt_q_info"
  149.             android:layout_marginTop="15dp"
  150.             >
  151.             <TextView
  152.                 android:id="@+id/txt_first"
  153.                 android:layout_width="wrap_content"
  154.                 android:layout_height="wrap_content"
  155.                 android:text="冷却"
  156.                 android:textSize="12sp"
  157.                 android:textColor="#FF7A01"
  158.                 />
  160.             <TextView
  161.                 android:layout_width="wrap_content"
  162.                 android:layout_height="wrap_content"
  163.                 android:text="12/12/12/12/12"
  164.                 android:textSize="12sp"
  165.                 android:textColor="#595959"
  166.                 android:layout_toRightOf="@+id/txt_first"
  167.                 android:layout_alignTop="@+id/txt_first"
  168.                 android:layout_marginLeft="10dp"
  169.                 />
  171.             <TextView
  172.                 android:id="@+id/txt_second"
  173.                 android:layout_width="wrap_content"
  174.                 android:layout_height="wrap_content"
  175.                 android:text="射程"
  176.                 android:layout_below="@+id/txt_first"
  177.                 android:layout_marginTop="10dp"
  178.                 android:textSize="12sp"
  179.                 android:textColor="#FF7A01"
  180.                 />
  182.             <TextView
  183.                 android:layout_width="wrap_content"
  184.                 android:layout_height="wrap_content"
  185.                 android:text="318"
  186.                 android:textSize="12sp"
  187.                 android:textColor="#595959"
  188.                 android:layout_toRightOf="@+id/txt_second"
  189.                 android:layout_alignTop="@+id/txt_second"
  190.                 android:layout_marginLeft="10dp"
  191.                 />
  193.             <TextView
  194.                 android:id="@+id/txt_third"
  195.                 android:layout_width="wrap_content"
  196.                 android:layout_height="wrap_content"
  197.                 android:text="效果"
  198.                 android:layout_below="@+id/txt_second"
  199.                 android:layout_marginTop="10dp"
  200.                 android:textSize="12sp"
  201.                 android:textColor="#FF7A01"
  202.                 />
  204.             <TextView
  205.                 android:layout_width="wrap_content"
  206.                 android:layout_height="wrap_content"
  207.                 android:text="被动：泰达米尔嗜血成性，获得5/10/15/20/25攻击力，每损失1%生命值额外增加0.15/0.2/0.25/0.3/0.35攻击力。泰达米尔消耗怒气，回复30/40/50/60/70(+0.3AP)。"
  208.                 android:textSize="12sp"
  209.                 android:textColor="#595959"
  210.                 android:layout_toRightOf="@+id/txt_third"
  211.                 android:layout_alignTop="@+id/txt_third"
  212.                 android:layout_marginLeft="10dp"
  213.                 />
  215.             </RelativeLayout>
  216.         </RelativeLayout>
  219.     <!--此空间最后布局，
  220.     android:layout_below="@id/top_info"
  221.         android:layout_above="@id/layout_q_info"
  222.         两个属性使得该ImageView显示在两个id对应的控件之间-->
  223.     <ImageView
  224.         android:layout_width="match_parent"
  225.         android:layout_height="wrap_content"
  226.         android:scaleType="centerInside"
  227.         android:layout_below="@id/top_info"
  228.         android:layout_above="@id/layout_q_info"
  229.         android:src="@drawable/manwang_chuzhuang"/>
  231. </RelativeLayout>

表格布局

说明，本表格布局的内容主要参考了http://blog.sina.com.cn/s/blog_63c66eb60100u29p.html网址的内容，故在此说明。
表格布局知识点
Tablelayout简介

Tablelayout类以行和列的形式对控件进行管理，每一行为一个TableRow对象，或一个View控件。 当为TableRow对象时，可在TableRow下添加子控件，默认情况下，每个子控件占据一列。当为View时，该View将独占一行。

TableLayout行列数的确定

TableLayout的行数由开发人员直接指定，即有多少个TableRow对象（或View控件），就有多少行。 TableLayout的列数等于含有最多子控件的TableRow的列数。如第一TableRow含2个子控件，第二个TableRow含3个，第三个TableRow含4个，那么该TableLayout的列数为4.

TableLayout可设置的属性详解
TableLayout可设置的属性包括全局属性及单元格属性。
全局属性也即列属性，有以下3个参数：

说明：列可以同时具备stretchColumns及shrinkColumns属性，若此，那么当该列的内容N多时，将“多行”显示其内容。（这里不是真正的多行，而是系统根据需要自动调节该行的layout_height）

单元格属性，有以下2个参数：
- android:layout_column 指定该单元格在第几列显示
- android:layout_span 指定该单元格占据的列数（未指定时，为1）
说明：一个控件也可以同时具备这两个特性。

表格布局实验内容
布局效果如图:

res/layout/table_layout.xml文件如下

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:orientation="vertical"
  4.     android:layout_width="fill_parent"
  5.     android:layout_height="fill_parent"
  6.     android:padding="3dip"
  7.     >
  9.     <!-- 第1个TableLayout，用于描述表中的列属性。第0列可伸展，第1列可收缩，第2列被隐藏-->
  10.     <TextView
  11.         android:text="表1：全局设置：列属性设置"
  12.         android:layout_height="wrap_content"
  13.         android:layout_width="wrap_content"
  14.         android:textSize="15sp"
  15.         android:background="#7f00ffff"/>
  16.     <TableLayout
  17.         android:id="@+id/table1"
  18.         android:layout_width="fill_parent"
  19.         android:layout_height="wrap_content"
  20.         android:stretchColumns="0"
  21.         android:shrinkColumns="1"
  22.         android:collapseColumns="2"
  23.         android:padding="3dip">
  24.         <TableRow>
  25.             <Button android:text="该列可伸展"/>
  26.             <Button android:text="该列可收缩"/>
  27.             <Button android:text="我被隐藏了"/>
  28.         </TableRow>
  30.         <TableRow>
  31.             <TextView android:text="我向行方向伸展，我可以很长    "/>
  32.             <TextView android:text="我向列方向收缩，我可以很深 "/>
  33.         </TableRow>
  35.     </TableLayout>
  37.     <!-- 第2个TableLayout，用于描述表中单元格的属性，包括：android:layout_column 及android:layout_span-->
  38.     <TextView
  39.         android:text="表2:单元格设置：指定单元格属性设置"
  40.         android:layout_height="wrap_content"
  41.         android:layout_width="wrap_content"
  42.         android:textSize="15sp"
  43.         android:background="#7f00ffff"/>
  44.     <TableLayout
  45.         android:id="@+id/table2"
  46.         android:layout_width="fill_parent"
  47.         android:layout_height="wrap_content"
  48.         android:padding="3dip">
  49.         <TableRow>
  50.             <Button android:text="第0列"/>
  51.             <Button android:text="第1列"/>
  52.             <Button android:text="第2列"/>
  53.         </TableRow>
  55.         <TableRow>
  56.             <TextView android:text="我被指定在第1列"
  57.                 android:layout_column="1"/>
  58.         </TableRow>
  60.         <TableRow>
  61.             <TextView
  62.                 android:text="我跨1到2列，不信你看！"
  63.                 android:layout_column="1"
  64.                 android:layout_span="2"
  65.                 />
  66.         </TableRow>
  68.     </TableLayout>
  70.     <!-- 第3个TableLayout，使用可伸展特性布局-->
  71.     <TextView
  72.         android:text="表3：应用一，非均匀布局"
  73.         android:layout_height="wrap_content"
  74.         android:layout_width="wrap_content"
  75.         android:textSize="15sp"
  76.         android:background="#7f00ffff"/>
  77.     <TableLayout
  78.         android:id="@+id/table3"
  79.         android:layout_width="fill_parent"
  80.         android:layout_height="wrap_content"
  81.         android:stretchColumns="*"
  82.         android:padding="3dip"
  83.         >
  84.         <TableRow>
  85.             <Button android:text="一" ></Button>
  86.             <Button android:text="两字"></Button>
  87.             <Button android:text="三个字" ></Button>
  88.         </TableRow>
  89.     </TableLayout>
  91.     <!-- 第4个TableLayout，使用可伸展特性，并指定每个控件宽度一致，如1dip-->
  92.     <TextView
  93.         android:text="表4：应用二，均匀布局"
  94.         android:layout_height="wrap_content"
  95.         android:layout_width="wrap_content"
  96.         android:textSize="15sp"
  97.         android:background="#7f00ffff"/>
  98.     <TableLayout
  99.         android:id="@+id/table4"
  100.         android:layout_width="fill_parent"
  101.         android:layout_height="wrap_content"
  102.         android:stretchColumns="*"
  103.         android:padding="3dip"
  104.         >
  105.         <TableRow>
  106.             <Button android:text="一" android:layout_width="1dip"></Button>
  107.             <Button android:text="两字" android:layout_width="1dip"></Button>
  108.             <Button android:text="三个字" android:layout_width="1dip"></Button>
  109.         </TableRow>
  110.     </TableLayout>
  111. </LinearLayout>

帧布局实验

效果如下:

res/layout/frame_layout.xml文件内容如下:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" 
  3.     android:orientation="vertical"
  4.     android:layout_width="match_parent" 
  5.     android:layout_height="match_parent">
  7.     <!--FrameLayout中，常用于控件遮掩，比如看视频的时候，按暂停键，
  8.     弹出的控件就浮在播放内容的中间部位，此例中，控件在代码最后面的，展示在最前面-->
  9.     <TextView
  10.         android:layout_width="match_parent"
  11.         android:layout_height="match_parent"
  12.         android:background="#FFE7BA"
  13.         android:text="第零层"
  14.         android:textSize="20sp"
  15.         android:gravity="center_horizontal"
  16.         />
  18.     <TextView
  19.         android:layout_width="300dp"
  20.         android:layout_height="300dp"
  21.         android:layout_gravity="center"
  22.         android:background="#FFF68F"
  23.         android:text="第一层"
  24.         android:textSize="20sp"
  25.         android:gravity="center_horizontal"
  26.         />
  28.     <!--可以看到第二层遮盖了第一层和第零层，却被第三层遮盖-->
  29.     <TextView
  30.         android:layout_width="200dp"
  31.         android:layout_height="200dp"
  32.         android:layout_gravity="center_vertical|right"
  33.         android:background="#FFBBFF"
  34.         android:text="第二层"
  35.         android:textSize="20sp"
  36.         android:gravity="center_horizontal"
  37.         />
  39.     <TextView
  40.         android:layout_width="100dp"
  41.         android:layout_height="100dp"
  42.         android:layout_gravity="center"
  43.         android:background="#FF4040"
  44.         android:text="第三层"
  45.         android:textSize="20sp"
  46.         android:gravity="center_horizontal"
  47.         />
  48. </FrameLayout>

绝对布局实验

效果如下:

res/layout/absolute_layout.xml文件内容如下:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="match_parent"
  5.     android:background="#F0F8FF" >
  7.     <!--绝对布局基本上不会用，因为对于设备的兼容性不好，
  8.     两部分辨率不同的手机，展示结果可能差别很大-->
  9.     <!-- 定义一个文本框，使用绝对定位 -->
  10.     <TextView
  11.         android:layout_width="wrap_content"
  12.         android:layout_height="wrap_content"
  13.         android:layout_x="20dip"
  14.         android:layout_y="20dip"
  15.         android:text="用户名：" />
  17.     <!-- 定义一个文本编辑框，使用绝对定位 -->
  18.     <EditText
  19.         android:layout_width="wrap_content"
  20.         android:layout_height="wrap_content"
  21.         android:layout_x="80dip"
  22.         android:layout_y="15dip"
  23.         android:width="200px" />
  25.     <!-- 定义一个文本框，使用绝对定位 -->
  26.     <TextView
  27.         android:layout_width="wrap_content"
  28.         android:layout_height="wrap_content"
  29.         android:layout_x="20dip"
  30.         android:layout_y="80dip"
  31.         android:text="密  码：" />
  33.     <!-- 定义一个文本编辑框，使用绝对定位 -->
  34.     <EditText
  35.         android:layout_width="wrap_content"
  36.         android:layout_height="wrap_content"
  37.         android:layout_x="80dip"
  38.         android:layout_y="75dip"
  39.         android:password="true"
  40.         android:width="200px" />
  42.     <!-- 定义一个按钮，使用绝对定位 -->
  43.     <Button
  44.         android:layout_width="wrap_content"
  45.         android:layout_height="wrap_content"
  46.         android:layout_x="130dip"
  47.         android:layout_y="135dip"
  48.         android:text="登   录" />
  49. </AbsoluteLayout>

课后实验

了解View和ViewGroup的继承关系

属性5大布局的特有属性，并练习一些常见的布局，思考怎么实现

添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注