بسم الله الرحمن الرحیم

یه وقتایی وقتی میخوایم مزیت های استفاده از زبان نیتیو رو بیان کنیم میگیم میتونیم توش هرکاری بکنیم مثلا اگر گرافیستمون یه ویوی جدیدی زد که هیچ کجا نبود خودمون میتونیم بسازیم

اصلا یه سوال اون ویو هایی هم که توی گیتهاب هست رو کی میزنه؟ بالاخره یکی پیدا شده و یه طرحی رو اجرایی کرده

شما هیچوقت نمیتونید با جاوا اسکریپت توی ری اکت نیتیو یه ویو بزنید تنها کار اینه که برید با جاوا برای اندرویدش یه ویو بزنید و بعد توی سویفت هم اون ویو رو برای ای او اس پیاده کنید و بعد ازشون استفاده کنید

پس چه برنامه نویس ای او اس به زبان سویفت باشید چه ری اکت نیتیو کار٬ این پست به دردتون میخوره

خب اول میخواستم روند طراحی یه ویو توی جاوا برای اندروید رو بگم اما منصرف شدم. پس مستقیم میرم سراغ سویفت

توی ای او اس هم مثل اندروید شما میتونید به دو شیوه کاستوم ویوی خودتون رو بسازید.

۱. با استفاده از یک فایل XIB

فایل xib چی هست؟ یه ویو کنترلر رو فرض کنید که توی یه استوری برد ساختید حالا اگر اون ویو کنترلر رو بتونید از استوری برد بیارید بیرون و توی یه فایل جدا بریزید که فقط همون یه دونه ویو کنترلر توش باشه بهش میگن فایل xib اما یه تفاوت کوچیک داره اونم اینه که ویو کنترلر یه سایز خاص و مشخصی داره و شما از پایین  interface builder میتونستید سایزشو متناسب با گوشی های ایفون تنظیم کنید اما توی فایل های xib شما سایز مشخصی ندارید پس باید ویوهایی مثل label رو که توش میکشیدیه جوری تنظیم کنید که اگر سایز اون ویو بزرگ یا کوچیک بشه مشکلی پیش نیاد (اگر متوجه نشدید کافیه ادامه بدید تا باهم یه فایل xib ایجاد کنیم و ببینیم منظورم چیه)

برای ساخت یه فایل xib میتونید روی هرفولدری که توی xcode ساختید راست کلیک کنید و گزینه New File رو بزنید و بعد از بین اون آیتم ها View رو پیدا کنید و اسمی انتخاب کنید و create رو بزنید تا فایل XIB ساخته بشه. توی این روش ما از ویو های خود IOS استفاده میکنیم یعنی مثلا یه ویو میسازیم که توی اون ویو دوتا لیبل و یه دکمه باشه و همشو باهم یه ویو میکنیم که بتونیم راحت تر ازش استفاده کنیم و از این قبیل کاراها

بعد از ساخت فایل XIB باید ویو هایی که میخواید استفاده کنید رو توی اون بسازید یعنی باید مثلا یه لیبل و یه دکمه رو بکشید توی صفحه به شکل زیر توجه کنید:

یه فایل .swift هم بسازید برای این کار به سادگی روی یه فولدر راست کلیک کنید و همون نیو فایل رو بزنید اینبار روی اولین آیتم که نوشته Cocoa Touch Class کلیک کنید و همون اسمی رو بدید که به اون xib داده بودید

حالا وقتی ساخته شد باید یه کدی مثل کد زیر رو توش بریزید:

تابع اولی که بدون required هست هر زمان که شما این ویو رو توی برنامه نویسی بسازید صدا زده میشه اما تابع دومی هرموقع که ای او اس دوباره نیاز به ویو شما داشت مثلا کاربر اسکرول کرد و به پایین صفحه رفت ولی باز اومد بالای صفحه و ای او اس دوباره خواست ویو شما رو نشون بده اینبار از اون تابع دوم استفاده میکنه پس باید توی هردو تابع کدهای یکسانی رو بنویسیم اما بهتره بیایم یه تابع بنویسیم و توی هردو فراخوانی کنیم

به فایل xib برگردید و روی File's Owner کلیک کنید و اسم این کلاس رو بهش بدید تا بهم وصل بشن

لازم به توضیحه که توی این اموزش شما باید لیبل و اون ویوی رنگی پشتش رو به این فایل بکشید یعنی outlet بسازید تا بتونید ازشون استفاده کنید (که توی کدهای بالا اینکار بدون توضیح انجام شده و فرض رو بر این گذاشتیم که شما خودتون اینکار رو بلدید)

در نهایت برای استفاده میتونید وارد استوری برد بشید و یه UIView روی یه ویوکنترلر بکشید و کلاسش رو به کلاسی که ساختید تغییر بدید که در این صورت ویوی شما رو نشون میده

