点击登录界面发布文章Demo
2017-05-16 本文已影响17人
小苗晓雪
最近参加网易微专业课程学到一个Demo,我拿到
视觉稿敲下来分享给小伙伴们学习~
登录界面Gif图
登录界面Demo
代码结构图
代码结构图
LoginViewController.m文件
#import "LoginViewController.h"
#import "MyBlogViewController.h"
@interface LoginViewController ()
//账号:
@property (weak, nonatomic) IBOutlet UIImageView *accountTextBgImageView;
@property (weak, nonatomic) IBOutlet UITextField *accountTextField;
//密码:
@property (weak, nonatomic) IBOutlet UIImageView *passwordTextBgImageView;
@property (weak, nonatomic) IBOutlet UITextField *passwordTextField;
//登录按钮:
@property (weak, nonatomic) IBOutlet UIButton *loginButton;
//提示请输入密码:
@property (weak, nonatomic) IBOutlet UIImageView *tipImageView;
@property (weak, nonatomic) IBOutlet UILabel *tipLabel;
@property (weak, nonatomic) IBOutlet UIActivityIndicatorView *lodingActivity;
@end
@implementation LoginViewController
- (void)viewDidLoad {
[super viewDidLoad];
//bg-input@2x.png图片是90X50pixels的,也就是45X25point模式 , 所以拉伸模式上下左右都各为一半即可(UIEdgeInsetsMake(12, 22, 12, 22)):
UIImage *inputImage = [self.accountTextBgImageView.image resizableImageWithCapInsets:UIEdgeInsetsMake(12, 22, 12, 22) resizingMode:UIImageResizingModeStretch];
self.accountTextBgImageView.image = inputImage;
self.passwordTextBgImageView.image = inputImage;
//button-green图片为66X66pixels也就是33X33point , 所以应该为:UIEdgeInsetsMake(16, 16, 16, 16)
UIImage *buttonBgImage = [[UIImage imageNamed:@"button-green"] resizableImageWithCapInsets:UIEdgeInsetsMake(16, 16, 16, 16) resizingMode:UIImageResizingModeStretch];
[self.loginButton setBackgroundImage:buttonBgImage forState:UIControlStateNormal];
[self.loginButton setBackgroundImage:buttonBgImage forState:UIControlStateHighlighted];
[self.loginButton setBackgroundImage:buttonBgImage forState:UIControlStateDisabled];
[self.loginButton setTitle:@"" forState:UIControlStateDisabled];
[self.loginButton addTarget:self action:@selector(loginButtonPressed) forControlEvents:UIControlEventTouchUpInside];
self.tipLabel.hidden = YES;
self.tipImageView.hidden = YES;
[self.lodingActivity stopAnimating];
}
#pragma mark - 登录按钮方法
- (void)loginButtonPressed {
NSLog(@"loginButtonPressed");
}
#pragma mark - 登录按钮方法
- (IBAction)loginButtonAction:(id)sender {
//结束事件的传递方法:
[self.view endEditing:YES];
//点击按钮一下就不让再次重复点击了!直到2秒后也就是菊花透明度动画结束之后:
self.loginButton.enabled = NO;
//菊花转起来吧:
[self.lodingActivity startAnimating];
[self.lodingActivity setAlpha:0.5f];
[UIView animateWithDuration:1.0f animations:^{
[self.lodingActivity setAlpha:1.0f];
} completion:^(BOOL finished) {
//验证结果之前隐藏菊花:
[self.lodingActivity stopAnimating];
//判断是否正确登录:
[self canLogin];
self.loginButton.enabled = YES;
}];
}
- (BOOL)canLogin {
//动画结束之后验证登录结果 , 用户名密码都正确就执行第一个判断 , 否则执行else里面的判断:
if ([_accountTextField.text isEqualToString:@"admin"] && [_passwordTextField.text isEqualToString:@"test"]) {
NSLog(@"验证成功");
// 跳转进入下一个界面:
// [self showBlogViewController];
self.tipLabel.hidden = YES;
self.tipImageView.hidden = YES;
return YES;
//跳转界面的方法交给了故事板去完成;
} else {//提示错误信息
NSString *errorTip = nil;
if (_accountTextField.text.length == 0) {
errorTip = @"请输入用户名";
} else if (_passwordTextField.text.length == 0) {
errorTip = @"请输入密码";
} else {
errorTip = @"用户名或密码输入有误";
}
_tipLabel.text = errorTip;
self.tipLabel.hidden = NO;
self.tipImageView.hidden = NO;
return NO;
}
}
#pragma mark - showBlogViewController
- (void)showBlogViewController {
//[NSBundle mainBundle] == nil ;
MyBlogViewController *blogVC = [[UIStoryboard storyboardWithName:@"Main" bundle:[NSBundle mainBundle]] instantiateViewControllerWithIdentifier:@"blogViewController"];
[self presentViewController:blogVC animated:YES completion:nil];
}
//#pragma mark - 跳转下一个视图控制器之后还需要传递一些数据的话在这里执行
//- (void)performSegueWithIdentifier:(NSString *)identifier sender:(id)sender {
// //点击按钮会直接跳转,及时testField中没有任何输入 , 这就说明故事板中的跳转比代码中的跳转优先级更高!
//}
#pragma mark - 判断当前是否可以跳转进入我们所关联的视图 - 可以在这一步中进行与button相关的验证
- (BOOL)shouldPerformSegueWithIdentifier:(NSString *)identifier sender:(id)sender {
//如果可以登陆 , 则可以跳转:
if ([self canLogin]) {
return YES;
} else {//否则禁止跳转:
[self loginButtonAction:nil];
return NO;
}
}
#pragma mark - 内存警告
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
}
@end
MyBlogViewController.m文件
#import "MyBlogViewController.h"
#import "ArticleView.h"
@interface MyBlogViewController ()
@property (weak, nonatomic) IBOutlet UIImageView *textBgImageView;
@property (weak, nonatomic) IBOutlet UITextField *textField;
@property (weak, nonatomic) IBOutlet UIButton *postButton;
@property (weak, nonatomic) IBOutlet UIView *articleContentView;
@end
@implementation MyBlogViewController
#pragma mark - lifeCycle
- (void)viewDidLoad {
[super viewDidLoad];
UIImage *inputImage = [_textBgImageView.image resizableImageWithCapInsets:UIEdgeInsetsMake(12, 12, 12, 12) resizingMode:UIImageResizingModeStretch];
_textBgImageView.image = inputImage;
UIImage *buttonBgImage = [[UIImage imageNamed:@"button-green"] resizableImageWithCapInsets:UIEdgeInsetsMake(10, 10, 10, 10) resizingMode:UIImageResizingModeStretch];
[_postButton setBackgroundImage:buttonBgImage forState:UIControlStateNormal];
}
#pragma mark - 发布按钮
- (IBAction)postButtonAction:(id)sender {
//点击"发布"按钮隐藏键盘:
[self.view endEditing:YES];
//内容为空的时候直接返回:
if (_textField.text.length == 0) {
return;
}
ArticleView *articleView = [[[UINib nibWithNibName:@"ArticleView" bundle:[NSBundle mainBundle]] instantiateWithOwner:nil options:nil] firstObject];
articleView.nameLabel.text = @"小苗晓雪";
//显示当前时间的方法:
NSDate *currentDate = [NSDate date];
//格式化日期的显示方式:
NSDateFormatter *dateFormatter = [[NSDateFormatter alloc] init];
dateFormatter.dateFormat = @"YYYY-MM-dd HH:mm:ss";
//timeString就是要展示在 dataLabel 上的字符串:
NSString *timeString = [dateFormatter stringFromDate:currentDate];
articleView.dataLabel.text = timeString;
articleView.contentLabel.text = _textField.text;
[self.articleContentView addSubview:articleView];
// [self updateLastArticleFrame1];
// [self updateLastArticleFrame2];
// [self updateLastArticleFrame3];
[self updateLastArticleConstrains];
//设置 articleView 的初始变化大小 , 从0开始放大到UIView动画里要求的样子:
articleView.transform = CGAffineTransformMakeScale(0, 0);
articleView.alpha = 0;
[UIView animateWithDuration:1.0f animations:^{
// articleView.transform = CGAffineTransformMakeScale(1, 1);
articleView.transform = CGAffineTransformIdentity;
articleView.alpha = 1.0f;
}];
}
#pragma mark - 自定义label高度5 - autoLayout自动约束布局方式
- (void)updateLastArticleConstrains {
ArticleView *articleView = self.articleContentView.subviews.lastObject;
articleView.translatesAutoresizingMaskIntoConstraints = NO;
self.articleContentView.translatesAutoresizingMaskIntoConstraints = NO;
//如果是收个cell , 上表皮就与 articleContentView 进行约束:
if (self.articleContentView.subviews.count == 1) {
NSLayoutConstraint *topConstrain = [NSLayoutConstraint constraintWithItem:articleView
attribute:NSLayoutAttributeTop
relatedBy:NSLayoutRelationEqual
toItem:self.articleContentView
attribute:NSLayoutAttributeTop
multiplier:1
constant:12];
[self.articleContentView addConstraint:topConstrain];
} else {//如果是第二个及更多地cell:
//获取当前 cell 的上一个 cell视图:
ArticleView *previousView = [self.articleContentView.subviews objectAtIndex:self.articleContentView.subviews.count - 2];
NSLayoutConstraint *topConstraint = [NSLayoutConstraint constraintWithItem:articleView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:previousView attribute:NSLayoutAttributeBottom multiplier:1 constant:12];
[self.articleContentView addConstraint:topConstraint];
}
//左侧约束:
NSLayoutConstraint *leftConstraint = [NSLayoutConstraint constraintWithItem:articleView
attribute:NSLayoutAttributeLeft
relatedBy:NSLayoutRelationEqual
toItem:self.articleContentView
attribute:NSLayoutAttributeLeft
multiplier:1
constant:0];
[self.articleContentView addConstraint:leftConstraint];
//右侧约束:
NSLayoutConstraint *rightConstraint = [NSLayoutConstraint constraintWithItem:articleView
attribute:NSLayoutAttributeRight
relatedBy:NSLayoutRelationEqual
toItem:self.articleContentView
attribute:NSLayoutAttributeRight
multiplier:1
constant:0];
[self.articleContentView addConstraint:rightConstraint];
}
#pragma mark - 自定义label高度1
- (void)updateLastArticleFrame1 {
ArticleView *articleView = self.articleContentView.subviews.lastObject;
CGFloat otherHeight = 39;
CGFloat offsetY = 0;
if (self.articleContentView.subviews.count == 1) {
offsetY = 12.0f;
} else {
NSArray *articleViewArray = self.articleContentView.subviews;
UIView *preView = articleViewArray[articleViewArray.count - 2];
// offsetY = preView.frame.origin.y + preView.frame.size.height + 12;
offsetY = CGRectGetMaxY(preView.frame) + 12;
}
CGFloat contentHeight = [articleView.contentLabel sizeThatFits:CGSizeMake(CGRectGetWidth(_articleContentView.bounds) - 46.0f, CGFLOAT_MAX)].height;
CGRect cellFrame = CGRectMake(0, offsetY, CGRectGetWidth(_articleContentView.bounds), otherHeight + contentHeight);
articleView.frame = cellFrame;
}
#pragma mark - 自定义label高度2
- (void)updateLastArticleFrame2 {
ArticleView *view = [_articleContentView.subviews lastObject];
CGFloat otherHeight = 39;
CGFloat offsetY = 0;
if (_articleContentView.subviews.count == 1) {
offsetY = 12.0f;
} else {
//拿到所有子视图:
NSArray *subArray = self.articleContentView.subviews;
//拿到上一个刚刚创建过的那个子视图的index值:
UIView *previousView = subArray[subArray.count - 2];
offsetY = CGRectGetMaxY(previousView.frame) + 12.0f;
}
CGFloat contentLabelHeight = CGRectGetHeight([view.contentLabel.text boundingRectWithSize:CGSizeMake(CGRectGetWidth(self.articleContentView.bounds), CGFLOAT_MAX) options:NSStringDrawingUsesLineFragmentOrigin attributes:@{NSFontAttributeName:view.contentLabel.font} context:nil]);
CGRect frame = CGRectMake(0, offsetY, CGRectGetWidth(self.articleContentView.bounds), contentLabelHeight + otherHeight);
//重新�赋值frame:
view.frame = frame;
}
#pragma mark - 自定义label高度3
- (void)updateLastArticleFrame3 {
ArticleView *articleView = [self.articleContentView.subviews lastObject];
CGFloat otherHeight = 39.0f;
CGFloat commonOffsetY = 12.0f;
CGFloat offsetY = 0;
if (self.articleContentView.subviews.count == 1) {
//cell与cell之间的间距为12.0f:
offsetY = commonOffsetY;
} else {
NSArray *subArray = self.articleContentView.subviews;
UIView *previousView = subArray[subArray.count - 2];
offsetY = CGRectGetMaxY(previousView.frame) + commonOffsetY;
}
articleView.contentLabel.preferredMaxLayoutWidth = CGRectGetWidth(self.articleContentView.bounds) - 46.0f;
//setup the contentLabel's height:
CGFloat contentLabelHeight = [articleView.contentLabel systemLayoutSizeFittingSize:UILayoutFittingCompressedSize].height;
CGRect frame = CGRectMake(0, offsetY, CGRectGetWidth(self.articleContentView.bounds), otherHeight + contentLabelHeight);
articleView.frame = frame;
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
}
@end
ArticleView.h文件
链接 XIB 文件
#import <UIKit/UIKit.h>
@interface ArticleView : UIView
@property (weak, nonatomic) IBOutlet UILabel *nameLabel;
@property (weak, nonatomic) IBOutlet UILabel *dataLabel;
@property (weak, nonatomic) IBOutlet UILabel *contentLabel;
@end
ArticleView.xibi图片
ArticleView.xibi图片
main.storyboard文件
image.png
