前言
自定義控件的時候，經常會不僅在代碼中創建該控件，現在還越來越多的在Storyboard和XIB中直接創建，如果僅僅是為了修改某些屬性，或者在運行過程中不需要修改的東西，我們就不需要每次都拖線，修改屬性。
示例1：按鈕的圓角、邊框
在可視化創建UI的過程中，總有需要設置按鈕的圓角、邊框的情況，在最開始，作者都是使用的 1.拖線，2.修改屬性。此類方法。
后來發現,可以直接在User Defined Runtime Attributes中添加運行時修改的屬性，于是，再也不需要為僅僅做展示用的一些控件拖線來修改layer了。
注：上圖中的borderColorFromUIColor和shadowColorFromUIColor用于設置邊框顏色和陰影顏色，直接設置是UIColor，但對應的屬性是CGColor，所以需要為CALayer添加分類：
#import <QuartzCore/QuartzCore.h>
#import <UIKit/UIKit.h>
@interface CALayer (Addition)
@property(nonatomic, strong) UIColor *borderColorFromUIColor;
@property(nonatomic, strong) UIColor *shadowColorFromUIColor;
- (void)setBorderColorFromUIColor:(UIColor *)color;
- (void)setShadowColorFromUIColor:(UIColor *)color;
@end
#import "CALayer+Addition.h"
#import <objc/runtime.h>
@implementation CALayer (Addition)
//static const void *borderColorFromUIColorKey = &borderColorFromUIColorKey;
//@dynamic borderColorFromUIColor;
- (UIColor *)borderColorFromUIColor {
return objc_getAssociatedObject(self, @selector(borderColorFromUIColor));
}
-(void)setBorderColorFromUIColor:(UIColor *)color
{
objc_setAssociatedObject(self, @selector(borderColorFromUIColor), color, OBJC_ASSOCIATION_RETAIN_NONATOMIC);
[self setBorderColorFromUI:self.borderColorFromUIColor];
}
- (void)setBorderColorFromUI:(UIColor *)color
{
self.borderColor = color.CGColor;
}
- (UIColor *)shadowColorFromUIColor {
return objc_getAssociatedObject(self, @selector(shadowColorFromUIColor));
}
-(void)setShadowColorFromUIColor:(UIColor *)color
{
objc_setAssociatedObject(self, @selector(shadowColorFromUIColor), color, OBJC_ASSOCIATION_RETAIN_NONATOMIC);
[self setShadowColorFromUI:self.borderColorFromUIColor];
}
- (void)setShadowColorFromUI:(UIColor *)color
{
self.shadowColor = color.CGColor;
}
@end
但是后來發現，每次都為了添加圓角，復制一大堆Key Path：
- layer.cornerRadius
- layer.borderWidth
- layer.borderColorFromUIColor
- layer.masksToBounds
然后修改值，不僅手酸，還不能直接XIB文件中看到效果，必須運行起來查看。
于是就找到了新的方法：IB_DESIGNABLE / IBInspectable，不過目前只能用于UIView的子類
具體方法如下：
import UIKit
//@IBDesignable告訴編譯器，此類可以被nib識別使用
@IBDesignable class BoardButton: UIButton {
//@IBInspectable告訴編譯器,這個屬性是可視化的
@IBInspectable var borderWidth : CGFloat = 0{
didSet{
layer.borderWidth = borderWidth
}
}
@IBInspectable var borderColor : UIColor = UIColor.clear{
didSet{
layer.borderColor = borderColor.cgColor
}
}
@IBInspectable var cornerRadius : CGFloat = 0{
didSet{
layer.cornerRadius = cornerRadius
}
}
@IBInspectable var masksToBounds : Bool = false{
didSet{
layer.masksToBounds = masksToBounds
}
}
}
這樣直接在XIB文件中添加一個UIButton，并設置好約束，修改類別為BoardButton，就可以看到具體的屬性了。
這樣是不是很輕松呢，以后可以直接把你寫好的按鈕拿到新的項目中，就可以直接設置layer的一些屬性了，你也可以添加陰影，方法是一樣的。
示例2：點擊上傳圖片或照片的view
做好了上面的按鈕后，正好需要提取一個上傳照片的工具類，我就準備把它集成到一個view上面去，先說說這個view的功能：
- 可以預先設置，view的背景顏色
- 可以預先設置，點擊view是直接選擇照片還是直接拍照，或者彈出提示框，手動選擇。（其實這個設置是為了適配公司項目的要求，默認的是手動選擇）
- 可以預先設置，是否需要刪除按鈕（大小及圖片），默認需要設置。點擊刪除按鈕，通過閉包傳出，外面持有這個view的父控件或者控制器做處理，如果沒有刪除按鈕，再次點擊圖片，彈出提示框，重新選擇圖片或刪除。
具體實現代碼如下：文件名AddImageView.swift
import UIKit
import SVProgressHUD
@IBDesignable class AddImageView: UIView ,UIActionSheetDelegate{
// 成功選擇了一張圖片
var didSelectedPicture : ((_ imageUrl: String) -> ())?
// 選擇圖片失敗
var failedSelectedPicture : ((_ info: String) -> ())?
// 選擇了刪除圖片
var didClickDeletePicture : (() -> ())?
// 彈出視圖的viewController
var presentViewController : UIViewController? = {
return UIApplication.shared.keyWindow?.rootViewController
}()
//刪除照片的模式,false:通過點擊圖片刪除,true:通過刪除按鈕刪除
@IBInspectable var bgColor : UIColor = UIColor.white {
didSet {
backgroundColor = bgColor
}
}
//選擇相冊的模式，如果都選擇FALSE，則都改為TRUE
@IBInspectable var fromPhoto : Bool = true {
didSet {
}
}
//選擇拍照的模式，如果都選擇FALSE，則都改為TRUE
@IBInspectable var fromCamera : Bool = true {
didSet {
}
}
//刪除照片的模式,false:通過點擊圖片刪除,true:通過刪除按鈕刪除
@IBInspectable var delbtnBtntype : Bool = false {
didSet {
}
}
//刪除按鈕圖片
@IBInspectable var delbtnImage : UIImage? {
didSet {
}
}
//刪除按鈕size
@IBInspectable var delbtnSize : CGSize = CGSize(width: 10, height:10) {
didSet {
}
}
// 默認背景圖片
@IBInspectable var defaultImage : UIImage?{
didSet{
imageView.image = defaultImage
}
}
//默認背景圖片的size
@IBInspectable var defaultImageSize : CGSize = CGSize(width: 10, height:10) {
didSet {
}
}
//選中的照片
var selectedImage : UIImage? {
didSet{
imageView.contentMode = .scaleAspectFit
imageView.image = selectedImage
}
}
// 刪除按鈕
var deleteButton : UIButton
// 整個ImageView
var imageView : UIImageView
// 圖片選擇器界面
var imagePickerController: UIImagePickerController?
// 代碼創建時
override init(frame: CGRect) {
imageView = UIImageView()
deleteButton = UIButton()
super.init(frame: frame)
addSubview(imageView)
addSubview(deleteButton)
addTapOnImageView()
}
// XIB創建時
required init?(coder aDecoder: NSCoder) {
imageView = UIImageView()
deleteButton = UIButton()
super.init(coder: aDecoder)
addSubview(imageView)
addSubview(deleteButton)
addTapOnImageView()
}
func addTapOnImageView() {
let tap = UITapGestureRecognizer(target: self, action: #selector(tapImageView))
imageView.isUserInteractionEnabled = true
imageView.addGestureRecognizer(tap)
}
@objc private func tapImageView() {
if fromPhoto == true && fromCamera == false {
if selectedImage == nil {//初次選擇照片
addPhonto(type:.photoLibrary)
}else{
let alert = UIActionSheet.init(title: nil, delegate: self, cancelButtonTitle: "取消", destructiveButtonTitle: nil, otherButtonTitles: "重新選擇","刪除")
alert.tag = 103
if presentViewController != nil {
alert.show(in: (presentViewController?.view)!)
}
}
}else if fromPhoto == false && fromCamera == true {
if selectedImage == nil {//初次選擇照片
addPhonto(type:.camera)
}else{
let alert = UIActionSheet.init(title: nil, delegate: self, cancelButtonTitle: "取消", destructiveButtonTitle: nil, otherButtonTitles: "重新拍照","刪除")
alert.tag = 102
if presentViewController != nil {
alert.show(in: (presentViewController?.view)!)
}
}
}else{
let alert = UIActionSheet.init(title: nil, delegate: self, cancelButtonTitle: "取消", destructiveButtonTitle: nil, otherButtonTitles: "相冊","相機")
alert.tag = 101
if presentViewController != nil {
alert.show(in: (presentViewController?.view)!)
}
}
}
func actionSheet(_ actionSheet: UIActionSheet, clickedButtonAt buttonIndex: Int) {
if actionSheet.tag == 101 {
switch buttonIndex {
case 1:
addPhonto(type:.photoLibrary)
case 2:
addPhonto(type:.camera)
default: break
}
}else if actionSheet.tag == 102 {
switch buttonIndex {
case 1:
addPhonto(type:.camera)
case 2:
deletePhoto()
default: break
}
}else if actionSheet.tag == 103 {
switch buttonIndex {
case 1:
addPhonto(type:.photoLibrary)
case 2:
deletePhoto()
default: break
}
}
}
func layoutImageViewAndButton() {
var width_background : CGFloat = 0.0
var height_background : CGFloat = 0.0
var y_background : CGFloat = 0.0
if delbtnBtntype == false{//如果是點擊圖片的方式刪除圖片,沒有刪除按鈕
width_background = width
height_background = height
deleteButton.removeFromSuperview()
}else{//如果是點擊刪除按鈕的方式刪除圖片
y_background = delbtnSize.height / CGFloat(2.0)
width_background = width - delbtnSize.width / 2.0
height_background = height - delbtnSize.height / 2.0
deleteButton.frame = CGRect(origin: CGPoint(x: width_background, y: 0), size: delbtnSize)
deleteButton.addTarget(self, action: #selector(didClickDeleteBtn), for: .touchUpInside)
deleteButton.setBackgroundImage(delbtnImage, for: .normal)
backgroundColor = UIColor.white
let backView = UIView.init(frame: CGRect(x: 0.0, y: y_background, width: width_background, height: height_background))
backView.backgroundColor = bgColor
insertSubview(backView, at: 0)
}
imageView.frame = CGRect(x: 0.0, y: y_background, width: width_background, height: height_background)
if selectedImage == nil{//沒有選中的圖片了，展示默認圖
if defaultImage != nil {//有默認圖
if (defaultImageSize.width) <= width_background && (defaultImageSize.height) <= height_background {//設置的默認圖的size比自身size小
UIGraphicsBeginImageContextWithOptions(defaultImageSize,false,UIScreen.main.scale)
defaultImage?.draw(in: CGRect(x:0, y:0, width:defaultImageSize.width, height:defaultImageSize.height))
let reSizeImage:UIImage = UIGraphicsGetImageFromCurrentImageContext()!
UIGraphicsEndImageContext();
imageView.contentMode = .center
imageView.image = reSizeImage
}else{
imageView.contentMode = .scaleAspectFit
imageView.image = defaultImage
}
}
}else{//有選中的圖片了，不展示默認圖
imageView.contentMode = .scaleAspectFit
}
}
@objc private func didClickDeleteBtn() {
deletePhoto()
}
override func layoutSubviews() {
super.layoutSubviews()
layoutImageViewAndButton()
}
}
extension AddImageView {
func deletePhoto() {
selectedImage = nil
layoutImageViewAndButton()
if didClickDeletePicture != nil {
didClickDeletePicture!()
}
}
func upLoadSeletecdImage(image: UIImage) {
// 上傳圖片的方法，可以設置到此view中
NetworkTool.sharedInstance.uploadImage(image: selectedImage!, progressing:{(progress:Double)in
SVProgressHUD.showProgress(Float(progress))
},success: { (result, isSuccess) in
SVProgressHUD.dismiss()
if isSuccess{
if let returnUrl = result["body"]["picurl"]["returnUrl"].string {
if self.didSelectedPicture != nil{
self.didSelectedPicture!(returnUrl)
}
}else{
if self.failedSelectedPicture != nil{
self.failedSelectedPicture!("上傳圖片失敗")
}
}
}
}) { (error) in
SVProgressHUD.dismiss()
}
}
}
extension AddImageView: UIImagePickerControllerDelegate, UINavigationControllerDelegate {
//MARK:- present選擇照片
func addPhonto(type :UIImagePickerControllerSourceType) {
if UIImagePickerController.isSourceTypeAvailable(type) == false {
if failedSelectedPicture != nil {
failedSelectedPicture!("該設備不支持相機")
}
return
}
imagePickerController = UIImagePickerController()
imagePickerController?.delegate = self
imagePickerController?.sourceType = type
imagePickerController?.allowsEditing = true
// 打開圖片選擇器
presentViewController?.present(imagePickerController!, animated: true, completion: nil)
}
//MARK: 返回照片信息
func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [String : Any]) {
presentViewController?.dismiss(animated: true, completion: nil)
selectedImage = info[UIImagePickerControllerEditedImage] as? UIImage
if selectedImage != nil{
upLoadSeletecdImage(image: selectedImage!)
}
if failedSelectedPicture != nil && selectedImage == nil {
failedSelectedPicture!("未獲取到圖片信息")
}
}
}
AddimageView屬性
具體內容稍后會放在GitHub并不斷優化，歡迎下載嘗試。
