百思不得姐之立即登錄注冊模塊(五)


一 功能圖和實現思路

具體功能圖:

這里寫圖片描述

實現思路:

—-> 1 關注控制器模塊搭建(xib)
—-> 2 登錄和注冊界面的總體模塊數量(三個模塊),可以用三個view來裝各自的子控件
—-> 2.2 先做上面的view—>中間的view—>底部的view(順序自定)
—-> 2.3 創建兩個xib,用同一個類來管理兩個xib
—-> 2.4 將中間的view的寬度改為屏幕的兩倍
—-> 2.5 用拖線的方式修改約束,達到app的整體效果

二 關注控制器模塊搭建

1 由整體的app效果圖可以看出,直接采用xib的方式來布局

—-> 1.1 具體創建的文件

這里寫圖片描述

—-> 1.2 xib中在控制器中所有的子控件都處於控制器的中心

這里寫圖片描述

2 關注控制器的業務邏輯

—-> 2.1 通過拖線的方式,監聽立即登錄按鈕的點擊
—-> 2.2 點擊完后登錄和注冊的控制器出現的方式是modal出來的
—-> 2.3 具體代碼
- (IBAction)loginRegister
{
//創建控制器
XFJLoginRegisterViewController *loginRegisterVC = [[XFJLoginRegisterViewController alloc] init];
loginRegisterVC.view.backgroundColor = [UIColor redColor];

[self presentViewController:loginRegisterVC animated:YES completion:nil];
}

三 退出和注冊(登錄)

1 創建xib來加載登錄和注冊部分

2 創建一個登錄和注冊控制器來管理邏輯部分

文件圖片:

這里寫圖片描述

3 頂部兩個按鈕的設置

—-> 3.1 思路: 通過頂部控制器中添加一個view的方式來裝”x”和”注冊賬號”兩個按鈕,在xib中設置個子控件的狀態

這里寫圖片描述

—-> 3.2 “x”的業務邏輯,通過連線的方式,實現對modal出來的控制器返回

代碼部分:

- (IBAction)backBtnClick
{
[self dismissViewControllerAnimated:YES completion:nil];
}
—-> 3.3 由於注冊賬號和已有賬號也有業務邏輯,這里我們放到后面講

四 注冊與登錄

1 創建文件

這里寫圖片描述

2 在xib中約束好子控件的位置,然后在該類里面創建一個同樣大小的xib,將登錄模塊中的”忘記密碼”去掉,用同一個類來管理兩個xib

—-> 2.1 提供兩個快速加載xib的類方法

代碼:

/**
* 快速加載xib
*
* @return 返回一個登錄的xib
*/

+ (instancetype)loginView;
/**
* 快速加載xib
*
* @return 返回一個注冊的xib
*/

+ (instancetype)registerView;

實現:

#pragma mark - 提供快速加載xib的類方法
#pragma mark - login(登錄)
+ (instancetype)loginView
{
return [[[NSBundle mainBundle] loadNibNamed:@"XFJloginRegisterView" owner:nil options:nil] firstObject];
}
#pragma mark - registerView(注冊)
+ (instancetype)registerView
{
return [[[NSBundle mainBundle] loadNibNamed:@"XFJloginRegisterView" owner:nil options:nil] lastObject];
}
—-> 2.2 對登錄和注冊兩個按鈕的背景圖片的拉伸做處理
#pragma mark - 設置圖片為未被拉伸的樣式
- (void)awakeFromNib
{
//不要調用super
// [super awakeFromNib];

//獲取到當前按鈕的背景圖片
UIImage *image = self.loginRegisterView.currentBackgroundImage;
//設置拉伸的范圍
image = [image stretchableImageWithLeftCapWidth:image.size.width * 0.5 topCapHeight:image.size.height * 0.5];
//將拉伸的圖片賦值回去
[self.loginRegisterView setBackgroundImage:image forState:UIControlStateNormal];
//獲取當前按鈕的背景圖片
UIImage *image1 = self.loginBtnClick.currentBackgroundImage;

//設置拉伸范圍
image1 = [image1 stretchableImageWithLeftCapWidth:image1.size.width * 0.5 topCapHeight:image1.size.height * 0.5];
//將拉伸的圖片賦值回去
[self.loginBtnClick setBackgroundImage:image1 forState:UIControlStateNormal];
}

五 快速登錄模塊

1 需要創建的文件

這里寫圖片描述

