浅谈Android布局样式
浅谈Android布局样式
初学android,感觉还是比较轻松的。当然,如果没有好好的去在自己的电脑上实现的话,估计也会搞得自己稀里糊涂的。下面是我在学习Android布局样式的一些总结(个人这样认为),当然,在其中也借鉴了其他的学习资料,现在与大家分享一下。学习中,我分别学习了Android的四种布局样式分别为:
1.LinearLayout(线性布局)
2.RelativeLayout (相对布局)
3.TableLayout (表格布局)
4.FrameLayout (帧布局)
下面逐一介绍一下:
1.LinearLayout(线性布局)
“ LinearLayout”翻译成中文是“线性布局”,所谓线性布局就是在该标签下的所有子元素会根据其 orientation 属性的值来决定是按行或者是按列逐个显示。
示例main.xml布局文件如下:
view plain
- <?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>
其对应 strings.xml 内容如下:
view plain
- <?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>
运行后,如下图:
“ xmlns:android ”指定命名空间,顶级元素必须指定命名空间。而在该命名空间中的控件的属性如 layout_width ,要在属性前加上“android :”做前缀。
“ layout_width ”指定该元素的宽度,可选值有三种,“ fill_parent ”、“ wrap_content ”、具体数字(单位为 px )。其中“ fill_parent ”代表填满其父元素,对于顶级元素来说,其父元素就是整个手机屏幕。“ wrap_content ”代表该元素的大小仅包裹其自身内容,而数字则代表其占相应的 px 。
“ layout_height ”指定该元素的高度,可选参数值与“ layout_width ”的参数意义相同。
“ orientation ”指定子元素排列方式,其中指定为“ vertical ”则是子元素垂直排列,每个子元素会占独立的一行,如上图,而另一个可选值为“ horizontal ”代表子元素水平排列,即每个子元素会占独立的一列。示例 main.xml 布局文件如下。其对应的
strings.xml 内容不变。
view plain
- main.xml
- <?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>
运行后,如下图:
2.RelativeLayout (相对布局)
相对布局中的视图组件是按相互之间的相对位置来确定的, 并不是线性布局中的必须
按行或按列单个显示。示例布局文件如下:
main.xml
view plain
- <?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>
说明:
android:layout_below="@id/text" :将该元素放到 id 为 text 的元素的下面
android:layout_toLeftOf="@id/ok" :放到 id 为 ok 的元素左边
android:layout_alignTop="@id/ok" :对齐 id 为 ok 的元素的顶部
还有很多关于相对位置的字段,希望大家能够自己去发现
界面效果如图:
案例二:梅花效果
问题:利用相对布局实现下面的效果
案例分析:
我们可以从途中看出,四周的方框的角都与中间的方框相连,而且呈现出X字样.试想,中间的是不是有什么特殊含义?
好,养我们做一个假设:假设中间的方框为相对对象,那么各个方框如何表示呢?拿左上角的方框为例,它的位置是:既中间方框的上面又是中间方框的左边.好,那么其他的是不是可以同样再这样表示呢?答案是肯定的.按照这个思路,我们试着把代码写出来:
main.xml
view plain
- <?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>
运行图为:
android:layout_centerInParent="true" 图片垂直水平居中
android:background="@drawable/meihua"将该元素的id放到background下,"meihua"是我拷入的图片文件
3.TableLayout (表格布局)
表格布局的风格跟 HTML 中的表格比较接近,只是所采用的标签不同。
□<TableLayout > 是顶级元素,采用的是表格布局
□ <TableRow> 定义一个行
□ <TextView > 定义一个单元格的内容
示例main.xml布局文件内容如下:
view plain
- <?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>
□ android:stretchColumns="0,1,2,3"
该属性指定每行都由第“ 0 、 1 、 2 、 3 ”列占满空白空间。
□ gravity 指定文字对齐方式,案例都设为居中对齐。
□ padding 指定视图与视图内容间的空隙,单位为像素。
对应的 strings.xml 文件内容如下:
view plain
- <?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>
界面效果如下:
4.FrameLayout (帧布局)
帧布局中的每一个组件都代表一个画面,默认以屏幕左上角作为( 0,0 )坐标,按组件定义的先后顺序依次逐屏显示 , 后面出现的会覆盖前面的画面 。 用该布局可以实现动画效果 。接下来,我们用三幅图片实现一只小鸟飞翔的动画效果。三张图片如下:
编写的mail.xml文件:
view plain
- <spanstyle="font-size:16px;"><?xmlversion="1.0"encoding="utf-8"?>
- <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></span>
在该布局文件中定义一个 id 为 frame 的帧布局文件。
编写 FreamTestActivity.java 类
view plain
- <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
更多相关文章
- Android(安卓)入门第四讲04-小结-RecyclerView(回顾)+Context(介绍
- Android的Intent Filter详解
- 深入了解View(四)—— LayoutInflater原理及View测量/布局/绘制总
- android自定义checkBox的样式
- 【Android(安卓)界面效果10】Android中View,ViewGroup,Window之
- android 判断横竖屏问题的详解
- Android进阶笔记10:Android(安卓)万能适配器
- [置顶] Android列表收缩与展开仿QQ好友列表(非常详细,附源码)
- 自定义 Android(安卓)对话框 (AlertDialog) 的样式