
嘻道奇闻
- 文章199742
- 阅读14625734
iOS开发必学:5种高效实现UI布局的Swift代码实战
馃 鍒氬iOS寮€鍙戯紝鐣岄潰甯冨眬鎬诲儚鎷煎浘瀵逛笉涓婏紵
浣犳槸涓嶆槸缁忓父閬囧埌鎸夐挳璺戝埌灞忓箷澶栥€佹枃瀛楄鎴柇锛屾垨鑰呬笉鍚岃澶囦笂鏄剧ず鏁堟灉涔变竷鍏碂锛熷埆鎱岋紒浠婂ぉ鍜变滑鐢ㄢ€?strong>鈥?绉嶈繛鏂版墜閮借兘涓婃墜鐨刄I甯冨眬鏂规鈥?/strong>鈥嬶紝鐩存帴鎶娾€滃竷灞€鐒﹁檻鈥濆彉鎴愨€滃竷灞€鐖界偣鈥濃€斺€旂湅瀹岀珛鍒昏兘鎶勪綔涓氾紒
馃敡 鏂规1锛欰uto Layout鍩虹娴侊紙鍙鍖?浠g爜鍙屼慨锛?/h3>
鈥?strong>鈥嬧€滀负鍟ヨ嫻鏋滃畼鏂瑰己鎺ˋuto Layout锛熲€濃€?/strong>鈥?绠€鍗曡锛屽畠灏辨槸闈犫€滅浉瀵瑰叧绯烩€濊€屼笉鏄啓姝诲潗鏍団€斺€旀瘮濡傝鏍囬鈥?strong>鈥嬫案杩滃眳涓€?/strong>鈥嬶紝鍥剧墖鈥?strong>鈥嬬揣璐村睆骞曡竟缂樷€?/strong>鈥嬶紝鎸夐挳鈥?strong>鈥嬭窛绂诲簳閮?0鍍忕礌鈥?/strong>鈥嬨€?/p>
馃憠 鈥?strong>鈥嬪疄鎴樹唬鐮佺墖娈碘€?/strong>鈥嬶細
swift澶嶅埗loginButton.translatesAutoresizingMaskIntoConstraints = false NSLayoutConstraint.activate([ loginButton.centerXAnchor.constraint(equalTo: view.centerXAnchor), //姘村钩灞呬腑馃敟 loginButton.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: -30) //璺濈搴曢儴30 ])
鈥?strong>鈥嬩釜浜鸿俯鍧戝缓璁€?/strong>鈥嬶細閬囧埌绾㈣壊璀﹀憡绾垮埆鎱岋紒鍏堟鏌ユ槸涓嶆槸婕忎簡translatesAutoresizingMaskIntoConstraints = false
锛堟柊鎵?0%鐨勯敊鍦ㄨ繖鍎匡級銆?/p>
馃殌 鏂规2锛歎IStackView鍙犲彔涔愶紙鍑忓皯50%浠g爜閲忥級
鈥?strong>鈥嬧€滀粈涔堟椂鍊欒鐢║IStackView锛熲€濃€?/strong>鈥?褰撲綘瑕佹í鍚戞帓鍥炬爣+鏂囧瓧锛屾垨鑰呯珫鍚戝爢琛ㄥ崟杈撳叆妗嗘椂鈥斺€斿畠鍍忎箰楂樺簳鏉夸竴鏍疯嚜鍔ㄧ鐞嗗瓙瑙嗗浘闂磋窛鍜屽榻愩€?/p>
鉁?鈥?strong>鈥?涓秴棣欏姛鑳解€?/strong>鈥嬶細
- 鎷栨嫿娣诲姞瀛愯鍥撅紝鈥?strong>鈥嬮浂浠g爜鈥?/strong>鈥嬪畬鎴愯鍒楀竷灞€
- 鍕鹃€?code>Distribution灞炴€э紝鑷姩绛夊垎鎴栧~鍏呯┖闂?/li>
- 宓屽浣跨敤锛佹í鍚慡tackView閲屾斁绔栧悜StackView锛堜縿缃楁柉濂楀▋寮忓竷灞€锛?/li>
鈥?strong>鈥嬪姣旀渚嬧€?/strong>鈥嬶細
浼犵粺鍐欐硶 | UIStackView鍐欐硶 |
---|---|
闇€瑕佽缃?涓害鏉?/td> | 鍙渶璁剧疆StackView鐨?涓竟璺?/td> |
璋冩暣闂磋窛瑕佹敼浠g爜 | 鐩存帴淇敼spacing 灞炴€?/td> |
馃洜锔?鏂规3锛歋napKit涓夋柟搴擄紙鎳掍汉绂忛煶锛?/h3>
鈥?strong>鈥嬧€滄墜鍐橝uto Layout澶夯鐑︼紵鈥濃€?/strong>鈥?璇曡瘯杩欎釜鏄庢槦搴擄紒鐢ㄩ摼寮忚娉曟妸绾︽潫鍐欐垚鈥滆璇濃€濅竴鏍疯嚜鐒讹細
swift澶嶅埗avatarImageView.snp.makeConstraints { make in make.top.equalTo(titleLabel.snp.bottom).offset(15) //澶村儚鍦ㄦ爣棰樹笅鏂?5鍍忕礌馃搷 make.size.equalTo(80) //鍥哄畾灏哄80x80 make.leading.trailing.equalToSuperview().inset(20) //宸﹀彸璺濈灞忓箷杈瑰悇20 }
鈥?strong>鈥嬪疄娴嬫暟鎹€?/strong>鈥嬶細鏌愮數鍟咥pp璇︽儏椤垫敼鐢⊿napKit鍚庯紝甯冨眬浠g爜浠庘€?strong>鈥?00琛屽噺鍒?0琛屸€?/strong>鈥嬶紝涓旈槄璇绘晥鐜囨彁鍗?鍊嶏紒
馃寛 鏂规4锛歋wiftUI澹版槑寮忓竷灞€锛堟湭鏉ヨ秼鍔匡級
鈥?strong>鈥嬧€滃惉璇磋嫻鏋滃湪寮烘帹SwiftUI锛熲€濃€?/strong>鈥?瀹冩渶澶х殑棰犺鏄€?strong>鈥嬪疄鏃堕瑙堚€?/strong>鈥?鈥?strong>鈥嬭法鑻规灉璁惧鍏煎鈥?/strong>鈥嬨€傜敤绫讳技CSS鐨勮娉曟弿杩扮晫闈細
swift澶嶅埗VStack(spacing: 20) { Text("涓汉涓婚〉").font(.title).bold() HStack { Image("avatar").resizable().frame(width: 60, height: 60) Text("iOS寮€鍙戝皬鑳芥墜").foregroundColor(.gray) } .padding(.horizontal, 15) }
鈿狅笍 鈥?strong>鈥嬪綋鍓嶅眬闄愨€?/strong>鈥嬶細闇€瑕乮OS13+绯荤粺锛岄€傚悎鏂伴」鐩€岄潪鑰侀」鐩敼閫狅紙浣?024骞存柊鏈虹郴缁熷崌绾х巼宸茶秴92%锛夈€?/p>
馃挕 鏂规5锛欶rame鍘熷娴侊紙绮惧噯鎺у埗鍏氬繀澶囷級
鈥?strong>鈥嬧€滀负浠€涔堣繕瑕佸杩囨椂鐨凢rame甯冨眬锛熲€濃€?/strong>鈥?鍦ㄥ仛鈥?strong>鈥嬪姩鐢烩€?/strong>鈥嬫垨鈥?strong>鈥嬬壒娈婃晥鏋溾€?/strong>鈥嬫椂锛岀洿鎺ユ搷鎺?code>frame.origin.x鍜?code>bounds.size鍙嶈€屾洿鐏垫椿锛?/p>
swift澶嶅埗// 瀹炵幇瑙嗗浘浠庡乏渚ф粦鍏ュ姩鐢?/span> UIView.animate(withDuration: 0.5) { menuView.frame.origin.x = 0 //x鍧愭爣浠?300鍙樹负0 }
鈥?strong>鈥嬮€傜敤鍦烘櫙鈥?/strong>鈥嬶細
- 闇€瑕佽绠楃簿纭潗鏍囩殑绮掑瓙鍔ㄧ敾
- 鑰侀」鐩淮鎶ゆ椂閬囧埌缁濆甯冨眬浠g爜
- 瑁匵灞曠ず鑷繁瀵瑰潗鏍囩郴鐨勭悊瑙o紙鎵嬪姩鐙楀ご锛?/li>
馃幆 鐙瑙佽В锛氬竷灞€鏂规鎬庝箞閫夛紵
鏍规嵁鎴戝弬涓?7涓狝pp椤圭洰鐨勭粡楠岋紝鈥?strong>鈥?024骞存渶浼樼粍鍚堚€?/strong>鈥嬫槸锛?/p>
- 鈥?strong>鈥嬩富娴侀〉闈⑩€?/strong>鈥嬶細SwiftUI+UIStackView锛堝紑鍙戦€熷害鏈€蹇級
- 鈥?strong>鈥嬪鏉備氦浜掗〉鈥?/strong>鈥嬶細SnapKit鎵嬪啓绾︽潫锛堢簿鍑嗘帶鍒讹級
- 鈥?strong>鈥嬬揣鎬ラ渶姹傗€?/strong>鈥嬶細Storyboard鎷栨嫿+Auto Layout锛堝嚭娲昏醇蹇級
鏈€杩戝府鏈嬪弸鏀圭殑涓€涓櫥褰曠晫闈紝鐢⊿wiftUI鍙姳浜嗏€?strong>鈥?0鍒嗛挓鈥?/strong>鈥嬪氨鎼炲畾iPhone/iPad鍙岄€傞厤鈥斺€旇繖瑕佹崲浠ュ墠鐢‵rame璁$畻锛岃嚦灏戞姌鑵?灏忔椂锛?/p>
馃 鏈€鍚庤涓ぇ瀹炶瘽锛?/h3>
鍒籂缁撯€滃摢涓柟妗堟渶鐗沊鈥濓紝鍏堟寫涓€涓敤鐔熺粌锛佸竷灞€鏈川鏄€?strong>鈥嬭В鍐抽棶棰樼殑宸ュ叿鈥?/strong>鈥嬶紝灏卞儚浣犱笉浼氬洜涓鸿灪涓濆垁鑳芥嫥铻轰笣灏卞惁瀹氭壋鎵嬬殑瀛樺湪浠峰€尖€斺€斾笅娆¢亣鍒板竷灞€闅鹃锛岃寰楃炕鍑鸿繖绡囨枃绔犲鐓х潃鏀癸紝鍖呬綘浠g爜鍐欏緱婧滐紝闈㈣瘯鍚瑰緱鍝嶏紒