开始学习UI基础部分,通过微信视觉效果开始学习,先弄下框架
1 获取素材
2 搭框架
- 修改app入口(由xx.storyboard进入)
-
总览(入口,登录注册就不详细介绍)
主框架 - UITabbarController 这里和微信一样使用系统的tabbar
注意问题
- tabbarVC后面必须连接UINavigationController后再接各个模块的VC,这样在设置barButtonItem,self.title的时候才能正确显示出来,因为这个时候self.navigationController才是VC视图的控制器
直接连接VC设置titile,rightBarButtonItem
// 标题的视图
let titleView = UIView(frame: CGRectMake(0, 0, 100, 44))
let titleNameLabel = UILabel(frame: CGRectMake(0, 0, 100, 44))
titleNameLabel.text = "微信(10)"
titleNameLabel.textColor = UIColor.whiteColor()
titleNameLabel.font = UIFont.systemFontOfSize(18)
titleNameLabel.textAlignment = NSTextAlignment.Center
titleView.addSubview(titleNameLabel)
// 失败
self.navigationItem.titleView = titleView;
self.navigationController?.navigationItem.titleView = titleView;
// 成功
self.navigationController?.navigationBar.topItem?.titleView = titleView;
// 失败
let rigthItem = UIBarButtonItem(image: UIImage(named: "barBtnAdd")?.imageWithRenderingMode(.AlwaysOriginal), style: .Plain, target: self, action: Selector("addBtnClicked"))
self.navigationItem.rightBarButtonItem = rigthItem
先连接UINavigationController再连接VC
设置titile,rightBarButtonItem
// 标题的视图
let titleView = UIView(frame: CGRectMake(0, 0, 100, 44))
let titleNameLabel = UILabel(frame: CGRectMake(0, 0, 100, 44))
titleNameLabel.text = "微信(10)"
titleNameLabel.textColor = UIColor.whiteColor()
titleNameLabel.font = UIFont.systemFontOfSize(18)
titleNameLabel.textAlignment = NSTextAlignment.Center
titleView.addSubview(titleNameLabel)
self.navigationItem.titleView = titleView;
// 设置导航栏颜色
self.navigationController?.navigationBar.barTintColor = UIColor(red: 39/255, green: 39/255, blue: 44/255, alpha: 1.0)
// 设置背景图片 隐藏导航栏
// self.navigationController?.navigationBar.setBackgroundImage(UIImage(), forBarMetrics: .Default)
// 设置导航栏阴影
self.navigationController?.navigationBar.shadowImage = UIImage()
// 成功
let rigthItem = UIBarButtonItem(image: UIImage(named: "barBtnAdd")?.imageWithRenderingMode(.AlwaysOriginal), style: .Plain, target: self, action: Selector("addBtnClicked"))
// 按钮向右偏移一点
let gap = UIBarButtonItem(barButtonSystemItem: .FixedSpace, target: nil, action: nil)
gap.width = -5.0
self.navigationItem.rightBarButtonItems = [gap,rigthItem]
效果图
网友评论