Android界面Layout介绍

1、Android应用开发应用开发 2 03界面Layout介绍 资源文件的管理 Layout XML LinearLayout RelativeLayout TableLayout FrameLayout AbsoluteLayout 自定义自定义Layout Android 切换多个layout界面 3 首先介绍一下andorid的资源文件，认识这些资源文件对以后开发是必要的。 所有的Android应用程序都由两部分组成：功能代码和资源。功能代码决定应用程序的行 为，它包括让应用程序得以运行的所有算法。资源包括文本字符串、图像和图标、音频文件、 视频和其他应用程序使用的组件。 如果我们使用AD

2、T开发的话，它为我们在后台自动调用AAPT编译资源，我们就可以省了 很多事。不然的话，我们得使用AAPT自己去编译资源了。本文使用的是eclipse + ADT开发环 境。资源目录截图如下图所示。 资源文件的管理 4 在res目录下的都是资源文件，用的多的是layout、values、drawable等。 资源目录的层级结构如下表所示，表中显示了Android SDK支持的资源类型以及它们在工 程中的存储方式。 资源文件的管理 AAPT贯穿所有在/res目录下正确格式化的文件，并且在目录/gen中生成类文件R.java，以 访问所有变量。 R.java这个文件很有用，界面文件（即layout下

3、面的定义的界面）和实现代码就是通过 R.java联系的。 5 Layout对于迅速的搭建界面和提高界面在不同分辨率的屏幕上的适应性具有很大的作用。 这里简要介绍Android的Layout和研究一下它的实现。 Android有五种Layout：FrameLayout、LinearLayout、TableLayout、RelativeLayout、 AbsoluteLayout。 1. FrameLayout:里面只可以有一个控件，并且不能设计这个控件的位置，控件会放到左上 角。 2. LinearLayout:里面可以放多个控件，但是一行只能放一个控件。 3. TableLayout:这个要和

4、TableRow配合使用，很像html里面的table。 4. RelativeLayout:里面可以放多个控件，不过控件的位置都是相对位置。 5. AbsoluteLayout:里面可以放多个控件，并且可以自己定义控件的x，y的位置。 Layout XML 6 style.xml简介： 有时候我们不满足于系统控件的外观要改变一些背景，文字颜色等，这些属性可以在代 码里更改，随便哪种控件，我们点.，后面会出来一大串set开头的方法。但是在代码里这样 改来改去还是比较麻烦的，如果同样的控件多了，重复的代码也比较多。控件的这些属性也 是可以在xml文件里改的，同样的控件多了，还是会带来代码的重复。

5、这里我们就可以用设 置控件样式的方法了。下面以EditText控件为例来说明如何来设置一个控件的样式。 第一步：建立一个新的工程，在main布局里面建立三个EditText控件。 第二步：在工程的res/values文件夹下新建一个xml文件内容如下： #1A4EA4 #FFF111 #A6C60F #EC02C3 Layout XML 7 说明：这里建立了两种样式，从字面意思上可以看出这两种样式分别都更改了背景颜色 和文字颜色，一个控件可以更改的属性有很多，这里只改了两个，要改其它的属性，我们要 知道属性的name才可以改。那所有的属性的名字在哪呢？找了一番终于找到了，所有的属性 的名字在一

6、个attrs.xml文件里。这个文件存在于：platformsandroid- xdataresvalues 目录下，找到这个文件以后我们改某些属性时可以做为查看的资料了。 上面的两个样式中，都有一个parent属性。这就不难理解style是可以继承的。在这里我 们继承的是系统默认的EditText属性，只修改了背景和文字颜色而已。那系统的EditText样式 是在哪定义的呢？找了一番终于也找到了，所有系统控件的样式是在一个style.xml文件中， 这个文件也在上面说的那个目录下。里面我们可以找到Widget.EditText的样式定义。有了它 我们也可以查看某一种控件可以更改哪些样式了。

