这次完成了一个详情界面的设计以及代码的实现。在推荐栏中以及搜索栏中的项目点击后会跳转到具体的界面。这个具体的界面在设计上其实可以参照一般的新闻详情界面。主要有一个标题栏,一个内容栏,一个功能栏。这里功能栏还未实现。需要注意的是内容栏会由文字和图片组成,内容的排版是一个主要的问题。为了解决,我初期的设想是采用多个UIView,通过在不同的UIView设置不同的内容。但是后来我采取了之前一直使用的UITableView,虽然在排版上较为固定,难以灵活的排版,但是在内容的填充上会比较简单。对于标题,设置在UITableVIew的0号Cell中,并且字体较大。内容栏采用剩下的Cell。每一张图片会采用单独的一个Cell,图片之间的文字采用单独的Cell。
实现出来的效果是这样的:
代码如下:
//
// RecommendViewController.swift
// FinalTest
//
// Created by 沈力同 on 2017/5/10.
// Copyright © 2017年 沈力同. All rights reserved.
//
import UIKit
class RecommendViewController: UIViewController,SliderGalleryControllerDelegate,UITableViewDelegate,UITableViewDataSource {
let screenSizeWidth = UIScreen.main.bounds.size.width
let screenSizeHeight = UIScreen.main.bounds.size.height
//图片轮播组件
var sliderGallery : SliderGalleryController!
var tableview0 : UITableView?
var dataArray:[String]!
override func viewDidLoad() {
super.viewDidLoad()
dataArray = [String]()
for i in 1 ..< 10
{
dataArray.append("第\(i)行")
}
self.view.backgroundColor = UIColor.white
tableview0 = UITableView(frame:CGRect(x:0,y:0,width:screenSizeWidth,height:screenSizeHeight),style:.plain)
self.view.addSubview(tableview0!)
// tableview0?.rowHeight = 70
tableview0?.dataSource = self
tableview0?.delegate = self
//初始化图片轮播组件
sliderGallery = SliderGalleryController()
sliderGallery.delegate = self
sliderGallery.view.frame = CGRect(x: 0, y: 70, width: screenSizeWidth,
height: (screenSizeWidth-100)/4*3);
//将图片轮播组件添加到当前视图
self.addChildViewController(sliderGallery)
tableview0?.tableHeaderView = sliderGallery.view
//添加组件的点击事件
let tap = UITapGestureRecognizer(target: self,action: #selector(RecommendViewController.handleTapAction(_:)))
sliderGallery.view.addGestureRecognizer(tap)
}
//图片轮播组件协议方法:获取内部scrollView尺寸
func galleryScrollerViewSize() -> CGSize {
return CGSize(width: screenSizeWidth, height:(screenSizeWidth-100)/4*3)
}
//图片轮播组件协议方法:获取数据集合
func galleryDataSource() -> [String] {
return ["https://img30.360buyimg.com/cf/jfs/t5629/79/1723287874/42778/cd1e88e3/59291fabNd8dcac86.jpg",
"https://img30.360buyimg.com/cf/jfs/t5209/197/2443136947/49313/d0126d01/591ac9d1N2eea88bd.jpg",
"https://img30.360buyimg.com/cf/jfs/t5311/292/2421593131/548229/a5da55a5/591aa5daN34ee9c6c.jpg"]
}
//点击事件响应
func handleTapAction(_ tap:UITapGestureRecognizer)->Void{
//获取图片索引值
let index = sliderGallery.currentIndex
//弹出索引信息
let alertController = UIAlertController(title: "您点击的图片索引是:",message: "\(index)", preferredStyle: .alert)
let cancelAction = UIAlertAction(title: "确定", style: .cancel, handler: nil)
alertController.addAction(cancelAction)
// self.present(alertController, animated: true, completion: nil)
let DetailView = DetailViewController()
self.navigationController?.pushViewController(DetailView, animated: true)
}
// //设置每一行的内容
// func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
//
// let identify:String = "SwiftCell"
//
// var cell = tableView.dequeueReusableCell(withIdentifier: identify, for: indexPath as IndexPath)
//
// cell.textLabel?.text=dataArray![indexPath.row]
// return cell
// }
//
// //设置需要展示的行数
// func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
// return dataArray.count
// }
func numberOfSectionsInTableView(tableView: UITableView) -> Int {
return 1
}
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return dataArray.count
}
func tableView(_ tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
return 70
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
var cell = UITableViewCell()
cell.textLabel?.text=dataArray![indexPath.row]
cell.textLabel?.font = UIFont.systemFont(ofSize: 15)
cell.textLabel?.numberOfLines = 4
switch indexPath.row {
case 0:
let url0 = URL(string: "https://img30.360buyimg.com/cf/jfs/t6085/255/17447856/37963/aebe82c7/5925110fN74a29f37.jpg")
//从网络获取数据流
let data0 = try! Data(contentsOf: url0!)
//通过数据流初始化图片
let newImage0 = UIImage(data: data0)
cell.imageView?.image = newImage0
cell.textLabel?.text = "极智派智能手环\n极智派品牌以倡导科技创新为生活提升品质与便利为使命。极智派专注于智能硬件创新、制造、应用,企业拥有一流的设计、开发、生产经验,凭借创始人深耕智能制造业12年的行业沉淀,极智派品牌将一如既往的为智能爱好人士提供最优质的智能硬件产品!"
case 1:
let url1 = URL(string: "https://img30.360buyimg.com/cf/jfs/t5614/290/1161600191/77006/5cafbd9c/5923f0f8N6bcb4e5b.jpg")
//从网络获取数据流
let data1 = try! Data(contentsOf: url1!)
//通过数据流初始化图片
let newImage1 = UIImage(data: data1)
cell.imageView?.image = newImage1
cell.textLabel?.text = "4岁用到10岁的教育机器人。"
case 2:
let url2 = URL(string: "https://img30.360buyimg.com/cf/jfs/t5167/24/2587135137/94049/5832b93a/591c1a6bN005fa6a8.gif")
//从网络获取数据流
let data2 = try! Data(contentsOf: url2!)
//通过数据流初始化图片
let newImage2 = UIImage(data: data2)
cell.imageView?.image = newImage2
cell.textLabel?.text = "守住先辈的技艺,中国古刀剑\n嵩山宝剑厂,建厂于1983年,我们坚持沿袭古法工艺铸剑,现任厂长曹延朝为第十一代传人"
case 3:
let url3 = URL(string: "https://img30.360buyimg.com/cf/jfs/t5977/8/435131259/61364/57c5b0c7/5927f9b9N8b965dec.gif")
//从网络获取数据流
let data3 = try! Data(contentsOf: url3!)
//通过数据流初始化图片
let newImage3 = UIImage(data: data3)
cell.imageView?.image = newImage3
cell.textLabel?.text = "ENS智能双系统安防门锁\n南昌和旭智能科技有限公司是一家以安防监控、智能家居、指纹锁等产品智能化建设及运营为一体的高科技企业。"
case 4:
let url4 = URL(string: "https://img30.360buyimg.com/cf/jfs/t5749/188/101054691/73590/b0424a05/591d4749N579f080e.png")
//从网络获取数据流
let data4 = try! Data(contentsOf: url4!)
//通过数据流初始化图片
let newImage4 = UIImage(data: data4)
cell.imageView?.image = newImage4
cell.textLabel?.text = "Airknife陶瓷主厨刀\n以创新科技与前沿设计改变生活,Airknife正是陶瓷刀进入专业厨刀领域里程碑的一步"
default:
let image3 = UIImage(named:"IMG04.jpg")
cell.imageView?.image = image3
}
return cell
}
func tableView(_ tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
let DetailView = DetailViewController()
self.navigationController?.pushViewController(DetailView, animated: true)
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
}
}