点击登录界面发布文章Demo

最近参加网易微专业课程学到一个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图片

main.storyboard文件

image.png

愿编程让这个世界更美好

最后编辑于：2017.12.07 06:53:14

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 203,456评论 5赞 477
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,370评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 150,337评论 0赞 337
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,583评论 1赞 273
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,596评论 5赞 365
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,572评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,936评论 3赞 395
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,595评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,850评论 1赞 297
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,601评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,685评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,371评论 4赞 318
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,951评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,934评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,167评论 1赞 259
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 43,636评论 2赞 349
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,411评论 2赞 342

点击登录界面发布文章Demo

登录界面Gif图

代码结构图

ArticleView.xibi图片

愿编程让这个世界更美好

推荐阅读更多精彩内容