مساحة اعلانية

آخر المواضيع

iOS SDK: UIKit Theme تخصيص

موضوع التخصيص هو وسيلة رائعة لتبرز في متجر التطبيقات، ولكن هذا ليس دائما سهل التحقيق. هذا البرنامج التعليمي سوف يعلمك العديد من حيل التخصيص الأساسية الخاصة ب UIKit و التي من شأنها أن تساعد في تمييز تطبيقاتك الخاصة ، وخلق 
تجربة أفضل للمستخدم.


نظرة عامة إذا كنت قد قضيت أي وقت تبحث في وثائق أبل على الانترنت في مركز ديف دائرة الرقابة الداخلية الخاصة بهم، فإنك أصبحت بالتأكيد على دراية جيدة بالمبادئ الرئيسية لبناء واجهة المستخدم (والتي يشار إليها غالبا ب "HIG").
يقدم هذا المستند للمطورين ومصممي تطبيقات دائرة الرقابة الداخلية مع المبادئ التوجيهية لكيفية معرفة توقع المستخدمين من التطبيق الموجود ضمن تطبيقات دائرة الرقابة الداخلية، أمثلة الاستخدام المشترك، ومبادئ ال UI/UX  الواجب اتباعها.
في حين أن هناك العديد من الطرق لتخصيص مظهر تطبيق ال IOS الخاص ، من تغيير الألوان والأحجام إلى تداول ال UL الخاصة بك ويعتبر اتباع ال HIG  واقتراحاتها من أفضل الممارسات للحصول على واجهة قابلة للاستخدام.
مع أخذ ذلك في الاعتبار، دعونا نلقي نظرة على بعض الطرق التي يمكننا القيام بها 
لتخصيص واجهة لتناسب Theme .....

عارض الصورمعظم مطوري دائرة الرقابة الداخلية على دراية بالخصائص المشتركة للطبقة UIView التي تعتبر سهلة التغيير، مثل لون الخلفية، حجم الخط، أو الغموض. لكن في بعض الأحيان، تغيير هذه الخصائص لا يعطي النتائج المطلوبة.
لذلك، لمزيد من التدريب العملي على تقنيات التخصيص، سنعمل على بناء تطبيق بسيط وهو عارض الصور. هكذا سيبدو التطبيق دون أية تخصيصات، ومن ثم التطبيق بعد التغييرات التي سنقوم بأدائها:

قبل أن نبدأ، سوف نحتاج بعض الصور ويمكنك تحميلها من هنا  here
أيضا، لقد قمت بإعداد التطبيق الأساسي الذي سوف نقوم باستخدامه والتعديل عليه ، و 
يمكنك تحميله هنا.. بمعنى أن الأعمال الأساسية جاهزة وما علينا إلا البدء بالتخصيص الآن.
UIViews وخصائصها المرئية:
في التطبيق البسيط الذي لدينا ، لدينا عدد قليل من العناصر الأساسية:
· UINavigationBar (متغير: aNavigationBar)
· UIImageView (متغير: anImageView)
· UILabel (متغير: aLabel)
· UISegmentedControl (متغير: aSegmentControl)
سنبدأ بعمل خلفية تبدو أقل رقياً وتعقيداً وذلك بوضع صورة للخلفية. للقيام بذلك، سنقوم 
بإضافة ال method "MTViewController" إلى ال class المسمى "-setupUI".
سنقوم بإضافة هذه ال method مباشرة بعد تعريفات ال @synthesize

- (void)setupUI {
}
الآن، نحن بحاجة إلى إضافة خلفية ملف صورة لمشروعنا، لذلك اسحب الصورة  "BG-pattern.png" من الصور التي قمت بتحميلها مسبقاً إلى التطبيق. لقد قمت بإنشاء مجموعة جديدة لصور UI لدينا تسمى "UI Graphics".

بعد سحب الصورة إلى المجلد المذكور، نستطيع تعديل ال 
    setupUI" method ونحتاج فقط لإضافة هذا السطرفيها:
