第4章(2) UI设计器

分类:C#、Android、VS2015;创建日期:2016-02-06

开发人员可以用以下两种方式声明UI:一是通过.xml文件(不带预览界面)或者.axml文件(带预览界面)来描述;二是用C#代码实现。

用.axml文件描述用户界面(UI)时,设计器分为【设计】视图和【源】视图。这种方式的优点是:可以尽可能地把表现与控制行为的代码分隔开。就是说,可以直接修改XML而不需要重新编译。另外,还可以让UI结构可视化以及调试都变得更容易。

1、布局文件(.xml和.axml)

在XML中声明UI之后,必须将其以.xml扩展名或者.axml扩展名保存在Android项目的Resources/Layout/目录下,然后才能顺利通过编译。

  • .xml文件:不带设计界面
  • .axml文件:带设计界面
  • 可以随时将.xml换名为.axml,也可以随时将.axml换名为.xml。

编译器编译应用程序时,会将每个XML文件或者AXML文件都编译成一个View。开发人员需要在Activity重载的OnCreate方法中指定载入哪个XML资源。

例如,下面的代码加载Main.axml文件:

protected override void OnCreate(Bundle bundle)
{
    base.OnCreate(bundle);
    SetContentView(Resource.Layout.Main);
}

2、属性分类

在【属性】窗口中,下列分类可帮助快速找到对应的属性:

  • Widget – 控件(带设计界面的组件),主要属性包括:id、visibility、text等
  • Style – 可视化的样式控制,例如:font、text color、background等
  • Layout – 布局控制
  • Scroll – 滚动属性
  • Behavior – 行为控制

3、属性默认值

由于控件的值多数是继承自所使用的主题(Android Theme),所以默认情况下这些值大部分都是空白。即:默认不显示继承过来的值,仅显示开发人员明确指定的值。

4、常用属性

下面列出一些最常用的属性。

(1)ID

活动(Activity)中的每个View对象都用一个整数类型的ID来标识,但是这个ID在XML文件中通常用字符串来表示。例如:

<Button android:id="@+id/mybutton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/my_button_text"/>

字符串开头的【@】表明XML解析器应该解析和扩展ID字符串的剩余部分,并且把它标识为一个ID资源。【+】意味着这是一个新资源名称。

注意,引用在Resource中已经定义的资源ID的时候不要使用“+”,而是用“android”命名空间来限定它。例如,下面的代码引用empty.jpg文件:

android:id="@android:id/empty"

(2)wrap_content、fill_parent、match_parent

wrap_content:将元素大小调整到其自身内容所要求的尺寸。

fill_parent:将元素大小调整到其父元素所能允许的最大尺寸。【工具箱】中“Layout” 选项卡下的布局控件默认使用它。

match_parent:将元素大小调整到其父元素所能允许的最大尺寸。match_parent的作用和fill_parent的作用相同,【工具箱】中“Form Widgets”选项卡下的非布局控件(例如TextView、Button等)默认使用它。

(3)dp

一般不推荐使用绝对度量单位指定height和width,而是应该使用与密度无关像素单位(dp)。另外,应尽量使用wrap_content,fill_parent等相对量度属性,这样做的好处是能让应用程序自适应不同尺寸大小的设备屏幕。

(4)Left、Top、Right、Bottom

View的几何形状默认是一个矩形,每个View都用Left、Top、Width、Height来确定其位置,单位都是pix(像素)。

Left、Top返回的是相对于其父View的定位值。另外,View还给出了简便的方法来避免不必要的计算,例如Right、Bottom,这两个属性返回的是View的右边缘和下边缘的坐标。其中,Right相当于Left + Width,Bottom相当于Top+Height。

(5)Size、width、height

一个View的Size有两对(宽、高)值来构造:

measured width、measured height:定义了一个view在它的parent中显示为多大。实际的尺寸可通过调用 getMeasuredWidth()和 getMeasuredHeight()来得到;

width、height:这是在绘制时以及布局之后定义View在屏幕上的实际尺寸,这些值可能与measured height 和measured width不同,也可能相同。

为了测量元素的尺寸,View把它的padding计算在内。Padding包括View的上下左右四个部分,单位是像素。Padding可以用特定的像素数来抵消view的内容部分。举例来说,值为2的left padding将会把view的内容从左边缘向右推2 pixels。

尽管View可以定义padding,但是它没有提供margin,而是在ViewGgroup中提供该属性。

(6)Margin

选中某个控件后,可拖动下图红色框内的控制点调整该控件的外边距(Margin):

双击对应的控制点,还可以直接输入或修改具体值,例如“39.3dp”,如下图所示:

在上图中,可看出还有几个小矩形按钮,拖动它可修改下面的属性:

  • wrap_content:让控件匹配其自身内容的大小。
  • match_parent:让控件填满其父容器的可用空间。

但是,并不是所有控件都能通过双击的办法修改其属性值,例如LinearLayout即使选中它也不会显示控制点,当然也不能在界面中用双击的办法修改它的属性值。

5、大纲视图(Outline View)

利用大纲视图可快速选择设计器中不易被选中的控件:

在大纲视图中,和在设计器中一样,也可以拖放、复制、粘贴,以及右键弹出快捷菜单。

当设计器中有些控件不易选择时,也可以利用鼠标右键弹出快捷菜单来操作:

