學(xué)習(xí)HM微博項(xiàng)目第8天

步驟:發(fā)微博01-導(dǎo)航欄內(nèi)容 -> 發(fā)微博02-自定義TextView -> 發(fā)微博03-完善TextView和發(fā)送微博按鈕 -> 發(fā)微博04-顯示工具條 -> 發(fā)微博05-封裝工具條和相冊(cè) -> 發(fā)微博06-發(fā)送微博

發(fā)微博01-導(dǎo)航欄內(nèi)容

APP的演示操作:

APP的演示操作

從APP的演示操作中可知,當(dāng)點(diǎn)擊tabBar的“+”按鈕時(shí)APP會(huì)以modal的方式跳轉(zhuǎn)到發(fā)微博的控制器辨萍。實(shí)現(xiàn)代碼如下:

跳轉(zhuǎn)到發(fā)微博的控制器

在HMComposeViewController類的viewDidLoad方法中萌京,設(shè)置導(dǎo)航欄內(nèi)容椎瘟,并添加輸入控件(用于輸入微博正文)逐沙,如下:

HMComposeViewController類的viewDidLoad方法

HMComposeViewController類的初始化方法如下:

setupNav方法
setupTextView方法

發(fā)微博02-自定義TextView

APP的演示操作:

APP的演示操作

前文中濒持,已經(jīng)初步添加了輸入控件UITextView,但是輸入控件UITextView并不能完全滿足我們的要求咧叭,即無(wú)法實(shí)現(xiàn)占位文字。

所以页滚,新建了一個(gè)繼承自UITextView的HMTextView類召边,將占位文字的實(shí)現(xiàn)以及輸入控件的具體邏輯都封裝到HMTextView類中,只將占位文字和占位文字顏色兩個(gè)屬性提供給外界(HMComposeViewController類)使用裹驰。如下:

完善后的setupTextView方法

在HMTextView類中隧熙,占位文字的實(shí)現(xiàn)有多種方式:第一種是添加UILabel,第二種是重寫drawRect:方法幻林。在這里贞盯,我們采用的是第二種方式。重寫drawRect:方法沪饺,如下:

重寫drawRect:方法

觀察APP的演示操作躏敢,一開(kāi)始進(jìn)入發(fā)微博界面時(shí),輸入控件上顯示的是“分享新鮮事”整葡,當(dāng)我們輸入文字后件余,“分享新鮮事”就會(huì)“消失”。這里的實(shí)現(xiàn)原理是通知遭居。具體代碼如下:

通知

注意:這里不適合使用代理啼器,用通知即可。發(fā)出通知后俱萍,會(huì)觸發(fā)textDidChange事件端壳,然后重新調(diào)用drawRect方法進(jìn)行重繪。

發(fā)微博03-完善TextView和發(fā)送微博按鈕

APP的演示操作:

APP的演示操作

在前文的基礎(chǔ)上繼續(xù)完善輸入控件鼠次,并且當(dāng)有輸入文字后更哄,導(dǎo)航欄的右邊發(fā)送按鈕可以響應(yīng)(發(fā)送微博)。

參考前面腥寇,HMComposerViewController監(jiān)聽(tīng)輸入文字同樣是采用通知的方式。如下:

通知

其中觅捆,textDidChange方法的具體代碼如下:

textDidChange方法

在HMComposerViewController中赦役,監(jiān)聽(tīng)方法send是用于發(fā)送微博,具體代碼如下:

send方法

說(shuō)明:
1.完善前文中設(shè)置導(dǎo)航欄內(nèi)容的代碼栅炒,要考慮是否有微博名掂摔,如下:

setupNav方法

2.HMTextView類聲明了兩個(gè)屬性placedholder和placedholderColor,由于這兩個(gè)屬性不是系統(tǒng)屬性赢赊,所以在優(yōu)先級(jí)上會(huì)較低乙漓,我們有時(shí)候需要重寫它們的setter方法,如下:

HMTextView.m

3.每一次使用通知释移,都要注意調(diào)用dealloc方法叭披,移除觀察者。如下:

移除觀察者

發(fā)微博04-顯示工具條

APP的演示操作:

APP的演示操作

仔細(xì)觀察APP的演示操作玩讳,工具條一開(kāi)始是顯示在屏幕底部涩蜘,當(dāng)鍵盤彈出時(shí)工具條才移動(dòng)到鍵盤的頂部嚼贡。

在HMComposeViewController的viewDidLoad方法添加工具條,如下:

HMComposeViewController的viewDidLoad方法

其中同诫,setupToolBar方法如下:

setupToolBar方法
問(wèn)題:對(duì)于工具條的類HMComposerToolbar暫時(shí)不要考慮粤策,先弄明白為什么當(dāng)鍵盤一出現(xiàn)工具條就會(huì)移動(dòng)鍵盤的頂部?實(shí)現(xiàn)原理是什么误窖?

思路:
1.鍵盤會(huì)在進(jìn)入發(fā)微博頁(yè)面后就彈出是因?yàn)檎{(diào)用了viewDidAppear:方法叮盘,如下:

viewDidAppear:方法

2.彈出鍵盤后移動(dòng)工具條,這是因?yàn)楫?dāng)鍵盤的frame發(fā)生改變時(shí)就會(huì)發(fā)出通知UIKeyboardWillChangeFrameNotification霹俺,觸發(fā)keyboardWillChangeFrame:事件熊户, 執(zhí)行動(dòng)畫移動(dòng)工具條,如下:

setupTextView方法

其中吭服,keyboardWillChangeFrame:方法嚷堡,如下:

keyboardWillChangeFrame:方法

在HMComposerToolbar類(繼承自UIView)中,設(shè)置工具條上的按鈕艇棕。具體代碼如下:

@implementation HMComposeToolbar

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
         self.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"compose_toolbar_background"]];
        
        //初始化按鈕
        [self setupBtn:@"compose_camerabutton_background" highImage:@"compose_camerabutton_background_highlighted"];
        [self setupBtn:@"compose_toolbar_picture" highImage:@"compose_toolbar_picture_highlighted"];
        [self setupBtn:@"compose_mentionbutton_background" highImage:@"compose_mentionbutton_background_highlighted"];
        [self setupBtn:@"compose_trendbutton_background" highImage:@"compose_trendbutton_background_highlighted"];
        [self setupBtn:@"compose_emoticonbutton_background" highImage:@"compose_emoticonbutton_background_highlighted"];

    }
    return self;
}

/**
 *  創(chuàng)建一個(gè)按鈕
 */
- (void)setupBtn:(NSString *)image highImage:(NSString *)highImage
{
    UIButton *btn = [[UIButton alloc] init];
    [btn setImage:[UIImage imageNamed:image] forState:UIControlStateNormal];
    [btn setImage:[UIImage imageNamed:highImage] forState:UIControlStateHighlighted];
    
    [self addSubview:btn];
    
}

/**
 *  設(shè)置按鈕的尺寸
 */
- (void)layoutSubviews
{
    [super layoutSubviews];
    
    //設(shè)置按鈕的frame
    NSUInteger btnCount = self.subviews.count;
    CGFloat btnW = self.size.width / 5;
    CGFloat btnH = self.size.height;
    for (int i = 0; i< btnCount; i++) {
        UIButton *btn = self.subviews[i];
        btn.x = i * btnW;
        btn.y = 0;
        btn.width = btnW;
        btn.height = btnH;
    }
}
@end

發(fā)微博05-封裝工具條和相冊(cè)

APP的演示操作:

APP的演示操作

仔細(xì)觀察APP的演示操作蝌戒,在輸入文字下面添加了相冊(cè),用于顯示發(fā)微博的圖片沼琉。而工具條上的按鈕也可以響應(yīng)某些事件北苟。其實(shí)現(xiàn)過(guò)程相當(dāng)復(fù)雜。