2 布局好的xib顯示圖

這里寫圖片描述

3 加載xib(我這里也提供一個快速加載的類方法)

+ (instancetype)fastBtnClick
{
return [[[NSBundle mainBundle] loadNibNamed:@"XFJFaseView" owner:nil options:nil] firstObject];
}

六 簡單業務邏輯

1 將各個模塊分別加入到對應的裝xib的view中

#pragma mark - 添加中間的view
- (void)setUpMiddleView
{
//創建登錄對象
XFJloginRegisterView *loginView = [XFJloginRegisterView loginView];
//加入到view中
[self.middleView addSubview:loginView];

//創建注冊對象
XFJloginRegisterView *registerView = [XFJloginRegisterView registerView];
//加入到view中
[self.middleView addSubview:registerView];

//創建快速登錄對象
XFJFaseView *fast = [XFJFaseView fastBtnClick];
//加入到view中
[self.fastView addSubview:fast];
}

2 點擊注冊賬號和已有賬號能快速切換到對應的模塊的原理:通過創建一個兩倍於屏幕寬度的view來裝登錄和注冊模塊,讓后將注冊模塊的x改為一個屏幕的寬度,通過拿到約束來控制對模塊的切換.

各個模塊尺寸的代碼部分:

#pragma mark - 設置登錄和注冊的尺寸
- (void)viewDidLayoutSubviews
{
//從middleView中取出第0個view---->登錄
XFJloginRegisterView *loginView = self.middleView.subviews[0];
//設置尺寸
loginView.frame = CGRectMake(0, 0, self.middleView.XFJ_Width * 0.5, self.middleView.XFJ_Height);

//從midleView中取出第1個view--->注冊
XFJloginRegisterView *registerView = self.middleView.subviews[1];
//設置尺寸
registerView.frame = CGRectMake(self.middleView.XFJ_Width * 0.5, 0, self.middleView.XFJ_Width * 0.5, self.middleView.XFJ_Height);

//從fastView中取出第0個view---->快速登錄
XFJFaseView *fastView = self.fastView.subviews[0];
//設置尺寸
fastView.frame = self.fastView.bounds;
}

3 對注冊賬號和已有賬號的監聽(通過拖線)

—-> 代碼部分一:(“x”按鈕)
- (IBAction)backBtnClick
{
[self dismissViewControllerAnimated:YES completion:nil];
}
—-> 代碼部分二:(注冊賬號和已有賬號)—->通過一個三目運算符來對約束的控制
- (IBAction)registerBtnClick:(UIButton *)button
{
//點擊后按鈕狀態
button.selected = !button.selected;

//修改寬度的約束
self.widConstraint.constant = self.widConstraint.constant == 0 ? -XFJ_screenW : 0;
//動畫效果
[UIView animateWithDuration:0.25 animations:^{
[self.view layoutIfNeeded];
}];
}

七 快速登錄模塊

1 問題一: 啟動app的時候,快速登錄模塊中的按鈕和文字擺放有問題,我們發現這種情況完全不滿足需求.

不滿足需求的快速登錄的圖片:

這里寫圖片描述

2 解決:自定義按鈕;重寫布局子控件的方法

代碼部分:
#pragma mark - 重寫按鈕中的布局方法
- (void)layoutSubviews
{
[super layoutSubviews];
//修改按鈕中圖片的位置
self.imageView.XFJ_centerX = self.XFJ_Width * 0.5;
self.imageView.XFJ_Y = 0;

//文字自適應
[self.titleLabel sizeToFit];
//修改標題的位置
self.titleLabel.XFJ_centerX = self.XFJ_Width * 0.5;
self.titleLabel.XFJ_Y = self.XFJ_Height - self.titleLabel.XFJ_Height;
}

3 問題二:文字顯示不出來(bug)

—-> 3.1 原因:label尺寸不夠–> label跟文字一樣

4 解決:自適應;讓label的寬度和按鈕的寬度一樣

八 細節處理

1 問題:

1> 文本框的光標變成白色
2> 讓占位文字顏色變成白色

2 處理方式:自定義文本

1> 創建的文件

這里寫圖片描述

3 監聽文本—–> 在加載xib的方法中監聽文本的改變

—-> 3.1 監聽方式:addTarget
—-> 3.2 不用代理監聽的原因:自己監聽自己的改變,沒有意義

代碼部分:(注意代碼書寫的位置,是寫在加載xib的方法中)

