01 Android 布局使用的几种方式
来源:互联网 发布:火影忍者晓戒指淘宝 编辑:程序博客网 时间:2024/04/28 03:42
在学习 Android的过程中接触到了几种不同的使用的布局方法,这里总结一下方便以后使用。
这里整理了 3 种方法,
1:直接使用基础的 Layout xml文件,就是经常接触到的 FrameLayout, LinearLayout等等;
2:使用 include 把不同的 Layout xm l组合使用;
3:在 Layout 的 xml 文件中,使用自定义的View 的 class来实现自己的布局;
一,使用基础的 Layout xml文件
其中包括:
GridLayout
GridLayout布局使用虚细线将布局划分为行、列和单元格,可以指定控件占用多少单元格来完成布局。
GridLayout 相关的属性
android:orientation 指定横向或纵向
android:rowCount 指定行数
android:columnCount 指定列数
GridLayout 控件单元的相关属性
android:layout_row 指定控件所在的行,类似数组,下标从0开始
android:layout_column 指定控件所在的列,类似数组,下标从0开始
android:layout_rowSpan 表示该控件可以跨个多行
android:layout_columnSpan 表示该控件可以跨个多列
设置了:layout_rowSpan 和 layout_columnSpan 后需要在设置 layout_gravity = "fill" 让控件把多个单元格空间都填充满。
下面是从网上找到的一个小例子,非常实用,保留下来工作中用吧。
<?xml version="1.0" encoding="utf-8"?> <GridLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal" android:rowCount="5" android:columnCount="4" > <Button android:id="@+id/one" android:text="1"/> <Button android:id="@+id/two" android:text="2"/> <Button android:id="@+id/three" android:text="3"/> <Button android:id="@+id/devide" android:text="/"/> <Button android:id="@+id/four" android:text="4"/> <Button android:id="@+id/five" android:text="5"/> <Button android:id="@+id/six" android:text="6"/> <Button android:id="@+id/multiply" android:text="×"/> <Button android:id="@+id/seven" android:text="7"/> <Button android:id="@+id/eight" android:text="8"/> <Button android:id="@+id/nine" android:text="9"/> <Button android:id="@+id/minus" android:text="-"/> <Button android:id="@+id/zero" android:layout_columnSpan="2" android:layout_gravity="fill" android:text="0"/> <Button android:id="@+id/point" android:text="."/> <Button android:id="@+id/plus" android:layout_rowSpan="2" android:layout_gravity="fill" android:text="+"/> <Button android:id="@+id/equal" android:layout_columnSpan="3" android:layout_gravity="fill" android:text="="/> </GridLayout>
效果如下:
LinearLayout (Vertical, Horizontal)
一个盒子模型,控件按水平或垂直方向的相对位置排列在界面中,每行或每列只会有一个控件。好处是在屏幕尺寸有变化的情况下,控件可以填满屏幕上的空间。
RelativeLayout
在这个容器中,其子元素可以使用彼此之间的相对位置或者与容器之间的相对位置进行定位。
第一类: 和父元素的相对位置 属性值为true或false
android:layout_centerHrizontal 水平居中
android:layout_centerVertical 垂直居中
android:layout_centerInparent 相对于父元素完全居中
android:layout_alignParentBottom 贴紧父元素的下边缘
android:layout_alignParentLeft 贴紧父元素的左边缘
android:layout_alignParentRight 贴紧父元素的右边缘
android:layout_alignParentTop 贴紧父元素的上边缘
android:layout_alignWithParentIfMissing 如果对应的兄弟元素找不到的话就以父元素做参照物
第二类:和某个元素的相对位置 属性值必须为某个控件的 id的引用 "@id/id-name"
android:layout_below 在某元素的下方
android:layout_above 在某元素的的上方
android:layout_toLeftOf 在某元素的左边
android:layout_toRightOf 在某元素的右边
android:layout_alignTop 本元素的上边缘和某元素的的上边缘对齐
android:layout_alignLeft 本元素的左边缘和某元素的的左边缘对齐
android:layout_alignBottom 本元素的下边缘和某元素的的下边缘对齐
android:layout_alignRight 本元素的右边缘和某元素的的右边缘对齐
第三类:和边缘的相对关系,属性值为具体的像素值,如30dip,40px
android:layout_marginBottom 离某元素底边缘的距离
android:layout_marginLeft 离某元素左边缘的距离
android:layout_marginRight 离某元素右边缘的距离
android:layout_marginTop 离某元素上边缘的距离
第四类:控件自身的比例关系
android:layout_gravity 用来设置该view相对与父view 的位置.
android:scaleType 控制图片如何resized/moved来匹配ImageView的size。可取值如下:
center 不缩放,按图片的原来size居中显示,当图片长/宽超过View的长/宽,则截取图片的居中部分显示;
centerCrop 按比例缩放图片居中显示,使得图片长(宽)等于或大于View的长(宽)
centerInside 按比例缩放图片居中显示,使得图片长/宽等于或小于View的长/宽
fitCenter 按比例缩放到View的宽度,居中显示
fitEnd 按比例缩放到View的宽度,显示在View的下部分位置
fitStart 按比例缩放到View的宽度,显示在View的上部分位置
fitXY 不按比例缩放到View的大小
<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"android:orientation="vertical"android:layout_width="fill_parent"android:layout_height="wrap_content"><Button android:id="@+id/button1" android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="#FF3300" android:text="Button1" /><Button android:id="@+id/button2" android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="#FF3333" android:text="Button2" android:layout_below="@+id/button3"/><Button android:id="@+id/button3" android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="#FF33AA" android:text="Button3" android:layout_below="@+id/button1" /> </RelativeLayout>
Button2 和 Button3 的位置发生了变化。
FrameLayout
FrameLayout是最简单的一个布局对象。它被定制为你屏幕上的一个空白备用区域,之后你可以在其中填充一个单一对象 — 比如,张你要发布的图片。所有的子元素将会固定在屏幕的左上角;你不能为FrameLayout中的一个子元素指定一个位置。后一个子元素将会直接在前一个子元素之上进行覆盖填充,把它们部份或全部挡住。如果没有设置android:layout_gravity属性,FrameLayout中的子元素总是层叠在屏幕的左上角。
可以考虑把一个图片作为背景,然后再设置一个TextView在背景前显示内容。
TableLayout
一个表格的布局,定义行数和列数,在表格中可以添加其他的元素。每行为一个 <TableRow> 对象。
TableLayout 中有些属性可以对整个表格起作用,有些则是可用在单一的一行中。下面的关于表格的属性是从网上摘录的,非常实用的。
整理到这里希望以后能够用到。
1、全局属性也即列属性,有以下3个参数:
android:stretchColumns 设置可伸展的列。该列可以向行方向伸展,最多可占据一整行。
android:shrinkColumns 设置可收缩的列。当该列子控件的内容太多,已经挤满所在行,那么该子控件的内容将往列方向显示。
android:collapseColumns 设置要隐藏的列。
示例:
android:stretchColumns="0" 第0列可伸展
android:shrinkColumns="1,2" 第1,2列皆可收缩
android:collapseColumns="*" 隐藏所有行
说明:列可以同时具备stretchColumns及shrinkColumns属性,若此,那么当该列的内容N多时,将“多行”显示其内容。
(这里不是真正的多行,而是系统根据需要自动调节该行的layout_height)
2、单元格属性,有以下2个参数:
android:layout_column 指定该单元格在第几列显示
android:layout_span 指定该单元格占据的列数(未指定时,为1)
示例:
android:layout_column="1" 该控件显示在第1列
android:layout_span="2" 该控件占据2列
说明:一个控件也可以同时具备这两个特性。
<?xml version="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" android:padding="3dip"> <!-- 第1个TableLayout,使用可伸展特性,并指定每个控件宽度一致><TextViewandroid:text="表1:均匀布局"android:layout_height="wrap_content"android:layout_width="wrap_content"android:textSize="15sp"android:background="#7f00ffff"/><TableLayoutandroid:id="@+id/table1"android:layout_width="fill_parent"android:layout_height="wrap_content"android:stretchColumns="*"android:padding="3dip"><TableRow><Button android:text="A" android:layout_width="1dip"></Button><Button android:text="AAAA" android:layout_width="1dip"></Button><Button android:text="AAAAAA" android:layout_width="1dip"></Button></TableRow></TableLayout> <!-- 第2个TableLayout,使用可伸展特性布局--><TextViewandroid:text="表2:非均匀布局 (与表1的按钮对比一下就清楚了)"android:layout_height="wrap_content"android:layout_width="wrap_content"android:textSize="15sp"android:background="#7f00ffff"/><TableLayoutandroid:id="@+id/table2"android:layout_width="fill_parent"android:layout_height="wrap_content"android:stretchColumns="*"android:padding="3dip"><TableRow><Button android:text="A" ></Button><Button android:text="AAAA"></Button><Button android:text="AAAAAA" ></Button></TableRow></TableLayout> <!-- 第3TableLayout,用于描述表中的列属性。第0列可伸展,第1列可收缩,第2列被隐藏--><TextViewandroid:text="表3:全局设置:列属性设置 一列向行方向伸展 , 二列向列方向伸展 ,三列被隐藏"android:layout_height="wrap_content"android:layout_width="wrap_content"android:textSize="15sp"android:background="#7f00ffff"/><TableLayout android:id="@+id/table3"android:layout_width="fill_parent"android:layout_height="wrap_content"android:stretchColumns="0"android:shrinkColumns="1"android:collapseColumns="2"android:padding="3dip"><TableRow><Button android:text="AAAAAAAAAAAAAAAA"/><Button android:text="AAAAAAAAAAAAAAAA"/><Button android:text="AAAAAAAAAAAAAAAA"/></TableRow></TableLayout> <!-- 第4个TableLayout,用于描述表中单元格的属性,包括:android:layout_column 及android:layout_span--><TextViewandroid:text="表4:单元格设置:指定单元格属性设置 设定指定的列"android:layout_height="wrap_content"android:layout_width="wrap_content"android:textSize="15sp"android:background="#7f00ffff"/> <TableLayoutandroid:id="@+id/table4"android:layout_width="fill_parent"android:layout_height="wrap_content"android:stretchColumns="*"android:padding="3dip"><TableRow><Button android:text="第0列"/><Button android:text="第1列"/><Button android:text="第2列"/></TableRow> <TableRow><TextView android:text="Set to Column 1" android:layout_column="1"/></TableRow> <TableRow><TextViewandroid:text="Span to column 1 and 2"android:layout_column="1"android:layout_span="2"/></TableRow></TableLayout> </LinearLayout>
布局结果如下:
二,使用 include 把不同的 Layout xml 组合使用
一个简单的例子就 ok
sub_xml_1.xml
<?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" > <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="I am in sub xml 1" /></LinearLayout>
sub_xml_2.xml
<?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" > <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="I am in sub xml 2" /></LinearLayout>
include_test.xml
<?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="wrap_content" android:orientation="vertical" > <include android:layout_height="100dp" layout="@layout/sub_xml_1" /> <include android:layout_height="100dp" layout="@layout/sub_xml_2" /> </LinearLayout>
三,在 Layout 的 xml 文件中,使用自定义的View 的 class来实现自己的布局
方法用起来很灵活,自己定义一个类,其基类是View,在layout xml文件中引入该类作为一个标签,这样我们就可以使用自己定义的View了。
找了个例子很简单,也很实用,工作中用得到。
1) 定义一个 自己的 View 类 MyView.java,没什么花哨的就是画个圈。
package com.example.customizeviewinlayout;import android.content.Context;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Paint;import android.graphics.Paint.Style;import android.util.AttributeSet;import android.view.View;public class MyView extends View{ private Paint m_Paint; public MyView(Context context) { super(context); } public MyView(Context context,AttributeSet attr) { super(context,attr); } protected void onDraw(Canvas canvas) { super.onDraw(canvas); m_Paint = new Paint(); m_Paint.setColor(Color.BLUE); m_Paint.setStyle(Style.FILL); canvas.drawCircle(40, 40, 30, m_Paint); } }
注意
代码MyView中一定要实现接口 public MyView(Context context,AttributeSet attr)
这样MyView 可以获得layout文件中定义的属性。否则系统会抛出 InflateException
2) 在布局文件中使用自己定义的View
可以注意一下,这里给自定义的View 加了个id,这样我们就可以在程序中找到它并对它进行操作了。
<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" > <FrameLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1" > <com.example.customizeviewinlayout.MyView android:id="@+id/myView" android:layout_width="fill_parent" android:layout_height="fill_parent"/> </FrameLayout> </LinearLayout>
3) 修改一下 MainActivity.java 文件
package com.example.customizeviewinlayout;import android.os.Bundle;import android.app.Activity;import android.view.Menu;import android.view.View;import android.view.Window;import android.view.WindowManager;public class MainActivity extends Activity { private View m_MyView; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); // requesting to turn the title OFF requestWindowFeature(Window.FEATURE_NO_TITLE); // making it full screen getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN); setContentView(R.layout.activity_main); m_MyView = (View)findViewById(R.id.myView); // 我们可以取得自定义View的对象,我们就可以任意操作它了 // .......... } @Override public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.activity_main, menu); return true; }}
测试结果:
- Android 布局使用的几种方式
- 01 Android 布局使用的几种方式
- Android优化布局的几种方式
- 【UI布局优化】Android布局优化的几种方式
- Android开发 第五课 Android的几种布局方式
- Android界面布局的几种常用方式
- Android之view的几种布局方式及实践
- Android 的几种布局方式及实践【转】
- Android开发:view的几种布局方式
- Android 加载布局文件的几种方式
- 深入浅出谈Android 几种布局方式
- 几种布局方式
- 几种布局方式
- Android Layout布局使用总结Android中常用的5大布局方式有以下几种: 线性布局(LinearLayout):按照垂直或者水平方向布局的组件。 帧布局(FrameLayout):组件从
- Android 的 几种布局
- android的几种布局
- view的几种布局方式
- 固定布局的几种方式
- 斗地主规则记录
- CHyperLink类
- 华为发布2013年行业趋势:数字社会正在形成(转)
- android关于蓝牙MAC地址唯一的问题
- Android中G-Sensor流程
- 01 Android 布局使用的几种方式
- DVFS--动态电压频率调整
- FOS!@#
- 堆排序时间复杂度的理解
- 空想编程语言
- android下调试光感、温度、气压计(驱动篇)
- Win7下VC6.0打开多个工程的设置
- android下调试光感、温度、气压计(hal篇)
- 如何获得一份工作?