<p>初学android，感觉还是比较轻松的。当然，如果没有好好的去在自己的电脑上实现的话，估计也会搞得自己稀里糊涂的。下面是我在学习Android布局样式的一些总结（个人这样认为），当然，在其中也借鉴了其他的学习资料，现在与大家分享一下。学习中，我分别学习了Android的四种布局样式分别为：</p><p>1.LinearLayout（线性布局）</p><p>2.RelativeLayout (相对布局)</p><p>3.TableLayout (表格布局)</p><p>4.FrameLayout （帧布局）</p><p>下面逐一介绍一下：</p><p>1.LinearLayout（线性布局）</p><p>" LinearLayout "翻译成中文是"线性布局"，所谓线性布局就是在该标签下的所有子元素会根据其 orientation 属性的值来决定是按行或者是按列逐个显示。</p><p>示例main.xml布局文件如下：</p><pre class="brush:as3;toolbar:false"><?xmlversion="1.0"encoding="utf-8"?>
<LinearLayout
xmlns:android"http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<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/cancle_button"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/ok_button"/>
</LinearLayout></pre><p><br/></p><p>其对应 strings.xml 内容如下：</p><pre class="brush:as3;toolbar:false"><?xmlversion="1.0"encoding="utf-8"?>
<resources>
<stringname="hello">HelloWorld,UIActivity!</string>
<stringname="app_name">用户界面</string>
<stringname="name_text">请输入用户名</string>
<stringname="ok_button">确定</string>
<stringname="cancle_button">取消</string>
</resources></pre><p><br/></p><p>运行后，如下图：</p><p>" xmlns:android "指定命名空间，顶级元素必须指定命名空间。而在该命名空间中的控件的属性如 layout_width ，要在属性前加上"android ："做前缀。</p><p>" layout_width "指定该元素的宽度，可选值有三种，" fill_parent "、" wrap_content "、具体数字（单位为 px ）。其中" fill_parent "代表填满其父元素，对于顶级元素来说，其父元素就是整个手机屏幕。" wrap_content "代表该元素的大小仅包裹其自身内容，而数字则代表其占相应的 px 。</p><p>" layout_height "指定该元素的高度，可选参数值与" layout_width "的参数意义相同。</p><p>" orientation "指定子元素排列方式，其中指定为" vertical "则是子元素垂直排列，每个子元素会占独立的一行，如上图，而另一个可选值为" horizontal "代表子元素水平排列，即每个子元素会占独立的一列。示例 main.xml 布局文件如下。其对应的</p><p>strings.xml 内容不变。</p><p>main .xml </p><pre class="brush:as3;toolbar:false"><?xmlversion="1.0"encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:text="@string/name_text"
/>
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/cancle_button"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/ok_button"/>
</LinearLayout></pre><p><br/></p><p>运行后，如下图：</p><p>2.RelativeLayout (相对布局)</p><p>相对布局中的视图组件是按相互之间的相对位置来确定的， 并不是线性布局中的必须</p><p>按行或按列单个显示。示例布局文件如下：</p><p>main.xml</p><pre class="brush:as3;toolbar:false"><?xmlversion="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"
>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/name_text"
android:id="@+id/text"/>
<EditText
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="@id/text"
android:id="@+id/edit"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/cancle_button"
android:layout_alignParentRight="true"
android:layout_below="@id/edit"
android:id="@+id/cancle"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="@id/cancle"
android:layout_alignTop="@id/cancle"
android:text="@string/ok_button"/>
</RelativeLayout></pre><p><br/></p><p>说明：</p><p>android:layout_below="@id/text" ：将该元素放到 id 为 text 的元素的下面</p><p>android:layout_toLeftOf="@id/ok" ：放到 id 为 ok 的元素左边</p><p>android:layout_alignTop="@id/ok" ：对齐 id 为 ok 的元素的顶部</p><p>还有很多关于相对位置的字段,希望大家能够自己去发现</p><p>界面效果如图：</p><p>案例二:梅花效果</p><p>问题:利用相对布局实现下面的效果</p><p>案例分析:</p><p>我们可以从途中看出,四周的方框的角都与中间的方框相连,而且呈现出X字样.试想,中间的是不是有什么特殊含义?</p><p>好,养我们做一个假设:假设中间的方框为相对对象,那么各个方框如何表示呢?拿左上角的方框为例,它的位置是:既中间方框的上面又是中间方框的左边.好,那么其他的是不是可以同样再这样表示呢?答案是肯定的.按照这个思路,我们试着把代码写出来:</p><p>main.xml</p><pre class="brush:as3;toolbar:false"><?xmlversion="1.0"encoding="utf-8"?>
<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="@drawable/meihua"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@id/center"
android:layout_toLeftOf="@id/center"
android:background="@drawable/meihua"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@id/center"
android:layout_toRightOf="@id/center"
android:background="@drawable/meihua"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/center"
android:layout_toLeftOf="@id/center"
android:background="@drawable/meihua"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/center"
android:layout_toRightOf="@id/center"
android:background="@drawable/meihua"/>
</RelativeLayout></pre><p><br/></p><p>运行图为:</p><p>android:layout_centerInParent="true" 图片垂直水平居中</p><p>android:background="@drawable/meihua"将该元素的id放到background下,"meihua"是我拷入的图片文件</p><p>3.TableLayout (表格布局)</p><p>表格布局的风格跟 HTML 中的表格比较接近，只是所采用的标签不同。</p><p>□<TableLayout > 是顶级元素，采用的是表格布局</p><p>□ <TableRow> 定义一个行</p><p>□ <TextView > 定义一个单元格的内容</p><p>示例main.xml布局文件内容如下：</p><pre class="brush:as3;toolbar:false"><?xmlversion="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="0,1,2,3"
>
<TableRow>
<TextView
android:text="@string/name"
android:gravity="center"
android:padding="3dip"/>
<TextView
android:text="@string/gender"
android:gravity="center"
android:padding="3dip"/>
<TextView
android:text="@string/age"
android:gravity="center"
android:padding="3dip"/>
<TextView
android:text="@string/phonenum"
android:gravity="center"
android:padding="3dip"/>
</TableRow>
<TableRow>
<TextView
android:text="@string/name1"
android:gravity="center"
android:padding="3dip"/>
<TextView
android:text="@string/gender1"
android:gravity="center"
android:padding="3dip"/>
<TextView
android:text="@string/age1"
android:gravity="center"
android:padding="3dip"/>
<TextView
android:text="@string/phonenum1"
android:gravity="center"
android:padding="3dip"/>
</TableRow>
<TableRow>
<TextView
android:text="@string/name2"
android:gravity="center"
android:padding="3dip"/>
<TextView
android:text="@string/gender1"
android:gravity="center"
android:padding="3dip"/>
<TextView
android:text="@string/age2"
android:gravity="center"
android:padding="3dip"/>
<TextView
android:text="@string/phonenum2"
android:gravity="center"
android:padding="3dip"/>
</TableRow>
</TableLayout></pre><p>□ android:stretchColumns="0,1,2,3"</p><p>该属性指定每行都由第" 0 、 1 、 2 、 3 "列占满空白空间。</p><p>□ gravity 指定文字对齐方式，案例都设为居中对齐。</p><p>□ padding 指定视图与视图内容间的空隙，单位为像素。</p><p>对应的 strings.xml 文件内容如下：</p><pre class="brush:as3;toolbar:false"><?xmlversion="1.0"encoding="utf-8"?>
<resources>
<stringname="name">姓名</string>
<stringname="gender">性别</string>
<stringname="age">年龄</string>
<stringname="phonenum">电话</string>
<stringname="gender1">男</string>
<stringname="gender2">女</string>
<stringname="name1">张三</string>
<stringname="age1">25</string>
<stringname="phonenum1">1234567</string>
<stringname="name2">李四</string>
<stringname="age2">24</string>
<stringname="phonenum2">7654321</string>
</resources></pre><p><br/></p><p>界面效果如下：</p><p>4.FrameLayout （帧布局）</p><p>帧布局中的每一个组件都代表一个画面，默认以屏幕左上角作为（ 0,0 ）坐标，按组件定义的先后顺序依次逐屏显示 ， 后面出现的会覆盖前面的画面 。 用该布局可以实现动画效果 。</p><p>接下来，我们用三幅图片实现一只小鸟飞翔的动画效果。三张图片如下：</p><p>编写的mail.xml文件:</p><pre class="brush:as3;toolbar:false"><FrameLayoutxmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:id="@+id/frame"
>
</FrameLayout></pre><p>在该布局文件中定义一个 id 为 frame 的帧布局文件。</p><p>编写 FreamTestActivity.java 类</p><pre class="brush:as3;toolbar:false"><spanstyle="font-size:16px;">packagecn.class3g;
importandroid.app.Activity;
importandroid.graphics.drawable.Drawable;
importandroid.os.Bundle;
importandroid.os.Handler;
importandroid.os.Message;
importandroid.view.View;
importandroid.view.View.OnClickListener;
importandroid.widget.FrameLayout;
publicclassFreamTestActivityextendsActivity{
FrameLayoutframe=null;
booleanflag=true;
classMyHandlerextendsHandler{
inti=0;
publicvoidhandleMessage(Messagemsg){
i++;
show(i%3);
sleep(50);
}
publicvoidsleep(longdelayMillis){
if(flag){
this.sendMessageDelayed(this.obtainMessage(0),delayMillis);
}
}
}
voidshow(inti){
Drawablea=getResources().getDrawable(R.drawable.a1);
Drawableb=getResources().getDrawable(R.drawable.a2);
Drawablec=getResources().getDrawable(R.drawable.a3);
switch(i){
case0:
frame.setForeground(a);
break;
case1:
frame.setForeground(b);
break;
case2:
frame.setForeground(c);
break;
}
}
publicvoidonCreate(BundlesavedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
frame=(FrameLayout)findViewById(R.id.frame);
finalMyHandlermyHandler=newMyHandler();
myHandler.sleep(50);
frame.setOnClickListener(newOnClickListener(){
publicvoidonClick(Viewarg0){
//TODOAuto-generatedmethodstub
flag=!flag;
myHandler.sleep(10);
}
});
}
}</span></pre><p><br/></p><p>说明：</p><p>由于 FrameLayout 中后出现的 UI 控件会覆盖前面出现的 UI 控件，每次只能显示一个 UI 控件，因此，我们可以通过在 Activity 中对每次显示的图片内容进行切换以实现动画效果 。 或许你会想到开启一条线程来控制切换 ， 但在非主线程中不能更新 UI 界面 ， 所以 ， 我们使用了Android 提供的消息通讯类 Handler 。该类可以实现非主线程和负责 UI 的主线程之间的通信 ，进而间接实现非主线程更新 UI 界面。由于 sleep 方法中的sendMessageDelayed(obtainMessage(0), delayMillis); 本身会延迟发送一个消息 ， 该消息</p><p>会被框架传递给 handleMessage 事件 。 我们在 handleMessage() 方法中再次调用 sleep() 方法 ，形成一个循环调用 。 在我们对界面进行点击之前 ， 两个方法会一直循环调用 。 前景图片也会不断的切换，进而实现动画的效果。</p><p></p><p>点击图片之后，小鸟停止飞翔。</p>