Android程序UI单侧,Android应用程序----UI界面控件(界面布局小记)

界面布局

界面布局(Layout)是用户界面结构的描述,定义了界面中所有的元素、结构和相互关系

声明Android程序的界面布局有两种方法

使用XML文件描述界面布局

在程序运行时动态添加或修改界面布局

用户既可以独立使用任何一种声明界面布局的方式,也可以同时使用两种方式

使用XML文件声明界面布局的特点

将程序的表现层和控制层分离

在后期修改用户界面时,无需更改程序的源代码

用户还能够通过可视化工具直接看到所设计的用户界面,有利于加快界面设计的过程,并且为界面设计与开发带来极大的便利性

线性布局

线性布局(LinearLayout)是一种重要的界面布局中,也是经常使用到的一种界面布局

在线性布局中,所有的子元素都按照垂直或水平的顺序在界面上排列

如果垂直排列,则每行仅包含一个界面元素

如果水平排列,则每列仅包含一个界面元素

15725579_202105030837530168_wm.jpg

15725579_202105030838110793_wm.jpg

创建Android工程

工程名称是LinearLayout

包名称是edu.hrbeu.LinearLayout

Activity名称为LinearLayout

为了能够完整体验创建线性布局的过程,首先删除Eclipse自动建立的/res/layout/main.xml文件,然后建立用于显示垂直排列线性布局的XML文件

右击/res/layout文件夹

选择New → File打开新文件建立向导

文件名为main_vertical.xml

保存位置为LinearLayout/res/layout

15725579_202105030838450481_wm.jpg

双击新建立的/res/layout/main_vertical.xml文件,Eclipse将打开界面布局的可视化编辑器

15725579_202105030839090106_wm.jpg

可视化编辑器顶部是资源配置清单,可以根据手机的配置不同选择不同的资源,主要用来实现应用软件的本地化

下部左侧是界面布局和界面控件,用户可以将需要的布局和控件拖拽到右面的可视化界面中,并修改布局和控件的属性

右侧是可视化的用户界面,能够实时的呈现用户界面,但对无法正确显示中文。左下角的“Layout”和“main_vertical.xml”能够在可视化编辑器和XML文件编辑器之间切换

在Eclipse右边的Outline中,双击LinearLayout,打开线性布局的属性编辑器

线性布局的排列方法主要由Orientation属性进行控制,vertical表示垂直排列,horizontal表示水平排列

选择Orientation的值为vertical,表示该线性布局为垂直排列

15725579_202105030840090060_wm.jpg

4bcfa0b585b28943b1265f2954dc1704.gif

缺省情况下,Layout height的值为wrap_content,表示线性布局高度等于所有子控件的高度总和,也就是线性布局的高度会刚好将所有子控件包含其中

将Layout width属性的值改为fill_parent,表示线性布局宽度等于父控件的宽度,就是将线性布局在横向上占据父控件的所有空间

打开XML文件编辑器,main_vertical.xml文件的代码如下

15725579_202105030840380450_wm.jpg

第2行代码是声明XML文件的根元素为线性布局

第4、5、6行代码是在属性编辑器中修改过的宽度、高度和排列方式的属性

用户在可视化编辑器和属性编辑器中的任何修改,都会同步的反映在XML文件中;反之,也是如此

将四个界面控件TextView、EditText、Button、Button先后拖拽到可视化编辑器中

所有控件都自动获取控件名称,并把该名称显示在控件上,如TextView01、EditText01、Button01和Button02

15725579_202105030841160185_wm.jpg

修改界面控件的属性

15725579_202105030841450107_wm.jpg

所有界面控件都有一个共同的属性ID

ID是一个字符串,编译时被转换为整数,可以用来在代码中引用界面元素,一般仅在代码中需要动态修改的界面元素时才为界面元素设置ID,反之则不需要设置ID

从可视化编辑器中发现,界面控件的中文字符都显示为“□”,因为可视化编辑器还不能很好的支持中文字符

打开XML文件编辑器查看main_vertical.xml文件代码,发现在属性编辑器内填入的文字已经正常写入到XML文件中,例如第11、20、25行代码

15725579_202105030842210232_wm.jpg

15725579_202105030842440170_wm.jpg

将LinearLayout.java文件中的setContentView(R.layout.main),更改为setContentView(R.layout.main_vertical)。运行后的结果如图

15725579_202105030843120045_wm.jpg

建立横向线性布局与纵向线性布局相似,只需注意以下几点

建立main_ horizontal.xml文件

线性布局的Orientation属性的值设置为horizontal

将EditText的Layout width 属性的值设置为             wrap_content

将LinearLayout.java文件中的   setContentView(R.layout.main_vertical) 修改为setContentView(R.layout.main_ horizontal)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值