本例用UIView动画实现在编辑表单内容的时候表单上移一段距离的动画效果,以防止表单内容被弹出的输入键盘遮挡住。我们用Interface Builder来帮助我们布局,大体的页面结构是:根视图上丢一个UIImageView作为背景;丢一个UIView作为表单的载体,然后在在这个UIView上添加UITextField、UIButton等控件。然后在我们的主控制器中编写实现代码:
ViewController.h
#import <UIKit/UIKit.h>
@interface ViewController : UIViewController <UITextViewDelegate>
{
CGPoint formViewCenter; // 记录formView的起始位置
BOOL ifFormUp; // 表单是否已经上移
}
@property (nonatomic,retain) IBOutlet UIView *formView;
@property (nonatomic,retain) IBOutlet UITextField *usernametf;
@property (nonatomic,retain) IBOutlet UITextField *passwordtf;
- (IBAction)backgroundBtnClicked:(id)sender;
- (IBAction)registerBtnClicked:(id)sender;
- (IBAction)loginBtnClicked:(id)sender;
-(void)formUp; // 表单上移动画
-(void)formDown; // 表单下移动画
@end
ViewController.m
#import "ViewController.h"
@implementation ViewController
@synthesize formView,usernametf,passwordtf;
#pragma mark - view life cycle
- (void)viewDidLoad
{
[super viewDidLoad];
formView.backgroundColor = [UIColor clearColor];
formViewCenter = formView.center;
}
- (void)didReceiveMemoryWarning
{
[super didReceiveMemoryWarning];
self.formView = nil;
self.usernametf = nil;
self.passwordtf = nil;
}
- (void)dealloc
{
self.formView = nil;
self.usernametf = nil;
self.passwordtf = nil;
[super dealloc];
}
#pragma mark - button actions
- (IBAction)backgroundBtnClicked:(id)sender
{
NSLog(@"Clicking_backgroundBtn");
if (ifFormUp) {
[usernametf resignFirstResponder];
[passwordtf resignFirstResponder];
[self formDown];
}
}
- (IBAction)registerBtnClicked:(id)sender
{
}
- (IBAction)loginBtnClicked:(id)sender
{
}
#pragma mark - form actions
// 表单上移
-(void)formUp
{
if(!ifFormUp)
{
ifFormUp = YES;
[UIView animateWithDuration:0.3 animations:^(void){
CGPoint newCenter = formViewCenter;
newCenter.y = 180.0f;
formView.center = newCenter;
}];
}
}
// 表单下移
-(void)formDown
{
if(ifFormUp)
{
ifFormUp = NO;
[UIView animateWithDuration:0.3 animations:^(void){
formView.center = formViewCenter;
}];
}
}
#pragma mark - UITextViewDelegate
-(void)textFieldDidBeginEditing:(UITextField *)textField
{
if (!ifFormUp) {
[self formUp];
[textField becomeFirstResponder];
}
}
-(BOOL)textFieldShouldReturn:(UITextField *)textField
{
[textField resignFirstResponder];
[self formDown];
return YES;
}
@end
最终实现的效果如下:
源码下载:源码
分享到:
相关推荐
使用angularjs实现浮动表单效果
FloatLabel.js, 用于浮动表单标签的jQuery插件 FloatLabel.js用于浮动表单标签的jQuery插件。基于 Matt的UI概念。 史密斯 。FloatLabel.js 演示插件。用法将 jquery.FloatLabel.css 添加到你的网站样式表和 jquery.
这是一款非常简洁的浮动标签提交表单用户界面设计效果。这个浮动标签效果包括输入框浮动标签,下拉列表浮动标签和文本域浮动标签。该浮动标签表单简洁大方,是设计表单不错的选择。
jQuery表单浮动文字标签代码是一款分为标签上浮动,标签右浮动和标签下浮动等多种设计效果。
实现了12种非常炫酷的表单浮动标签特效,有兴趣的朋友们可以前来下载使用。
jQuery浮动表单标签jQuery插件,用于在选中或填写时将输入占位符转换为浮动表单标签。安装包括和jquery.floatingFormLabel.js脚本:< script src =" ...
使用angularjs实现浮动表单效果
这是一款简单实用的jQuery表单浮动标签插件。通过该jquery插件。可以在表单输入框聚焦的时候,将提示占位文本以动画的方式浮动到文本框的左上角去,效果非常炫酷。
HTML5 SVG表单浮动标签特效是一款效果非常炫酷的HTML5 SVG和CSS3表单浮动标签特效。
这是一款通过自定义样式和jQuery来将Bootstrap的表单修改为扁平风格的表单,并带有浮动标签特效。
这是一款基于Bootstrap4表单浮动标签插件。该插件使用 Material Design 设计风格,可以为bootstrap表单实现占位标签的动画效果。
jQuery表单输入框浮动标签特效是一款可以非常轻松的为表单input元素添加浮动标签动画效果。
这是一款炫酷的jQuery和CSS3表单浮动标签特效。浮动标签是指输入框中的文字或占位文本在输入框聚焦的时候,以动画的方式浮动到指定的地方。浮动标签特效是一种新颖时尚的动画特效。
简单实用的jQuery表单输入框浮动标签动画特效插件
bootstrap-float-label是一款可以基于Bootstrap制作炫酷浮动标签效果的纯CSS扩展。该CSS代码可以在bootstrap 3或4中实现浮动标签效果。
js 特效 html 特效 随意移动的表格 js 特效 html 特效 随意移动的表格
jQuery表单输入框浮动标签特效是一款可以非常轻松的为表单input元素添加浮动标签动画效果。
Bootstrap扁平带浮动标签表单是一款通过自定义样式和jQuery来将Bootstrap的表单修改为扁平风格的表单,并带有浮动标签特效。
动标签表单是一款通过自定义样式和jQuery来将Bap的