7、在设置style时，我们经常用到和？表明引用的资源是在一个项目或是系统框架中定 义过的。？表明引用的资源是在当前的主题定义过的。 上面的设置背景中的值除了可以是 颜色的值外，还可以是一个图片的引用。 第三步：我们修改main布局文件中EditText的属性。为了对比，我们将第一个属性不做改 变，第二个的style属性设为我们上面建立的name为et1的样式。第三个的style属性设为我们 上面建立的name为et2的样式，代码如下： Layout XML 8 Layout XML 9 下面是截图： Layout XML 10 Layout XML strings.xml简介： 开发人员可以通过

8、手工编写资源的XML文件，使用AAPT编译它们并生成R.java文件来定 义简单的资源，推荐使用ADT插件。 创建完工程后，在Eclipse中定位至/res/values/strings.xml文件，双击可以编辑它。我们 可以使用Resources标签下的Add按钮添加几个资源。也可以切换到源文件编辑模式。定义 的如下： Hello World, ActivityIntent! ActivityIntent The Activity and The Intent test! 测试 另一个Activity 电话按钮 个人认为，统一界面风格的时候可以用到，比如，我们把按钮btnOK的全部显示为“确

9、 定”，所有的按钮的宽度和高度设置好，可以定义这样一些的节点 确定 100px 25px 11 Layout XML 这样，我们在定义界面的时候，可以这样写： 保存Strings.xml文件。Eclipse插件将自动在你的工程中生成R.java文件，并含有适当的 资源ID，以供编译之后使用程序访问这些资源。如果你定位到/gen/目录下的R.java文件， 你可以看到：（所有的资源文件，都在R.java里面有对应） 资源的读取 当我们创建好资源并保存后，我们就可以在程序通过资源的ID来使用资源了。 比如说，我们获取资源ID为hello的内容： String str = getResources(

10、).getString(R.string.hello); 12 它的用法很简单：在LinearLayout 里面的控件，以垂直或水平的方向，按照相对位置 来排列所有的控件（包括所有的widgets 和containers）。如果LinearLayout设置成为垂直， 那么每一行只会有一个widget或者是container，而不管他们有多宽，而一个水平列表将会 只有一个行高（高度为最高子控件的高度加上边框高度）。 示例代码： LinearLayout 13 属性： 1. android:orientation 决定了排列方向, 如果参数orientation=horizontal 则按照水平排

11、列； 如果参数orientation= vertical ，则按照垂直排列 。 2. android:layout_width，定义当前视图在屏幕上可以占据的宽度，fill_parent即填充整个 屏幕; wrap_content用当前视图的最佳宽度显示。 3. android:layout_height 定义当前视图在屏幕上可以占据的高度，和layout_width 类似。 LinearLayout 可以相互嵌套，例如： LinearLayout 14 RelativeLayout顾名思义，这是一个相对布局。也就是说这个布局里面的元素是按照相 对位置来布局的，允许其子元素指定它们相对于其父元

12、素或兄弟元素的位置，这是实际 布局中最常用的布局方式之一。 示例代码： RelativeLayout 15 这种布局的灵活性大，当然属性也多，操作难度也大。不同的属性之间很有可能会产 生冲突。相对布局常用属性： 第一类：属性值为true或false（以屏幕为参照） android:layout_centerHrizontal android:layout_centerVertical android:layout_centerInparent android:layout_alignParentBottom android:layout_alignParentLeft android:layo

13、ut_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 RelativeLayout 16 第三类：属性值为具体的像素值，如30dip，40px android:la

14、yout_marginBottom android:layout_marginLeft android:layout_marginRight android:layout_marginTop RelativeLayout 17 TableLayout 是一种类似表格的布局，这种布局会把包含的元素以行和列进行排列。 表格的列数为所有行中的最大列数；每一行可以是一个TableRow布局对象，也可以是普 通的View对象，TableRow里面每一个元素占一列；TableLayout总列数由列数最多的那一行 决定。 示例代码： TableLayout 18 TableLayout几个重要的属性： co

