iOS 類圖蟲評(píng)論頁面(上半部分半透明)實(shí)現(xiàn)

IMG_0847.PNG

這是圖蟲首頁點(diǎn)擊評(píng)論后的頁面,這個(gè)頁面有兩個(gè)亮點(diǎn):1.上半部分半透明舒帮;2.下半部分頂部切圓角。

實(shí)現(xiàn)思路:共 0 - 5 六個(gè)步驟。
0.創(chuàng)建一個(gè)控制器controllerX
1.在viewA(第0步創(chuàng)建的controllerX的view,以下簡稱A)上添加一個(gè)button和viewB(以下簡稱B)
2.設(shè)置A的背景色為[UIColor clearColor]骚烧,設(shè)置button的背景色為黑色,alpha為x(0到1之間闰围,根據(jù)需求自己確定)

注:通過這種設(shè)置可以給出一種視覺上的假象赃绊,就像開局的圖中展示的那樣,讓用戶看到一個(gè)上半部分半透明的頁面辫诅。而實(shí)際上凭戴,這個(gè)半透明的部分只是一個(gè)帶有透明度的button。以假亂真

3.設(shè)置B的左上角和有上角為圓角(本文最后會(huì)介紹如何指定切圓角)
4.設(shè)置button和B的約束炕矮。

注:這里需要特別說明一下么夫,請看下面的三張圖


Snip20161228_2.png
Snip20161228_3.png
Snip20161228_6.png

圖1和圖3為我為了演示特意設(shè)置的測試截圖。圖2為項(xiàng)目正式的截圖(來自我們公司的產(chǎn)品TOP6000)肤视。

設(shè)置控件約束档痪,我使用的是第三方框架Masonry。
button的約束為:


Snip20161228_7.png

B的約束為:


Snip20161228_8.png

注意我用紅線圈住的兩條約束邢滑,按鈕的高度給的固定值30腐螟,B的頂部距離父view的頂部固定18。這里需要注意什么呢?就是按鈕的高度要大于B頂部到父view頂部的距離乐纸,這樣做就可以使得按鈕多出來一部分衬廷,避免出現(xiàn)圖1那種情況。

5.最后一步:直接以modal的方式彈出controllerX就可以看到效果啦~

最后:如果大家有更好的思路汽绢,請私信我吗跋;如果發(fā)現(xiàn)我寫的有問題,沒說明白的宁昭,請私信我跌宛。謝謝。

備注:controllerX.modalPresentationStyle = UIModalPresentationOverCurrentContext;
self.definesPresentationContext = YES;
以上添加的這兩行代碼能夠保證present controllerX 之后, self.view仍然顯示.

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末积仗,一起剝皮案震驚了整個(gè)濱河市疆拘,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌寂曹,老刑警劉巖哎迄,帶你破解...
    沈念sama閱讀 206,968評(píng)論 6 482
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異稀颁,居然都是意外死亡芬失,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,601評(píng)論 2 382
  • 文/潘曉璐 我一進(jìn)店門匾灶,熙熙樓的掌柜王于貴愁眉苦臉地迎上來棱烂,“玉大人,你說我怎么就攤上這事阶女〖彰樱” “怎么了?”我有些...
    開封第一講書人閱讀 153,220評(píng)論 0 344
  • 文/不壞的土叔 我叫張陵秃踩,是天一觀的道長衬鱼。 經(jīng)常有香客問我,道長憔杨,這世上最難降的妖魔是什么鸟赫? 我笑而不...
    開封第一講書人閱讀 55,416評(píng)論 1 279
  • 正文 為了忘掉前任,我火速辦了婚禮消别,結(jié)果婚禮上抛蚤,老公的妹妹穿的比我還像新娘。我一直安慰自己寻狂,他們只是感情好岁经,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,425評(píng)論 5 374
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著蛇券,像睡著了一般缀壤。 火紅的嫁衣襯著肌膚如雪樊拓。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,144評(píng)論 1 285
  • 那天塘慕,我揣著相機(jī)與錄音筋夏,去河邊找鬼。 笑死苍糠,一個(gè)胖子當(dāng)著我的面吹牛叁丧,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播岳瞭,決...
    沈念sama閱讀 38,432評(píng)論 3 401
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼蚊锹!你這毒婦竟也來了瞳筏?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,088評(píng)論 0 261
  • 序言:老撾萬榮一對(duì)情侶失蹤牡昆,失蹤者是張志新(化名)和其女友劉穎姚炕,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體丢烘,經(jīng)...
    沈念sama閱讀 43,586評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡柱宦,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,028評(píng)論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了播瞳。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片掸刊。...
    茶點(diǎn)故事閱讀 38,137評(píng)論 1 334
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖赢乓,靈堂內(nèi)的尸體忽然破棺而出忧侧,到底是詐尸還是另有隱情,我是刑警寧澤牌芋,帶...
    沈念sama閱讀 33,783評(píng)論 4 324
  • 正文 年R本政府宣布蚓炬,位于F島的核電站,受9級(jí)特大地震影響躺屁,放射性物質(zhì)發(fā)生泄漏肯夏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,343評(píng)論 3 307
  • 文/蒙蒙 一犀暑、第九天 我趴在偏房一處隱蔽的房頂上張望驯击。 院中可真熱鬧,春花似錦母怜、人聲如沸余耽。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,333評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽碟贾。三九已至币喧,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間袱耽,已是汗流浹背杀餐。 一陣腳步聲響...
    開封第一講書人閱讀 31,559評(píng)論 1 262
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留朱巨,地道東北人史翘。 一個(gè)月前我還...
    沈念sama閱讀 45,595評(píng)論 2 355
  • 正文 我出身青樓,卻偏偏與公主長得像冀续,于是被迫代替她去往敵國和親琼讽。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,901評(píng)論 2 345

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

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 171,522評(píng)論 25 707
  • ¥開啟¥ 【iAPP實(shí)現(xiàn)進(jìn)入界面執(zhí)行逐一顯】 〖2017-08-25 15:22:14〗 《//首先開一個(gè)線程洪唐,因...
    小菜c閱讀 6,358評(píng)論 0 17
  • 這是你對(duì)我說得祝福語钻蹬。 你知道嗎?我唯一不開心的就是因?yàn)橛心闫拘琛R黄鹱咧究梢粤暮芏嗍虑槲是罚墒悄銢]有!你怪我不說話粒蜈,...
    嬌蠻公主閱讀 244評(píng)論 0 1
  • 林主任急匆匆地沖到我面前顺献,面色尷尬地說:“吳同學(xué),剛才是我亂說的枯怖,你不要當(dāng)真注整,你不會(huì)被開除的!” 還真是嫁怀!不僅我震...
    浮生萬夢星耀燭天閱讀 151評(píng)論 0 1
  • Android捕獲異常監(jiān)控應(yīng)用運(yùn)行異常的可以使用企鵝家的Bugly等第三方SDK设捐,但是當(dāng)應(yīng)用運(yùn)行于內(nèi)網(wǎng)或無法連接外...
    小豪豪君閱讀 1,019評(píng)論 0 1