iOS实战【小微信】之登录界面

UIStackView

登入界面必须有头像、用户名、密码以及登入按钮等空间；用StackView把用户名、密码和登入按钮合在一起：
stackView选项在这：

image.png

并且给这三个按钮添加动画，首先选择该Stack View的Axis为Horizontal：

image.png

并添加代码，使得其在登入的时候能由水平变成竖直：

        UIView.animateWithDuration(1){
            () -> Void in
            self.loginStackView.axis = UILayoutConstraintAxis.Vertical
        }

控件圆角和描边

为了给头像导圆角，我们通过@IBDesignable告诉Interface Builder这个类可以实时渲染到界面中，但是这个类必须是UIView或者NSView的子类。通过@IBInspectable可以定义动态属性，即可在attribute inspector面板中可视化修改属性值：

@IBDesignable
class RoundImageView: UIImageView { 
    @IBInspectable var cornerRadius: CGFloat = 0 {
        didSet {
            layer.cornerRadius = cornerRadius
            layer.masksToBounds = cornerRadius > 0
        }
    } 
    @IBInspectable var borderWidth:  CGFloat = 0 {
        didSet {
            layer.borderWidth = borderWidth
        }
    }
    @IBInspectable var borderColor: UIColor? {
        didSet {
            layer.borderColor = borderColor?.CGColor
        }
    }
}

即可实现如下属性，圆角半径、外框以及颜色：

image.png

登入屏幕滚动

我们用RCAnimatedImagesView实现登入界面背景滚动
首先定义背景页面为RCAnimatedImagesView：

    @IBOutlet weak var wallpaperImageView: RCAnimatedImagesView!
    override func viewDidLoad() {
        super.viewDidLoad()
        self.wallpaperImageView.delegate = self   
        self.wallpaperImageView.startAnimating()  
    }

并实现其代理方法：

    func animatedImagesNumberOfImages(animatedImagesView: RCAnimatedImagesView!) -> UInt {
        return 3
    }
    func animatedImagesView(animatedImagesView: RCAnimatedImagesView!, imageAtIndex index: UInt) -> UIImage! {
        return UIImage(named: "image\(index + 1)")
    }