swift中自定義可視化控件

前言

自定義控件的時候讨越,經(jīng)常會不僅在代碼中創(chuàng)建該控件崇堵,現(xiàn)在還越來越多的在Storyboard和XIB中直接創(chuàng)建近尚,如果僅僅是為了修改某些屬性砾省,或者在運行過程中不需要修改的東西鸡岗,我們就不需要每次都拖線,修改屬性编兄。

示例1:按鈕的圓角轩性、邊框

在可視化創(chuàng)建UI的過程中,總有需要設(shè)置按鈕的圓角狠鸳、邊框的情況揣苏,在最開始,作者都是使用的 1.拖線件舵,2.修改屬性卸察。此類方法。
后來發(fā)現(xiàn),可以直接在User Defined Runtime Attributes中添加運行時修改的屬性铅祸,于是坑质,再也不需要為僅僅做展示用的一些控件拖線來修改layer了。


注:上圖中的borderColorFromUIColor和shadowColorFromUIColor用于設(shè)置邊框顏色和陰影顏色临梗,直接設(shè)置是UIColor涡扼,但對應(yīng)的屬性是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

但是后來發(fā)現(xiàn)盟庞,每次都為了添加圓角吃沪,復(fù)制一大堆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,并設(shè)置好約束荤傲,修改類別為BoardButton垮耳,就可以看到具體的屬性了。

這樣是不是很輕松呢遂黍,以后可以直接把你寫好的按鈕拿到新的項目中终佛,就可以直接設(shè)置layer的一些屬性了,你也可以添加陰影雾家,方法是一樣的铃彰。

示例2:點擊上傳圖片或照片的view

做好了上面的按鈕后,正好需要提取一個上傳照片的工具類芯咧,我就準備把它集成到一個view上面去牙捉,先說說這個view的功能:

  • 可以預(yù)先設(shè)置,view的背景顏色
  • 可以預(yù)先設(shè)置敬飒,點擊view是直接選擇照片還是直接拍照邪铲,或者彈出提示框,手動選擇无拗。(其實這個設(shè)置是為了適配公司項目的要求带到,默認的是手動選擇)
  • 可以預(yù)先設(shè)置,是否需要刪除按鈕(大小及圖片)英染,默認需要設(shè)置揽惹。點擊刪除按鈕,通過閉包傳出四康,外面持有這個view的父控件或者控制器做處理搪搏,如果沒有刪除按鈕,再次點擊圖片箭养,彈出提示框慕嚷,重新選擇圖片或刪除。
    具體實現(xiàn)代碼如下:文件名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?
    // 代碼創(chuàng)建時
    override init(frame: CGRect) {
        imageView = UIImageView()
        deleteButton = UIButton()
        super.init(frame: frame)
        addSubview(imageView)
        addSubview(deleteButton)
        addTapOnImageView()
    }
    // XIB創(chuàng)建時
    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 {//設(shè)置的默認圖的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) {
        // 上傳圖片的方法愿题,可以設(shè)置到此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!("該設(shè)備不支持相機")
            }
            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屬性

具體內(nèi)容稍后會放在GitHub并不斷優(yōu)化损俭,歡迎下載嘗試蛙奖。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市杆兵,隨后出現(xiàn)的幾起案子雁仲,更是在濱河造成了極大的恐慌,老刑警劉巖琐脏,帶你破解...
    沈念sama閱讀 217,657評論 6 505
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件攒砖,死亡現(xiàn)場離奇詭異,居然都是意外死亡日裙,警方通過查閱死者的電腦和手機吹艇,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,889評論 3 394
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來昂拂,“玉大人受神,你說我怎么就攤上這事「窈睿” “怎么了鼻听?”我有些...
    開封第一講書人閱讀 164,057評論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長养交。 經(jīng)常有香客問我精算,道長,這世上最難降的妖魔是什么碎连? 我笑而不...
    開封第一講書人閱讀 58,509評論 1 293
  • 正文 為了忘掉前任灰羽,我火速辦了婚禮,結(jié)果婚禮上鱼辙,老公的妹妹穿的比我還像新娘廉嚼。我一直安慰自己,他們只是感情好倒戏,可當我...
    茶點故事閱讀 67,562評論 6 392
  • 文/花漫 我一把揭開白布怠噪。 她就那樣靜靜地躺著,像睡著了一般杜跷。 火紅的嫁衣襯著肌膚如雪傍念。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,443評論 1 302
  • 那天葛闷,我揣著相機與錄音憋槐,去河邊找鬼。 笑死淑趾,一個胖子當著我的面吹牛阳仔,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播扣泊,決...
    沈念sama閱讀 40,251評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼近范,長吁一口氣:“原來是場噩夢啊……” “哼嘶摊!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起评矩,我...
    開封第一講書人閱讀 39,129評論 0 276
  • 序言:老撾萬榮一對情侶失蹤叶堆,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后稚照,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體蹂空,經(jīng)...
    沈念sama閱讀 45,561評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,779評論 3 335
  • 正文 我和宋清朗相戀三年果录,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片咐熙。...
    茶點故事閱讀 39,902評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡弱恒,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出棋恼,到底是詐尸還是另有隱情返弹,我是刑警寧澤,帶...
    沈念sama閱讀 35,621評論 5 345
  • 正文 年R本政府宣布爪飘,位于F島的核電站义起,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏师崎。R本人自食惡果不足惜默终,卻給世界環(huán)境...
    茶點故事閱讀 41,220評論 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望犁罩。 院中可真熱鬧齐蔽,春花似錦、人聲如沸床估。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,838評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽丐巫。三九已至谈况,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間递胧,已是汗流浹背碑韵。 一陣腳步聲響...
    開封第一講書人閱讀 32,971評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留谓着,地道東北人泼诱。 一個月前我還...
    沈念sama閱讀 48,025評論 2 370
  • 正文 我出身青樓,卻偏偏與公主長得像赊锚,于是被迫代替她去往敵國和親治筒。 傳聞我的和親對象是個殘疾皇子屉栓,可洞房花燭夜當晚...
    茶點故事閱讀 44,843評論 2 354

推薦閱讀更多精彩內(nèi)容