之前的搭框架啥的基本與OC沒啥區(qū)別,但有種情況,就是要建個橋文件,來使swift項目中可以引用pods導入的OC的第三方庫,想知道具體怎么建的可在下面評論留言。
進入正題,今天要做的是99%的APP要有的個人中心頁面,用的是系統(tǒng)自帶的cell。效果圖如下

個人中心.png
ps:如何建橋文件已經在另一篇OC轉swift3.0實戰(zhàn) (二)使用自定義cell的tableview中寫明。
這個頁面很簡單,整體一個
tabview,里面有一個headerView,加5個section。由于是剛開始實戰(zhàn),這里不用xib而是用純代碼來建頭部(說到這,不禁有一個問題,是xib開發(fā)好呢還是純代碼好呢?)新建一個
view繼承自UIView language選用swift,完成。接下來不用像OC那樣重寫init,直接干。代碼如下:
import UIKit
class ZLMMineHeaderView: UIView {
//懶加載
///背景視圖
lazy var backImageView:UIImageView = {[weak self](result)in
let img = UIImageView(image:#imageLiteral(resourceName: "bannerBackground"))
img.contentMode = .scaleAspectFill
img.layer.masksToBounds = true
self?.addSubview(img)
return img
}()
///背景圖上方的一層蒙版
// lazy var alphaView:UIView = {[unowned self]in
// let view = UIView()
// view.backgroundColor = UIColor.hexInt(0x000000)
// view.alpha = 0.3
// self.addSubview(view)
// return view
// }()
///設置按鈕
lazy var settingBtn:UIButton = {[weak self](result)in
let btn = UIButton(type:.custom)
btn.setImage(#imageLiteral(resourceName: "setting"), for: .normal)
self?.addSubview(btn)
return btn
}()
///頭像視圖
lazy var avatarImageView:UIImageView = {[weak self](result)in
let img = UIImageView(image:#imageLiteral(resourceName: "unlogin"))
img.layer.masksToBounds = true
img.layer.cornerRadius = 45.0
img.layer.rasterizationScale = UIScreen.main.scale
img.layer.shouldRasterize = true
self?.addSubview(img)
return img
}()
///登錄/注冊
lazy var loginBtn:UIButton = {[weak self](result)in
let btn = UIButton(type: .custom)
btn.setTitle("登錄/注冊", for: .normal)
btn.setTitleColor(UIColor.white, for: .normal)
self?.addSubview(btn)
return btn
}()
override func layoutSubviews() {
super.layoutSubviews()
//背景視圖
backImageView.frame = CGRect(x:0,y:0,width:ScreenW,height:200)
// alphaView.frame = backImageView.frame
settingBtn.frame = CGRect(x:ScreenW-40,y:35,width:30,height:30)
avatarImageView.frame = CGRect(x:ScreenW/2-45,y:55,width:90,height:90)
loginBtn.frame = CGRect(x:ScreenW/2-45,y:145,width:90,height:30)
}
}
自定義的View解決了 接下來就是controller里的事了。ps:這個頁面的數(shù)據(jù)都是寫死的,沒涉及到網絡層。代碼如下:
import UIKit
let headerViewH:CGFloat = 200
class ZLMMainViewController: UIViewController {
//普通屬性
var lightFlag:Bool = true
//懶加載
///tableview
lazy var tableView: UITableView = {[weak self](result) in
let tableView = UITableView(frame:CGRect(x:0, y:0, width:ScreenW, height:(self?.view.frame.height)!),style:.grouped)
tableView.delegate = self
tableView.dataSource = self
tableView.backgroundColor = BACKGROUND_Color
self?.view.addSubview(tableView)
return tableView
}()
///列表標題數(shù)組
lazy var titleArray:[[String]] = {
return[["我的訂單"],["我的會員卡","我的收藏","我的收貨地址",],["我的優(yōu)惠券"],["IC卡查詢"],["幫助中心"]]
}()
///列表圖標數(shù)組
lazy var imageArray:[[UIImage]] = {
return [[#imageLiteral(resourceName: "order")],[#imageLiteral(resourceName: "memberCard"),#imageLiteral(resourceName: "favorite"),#imageLiteral(resourceName: "address")],[#imageLiteral(resourceName: "coupon")],[#imageLiteral(resourceName: "score")],[#imageLiteral(resourceName: "help")]]
}()
///頭部視圖
lazy var headerView:ZLMMineHeaderView = {
let view = ZLMMineHeaderView(frame:CGRect(x:0,y:0,width:ScreenW,height:headerViewH))
return view
}()
///狀態(tài)欄
lazy var statusBackView:UIView = {[weak self](result)in
let view = UIView(frame:CGRect(x:0,y:0,width:ScreenW,height:20))
view.backgroundColor = UIColor.white.withAlphaComponent(0.95)
self?.view.addSubview(view)
self?.view.bringSubview(toFront:view)
return view
}()
//生命周期
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = UIColor.hexInt(0xf3f3f3)
automaticallyAdjustsScrollViewInsets = false
setupView()
// Do any additional setup after loading the view.
}
///設置狀態(tài)欄樣式
override var preferredStatusBarStyle: UIStatusBarStyle{
if lightFlag {
return .lightContent
}else{
return .default
}
}
override func viewWillAppear(_ animated: Bool) {
super.viewWillAppear(animated)
navigationController?.setNavigationBarHidden(true, animated: true)
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
}
//初始化
extension ZLMMainViewController{
///初始化視圖
fileprivate func setupView(){
tableView.tableHeaderView = UIView(frame:CGRect(x:0,y:0,width:ScreenW,height:headerViewH))
tableView.addSubview(headerView)
}
}
//UITableview代理 &&數(shù)據(jù)源
extension ZLMMainViewController:UITableViewDelegate,UITableViewDataSource{
func numberOfSections(in tableView: UITableView) -> Int {
return titleArray.count
}
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
let subTitleArr = titleArray[section]
return subTitleArr.count
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let subTextArr = titleArray[indexPath.section]
let imgArr = imageArray[indexPath.section]
let cellID = "cellId"
var cell = tableView.dequeueReusableCell(withIdentifier: cellID)
if cell == nil {
cell = UITableViewCell(style: .default,reuseIdentifier:cellID)
}
cell?.textLabel?.text = subTextArr[indexPath.row]
cell?.textLabel?.font = UIFont.systemFont(ofSize: 14)
cell?.textLabel?.textColor = RGBA(r:0.0,g:0.0,b:0.0,a:1.0)
cell?.accessoryType = .disclosureIndicator
cell?.selectionStyle = .none
cell?.imageView?.image = imgArr[indexPath.row]
return cell!
}
func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
return
}
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
return 44.0
}
func tableView(_ tableView: UITableView, heightForFooterInSection section: Int) -> CGFloat {
return 10.0
}
func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
return 0.1
}
}
這樣這個頁面的UI就搭好了,里面的點擊事件都沒實現(xiàn),跳轉和OC也沒多大區(qū)別。同樣,有啥問題可以留言哦。