//監聽文本開始編輯
[self addTarget:self action:@selector(textChange) forControlEvents:UIControlEventEditingDidBegin];
//監聽文本結束
[self addTarget:self action:@selector(textEnd) forControlEvents:UIControlEventEditingDidEnd];

​4 處理編輯文本的光標

代碼:

self.tintColor = [UIColor whiteColor];

5 處理占位文字的顏色(三種方法)

—-> 5.1 用副文本(第一種:不推薦;代碼量較多)

讓文本的占位顏色在未開始編輯之前就有對應的顏色:(代碼)

//讓文本一開始就是這種顏色(第一種方法)
NSMutableDictionary *dict = [NSMutableDictionary dictionary];
dict[NSForegroundColorAttributeName] = [UIColor lightGrayColor];
self.attributedPlaceholder = [[NSAttributedString alloc] initWithString:self.placeholder attributes:dict];

開始改變的時候代碼:

//創建可變字典,用來描述文字顏色(第一種)
NSMutableDictionary *dict = [NSMutableDictionary dictionary];
//用字典包裝文字顏色
dict[NSForegroundColorAttributeName] = [UIColor whiteColor];
//修改顏色
self.attributedPlaceholder = [[NSAttributedString alloc] initWithString:self.placeholder attributes:dict];

結束編輯時候代碼:

NSMutableDictionary *dict = [NSMutableDictionary dictionary];
dict[NSForegroundColorAttributeName] = [UIColor lightGrayColor];
self.attributedPlaceholder = [[NSAttributedString alloc] initWithString:self.placeholder attributes:dict];
—-> 5.2 蘋果的私有屬性placeholderLabel(第二種: 可以使用)

未編輯之間代碼:

UILabel *labelText = [self valueForKey:@"placeholderLabel"];
labelText.textColor = [UIColor lightGrayColor];

開始編輯的代碼:

UILabel *labelText = [self valueForKey:@"placeholderLabel"];
labelText.textColor = [UIColor whiteColor];

結束編輯的代碼:

UILabel *labelText = [self valueForKey:@"placeholderLabel"];
labelText.textColor = [UIColor lightGrayColor];
—-> 5.3 我們是不是想通過直接用”.”然后傳入一種顏色,就能直接設置呢.通過一行代碼搞定(第三種: 推薦)
—-> ​5.3.1 分類(設置占位文字的顏色)—->提供兩個方法
//set方法
- (void)setPlaceholderColor:(UIColor *)placeholderColor
{
//判斷,如果占位為空,那么就直接設置為空
if (self.placeholder == nil) {
self.placeholder = @" ";
}
//獲取占位文字控件
UILabel *placeholderLabel = [self valueForKey:@"placeholderLabel"];

//拿到控件去設置顏色(外界傳入需要設置的顏色)
placeholderLabel.textColor = placeholderColor;

}

//get方法
- (UIColor *)placeholderColor
{
return nil;
}
—-> 5.3.2 調用代碼(只用一行代碼就可以搞定)

未編輯之前:

self.placeholderColor = [UIColor lightGrayColor];

開始編輯:

self.placeholderColor = [UIColor whiteColor];

結束編輯:

self.placeholderColor = [UIColor lightGrayColor];

九 注意

1 注意: 在開發中,如果碰見很多的view都有同樣的功能,自定義view去管理所有的view

2 注意: 以后如果想知道一個類里面有哪些私有的屬性,可以采取斷點方式查看.

十 補充

1 如果一個控件從xib加載,需不需要固定尺寸?—-> 必須要

2 在viewDidLoad設置子控件位置,行不行?—-> 不行—>在viewDidLayoutSubViews中設置屬性,因為需要讓約束執行完畢的時候,才設置屬性位置.

十一 總結

1 該部分業務邏輯不是多,目的是讓我們熟練的掌握自動布局,對約束的理解和運用

2 以后寫代碼之前一定要明白:代碼寫到哪個地方?是整個程序只加載一次呢?還是每次都要加載?需要仔細的考慮好.

3 登錄與注冊的業務邏輯還沒有完全的寫完,后續我講及時的更新,如果大家有什么意見問題,請給我留言.如果您閱讀了我的博客,感覺寫的還行,麻煩您持續關注我的官方博客,一定為你奉上最清晰的代碼思路,謝謝!!!!


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
  © 2014-2022 ITdaan.com 联系我们: