Swift进阶_UI(WeChat1)

开始学习UI基础部分,通过微信视觉效果开始学习,先弄下框架

1 获取素材

网上很少教程在这就不细说了
链接1
链接2

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]
效果图
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • //设置尺寸为屏幕尺寸的时候self.window = [[UIWindow alloc] initWithFra...
    LuckTime阅读 832评论 0 0
  • 1,Search Bar 怎样去掉背景的颜色(storyboard里只能设置background颜色,可是发现cl...
    以德扶人阅读 2,426评论 2 50
  • { 11、核心动画 需要签协议,但是系统帮签好 一、CABasicAnimation 1、创建基础动画对象 CAB...
    CYC666阅读 1,585评论 2 4
  • “……有些鸟是不能关在笼子里的,它们的羽毛太光亮。当它们飞走的时候,你会觉得把它们关起来是种罪恶……” 安迪就是这...
    向上有阳光阅读 520评论 1 1
  • 合欢浓郁, 一路风尘仆仆留。 皂云欲雨, 风吹杨柳泪。 怎奈萧瑟, 无意芳华坠。 雁已归, 幽香丝缕, 人间斗芳菲...
    乐陵君阅读 523评论 0 1