用Flex模拟智能手机表单输入的自动放大功能

简介: 用iphone或itouch登录过微薄的同学们想必都会发现:登录一些手机版网站(比如微薄时),表单中的输入框会自动放大,以方便用户输入,等输入完成后,页面会再次缩小到正常状态。 在flex开发过程中,有时也会遇到一些输入项很多的表单,可以借鉴iphone上的这种体验,基本思路就是:将整个容器放大,以适应屏幕,然后将获得焦点的文本框定位到屏幕中央。
用iphone或itouch登录过微薄的同学们想必都会发现:登录一些手机版网站(比如微薄时),表单中的输入框会自动放大,以方便用户输入,等输入完成后,页面会再次缩小到正常状态。
在flex开发过程中,有时也会遇到一些输入项很多的表单,可以借鉴iphone上的这种体验,基本思路就是:将整个容器放大,以适应屏幕,然后将获得焦点的文本框定位到屏幕中央。
下面是演示:
当UserName与PassWord文本框获得焦点时,表单(其实就是panel)会自动放大,并重新定位,最终将获得焦点的文本框定位在屏幕中央,以方便输入。点击checkbox或login按钮时,会恢复正常大小。
主要代码:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" applicationComplete="windowedapplication1_applicationCompleteHandler(event)" width="640" height="480" >
	<fx:Script>
		<![CDATA[
			import gs.TweenLite;			
			import mx.events.FlexEvent;						
			
			private var SW:Number;//舞台的宽度
			private var SH:Number;//舞台的高度
			private var WH:Number;//panel的高度
			private var WW:Number;//panel的宽度
			
			protected function windowedapplication1_applicationCompleteHandler(event:FlexEvent):void
			{				
				SW = stage.stageWidth;
				SH = stage.stageHeight;
				WW = loginWin.width;
				WH = loginWin.height;				
				initPosAnsScale();				
			}			
			
			private function initPosAnsScale():void
			{				
				TweenLite.to(loginWin,0.2,{x:0.5*(SW - WW),y:0.5*(SH - WH),scaleX:1,scaleY:1});
			}
			
			protected override function focusInHandler(e:FocusEvent):void
			{					
				var radioX:Number = SW/WW;
				var radioY:Number = SH/WH;				
				var radio:Number = Math.min(radioX,radioY);						
				//注:e.target得到的对象类似于:
				//HelloWorld0.WindowedApplicationSkin2.Group3.contentGroup.loginWin.
				//PanelSkin8._PanelSkin_Group1.contents.contentGroup.
				//txtName.TextInputSkin21.textDisplay
				trace(e.target);
				//所以这里要连用3次parent才能得到正确的文件框(txtName)对象
				var current:DisplayObject = e.target.parent.parent as DisplayObject;
				
				//当前焦点对应文本框在舞台上的实际位置
				var _nX:Number = current.x * radio + loginWin.x;
				var _nY:Number = current.y * radio + loginWin.y + loginWin.titleDisplay.height*radio;				
				
				//当前焦点对应的文本框中心点的实际位置
				var _cX:Number = _nX + 0.5*e.target.width*radio;
				var _cY:Number = _nY + 0.5*e.target.height*radio;
				
				//计算要移动的距离
				var _dx:Number = _cX - 0.5*SW;
				var _dy:Number = _cY - 0.5*SH;
				
				//缩放+移动
				var desX:Number = loginWin.x - _dx;
				var desY:Number = loginWin.y - _dy;
				TweenLite.to(loginWin,0.2,{scaleX:radio,scaleY:radio,x:desX,y:desY});
				
			}
			
			protected override function focusOutHandler(e:FocusEvent):void
			{
				initPosAnsScale();				
			}
			
		]]>
	</fx:Script>
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<s:Panel title="Please Login" id="loginWin" dropShadowVisible="false" width="330" x="139" height="219" y="94">
		<s:layout>
			<s:BasicLayout/>
		</s:layout>
		<s:Label x="129" y="10" text="UserName"/>
		<s:TextInput x="96" y="30" id="txtName" focusIn="focusInHandler(event)" focusOut="focusOutHandler(event)"/>
		<s:Label x="131.5" y="65" text="Password"/>
		<s:TextInput x="96" y="85" id="txtPwd" displayAsPassword="true" focusIn="focusInHandler(event)" focusOut="focusOutHandler(event)"/>
		<s:Button x="125" y="148" label="login"/>
		<s:CheckBox x="113" y="118" label="Remember me" click="focusOutHandler(null)"/>
	</s:Panel>
</s:Application>
目录
相关文章
|
1月前
|
Java
【Java每日一题】— —第二十一题:编程把现实生活的手机事物映射成一个标准类Phone,并定义一个测试类PhoneDemo测试Phone类的功能
【Java每日一题】— —第二十一题:编程把现实生活的手机事物映射成一个标准类Phone,并定义一个测试类PhoneDemo测试Phone类的功能
36 0
|
1月前
|
安全 Java 数据库连接
【Java每日一题】——第四十四题:综合案例:编程模拟智能手机和普通手机功能。
【Java每日一题】——第四十四题:综合案例:编程模拟智能手机和普通手机功能。
56 0
|
1月前
|
数据挖掘 数据处理 API
使用TransBigData组件实现个人手机定位功能
使用TransBigData组件实现个人手机定位功能
21 0
|
2月前
|
Android开发
用Airtest快速实现手机文件读写与删除功能
用Airtest快速实现手机文件读写与删除功能
|
8月前
|
安全 Java 数据库
SpringSecurity-9-实现通过手机短信进行认证功能
SpringSecurity-9-实现通过手机短信进行认证功能
88 1
|
3月前
|
移动开发 JavaScript 前端开发
vue实现调用手机拍照、录像功能
vue实现调用手机拍照、录像功能
154 0
|
3月前
|
JavaScript 前端开发 iOS开发
移动端(vue)如何调用手机拨号功能
移动端(vue)如何调用手机拨号功能
|
4月前
|
传感器 物联网 Android开发
【Android App】物联网中查看手机支持的传感器及实现摇一摇功能-加速度传感器(附源码和演示 超详细)
【Android App】物联网中查看手机支持的传感器及实现摇一摇功能-加速度传感器(附源码和演示 超详细)
67 1
|
4月前
|
XML Java 定位技术
【Android App】定位导航GPS中开启手机定位功能讲解及实战(附源码和演示 超详细)
【Android App】定位导航GPS中开启手机定位功能讲解及实战(附源码和演示 超详细)
117 0
|
4月前
|
XML 安全 Java
Android Studio App开发之广播组件Broadcast的讲解及实战(包括收发标准、有序、静态广播实现手机震动功能 附源码)
Android Studio App开发之广播组件Broadcast的讲解及实战(包括收发标准、有序、静态广播实现手机震动功能 附源码)
42 0

热门文章

最新文章