本篇体验做一个简单圆角文本框,做到3个效果:

1、初始状态,圆角文本框有淡淡的背景色,边框的颜色为浅灰色
2、点击圆角文本框,让其获取焦点,边框变成蓝色,背景色变成白色
3、圆角文本框失去焦点,边框变成红色,背景色变成白色

从组成上分析,圆角文本框实际是由里层的Text Field和外层的Rectangle组成。

对于第一个状态,给Rectangle设置背景色和边框色,并且让Text Field失去边框,并让其隐藏起来。

对于第二个状态,是由Rectangle的的点击事件触发,显示Text Field,并让焦点进入其中。圆角文本框蓝色的边框和白色的背景如何实现呢?可以借助在Rectangle交互样式的Disabled实现。

对于第三种状态,是由Text Field的失去焦点事件触发。圆角文本框红色的边框和白色背景如何实现呢?可以借助Rectangle交互样式的Selected实现。

接下来是具体实现。

让Text Field嵌套于Rectangle, 通过Rectangle的变形让其变成圆角框,通过尺寸的设置、两者的水平和垂直居中,让它们看上去是一个整体,是一个圆角框。再把Text Field的边框颜色去掉,让其隐藏。设置Rectangle的边框和背景色,使其符合第一种状态。

圆角文本框的第二种状态和Rectangle的交互样式Disabled有关,按如下设置:

以上,Rectangle的交互样式Disabled中,把背景色设置成白色,边框设置成蓝色,这里是为第二种状态准备的。

圆角文本框的第三种状态和Rectangle的交互样式Selected有关,按如下设置:

以上,Rectangle的交互样式Selected中,把背景色设置成白色,边框设置成红色,这里是为第三种状态准备的。

当我们点击圆角文本框,实际是触发Rectangle的点击事件,设置如下:

以上,当点击Rectangle,就先禁用Rectangle(符合Disabled状态,即圆角文本框蓝色的边框和白色的背景),显示Text Field, 并设置Text Field的焦点触发其事件,由于点击Rectangle的时候让Rectangle的Selected状态会出来,但这时候还不需要这种状态出来,就先通过Text Field获取焦点事件禁用Selected状态。

当圆角文本框失去焦点,实际是触发Text Field的失去焦点事件,设置如下:

以上,首先是启用Rectangle,然后设置Selected状态。

总结,圆角文本框实际上是Rectangle和Text Field之间的游戏:

→给Rectangle设置Disabled和Selected两种交互样式
→先让Text Field隐藏
→点击Rectangle,让Rectangle处于Disabled状态,并显示Text Field让其获得焦点
→Text Field获得焦点,让Rectangle的Selected失效,并让Rectangle处于Disabled状态
→Text Field失去焦点,启用Rectangle,并设置Rectangle的Selected状态

参考资料:http://www.iaxure.com/

