android布局##TableLayout和FrameLayout-android学习之旅（十五）

TableLayout 表格布局

tablelayout简介

表格布局有TableLayout代表，但是它的本质定义仍然是线性管理器。表格布局采用行和列来管理UI，但是不需要明确的定义多少行，多少列，而是通过添加TableRow，没添加一个TableRow，就添加一行，TableRow中每添加一个组件就是一列。

TableLayout属性

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    tools:context=".MainActivity"
    android:orientation="vertical">
   <TableLayout
       android:layout_width="fill_parent"
       android:layout_height="wrap_content"
       android:shrinkColumns="1"
        android:stretchColumns="2">
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="hello "/>
       <TableRow>
           <Button
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:text="hello "/>
           <Button
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:text="hello "/>
           <Button
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:text="hello "/>

       </TableRow>

       </TableLayout>
    <TableLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:collapseColumns="1">
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="hello "/>
        <TableRow>
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="hello "/>
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="hello "/>
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="hello "/>

        </TableRow>

    </TableLayout>
    <TableLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:stretchColumns="1,2">
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="hello "/>
        <TableRow>
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="hello "/>
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="hello "/>
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="hello "/>

        </TableRow>
        <TableRow>
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="hello "/>
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="hello "/>
        </TableRow>

    </TableLayout>
</LinearLayout>

FrameLayout帧布局

帧布局是由FrameLayout所代表，FrameLayout直接继承了ViewGroup属性。帧布局为每一个加入的控件创建一个空白的区域，称为一帧，每个子组件占据一帧，这些帧都会根据gravity属性，自动对齐。

FrameLayout的属性

子组件会受到FrameLayout.layoutParam的控制，可指定

android：layout_gravity来控制对齐方式。

Frame霓虹灯实例

package peng.liu.testview;

import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.widget.TextView;

import java.util.Timer;
import java.util.TimerTask;

public class MainActivity extends Activity {
    private int[] names = new int[]{
            R.id.view01,
            R.id.view02,
            R.id.view03,
            R.id.view04,
            R.id.view05,
            R.id.view06
    };
    private int[] colors = new int[]{
            R.color.color1,
            R.color.color2,
            R.color.color3,
            R.color.color4,
            R.color.color5,
            R.color.color6
    };
    private int currentColor = 0;
    TextView[] texts = new TextView[names.length];
    Handler handler = new Handler(){
        @Override
        public void handleMessage(Message msg) {
            if (msg.what == 0x123){
                for(int i =0;i<names.length;i++){
                    texts[i].setBackgroundResource(colors[(i + currentColor) % names.length]);
                }
                currentColor++;
            }
            super.handleMessage(msg);
        }
    } ;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        for(int i=0;i<names.length;i++){
            texts[i] = (TextView) findViewById(names[i]);
        }
        new Timer().schedule(new TimerTask() {
            @Override
            public void run() {
                handler.sendEmptyMessage(0x123)
            }
        },0,200);
    }
}

布局代码

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    tools:context=".MainActivity"
    android:orientation="vertical">
   <FrameLayout
       android:layout_width="fill_parent"
       android:layout_height="fill_parent">
        <TextView
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:id="@+id/view01"
       android:layout_gravity="center"
       android:background="@color/color1"
       android:width="320px"
       android:height="320px"
       />
       <TextView
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:id="@+id/view02"
           android:layout_gravity="center"
           android:background="@color/color2"
           android:width="280px"
           android:height="280px"
           />
       <TextView
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:id="@+id/view03"
           android:layout_gravity="center"
           android:background="@color/color3"
           android:width="240px"
           android:height="240px"
           />
       <TextView
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:id="@+id/view04"
           android:layout_gravity="center"
           android:background="@color/color4"
           android:width="200px"
           android:height="200px"
           />
       <TextView
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:id="@+id/view05"
           android:layout_gravity="center"
           android:background="@color/color5"
           android:width="160px"
           android:height="160px"
           />
       <TextView
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:id="@+id/view06"
           android:layout_gravity="center"
           android:background="@color/color6"
           android:width="120px"
           android:height="120px"
           />
       </FrameLayout>
</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="color1">#f00</color>
    <color name="color2">#0f0</color>
    <color name="color3">#00f</color>
    <color name="color4">#ff0</color>
    <color name="color5">#f0f</color>
    <color name="color6">#0ff</color>
</resources>