时间: 2024-10-25 08:22:59

第4章(2) UI设计器的相关文章

vs2015当双击UI设计器的安按时,提示重载函数 OnBnClickedBtnAdd已存在

vs2015当双击UI设计器的安按时,提示重载函数 OnBnClickedBtn已存在 解决方法: 到对应的.cpp文件中检查是否使用了修改前的按钮ID进行的消息关联. ON_BN_CLICKED(IDC_BUTTON2, &CSleepDataStatisticsDlg::OnBnClickedBtnAdd) 改为: ON_BN_CLICKED(IDC_BTN_ADD, &CSleepDataStatisticsDlg::OnBnClickedBtnAdd) 如果仍是不行,则在对应.h

C#用DesignSurface实现一个简单的窗体设计器

System.ComponentModel.Design.DesignSurface是为设计组件提供一个用户界面,通过它可以实现一个简单的窗体设计器. 在构建之前,我们需要引入System.Design.dll,否则会出现找不到DesignSurface的错误.  1         private void Form1_Load(object sender, EventArgs e) 2         { 3            //引用System.Deisgn.dll 4       

一步一步jQuery流程设计器插件goflow(附代码) - 1 - 构建设计器UI界面

之前用Silverlight实现过一个流程设计器(Demo),使用起来不是很方便.打算参考GooFlow,结合自己对工作流的理解,用jQuery改造实现一个,力求简单实用. 第一步是要构建设计器的UI界面,如下: 用到的图标有: 用CSS精灵工具如CSS Satyr可以把它们合在一起. C#的String.format用习惯,觉得js里拼字符串不好使,先模拟实现一个: function formatString() { var formatStr = arguments[0]; if (type

Windows Phone 十二、设计器同步

在设计阶段为页面添加数据源 Blend或者VS的可视化设计器会跑我们的代码,然后来显示出来,当我们Build之后,设计器会进入页面的构造函数,调用InitializeComponent();方法来将UI渲染然后呈现给我们. DesignMode.DesignModeEnabled获取指示进程是否在设计模式下运行的值. d:DataContext="{d:DesignInstance Type=data:MainPageViewModel,IsDesignTimeCreatable=True}&q

开源工作流引擎web设计器Activiti Modeler 5.17.0 与IE11的兼容性探究

一.源码下载 Activiti官网:http://activiti.org/ github:https://github.com/Activiti/Activiti 官网上下载的是lib库文件.文档和网站样例,推荐使用maven管理项目,可以不用下载库文件,直接下载源码,github上源码已经是5.18.0,但是官方还没有发布,从以下网址找到5.17.0的source code下载链接下载即可:https://github.com/Activiti/Activiti/releases,大小为20

基于Extjs的web表单设计器 第三节——控件拖放

看过之前设计器截图的朋友应该有印象,可能会发觉我们的设计器UI设计布局其实类似Visual studio 的设计界面,采用的是左.中.右三个区域布局.左侧为控件区域.中间为表单的画布设区域.右侧为属性区域.这样的UI设计肯定就得支持控件的拖拽设计,用户只要拖放一个控件到我们的画布上,那么画布就应该立即能够看到我们拖放的控件在画布中的位置.大小.以及一些控件自带的默认信息.不用说这样的设计对于用户来说不论在操作体验上还是设计的感官上都更加直接和方便,因为我在设计阶段就可以知道我设计后的表单在系统运

基于SVG的票面设计器开发总结

今天周六,原则上要休息,但想到下周还有一堆任务,还是先做一部分工作吧,就把之前做的票面设计器改了改,增加了上传图片和更换背景底图的功能.现在打算整理下这个设计器,也算对齐一个总结.不过这属于我们部门的产品,代码我使用截图的方式多一些.首先来看一下我做的这个票面设计器的最终效果图: 从截图中可以看到在页面里,专业点叫我在画布里增加了很多的元素,这些元素都与剧院票务相关包括项目.场次.地点,二维码等信息.上面的word截图是我今天做的功能,背景图我也换成了自定义的图片.光看这个页面其实不难做,因为页

基于Qt的流程设计器(一)

一: 先来看一下界面的截图: 说明: 拖动节点的时候,与该节点相关的箭头连线也会跟着调整: 用户可以使用鼠标从一个节点拖出一个箭头到另一个节点(鼠标在空白区域点击一下,拖出的箭头消失) 这三个图标,手型图标处于选中状态的时候,节点可以拖动, 箭头图标处于选中状态的时候,可以使用鼠标绘制连线箭头 最后一个图标,用于在画布上创建一个节点方框 二: 关键代码文件如下图(用红框框住的为关键代码文件) 其他文件均为辅助代码文件(有些文件中的代码没有用到) 三: CustomView类是我们的绘图面板,这个

XForms设计器-----模型实例

在模型实例视图中进行模型管理. 模型实例的创建在"模型视图"的模型树中进行,具体参考"模型管理"中的"创建模型实例". 可以在模型实例中手动创建实例数据节点.元素.节点文本等信息. 如果配置模型实例的介质类型为json,则模型实例视图如下(增加了对json的操作): 模型实例配置 属性名称 描述 src 定义模型实例使用一个后台静态的XML文件数据作为模型实例的数据源 标识 模型实例ID,是运行时引用模型实例的唯一标识 介质类型 模型实例的数据源