• 请点击，免费订阅《学Swift挣美元》专栏

Swift零基础学习之用TableView做个景点App

视频播放地址：Swift零基础学习之用TableView做个景点App

1. 创建一个新项目，我就叫Yanjing

2. 将照片素材拖拽到Assets.xcassets中

3. 添加navigation controller,点击editor->embed in >Navigation Controller

4. 拖拽一个tableview，并配置constrain

5. 拖拽一个tableview cell,并配置高度为90，custom

6. 添加imageview 并配置constrain，左12，width 132，Vertically in container

7. 添加label，并配置constrain,左12，右12，height 25，Vertically in container

8. 创建一个swift文件，起名为JingDian，代码如下

import Foundation
import UIKitclass JingDian {var image:UIImagevar title:Stringinit(image:UIImage, title:String ){self.image = imageself.title = title}
}

9. 创建一个UITableViewCell ,命名为JingCell，具体代码如下

import UIKitclass JingCell: UITableViewCell {func setVideo(jingDian: JingDian) {jingImageView.image = jingDian.imagejingTitleLabel.text = jingDian.title}}

10. 配置tablecell class,identifier为JingCell

11. 添加IBOutlet,imageview 设置为jingImageView，label设置为jingTitleLabel

12. 创建一个ViewController 名为JingListScreen,并配置对应class

13. 将下面的代码复制到JingListScreen.swift文件上

//
//  JingListScreen.swift
//  Yanjing
//
//  Created by cf on 2019/4/18.
//  Copyright © 2019 cf. All rights reserved.
//import UIKitclass JingListScreen: UIViewController{@IBOutlet weak var tableView: UITableView!var videos: [JingDian] = []override func viewDidLoad() {super.viewDidLoad()videos = createArray()}func createArray() -> [JingDian] {var objArray:[JingDian]=[]let briefData = [["title":"居庸叠翠","image":"001_jydc.jpg",],["title":"玉泉流虹（玉泉趵突）","image":"002_yqch.jpg",],["title": "太液晴波","image": "003_tyqf.jpg"],["title": "琼岛春云","image": "004_cqcy.jpg"],["title": "蓟门飞雨（蓟门烟树）","image": "005_jfys.jpg",],["title": "西山积雪","image": "006_xsjx.jpg"],["title": "卢沟晓月","image": "007_lgxy.jpg"],["title": "金台夕照","image": "008_jtxz.jpg"],]for briefItem in briefData{let videoItem=JingDian(image: UIImage(imageLiteralResourceName:briefItem["image"]!),title: briefItem["title"]!)objArray.append(videoItem)}return objArray}
}extension JingListScreen: UITableViewDataSource, UITableViewDelegate {func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {return videos.count}func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {let video = videos[indexPath.row]let cell = tableView.dequeueReusableCell(withIdentifier: "JingCell") as! JingCellcell.setVideo(jingDian: video)return cell}
}

14. 添加tableview的IBOutlet和delegate

15. 设置一下imageview上下的间隔

16. 运行App，查看效果