[color=red][size=small][align=center]android五种布局-霓虹灯效果实现[/align][/size][/color]
view子类是android用户界面表示的基本单元
view类的一些子类被称为widges工具;它提供了文本框和按钮类的UI对象的完整实现;
ViewGroup是view的一个扩展,可以容纳多个view;,他可以创建由互相联系的view组成的符合控件
布局:
FramelLayout-帧布局;
LinearLaout--线性布局;
TableLayout--表格布局;
RealativeLayout--相对布局;
Layout布局文件的命名---(禁止用大写字母来参与文件的命名)
一、 LinearLayout(线性布局)
“LinearLayout”翻译成中文是“线性布局”,所谓线性布局就是在该标签下的所有子
元素会根据其orientation属性的值来决定是按行或者是按列逐个显示。
示例main.xml布局文件如下:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/name_text" />
<EditText
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/ok_button"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/no_button"
/>
</LinearLayout>
二、 RelativeLayout(相对布局)
相对布局中的视图组件是按相互之间的相对位置来确定的,并不是线性布局中的必须
按行或按列单个显示。示例布局文件如下:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="@string/button_zh"
android:id="@+id/main"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="@string/button_ys"
android:layout_above="@+id/main"
android:layout_toLeftOf="@+id/main"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="@string/button_yx"
android:layout_above="@+id/main"
android:layout_toRightOf="@+id/main"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="@string/button_zs"
android:layout_below="@+id/main"
android:layout_toRightOf="@+id/main"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="@string/button_zx"
android:layout_below="@+id/main"
android:layout_toLeftOf="@+id/main"
/>
</RelativeLayout>
三、 线性布局与相对布局嵌套使用
布局之间可以相互嵌套使用,以完成更为复杂的布局效果。举例来说,下面是一个线性布局当中包含了相对布局的界面:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="70dp"
>
<TextView
android:id="@+id/name_nest"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:text="@string/name_text" />
<EditText
android:layout_width="150dp"
android:layout_height="30dp"
android:layout_alignParentTop="true"
android:layout_toRightOf="@+id/name_nest" >
<requestFocus />
</EditText>
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="70dp"
>
<TextView
android:id="@+id/password_nest"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:text="@string/password_text" />
<EditText
android:layout_width="150dp"
android:layout_height="30dp"
android:layout_toRightOf="@+id/password_nest" />
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="120dp"
>
<Button
android:id="@+id/button_re"
android:layout_width="50dp"
android:layout_height="35dp"
android:text="@string/login" />
<Button
android:layout_width="50dp"
android:layout_height="35dp"
android:layout_marginLeft="30dp"
android:layout_toRightOf="@+id/button_re"
android:text="@string/register" />
</RelativeLayout>
</LinearLayout>
四、 表格布局:
表格布局的风格跟HTML中的表格比较接近,只是所采用的标签不同。
<TableLayout>是顶级元素,说明采用的是表格布局
<TableRow>定义一个行
<TextView>定义一个单元格的内容
示例布局文件内容如下:
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:stretchColumns="*"
>
<TableRow>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/name"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/sex"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/age"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/weight"
/>
</TableRow>
<TableRow>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/nameh"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/sexh"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/ageh"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/weighth"
/>
</TableRow>
</TableLayout>
五、 FrameLayout帧布局()
帧布局中的每一个组件都代表一个画面,默认以屏幕左上角作为(0,0)坐标,按组件 定义的先后顺序依次逐屏显示,后面出现的会覆盖前面的画面。用该布局可以实现动画效果。
接下来,我们用三幅图片实现一只小鸟飞翔的动画效果。首先准备好三张连续的小鸟飞行图片。
接着新建一个android project项目;
编写main.xml文件:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:gravity="center" >
<TextView
android:id="@+id/view1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:width="210px"
android:height="50px"
/>
<TextView
android:id="@+id/view2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:width="180px"
android:height="50px"
/>
<TextView
android:id="@+id/view3"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:width="150px"
android:height="50px"
/>
<TextView
android:id="@+id/view4"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:width="120px"
android:height="50px"
/>
<TextView
android:id="@+id/view5"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:width="90px"
android:height="50px"
/>
<TextView
android:id="@+id/view6"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:width="60px"
android:height="50px"
/>
<TextView
android:id="@+id/view7"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:width="30px"
android:height="50px"
/>
</LinearLayout>
String.xml文件
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="color1">#330000</color>
<color name="color2">#550000</color>
<color name="color3">#770000</color>
<color name="color4">#990000</color>
<color name="color5">#bb0000</color>
<color name="color6">#dd0000</color>
<color name="color7">#ff0000</color>
</resources>
Activity.java文件:
package cn.haozi;
import java.util.Timer;
import java.util.TimerTask;
import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.widget.TextView;
public class NeoncolorActivity extends Activity {
public int currentColor = 0;
final int[] colorid = new int[] {
R.color.color7, R.color.color6, R.color.color5, R.color.color4,
R.color.color3, R.color.color2, R.color.color1,
};
final int[] names = new int[] {
R.id.view1, R.id.view2, R.id.view3, R.id.view4, R.id.view5, R.id.view6,
R.id.view7,
};
TextView[] textView = new TextView[7];
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
for (int i = 0; i < 7; i++) {
textView[i] = (TextView) findViewById(names[i]);
}
/*
* Handler主要用于异步消息的处理:当发出一个消息之后,首先进入一个消息队列,
* 发送消息的函数即刻返回,而另外一个部分逐个的在消息队列中将消息取出,然后对消息进行出来, 就是发送消息和接收消息不是同步的处理
*/
final Handler handler = new Handler() {
// 发送信息
public void handleMessage(Message msg) {
// what:自定义的消息内容,可以为一切数据类型,对象也包括的
if (msg.what == 01122) {
// 依次改变7个textView的颜色
for (int i = 0; i < 7 - currentColor; i++) {
textView[i].setBackgroundResource(colorid[i
+ currentColor]);
}
for (int i = 7 - currentColor, j = 0; i < 7; i++, j++) {
textView[i].setBackgroundResource(colorid[j]);
}
}
super.handleMessage(msg);
}
};
// 定义一个线程去改变currentColor的变量值
new Timer().schedule(new TimerTask() {
@Override
public void run() {
currentColor++;
if (currentColor >= 6) {
currentColor = 0;
}
// 发送一条消息通知系统改变背景颜色
Message m = new Message();
// 给消息定义一个标识
m.what = 01122;
handler.sendMessage(m);
}
}, 0, 100);
}
}
说明:
由于FrameLayout中后出现的UI控件会覆盖前面出现的UI控件,每次只能显示一个UI控
件,因此,我们可以通过在Activity中对每次显示的图片内容进行切换以实现动画效果。或
许你会想到开启一条线程来控制切换,但在非主线程中不能更新UI界面,所以,我们使用了
Android提供的消息通讯类Handler。该类可以实现非主线程和负责UI的主线程之间的通信,
进而间接实现非主线程更新UI界面。由于sleep方法中的
sendMessageDelayed(obtainMessage(0),delayMillis);本身会延迟发送一个消息,该消息
会被框架传递给handleMessage事件。我们在handleMessage()方法中再次调用sleep()方法,
形成一个循环调用。在我们对界面进行点击之前,两个方法会一直循环调用。前景图片也会
不断的切换,进而实现动画的效果。
android 常用的距离单位;
[color=blue][/color]PX(像素):每个px对应屏幕上的一个点;
[color=blue]dip或dp(device independent pixels,设备独立像素);[/color]一种基于屏幕密度的抽象单位。在每寸160点的显示器上,1dip=1px。但是随着屏幕密度的改变,dip于px的换算会发生改变。
[color=blue]sp(scaled pixels,比例像素):[/color]处理字体的大小,可以根据用户的字体大小首选项进行缩放。
[color=blue]in(英寸) :[/color]标准的长度单位;
[color=blue]mm(毫米):[/color]标准的产度单位;
[color=cyan]pt(磅):[/color]标准长度的单位,1/72英寸
view子类是android用户界面表示的基本单元
view类的一些子类被称为widges工具;它提供了文本框和按钮类的UI对象的完整实现;
ViewGroup是view的一个扩展,可以容纳多个view;,他可以创建由互相联系的view组成的符合控件
布局:
FramelLayout-帧布局;
LinearLaout--线性布局;
TableLayout--表格布局;
RealativeLayout--相对布局;
Layout布局文件的命名---(禁止用大写字母来参与文件的命名)
一、 LinearLayout(线性布局)
“LinearLayout”翻译成中文是“线性布局”,所谓线性布局就是在该标签下的所有子
元素会根据其orientation属性的值来决定是按行或者是按列逐个显示。
示例main.xml布局文件如下:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/name_text" />
<EditText
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/ok_button"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/no_button"
/>
</LinearLayout>
二、 RelativeLayout(相对布局)
相对布局中的视图组件是按相互之间的相对位置来确定的,并不是线性布局中的必须
按行或按列单个显示。示例布局文件如下:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="@string/button_zh"
android:id="@+id/main"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="@string/button_ys"
android:layout_above="@+id/main"
android:layout_toLeftOf="@+id/main"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="@string/button_yx"
android:layout_above="@+id/main"
android:layout_toRightOf="@+id/main"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="@string/button_zs"
android:layout_below="@+id/main"
android:layout_toRightOf="@+id/main"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="@string/button_zx"
android:layout_below="@+id/main"
android:layout_toLeftOf="@+id/main"
/>
</RelativeLayout>
三、 线性布局与相对布局嵌套使用
布局之间可以相互嵌套使用,以完成更为复杂的布局效果。举例来说,下面是一个线性布局当中包含了相对布局的界面:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="70dp"
>
<TextView
android:id="@+id/name_nest"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:text="@string/name_text" />
<EditText
android:layout_width="150dp"
android:layout_height="30dp"
android:layout_alignParentTop="true"
android:layout_toRightOf="@+id/name_nest" >
<requestFocus />
</EditText>
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="70dp"
>
<TextView
android:id="@+id/password_nest"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:text="@string/password_text" />
<EditText
android:layout_width="150dp"
android:layout_height="30dp"
android:layout_toRightOf="@+id/password_nest" />
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="120dp"
>
<Button
android:id="@+id/button_re"
android:layout_width="50dp"
android:layout_height="35dp"
android:text="@string/login" />
<Button
android:layout_width="50dp"
android:layout_height="35dp"
android:layout_marginLeft="30dp"
android:layout_toRightOf="@+id/button_re"
android:text="@string/register" />
</RelativeLayout>
</LinearLayout>
四、 表格布局:
表格布局的风格跟HTML中的表格比较接近,只是所采用的标签不同。
<TableLayout>是顶级元素,说明采用的是表格布局
<TableRow>定义一个行
<TextView>定义一个单元格的内容
示例布局文件内容如下:
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:stretchColumns="*"
>
<TableRow>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/name"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/sex"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/age"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/weight"
/>
</TableRow>
<TableRow>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/nameh"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/sexh"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/ageh"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/weighth"
/>
</TableRow>
</TableLayout>
五、 FrameLayout帧布局()
帧布局中的每一个组件都代表一个画面,默认以屏幕左上角作为(0,0)坐标,按组件 定义的先后顺序依次逐屏显示,后面出现的会覆盖前面的画面。用该布局可以实现动画效果。
接下来,我们用三幅图片实现一只小鸟飞翔的动画效果。首先准备好三张连续的小鸟飞行图片。
接着新建一个android project项目;
编写main.xml文件:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:gravity="center" >
<TextView
android:id="@+id/view1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:width="210px"
android:height="50px"
/>
<TextView
android:id="@+id/view2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:width="180px"
android:height="50px"
/>
<TextView
android:id="@+id/view3"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:width="150px"
android:height="50px"
/>
<TextView
android:id="@+id/view4"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:width="120px"
android:height="50px"
/>
<TextView
android:id="@+id/view5"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:width="90px"
android:height="50px"
/>
<TextView
android:id="@+id/view6"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:width="60px"
android:height="50px"
/>
<TextView
android:id="@+id/view7"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:width="30px"
android:height="50px"
/>
</LinearLayout>
String.xml文件
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="color1">#330000</color>
<color name="color2">#550000</color>
<color name="color3">#770000</color>
<color name="color4">#990000</color>
<color name="color5">#bb0000</color>
<color name="color6">#dd0000</color>
<color name="color7">#ff0000</color>
</resources>
Activity.java文件:
package cn.haozi;
import java.util.Timer;
import java.util.TimerTask;
import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.widget.TextView;
public class NeoncolorActivity extends Activity {
public int currentColor = 0;
final int[] colorid = new int[] {
R.color.color7, R.color.color6, R.color.color5, R.color.color4,
R.color.color3, R.color.color2, R.color.color1,
};
final int[] names = new int[] {
R.id.view1, R.id.view2, R.id.view3, R.id.view4, R.id.view5, R.id.view6,
R.id.view7,
};
TextView[] textView = new TextView[7];
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
for (int i = 0; i < 7; i++) {
textView[i] = (TextView) findViewById(names[i]);
}
/*
* Handler主要用于异步消息的处理:当发出一个消息之后,首先进入一个消息队列,
* 发送消息的函数即刻返回,而另外一个部分逐个的在消息队列中将消息取出,然后对消息进行出来, 就是发送消息和接收消息不是同步的处理
*/
final Handler handler = new Handler() {
// 发送信息
public void handleMessage(Message msg) {
// what:自定义的消息内容,可以为一切数据类型,对象也包括的
if (msg.what == 01122) {
// 依次改变7个textView的颜色
for (int i = 0; i < 7 - currentColor; i++) {
textView[i].setBackgroundResource(colorid[i
+ currentColor]);
}
for (int i = 7 - currentColor, j = 0; i < 7; i++, j++) {
textView[i].setBackgroundResource(colorid[j]);
}
}
super.handleMessage(msg);
}
};
// 定义一个线程去改变currentColor的变量值
new Timer().schedule(new TimerTask() {
@Override
public void run() {
currentColor++;
if (currentColor >= 6) {
currentColor = 0;
}
// 发送一条消息通知系统改变背景颜色
Message m = new Message();
// 给消息定义一个标识
m.what = 01122;
handler.sendMessage(m);
}
}, 0, 100);
}
}
说明:
由于FrameLayout中后出现的UI控件会覆盖前面出现的UI控件,每次只能显示一个UI控
件,因此,我们可以通过在Activity中对每次显示的图片内容进行切换以实现动画效果。或
许你会想到开启一条线程来控制切换,但在非主线程中不能更新UI界面,所以,我们使用了
Android提供的消息通讯类Handler。该类可以实现非主线程和负责UI的主线程之间的通信,
进而间接实现非主线程更新UI界面。由于sleep方法中的
sendMessageDelayed(obtainMessage(0),delayMillis);本身会延迟发送一个消息,该消息
会被框架传递给handleMessage事件。我们在handleMessage()方法中再次调用sleep()方法,
形成一个循环调用。在我们对界面进行点击之前,两个方法会一直循环调用。前景图片也会
不断的切换,进而实现动画的效果。
android 常用的距离单位;
[color=blue][/color]PX(像素):每个px对应屏幕上的一个点;
[color=blue]dip或dp(device independent pixels,设备独立像素);[/color]一种基于屏幕密度的抽象单位。在每寸160点的显示器上,1dip=1px。但是随着屏幕密度的改变,dip于px的换算会发生改变。
[color=blue]sp(scaled pixels,比例像素):[/color]处理字体的大小,可以根据用户的字体大小首选项进行缩放。
[color=blue]in(英寸) :[/color]标准的长度单位;
[color=blue]mm(毫米):[/color]标准的产度单位;
[color=cyan]pt(磅):[/color]标准长度的单位,1/72英寸