使用Axure RP原型设计实践08,制作圆角文本框的更多相关文章

  1. 使用Axure RP原型设计实践03,制作一个登录界面的原型

    本篇体验做一个登录界面的原型. 登录页 首先在Page Style里为页面设置背景色. 如果想在页面中加图片,就把Image部件拖入页面,并设置x和y轴.双击页面中的Image部件可以导入图片.在Im ...

  2. 使用Axure RP原型设计实践07,注册判断

    本篇实现注册页的一些功能.本项目是通过用户名和电子邮件进行注册的. 在本篇之前,在"使用Axure RP原型设计实践03,制作一个登录界面的原型"中已经对注册页做了基本的处理. 打 ...

  3. 使用Axure RP原型设计实践06,登录验证

    登录验证主要功能包括: ● 用户名错误,提示无效用户名,用户名和密码文本框清空● 用户名存在,密码错误,提示密码错误,密码清空,焦点进入密码框● 用户名和密码都正确,验证通过 本篇接着"使用 ...

  4. 使用Axure RP原型设计实践01,使用概述

    首先认识Axure RP Pro 7.0软件的默认界面布局.最上面的是工具栏区域,左侧上方的是网站地图区域(sitemap),左侧中部的是部件区域(Widgets),左侧下方的是模板区域(Master ...

  5. 使用Axure RP原型设计实践02,自定义部件以及熟悉与部件相关面板

    本篇体验在Axure中自定义部件,并熟悉Widget Interations and Notes面板,Widget Properties and Style面板,Widget Manager面板. 在 ...

  6. 使用Axure RP原型设计实践05,了解公式

    本篇体验公式的使用,一般出现值的时候就可以使用公式,公式可以使用全局变量也可以使用局部变量,在Axure中使用公司有一定的语法. 先创建2个全局变量. 向页面中拖入Rectangle部件,给它的OnC ...

  7. 使用Axure RP原型设计实践04,了解全局变量

    变量是一个可以变的数,可以看作是一个数据的容器.变量有2个操作,一个是读,一个是写.Axure的全局变量是指任何时候都可以对这个变量进行读写操作. 点击工具栏Project下的Global Varia ...

  8. 学习Axure RP原型设计

    1 概述 原型设计是应用开发设计的第一要素.好的原型设计不仅可以起到沟通的作用,而且对客户而言应用程序拥有更直观的体现.原型设计通过内容和结构展示以及界面布局编排,实现在开发前期用户与产品进行交互.提 ...

  9. WPF里面制作圆角文本框

    转自:http://www.cnblogs.com/mengxin523/archive/2010/04/04/1704448.html 本以为WPF里面的XAML会很强大,可以设置很多属性,比如文本 ...

随机推荐

  1. CentOS安装SVN客户端

    1.检查系统是否已经安装如果安装就卸载 rpm -qa subversion yum remove subversion 2.安装 yum install subversion 3.建立SVN库 mk ...

  2. docker 构建带健康检查的redis镜像

    =============================================== 2018/11/5_第1次修改                       ccb_warlock == ...

  3. 一个查看Access数据库密码的工具

    一个可以查看Access数据库密码的工具AccessCracker.需要.net2.0环境支持. 网盘地址:https://pan.baidu.com/s/1btbsFcsKO0Enj-rjkTlz6 ...

  4. javascript之继承

    主要是参考了<JavaScript高级程序设计(第三版)>这本书,根据自己的理解,做了下面的记录 继承是面向对象(OO)语言里面的概念,有俩种继承方式:接口继承和实现继承.接口继承只继承方 ...

  5. ubuntu eclipse 找不到jre文件

    一. 把jdk下的jre文件copy到eclipse安装目录 二. 打开eclipse 重新设计library和工作空间

  6. Java Map 接口

    Map接口中键和值一一映射. 可以通过键来获取值. 给定一个键和一个值,你可以将该值存储在一个Map对象. 之后,你可以通过键来访问对应的值. 当访问的值不存在的时候,方法就会抛出一个NoSuchEl ...

  7. Using MongoDB in C#

    In order to use MongoDB in C#, you can import MongoDB C# Driver to your project. It's best to create ...

  8. Vue.Js的用户体验优化

    一次基于Vue.Js的用户体验优化   一.写在前面 半年以前,第一次在项目上实践VueJs,由于在那之前,没有Angular,avalon等框架的实践经验,所以在Vue的使用上,没有给自己总结出更多 ...

  9. CSS3利用背景渐变和background-size配合完成渐变与条纹效果[持续更新中...]

    1.不等垂直条纹. <!-- 不等垂直条纹 --> <div class="div1"></div>div1 div{ width: 200px ...

  10. Cause: java.sql.SQLException: Could not retrieve transation read-only status server

    背景 最近在部署一套完整的项目,部署过程中遇到很多的问题,在来总结一些如标题的这个错误! 环境说明: 使用分布式数据库,使用的是mysql! ### Cause: java.sql.SQLExcept ...