點(diǎn)擊登錄界面發(fā)布文章Demo

最近參加網(wǎng)易微專業(yè)課程學(xué)到一個Demo,我拿到視覺稿敲下來分享給小伙伴們學(xué)習(xí)~

登錄界面Gif圖

登錄界面Demo

代碼結(jié)構(gòu)圖

代碼結(jié)構(gòu)圖

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 , 所以應(yīng)該為: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 {
    //結(jié)束事件的傳遞方法:
    [self.view endEditing:YES];
    //點(diǎn)擊按鈕一下就不讓再次重復(fù)點(diǎn)擊了!直到2秒后也就是菊花透明度動畫結(jié)束之后:
    self.loginButton.enabled = NO;
    //菊花轉(zhuǎn)起來吧:
    [self.lodingActivity startAnimating];
    [self.lodingActivity setAlpha:0.5f];
    [UIView animateWithDuration:1.0f animations:^{
        [self.lodingActivity setAlpha:1.0f];
    } completion:^(BOOL finished) {
        //驗(yàn)證結(jié)果之前隱藏菊花:
        [self.lodingActivity stopAnimating];
        //判斷是否正確登錄:
        [self canLogin];
        self.loginButton.enabled = YES;
    }];
}


- (BOOL)canLogin {
    //動畫結(jié)束之后驗(yàn)證登錄結(jié)果 , 用戶名密碼都正確就執(zhí)行第一個判斷 , 否則執(zhí)行else里面的判斷:
    if ([_accountTextField.text isEqualToString:@"admin"] && [_passwordTextField.text isEqualToString:@"test"]) {
        NSLog(@"驗(yàn)證成功");
//        跳轉(zhuǎn)進(jìn)入下一個界面:
//        [self showBlogViewController];
        self.tipLabel.hidden = YES;
        self.tipImageView.hidden = YES;
        return YES;
        //跳轉(zhuǎn)界面的方法交給了故事板去完成;
    } 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 - 跳轉(zhuǎn)下一個視圖控制器之后還需要傳遞一些數(shù)據(jù)的話在這里執(zhí)行
//- (void)performSegueWithIdentifier:(NSString *)identifier sender:(id)sender {
//    //點(diǎn)擊按鈕會直接跳轉(zhuǎn),及時testField中沒有任何輸入 , 這就說明故事板中的跳轉(zhuǎn)比代碼中的跳轉(zhuǎn)優(yōu)先級更高!
//}


#pragma mark - 判斷當(dāng)前是否可以跳轉(zhuǎn)進(jìn)入我們所關(guān)聯(lián)的視圖 - 可以在這一步中進(jìn)行與button相關(guān)的驗(yàn)證
- (BOOL)shouldPerformSegueWithIdentifier:(NSString *)identifier sender:(id)sender {
    //如果可以登陸 , 則可以跳轉(zhuǎn):
    if ([self canLogin]) {
        return YES;
    } else {//否則禁止跳轉(zhuǎn):
        [self loginButtonAction:nil];
        return NO;
    }

}


#pragma mark - 內(nèi)存警告
- (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 - 發(fā)布按鈕
- (IBAction)postButtonAction:(id)sender {
    //點(diǎn)擊"發(fā)布"按鈕隱藏鍵盤:
    [self.view endEditing:YES];
    //內(nèi)容為空的時候直接返回:
    if (_textField.text.length == 0) {
        return;
    }
    ArticleView *articleView = [[[UINib nibWithNibName:@"ArticleView" bundle:[NSBundle mainBundle]] instantiateWithOwner:nil options:nil] firstObject];
    articleView.nameLabel.text = @"小苗曉雪";
    //顯示當(dāng)前時間的方法:
    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];
    //設(shè)置 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 進(jìn)行約束:
    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:
        //獲取當(dāng)前 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];
    }
    //左側(cè)約束:
    NSLayoutConstraint *leftConstraint = [NSLayoutConstraint constraintWithItem:articleView
                                                                      attribute:NSLayoutAttributeLeft
                                                                      relatedBy:NSLayoutRelationEqual
                                                                         toItem:self.articleContentView
                                                                      attribute:NSLayoutAttributeLeft
                                                                     multiplier:1
                                                                       constant:0];
    [self.articleContentView addConstraint:leftConstraint];
    //右側(cè)約束:
    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;
        //拿到上一個剛剛創(chuàng)建過的那個子視圖的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

愿編程讓這個世界更美好

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 15,376評論 4贊 61
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,062評論 25贊 709
  • 文/余金秋 不必為讀書日慶賀 世界讀書日又來了，有人慶幸，有人心慌了，有人麻木與己無關(guān)。讀書日不是個節(jié)，小時候常盼...
    jinqiuim閱讀 396評論 6贊 4
  • 最美好的日子是你在電話那頭笑 ，我在電話這頭喊你名字。
    香菜五仁粽閱讀 158評論 0贊 0
  • 讓我難以忘記的，不止那晚的南瓜粥； 讓我感到痛惜的，不止你眼神里的愧疚。 余路我們不能一起走，可你卻緊緊抓著我不放...
    水潤兒閱讀 532評論 2贊 1

友情鏈接更多精彩內(nèi)容