在HMComposeViewController的viewDidLoad方法添加相冊(cè)打瘪,如下:

HMComposeViewController的viewDidLoad方法

其中友鼻,setupPhotosView方法如下:

setupPhotosView方法

在HMComposePhotosView(繼承自UIView)中,添加圖片到發(fā)微博的相冊(cè)中闺骚,設(shè)置圖片的frame彩扔。關(guān)鍵代碼如下:

HMComposePhotosView.m

其中,要將方法addPhoto提供外界僻爽,用于從外界添加圖片虫碉。

在HMComposeToolbar類,完善之前的代碼胸梆,使得工具條上的按鈕可以響應(yīng)敦捧。不同于之前所用到的通知,這里要通過(guò)代理來(lái)實(shí)現(xiàn)按鈕的點(diǎn)擊事件碰镜。
過(guò)程:
1.聲明代理協(xié)議和代理屬性兢卵,具體代碼如下:

聲明代理協(xié)議和代理屬性

2.通知代理對(duì)象,具體代碼如下:

通知代理對(duì)象

說(shuō)明:由于使用到btn.tag绪颖,所以要對(duì)之前的代碼進(jìn)行完善秽荤,如下:


setupBtn:highImage:type:方法

在HMComposeViewController中,遵守HMComposeToolbarDeleagate代理協(xié)議,實(shí)現(xiàn)代理方法王滤,如下:

HMComposeToolbarDeleagate代理方法

其中贺嫂,openCamera和openAlbum方法分別對(duì)應(yīng)工具條上的“拍照”和“相冊(cè)”按鈕。具體代碼如下:

openCamera和openAlbum方法

openImagePickerController:設(shè)置代理雁乡,遵守
UINavigationControllerDelegate和UIImagePickerControllerDelegate代理協(xié)議第喳,實(shí)現(xiàn)代理方法imagePickerController:didFinishPickingMediaWithInfo:方法,如下:

imagePickerController:didFinishPickingMediaWithInfo:方法

在imagePickerController:didFinishPickingMediaWithInfo:方法中踱稍,取出系統(tǒng)相冊(cè)里的圖片后,調(diào)用HMComposePhotosView類的addPhoto方法曲饱,將圖片添加到發(fā)微博的相冊(cè)photosView中。

發(fā)微博06-發(fā)送微博

APP的演示操作:

APP的演示操作

仔細(xì)觀察APP的演示操作珠月,此時(shí)發(fā)微博除了發(fā)送文字扩淀,還可以發(fā)送圖片。截圖如下:

所發(fā)送的微博截圖

實(shí)際上啤挎,在前文的send方法中的api接口是沒(méi)辦法發(fā)送圖片的驻谆,需要另外一個(gè)接口。這就需要我們考慮兩種情況(有圖片和沒(méi)圖片)庆聘。
完善send方法胜臊,具體代碼如下:

send方法

其中,sendWithImage方法如下:

sendWithImage方法

sendWithoutImage方法如下:

sendWithoutImage方法

說(shuō)明:
1.發(fā)送帶有圖片的微博伙判,需要將圖片上傳到新浪的服務(wù)器象对。
這就涉及HMComposePhotosView類深胳,需要HMComposePhotosView類提供photos屬性給外界用來(lái)獲取圖片資源苗分。
由于外界沒(méi)必要對(duì)圖片資源進(jìn)行修改磺送,只需要獲取即可鱼的。所以對(duì)photos屬性進(jìn)行特殊聲明(readonly)。如下:

HMComposePhotosView類的photos屬性

并且要完善下addPhoto方法的代碼神僵,如下:

完善addPhoto方法

