点击登录界面发布文章Demo

作者: 小苗晓雪 | 来源:发表于2017-05-16 21:29 被阅读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图片

main.storyboard文件

image.png

点击登录界面发布文章Demo

登录界面Gif图

代码结构图

ArticleView.xibi图片

愿编程让这个世界更美好

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读