15、llapseColumns 设置隐藏那些列，列ID从0开始，多个列的话用”,”分隔 stretchColumns 设置自动伸展那些列，列ID从0开始，多个列的话用”,”分隔 shrinkColumns -设置自动收缩那些列，列ID从0开始，多个列的话用”,”分隔 可以用”*”来表示所有列，同一列可以同时设置为shrinkable和stretchable。 TableRow本身也是一个Layout，里面的元素会安装水平方向依次排列，如果TableRow 的父元素不是TableLayout的话，那么他会表现的像一个LinearLayout。 TableLayout 19 FrameLayout在屏

16、幕上开辟了一块区域，在这块区域中可以添加多个子控件，但是所 有的子控件都会被对齐到屏幕的左上角。FrameLayout的大小由其所添加的所有子控件中 尺寸最大的那个子控件来控制。如果子控件的大小都一样，同一时刻只能看到最上面的 子控件，其他的则被其遮挡（在进行选项卡设计时会用到帧布局）。在FrameLayout中， 子控件是通过栈来绘制的，所以后添加的子控件会被绘制在上层。 示例代码： FrameLayout 20 FrameLayout继承ViewGroup类，除了继承父类的属性和方法外，FrameLayout类中还 包含了自己特有属性和方法： android:foreground （set

17、Foreground(Drawable)）设置绘制在所有子控件之上的内容 。 android:foregroundGravity（setForegroundGravity(int)）设置绘制在所有子控件之上内 容的gravity属性 FrameLayout 21 AbsoluteLayout，顾名思义，就是绝对位置的布局；也可以叫做坐标布局，也就是指 定元素的绝对位置（或者叫绝对坐标值）。这种布局简单直接，直观性强，但是由于手 机屏幕尺寸差别比较大，使用绝对定位的适应性会比较差。 如果不指定Layout_x 和Layout_y 那么默认都为0。会显示在最左上角。 示例代码： AbsoluteL

18、ayout 22 CwjView myView=new CwjView(context); 如果用于游戏或整个窗体的界面，我们可能直接在onCreate中setContentView(myView); 当然如果是控件，我们可能会需要从Layout的xml中声明，比如 当然，我们也可以直接从父类声明比如 自定义Layout 23 上面我们仅用了父类View的两个属性，均来自android命名空间，而名称为 layout_width或layout_height，我们自定义的控件可能有更多的功能，比如 我们可以看到上面的三个属性，是我们自定义的。作为标准xml规范，可能还包含了 类似xmlns:an

19、droid=http:/ 这样的语句，对于定义 完整的View，我们的命名空间为cwj，这里可以写为 xmlns:cwj=http:/ 或 xmlns:cwj=http:/ 都可以。 自定义Layout 24 对于定义的cwj命名空间和age、university以及city的三个属性我们如何定义呢? 在工程 的res/values目录中我们新建一个cwj_attr.xml文件，编码方式为utf-8是一个好习惯，内容 如下 自定义Layout 25 这里我们可能对format不是很熟悉，目前Android系统内置的格式类型有integer比如 ProgressBar的进度值，float比如Ra

20、tingBar的值可能是3.5颗星，boolean比如ToggleButton的 是否勾选，string比如TextView的text属性，当然除了我们常见的基础类型外，Android的属 性还有特殊的比如color是用于颜色属性的，可以识别为#FF0000等类型，当然还有 dimension的尺寸类型，比如23dip，15px，18sp的长度单位，还有一种特殊的为reference， 一般用于引用+id/cwj drawable/xxx这样的类型。 当然什么时候用reference呢? 我们就以定义一个颜色为例子， 这里我们用了逻辑或的运算符，定义的 红色是颜色类型的，同时可以被引用。 自定

