Together项目IOS平台开发03

今天是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()
    }
}



  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值