توجه: شما همچنین میتوانید کلاسی بسازید و از UIButton ارث بری کنید و در نهایت توی توابع مربوطه رنگ و گردی دور و متن رو تغییر بدید یا به سلیقه خودتون هر جوری دوست دارید بسازید و الزامی نداره که همش از UIView ارث بری کنید

۲. کاستوم ویویی با قابلیت گرد شدن سایه خوردن و... بسازید

برای این کار شبیه بالا عمل میکنیم با این تفاوت که دیگه فایل xib نمیسازیم و توی همون کلاس یه کدی شبیه زیر میریزیم:

@IBDesignable open class ANCustomView: UIView {
    
    /// When positive, the background of the layer will be drawn with rounded corners. Also effects the mask generated by the `masksToBounds' property. Defaults to zero. Animatable.
    @IBInspectable var cornerRadius: Double {
        get {
            return Double(self.layer.cornerRadius)
        }
        set {
            self.layer.cornerRadius = CGFloat(newValue)
        }
    }
    
    /// The width of the layer's border, inset from the layer bounds. The border is composited above the layer's content and sublayers and includes the effects of the `cornerRadius' property. Defaults to zero. Animatable.
    @IBInspectable var borderWidth: Double {
        get {
            return Double(self.layer.borderWidth)
        }
        set {
            self.layer.borderWidth = CGFloat(newValue)
        }
    }
    
    /// The color of the layer's border. Defaults to opaque black. Colors created from tiled patterns are supported. Animatable.
    @IBInspectable var borderColor: UIColor? {
        get {
            return UIColor(cgColor: self.layer.borderColor!)
        }
        set {
            self.layer.borderColor = newValue?.cgColor
        }
    }
    
    /// The color of the shadow. Defaults to opaque black. Colors created from patterns are currently NOT supported. Animatable.
    @IBInspectable var shadowColor: UIColor? {
        get {
            return UIColor(cgColor: self.layer.shadowColor!)
        }
        set {
            self.layer.shadowColor = newValue?.cgColor
        }
    }
    
    /// The opacity of the shadow. Defaults to 0. Specifying a value outside the [0,1] range will give undefined results. Animatable.
    @IBInspectable var shadowOpacity: Float {
        get {
            return self.layer.shadowOpacity
        }
        set {
            self.layer.shadowOpacity = newValue
        }
    }
    
    /// The shadow offset. Defaults to (0, -3). Animatable.
    @IBInspectable var shadowOffset: CGSize {
        get {
            return self.layer.shadowOffset
        }
        set {
            self.layer.shadowOffset = newValue
        }
    }
    
    /// The blur radius used to create the shadow. Defaults to 3. Animatable.
    @IBInspectable var shadowRadius: Double {
        get {
            return Double(self.layer.shadowRadius)
        }
        set {
            self.layer.shadowRadius = CGFloat(newValue)
        }
    }
}

لازم به توضیح دو مورد است

@IBDesignable و @IBInspectable چیست؟

۱. IBDesignable: کلاسی که قابلیت رسم شدن رو داشته باشه اگه به قبل از اسم کلاس اینو اضافه کنید و توی اینترفیس بیلدر از اون استفاده کنید ایکس کد براتون شکل اون ویو رو رسم میکنه

۲. IBInspectable: شاید تا حالا از لایبراری هایی استفاده کرده باشید که یه سری فیلد های مخصوص به قسمت Attrbute Inspector اضافه میکنن و حالا میتونید بفهمید چجوری

کافیه به قبل از اسم متغییر هاتون @IBInspectable رو اضافه کنید تا توی Attrbute Inspector بتونید به اونا مقدار بدید (توی کد بالا میتونید ببینیدشون)

نکته: حتما برای متغییرهاتون یه setter بنویسید که هر موقع تغییر کنن کاری که باید انجام بدن رو انجام بدن مثلا وقتی متنی تغییر کردید از اول رسم بشه یا اگه رنگی عوض شد اون رنگ اعمال بشه و...

برای نوشتن setter میتونید مثل بالا از set و get استفاده کنید که بهتون یه newValue میده یا اینکه از didSet استفاده کنید و از مقدار خود متغییر (یعنی اسم همون متغییری که توش هستید رو بنویسید) استفاده کنید (تفاوت didSet  و Set در این هست که وقتی از set و get برای یه متغییر استفاده کردید دیگه اون متغییر مثل یه تابع عمل میکنه و در عمل هیچ مقداری رو ذخیره نمیکنه یعنی شما توی set یه newValue دارید که اگر بعدا برای get نیازش داشتید باید اونو توی یه متغییر ذخیره کنید و توی get اونو پس بدید اما توی didSet واقعا مقداری که داده میشه توی متغییر ذخیره میشه و بعدش تابع didSet صدا زده میشه و شما میتونید توی همین didSet به مقدار متغییر دسترسی داشته باشید)

خب اینم از این.

انشالله ساخت یه کاستوم ویوی واقعی که خودمون رسم کنیم و اینا رو توی آموزش بعدی بهش میپردازیم.

موفق باشید

یاعلی