21、义Layout 26 当然，对于我们自定义的类中，我们需要使用一个名为obtainStyledAttributes的方法 来获取我们的定义。在我们自定义View的构造方法(Context context, AttributeSet attrs)的重 载类型中可以用 public CwjView(Context context, AttributeSet attrs) super(context, attrs); TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.cwj_attr); mAge = a.getInte

22、ger(R.styleable.CwjView_age, 22); mCity = a.getString(R.styleable.CwjView_city, shanghai); mUniversity= a.getString(R.styleable.CwjView_university, sjtu); a.recycle(); /请大家不要忘了回收资源 自定义Layout 27 这样类的全局成员变量 mAge、mCity就获取了我们需要的内容，当然根据layout中的 数值我们自定义的CwjView需要动态的处理一些数据的情况，可以使用AttributeSet类的 getAttribut

23、eResourceValue方法获取。 public CwjView(Context context, AttributeSet attrs) super(context, attrs); resId = attrs.getAttributeResourceValue(com.test.CwjView, age, 100); resId = attrs.getAttributeResourceValue(com.test.CwjView, city, shanghai); /resID就可以任意使用了 以上两种方法中，参数的最后一个数值为默认的。 自定义Layout 28 屏幕切换指的是在同一

24、个Activity内屏幕间的切换，最常见的情况就是在一个 FrameLayout内有多个页面，比如一个系统设置页面、一个个性化设置页面。 通过查看文档可以发现，有个android.widget.ViewAnimator类继承至FrameLayout， ViewAnimator类的作用是为FrameLayout里面的View切换提供动画效果。该类有如下几个 和动画相关的函数： setInAnimation：设置View进入屏幕时候使用的动画，该函数有两个版本，一个接受 单个参数，类型为android.view.animation.Animation；一个接受两个参数，类型为Context 和in

25、t，分别为Context对象和定义Animation的resourceID。 setOutAnimation: 设置View退出屏幕时候使用的动画，参数setInAnimation函数一样。 showNext： 调用该函数来显示FrameLayout里面的下一个View。 showPrevious： 调用该函数来显示FrameLayout里面的上一个View。 一般不直接使用ViewAnimator而是使用它的两个子类ViewFlipper和ViewSwitcher。 ViewFlipper可以用来指定FrameLayout内多个View之间的切换效果，可以一次指定也可以 每次切换的时候都指定

26、单独的效果。该类额外提供了如下几个函数： Android 切换多个layout界面 29 isFlipping： 用来判断View切换是否正在进行 setFilpInterval：设置View之间切换的时间间隔 startFlipping：使用上面设置的时间间隔来开始切换所有的View，切换会循环进行 stopFlipping: 停止View切换 ViewSwitcher 顾名思义Switcher特指在两个View之间切换。可以通过该类指定一个 ViewSwitcher.ViewFactory 工程类来创建这两个View。该类也具有两个子类ImageSwitcher、 TextSwitcher

27、分别用于图片和文本切换。 ViewFlipper示例 ViewFlipper是继承至FrameLayout的，所以它是一个Layout里面可以放置多个View。 在示例中定义一个ViewFlipper，里面包含三个ViewGroup作为示例的三个屏幕，每个 ViewGroup中包含一个按钮和一张图片，点击按钮则显示下一个屏幕。代码如下 （reslayoutmain.xml）： Android 切换多个layout界面 30 Android 切换多个layout界面 31 Android 切换多个layout界面 32 Android 切换多个layout界面 33 Activity代码如下（T

28、estActivity.java）： public class TestActivity extends Activity /* Called when the activity is first created. */ private ViewFlipper mViewFlipper; Override public void onCreate(Bundle savedInstanceState) super.onCreate(savedInstanceState); setContentView(R.layout.main); Button buttonNext1 = (Button) findViewById(R.id.Button_next1); mViewFlipper = (ViewFlipper) findViewById(R.id.details); buttonNext1.setOnClickListener(new View.OnC