UI基础

作者: 夜雨聲煩_ | 来源:发表于2018-11-07 10:41 被阅读0次

    NavigationBar

    基本设置
    • Appdelegate中定义全局
      //设置背景色
      UINavigationBar.appearance().barTintColor = UIColor.orange
      //设置前景色(实际为下一页面返回此页面左上角tint颜色)
      UINavigationBar.appearance().tintColor = UIColor.white
      //设置标题字体及颜色
      if let barFont = UIFont(name: "Avenir-Light", size: 24) {
          UINavigationBar.appearance().titleTextAttributes = [
              NSAttributedString.Key.font : barFont,
              NSAttributedString.Key.foregroundColor : UIColor.blue
          ]
      }
      
    • 设置返回按钮样式,注意在显示该按钮的前一个页面定义。
      self.navigationItem.backBarButtonItem = UIBarButtonItem(title: "", style: .plain, target: nil, action: nil)
      
    • 下面tableview滑动时隐藏导航栏
      设置hide bar on swip
    • 更改状态栏颜色
      有导航栏情况下
      override func viewDidAppear(_ animated: Bool) {
          self.navigationController?.navigationBar.barStyle = .black
      }
      
      无导航栏情况下
      override var preferredStatusBarStyle: UIStatusBarStyle {
          return .lightContent
      }
      
      全局方法加在appdelegagte
      UIApplication.shared.statusBarStyle = .lightContent
      
    遮挡底部视图的情况

    设置under top bars 属性为no
    或者配合其中控件使用自适应高度属性
    webView.autoresizingMask = [.flexibleHeight]

    配合StoryBoard转场传值
    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        if segue.identifier == "showDetail" {
            let dest = segue.destination as! DetailTableViewController
            dest.area = self.areas?[self.tableView.indexPathForSelectedRow!.row]
        }
    }![245d3a2e55f700e16b56434ecd09c81.png](https://img.haomeiwen.com/i5687317/4cb295dfef817461.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    
    

    注意:关于segue的两个属性。destination为目的,表示将要跳转的页面。source为源,表示来自的页面。注意两者区别。

    配合StoryBoard反向转场

    关联反向转场方法。在此方法中执行转场回到源视图时执行的方法,以及传值。类似于OC中点击下一页面按钮在源视图中的block回调。

    @IBAction func closeReview(segue:UIStoryboardSegue) {
    
    }
    

    StoryBoard

    拆分与引用

    选中想要拆分的SB
    editor->refactor to storyboard
    使用新名字来创建新的SB

    额外视图

    将控件例如spinner拖入顶部exit左侧,然后与对应控制器相关联。利用代码控制spinner的出现及隐藏等行为。

    图片

    虚化效果
    //创建虚化效果:light,dark等不同亮度虚化特效
    let effect = UIBlurEffect(style: .light)
    //使用u虚化效果创建特效视图
    let effectView = UIVisualEffectView(effect: effect)
    //指定特效视图尺寸
    effectView.frame = view.frame
    //将特效视图覆盖在原视图上,实现虚化效果
    bgImageView.addSubview(effectView)
    

    按钮

    背景色及前景色

    原图为透明黑色图案。
    设置背景色(backgroundColor)红色,设置前景色(tintColor),设置按钮样式(type)为system,效果为:

    image.png
    注意systemtintColor搭配使用
    Xib中指定layer.cornerRadius来在运行时动态设定圆角。
    image.png

    Xib约束

    • 使用stackView将多个控件加入堆视图同时约束
    • stackView中使用Content Hugging Priority调整约束优先级
    • stackView内使用spacing调整内部控件间隔

    TableView

    • cell.accessoryType设定cell右侧系统自带标识(基本对号等)
    • 设置单元格右侧滑动出现的视图
      - (nullable NSArray<UITableViewRowAction *> *)tableView:(UITableView *)tableView editActionsForRowAtIndexPath:(NSIndexPath *)indexPath
      定义UITableViewRowAction,实现点击回调,并返回数组。
    • 滑动到指定行
      self.tableView.scrollToRow(at: NSIndexPath(row: 0, section: 0) as IndexPath, at: .top, animated: true)
    • 动画删除指定单元格
      tableView.deleteRows(at: [indexPath], with: .automatic)
    • 使用动态行高
      tableView.estimatedRowHeight = 40
      tableView.rowHeight = UITableView.automaticDimension
      
      注意设定行内控件距上下约束。同时注意设定内部label行数为0

    动画

    震荡动画
    @available(iOS 7.0, *)
    //usingSpringWithDamping: 震荡时间
    //initialSpringVelocity:初速度
    open class func animate(withDuration duration: TimeInterval, delay: TimeInterval, usingSpringWithDamping dampingRatio: CGFloat, initialSpringVelocity velocity: CGFloat, options: UIView.AnimationOptions = [], animations: @escaping () -> Void, completion: ((Bool) -> Void)? = nil)
    
    组合动画

    使用concatenating组合多个CGAffineTransform

    //位移+放大
    let startPosition = CGAffineTransform(translationX: 0, y: 500)
    let startScale = CGAffineTransform(scaleX: 0, y: 0)
    reviewStackView.transform = startScale.concatenating(startPosition)
    
    UIView.animate(withDuration: 1, delay: 0, usingSpringWithDamping: 0.8, initialSpringVelocity: 0.5, options: [], animations: {
        let endPosition = CGAffineTransform(translationX: 0, y: 0)
        let endScale = CGAffineTransform.identity
        self.reviewStackView.transform = endScale.concatenating(endPosition)
        
    }, completion: nil)
    

    注意:放大组合位移有效果,反之没效果。可能是bug

    其他

    • 使用headline样式字体,适配iOS设置中动态放大字体。
    • 多个按钮时合理使用tag重复利用一个方法。

    Swift与OC混编

    在导入OC第三方库的时候,新建一个.m的OC文件,系统会自动提示是否使用桥接。选择使用后系统会直接创建桥接文件,创建好后删除刚刚自己创建的.m文件。
    然后在系统的桥接文件中导入#import <AVOSCloud/AVOSCloud.h>
    编译成功即可。
    如果提示找不到
    build Seting 搜索:User Header Search Paths
    添加:${SRCROOT} , 选择Recursive
    桥接文件中改为#import "AVOSCloud/AVOSCloud.h"

    LeanCloud

    使用LeanCloud进行云端网络配置和操作。

    1. 授权
      授权成功会打印lean cloud logo

    相关文章

      网友评论

          本文标题:UI基础

          本文链接:https://www.haomeiwen.com/subject/yxmmxqtx.html