總結(jié):主要掌握好工具條的設(shè)置和如何移動(dòng)囤躁,并且進(jìn)一步加深對(duì)readonly屬性的認(rèn)識(shí)德崭。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末羊娃,一起剝皮案震驚了整個(gè)濱河市唐全,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌蕊玷,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,013評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件弥雹,死亡現(xiàn)場(chǎng)離奇詭異垃帅,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)剪勿,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,205評(píng)論 2 382
  • 文/潘曉璐 我一進(jìn)店門贸诚,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人,你說(shuō)我怎么就攤上這事酱固⌒的睿” “怎么了?”我有些...
    開(kāi)封第一講書人閱讀 152,370評(píng)論 0 342
  • 文/不壞的土叔 我叫張陵运悲,是天一觀的道長(zhǎng)龄减。 經(jīng)常有香客問(wèn)我,道長(zhǎng)班眯,這世上最難降的妖魔是什么希停? 我笑而不...
    開(kāi)封第一講書人閱讀 55,168評(píng)論 1 278
  • 正文 為了忘掉前任,我火速辦了婚禮署隘,結(jié)果婚禮上宠能,老公的妹妹穿的比我還像新娘。我一直安慰自己磁餐,他們只是感情好违崇,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,153評(píng)論 5 371
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著诊霹,像睡著了一般羞延。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上畅哑,一...
    開(kāi)封第一講書人閱讀 48,954評(píng)論 1 283
  • 那天肴楷,我揣著相機(jī)與錄音,去河邊找鬼荠呐。 笑死赛蔫,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的泥张。 我是一名探鬼主播呵恢,決...
    沈念sama閱讀 38,271評(píng)論 3 399
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼媚创!你這毒婦竟也來(lái)了渗钉?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書人閱讀 36,916評(píng)論 0 259
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤钞钙,失蹤者是張志新(化名)和其女友劉穎鳄橘,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體芒炼,經(jīng)...
    沈念sama閱讀 43,382評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡瘫怜,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,877評(píng)論 2 323
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了本刽。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片鲸湃。...
    茶點(diǎn)故事閱讀 37,989評(píng)論 1 333
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡赠涮,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出暗挑,到底是詐尸還是另有隱情笋除,我是刑警寧澤,帶...
    沈念sama閱讀 33,624評(píng)論 4 322
  • 正文 年R本政府宣布炸裆,位于F島的核電站垃它,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏晒衩。R本人自食惡果不足惜嗤瞎,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,209評(píng)論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望听系。 院中可真熱鬧贝奇,春花似錦、人聲如沸靠胜。這莊子的主人今日做“春日...
    開(kāi)封第一講書人閱讀 30,199評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)浪漠。三九已至陕习,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間址愿,已是汗流浹背该镣。 一陣腳步聲響...
    開(kāi)封第一講書人閱讀 31,418評(píng)論 1 260
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留响谓,地道東北人损合。 一個(gè)月前我還...
    沈念sama閱讀 45,401評(píng)論 2 352
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像娘纷,于是被迫代替她去往敵國(guó)和親嫁审。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,700評(píng)論 2 345

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 171,496評(píng)論 25 707
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫(kù)赖晶、插件律适、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,022評(píng)論 4 62
  • 子曰:“工欲善其事,必先利其器遏插∥婊撸” 據(jù)上周六平整土地的覺(jué)悟,爪鉤才是敲土利器胳嘲。 今天一早到湯山農(nóng)貿(mào)市場(chǎng)后眷蜓,直奔農(nóng)具...
    心花朵朵閱讀 350評(píng)論 1 1
  • 有一種一塊大石頭終于落地的感覺(jué)。 雖然我知道其實(shí)我們這邊是個(gè)小石頭胎围。 不過(guò)還是好開(kāi)心啊吁系,可以放松...
    _aqu閱讀 319評(píng)論 2 0
  • 寫郵件不是搞文學(xué)創(chuàng)作,其實(shí)只要遵循一個(gè)原則白魂,你就不會(huì)寫出讓對(duì)方吐槽的郵件汽纤,那就是:不寫自己知道的,而寫對(duì)方需要知道...
    8a0feaba5d61閱讀 737評(píng)論 0 0