今天是5月18日,又到了代码提交日期。今天要完成的是一个主用户界面的设计以及代码实现。
在这里,我的界面主要包含以下几个要素,用户的头像(圆形显示图片)、用户的昵称;“项目的发起”、“我的团队”、“我的收藏”(用户之前在浏览项目的时候可以点击收藏,并在“我的收藏”中查看)、“个人资料”、“设置”。这些菜单项现在没有设计关联到他们具体的子菜单,但是在不久我将会完成这个部分。除了这些元素,我还给这个界面添加了一个小的背景,使整体显示变的美观。
在代码的实现部分,我说明以下几点。首先,圆形头像框使用了和之前完成的登录界面的圆形头像框一样的技术,如果想要查看具体的内容,请阅读我的上一篇博客————《Together项目IOS平台开发02》。
在圆形头像框下面的昵称栏,我使用了一个简单的UITextField。这个地方注意到他的排版位置就可以了。
在下面是一个“发起项目”的按钮,我使用率UIButton。同时,我用了一张我自己设计的png图片来替换了原来的button的样式。这张png保存在assets文件夹中。注意图片的格式一定要使用png,如果你想让你的图片成为一个背景透明的素材的话。
其他的部分我使用了UITableView的模版代码,注意tableview的方法重写问题。我添加了2个分区,每个分区显示两个cell;分别是“我的团队”、“我的收藏”,“个人资料”、“设置”。这个地方我将他的额可滑动属性关闭,以免产生拖拽过程中的界面显示问题。TableView样式上采用了grouped的风格。在后期这个地方,我可能在每个cell前面添加一个图标是的用户的交互更加有效,界面的显示更加美观。
以上是基本的注意点,其他均为一般的代码,注意调试即可。下面是整个界面的效果图!
以下是整体的代码
//
// UserViewController.swift
// FinalTest
//
// Created by 沈力同 on 2017/5/10.
// Copyright © 2017年 沈力同. All rights reserved.
//
import UIKit
class UserViewController: UIViewController, UITableViewDelegate, UITableViewDataSource{
let screenSizeWidth = UIScreen.main.bounds.size.width
let screenSizeHeight = UIScreen.main.bounds.size.height
var downView:UIView!
var tableView:UITableView?
var allnames:Dictionary<Int, [String]>?
var adHeaders:[String]?
override func viewDidLoad() {
super.viewDidLoad()
self.view.backgroundColor = UIColor.white
//背景图片
let imageView = UIImageView(image:UIImage(named:"IMG03.jpg"))
imageView.frame = CGRect(x: 0, y: 0, width: screenSizeWidth, height: screenSizeHeight/2-50)
self.view.addSubview(imageView)
downView = UIView(frame:CGRect(x: 0, y: screenSizeHeight/2-50, width: screenSizeWidth, height: screenSizeHeight/3*2))
downView.backgroundColor = UIColor.white
downView.alpha = 0.85
imageView.addSubview(downView)
//圆形图片头像显示
let image_U = UIImageView(image:UIImage(named:"IMG01.jpg"))
let round_radius:CGFloat = 40
image_U.frame = CGRect(x: screenSizeWidth/2-round_radius, y: 90, width: round_radius*2, height: round_radius*2)
image_U.layer.cornerRadius = round_radius
image_U.layer.masksToBounds = true
self.view.addSubview(image_U)
//添加一个昵称标签
let label01 = UILabel(frame:CGRect(x:screenSizeWidth/2-100, y:180, width:200, height:40))
label01.text = "SHENLITONG"
label01.textAlignment = .center//文字居中
label01.textColor = UIColor.white
self.view.addSubview(label01);
//“发起项目”按钮
let button01 = UIButton(type: .system)
button01.frame = CGRect(x:screenSizeWidth/2-60, y:220, width:120, height:40)
let iconImage01 = UIImage(named:"button_creat")?.withRenderingMode(.alwaysOriginal)
button01.setImage(iconImage01,for:.normal) //设置图标
button01.adjustsImageWhenHighlighted=false //使触摸模式下按钮也不会变暗(半透明)
button01.adjustsImageWhenDisabled=false //使禁用模式下按钮也不会变暗(半透明)
self.view.addSubview(button01);
//初始化数据,这一次数据,我们放在属性列表文件里
self.allnames = [
0:[String]([
"我的团队",
"我的收藏"]),
1:[String]([
"个人资料",
"设置"])
];
self.adHeaders = [
"常见 UIKit 控件!",
"高级 UIKit 控件!"
]
//创建表视图
// self.tableView = UITableView(frame:self.view.frame, style:.grouped)
self.tableView = UITableView(frame:CGRect(x:0, y:screenSizeHeight/2-50, width:screenSizeWidth, height:screenSizeHeight), style:.grouped)
self.tableView!.delegate = self
self.tableView!.dataSource = self
self.tableView!.isScrollEnabled = false
//创建一个重用的单元格
self.tableView!.register(UITableViewCell.self,
forCellReuseIdentifier: "SwiftCell")
self.view.addSubview(self.tableView!)
}
//在本例中,有2个分区
func numberOfSections(in tableView: UITableView) -> Int {
return 2;
}
//返回表格行数(也就是返回控件数)
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
let data = self.allnames?[section]
return data!.count
}
// UITableViewDataSource协议中的方法,该方法的返回值决定指定分区的头部
func tableView(_ tableView: UITableView, titleForHeaderInSection section: Int)
-> String? {
// return self.adHeaders?[section]
return nil
}
// UITableViewDataSource协议中的方法,该方法的返回值决定指定分区的尾部
func tableView(_ tableView:UITableView, titleForFooterInSection section:Int)->String? {
let data = self.allnames?[section]
// return "有\(data!.count)个控件"
return nil
}
//创建各单元显示内容(创建参数indexPath指定的单元)
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath)
-> UITableViewCell {
//为了提供表格显示性能,已创建完成的单元需重复使用
let identify:String = "SwiftCell"
//同一形式的单元格重复使用,在声明时已注册
let cell = tableView.dequeueReusableCell(
withIdentifier: identify, for: indexPath)
cell.accessoryType = .disclosureIndicator
let secno = indexPath.section
var data = self.allnames?[secno]
cell.textLabel?.text = data![indexPath.row]
return cell
}
// UITableViewDelegate 方法,处理列表项的选中事件
func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
self.tableView!.deselectRow(at: indexPath, animated: true)
let itemString = self.allnames![indexPath.section]![indexPath.row]
let alertController = UIAlertController(title: "提示!",
message: "你选中了【\(itemString)】",
preferredStyle: .alert)
let cancelAction = UIAlertAction(title: "确定", style: .cancel, handler: nil)
alertController.addAction(cancelAction)
self.present(alertController, animated: true, completion: nil)
}
func click(){
let LogView = LogViewController()
self.navigationController?.pushViewController(LogView, animated: true)
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
}
}