[self.view setBackgroundColor:[UIColor colorWithPatternImage:[UIImage imageNamed:@"BG-pattern.png"]]];
من أجل جعل هذا التغيير يظهر في التطبيق لدينا، سوف تحتاج إلى استدعاء  method"setupUI" من  method"viewDidLoad" داخل ال method ViewController. لقد أضفت بالفعل بضع استدعاءات ل  method"viewDidLoad" ، فعلينا إضافة هذا في بداية الملف:
- (void)viewDidLoad{ // set up the custom UI elements [self setupUI];
// build arrays for images and titles [self setupData]; // start app with first segment selected [self didChangeSegmentControl:aSegmentControl]; [super viewDidLoad]; // Do any additional setup after loading the view, typically from a nib.}
الآن، دعونا نجعل الصورة أكثر بروزاً وذلك بإضافة إطار أبيض حولها. للقيام بذلك، ونحن سوف نعمل مع CALayers، وهو ما يعني أننا في حاجة لعمل include ل QuartzCore framework في مشروعنا.
لذلك اذهب إلى المشروع UIKitDemo لدينا، وسوف نختار (UIKitDemo). ثم سنذهب الى علامة التبويب بعنوان "Build Phases", ، وإظهار ال "Link Binary With Libraries"  أي قسم "ارتباط ثنائي مع المكتبات".
في الجزء السفلي، انقر على زر "+" واختيار "QuartzCore.framework".
  

وأخيراً يجب عمل
import  لل Quartz في ال ViewController (MTViewController.m).

#import <QuartzCore/QuartzCore.h>
With Quartz in place, we can start fiddling around with the anImageView sublayers. We’ll add the following to our "setupUI" method to add the border around our ImageView:بعد ذلك أن نفوم بإضافة ما يلي إلىmethod "setupUI" لإضافة الحدود حول ImageView:
[anImageView.layer setBorderWidth:5.0f];
[anImageView.layer setBorderColor:[[UIColor whiteColor] CGColor]];
إذا كنا قد بنينا وشغلنا التطبيق الآن، يمكننا أن نرى إطارأبيض حول الصورة المعروضة لدينا.

الآن، لجعل الصورة تبدو أكثر بروزاً، يمكننا أن نضع ظلال خفية وراءها باستخدام أساليب مماثلة:
[anImageView.layer setShadowRadius:5.0f];[anImageView.layer setShadowOpacity:.85f];[anImageView.layer setShadowOffset:CGSizeMake(1.0f, 2.0f)];[anImageView.layer setShadowColor:[[UIColor blackColor] CGColor]];[anImageView.layer setShouldRasterize:YES];[anImageView.layer setMasksToBounds:NO];

عدد قليل من هذه الأوامر لا تبدو واضحة على الفور ولذلك سنقوم بتفصيلها سطر سطر:



[anImageView.layer setShadowRadius:5.0f];
بدأنا من خلال وضع كمية من "طمس" والظل لدينا.

[anImageView.layer setShadowOffset:CGSizeMake(1.0f, 2.0f)];
ثم، قمنا بعمل ابعاد الظل بحيث لا تكون مباشرة وراء الصورة.

[anImageView.layer setShouldRasterize:YES];
وهذا الأمر يساعد في الأداء، فهو يتأكد من رسم الظل مرة واحدة فقط ومن ثم تم حفظه كصورة نقطية، بحيث لا يحتاج التطبيق إلى إعادة رسمه في كل مرة.



[anImageView.layer setMasksToBounds:NO];
أخيرا، نريد أن نتأكد من أنه لا قطع في الظل لدينا، أو أنه يتعدى الحد الذي يجب أن يكون موجوداً فيه.
حاول تشغيل التطبيق مرة أخرى، وسترى الظل وراء الصورة.
لدينا الكثير من الحواف القائمة،  لذلك دعونا  نرتب واجهتنا وجعلها تبدو أفضل عن طريق تدوير الزوايا لل UILabel (aLabel)  .
يمكننا أن نفعل هذا في نفس method"setupUI" تحت تخصيصات UIImageView. كل ما نحتاجه هو سطر واحد بسيط لتنفيذ هذا:
1
[aLabel.layer setCornerRadius:15.0f];
الآن، فإن التغيير النهائي لدينا في method "setupUI" سيقوم بتدوير UIImageView قليلا، والتي سوف تغير الملامح المرعة للعرض في العرض.

يمكننا أن نفعل هذا مع إضافة السطرين التاليين من الكود في نهاية method "setupUI":

CGAffineTransform transform = CGAffineTransformMakeRotation(.03f);anImageView.transform = transform;
وهذا كل شيء لدينا "setupUI". لا بأس فقد قمنا بإجراء هذه التعديلات والتحسينات من خلال كتابة أسطر قليلة من الكود

تخصيص UIKitمع إصدار نظام دائرة الرقابة الداخلية  5 (IOS 5) جاء بروتوكول جديد لل classes الفرعية من UIViews يسمى "appearance".  هذا البروتوكول يسمح لنا لتعديل جوانب معينة من مكونات UIKit القياسية لدينا مثل وضع صور خلفية مخصصة، والظلال، تأثيرات لونية وأكثر من ذلك.

وهناك مثال بسيط على ذلك هو UINavigationBar. يمكننا الآن تخصيص الصور لتغيير UINavigationBars لدينا لتتناسب مع موضوعات التطبيقات دون أي متاعب:
[[UINavigationBar appearance] setBackgroundImage:navBarImage forBarMetrics:UIBarMetricsDefault];
في هذه الحالة، لدينا UIImage المسماة "navBarImage"، التي قمنا بوضعها كصورة افتراضية لUINavigationBar لدينا. و استدعاء ال"appearance"   سوف تؤثر على class UINavigationBar، وليس فقط على كائن واحد. هذا يعني أنه سيتم تطبيق التغييرات التي أجريناها لجميع UINavigationBars التي نستخدمها في هذا التطبيق.

لتنفيذ هذا التغيير في مشروعنا عارض الصور الحالي، ونحن في حاجة للذهاب الى AppDelegate class (MTAppDelegate). ونحن نطبق التعديل على  AppDelegate لأننا نريد تطبيق  على جميع كائنات UINavigationBars في التطبيق ، ومن أجل ضمان أن يتم إجراء التغييرات ، سنقوم بتنفيذها فورا بعد فتح التطبيق.
دعونا نبدأ بإضافة الmethod إلى   class"MTAppDelegate" مباشرة بعد تعريفات synthesize ، تماما كما فعلنا في class "MTViewController":



- (void)setupUI {}
الآن، سنقوم باستيراد "navBar.png" صورة (من مجلد الصور التي  قمت بتحميلها سابقا).


وبعد ذلك يمكننا إنشاء UIImage instance والذي سنستخدمه للخلفية

UIImage *navBarImage = [UIImage imageNamed:@"navBar.png"];
And right after that, we can make our "appearance" call:[[UINavigationBar appearance] setBackgroundImage:navBarImage forBarMetrics:UIBarMetricsDefault];

قبل تفعيل هذا التغيير، نحتاج لاستدعاء "setupUI" method من application:didFinishLaunchingWithOptions: method.

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions{[self setupUI];...}
تستطيع تشغيل تطبيقك الآن – لاحظ الخلفية السوداء في  UINavigationBar  في الأعلى

في المرحلة المقبلة تبدأ الأمور تصبح أكثر تعقيداً من قبل. سنقوم بعمل مجموعة صور مخصصة ل UISegmentedControl. الجزئية الصعبة هنا أننا لا نتعامل مع صورة خلفية واحدة أو اثنتان، ولكن نتعامل مع جزئيات معينة من الصور، مثل الحواف الدائرية، العمل مع أقسام متوسطة غير محددة، والخط الفاصل بين جزأين، الخ ...

أولا، إذا كنت لم تقم باستيراد الصور المتبقية في المجلد التي قمت تحميلها مسبقاً، عليك أن تقوم بتحميلها الأن.

تماما مثل UINavigationBar الذي قمنا بالتعديل عليه من قبل، علينا أن نفعل شيئين لتغيير UISegmentedControl.

1- إنشاء UIImages لاستخدامها كخلفيات
2- تطبيق UIImages لدولهم المعينة
ليس لدي ما يكفي من الوقت هنا لتحطيم كل هذه الإجراءات خطوة بخطوة، ولكنني 
سوف أقوم بمعالجة بعض تلك الرئيسية. في الوقت الراهن، قم بإلحاق الكود التالي إلى method"setupUI"

UIImage *segmentSelected =
[[UIImage imageNamed:@"segcontrol_sel.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 15, 0, 15)];UIImage *segmentUnselected =
[[UIImage imageNamed:@"segcontrol_uns.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 15, 0, 15)];UIImage *segmentSelectedUnselected =
[UIImage imageNamed:@"segcontrol_sel-uns.png"];UIImage *segUnselectedSelected =
[UIImage imageNamed:@"segcontrol_uns-sel.png"];UIImage *segmentUnselectedUnselected =
[UIImage imageNamed:@"segcontrol_uns-uns.png"];
This creates our UIImages, and performs resizing as appropriate. You’ll notice this little bit:
1
resizableImageWithCapInsets:UIEdgeInsetsMake(0, 15, 0, 15)
هذا يسمح لنا بقطع جزء من الصورة عن طريق بعض الهوامش. في هذه الحالة نترك الجزء الأعلى كما هو، ونقوم بالتحريك 15pts من اليسار للداخل، ونترك الجزء الأسفل كما هو، وتحريك 15pts للداخل من جهة اليمين، وبذلك يتبقى الجزي المتوسط والذي سيتمدد للعرض المطلوب، ولكن النهايات الدائرية ستبقى كما هي.لمزيد من المعلومات حول "resizableImageWithCapInsets:"، اطلع على the official Apple documentation.بعد تجهيز الصور، يمكن أن نحدد حالات مختلفة ل UISegmentedControl. كل واحدة من الخمس صور التي أضفناها للتو سوف تكون على الحالة التالية:
[[UISegmentedControl appearance] setBackgroundImage:segmentUnselected forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];[[UISegmentedControl appearance] setBackgroundImage:segmentSelected forState:UIControlStateSelected barMetrics:UIBarMetricsDefault]; [[UISegmentedControl appearance] setDividerImage:segmentUnselectedUnselected forLeftSegmentState:UIControlStateNormal rightSegmentState:UIControlStateNormal barMetrics:UIBarMetricsDefault]; [[UISegmentedControl appearance] setDividerImage:segmentSelectedUnselected forLeftSegmentState:UIControlStateSelected rightSegmentState:UIControlStateNormal barMetrics:UIBarMetricsDefault]; [[UISegmentedControl appearance] setDividerImage:segUnselectedSelected forLeftSegmentState:UIControlStateNormal rightSegmentState:UIControlStateSelected barMetrics:UIBarMetricsDefault];

على عكس ال UIButton بسيطة، والتي هي في الأساس إما تكون محددة أو غير محددة، يمكن UISegmentedControl التحقق من الحالة على أي من الجانبين، ولكنها ليست معقدة جدا.

خاتمة

مع الميزات الجديدة في نظام التشغيل iOS 5، وبعض الأعمال الإبداعية مع كوارتز، يمكننا أن بسرعة وسهولة الحصول على تطبيقات كما يحلو لنا. بعض التحديات التي تطرح نفسها مع تخصيص واجهة المستخدم هي:
1- العثور على رسومات جيدة والتي يسهل التعامل معها.
2- ضمان أن تحافظ على تركيزك على تجربة المستخدم.
يمكن أن يكون من السهل نسبيا العثور على رسومات جيدة، وهناك الكثير من المصممين الجيدين لديهم استعداد للمساعدة. يمكن أن يكون من الصعب في بعض الأحيان للحفاظ على التركيز على "لماذا" وليس فقط "كيف" من تخصيص واجهة المستخدم. على حد تعبير الدكتور إيان مالكولم في حديقة Jurassic:
"إنهم كانوا مشغولين جدا مع إذا كانوا يستطيعون فعل ذلك وإنهم لا يتوقفون عن التفكير إذا لزم ذلك فعلاً"
كما هو الحال دائما، اخرج في محاولة أشياء جديدة، غير الإعدادات، واستكشاف العديد من الطرق الأخرى التي يمكن من خلالها تخصيص واجهات دائرة الرقابة الداخلية الخاصة بك!

الكــاتــب

    • مشاركة

ليست هناك تعليقات:

جميع الحقوق محفوظة لــ الشبح للمعلوميات 2019 ©