تُعتبر خاصية " لمس الشاشة " من أهم الخصائص الموجودة في أجهزة الآيفون والآي باد، تعتبر اللمسة غير مفيدة إذ لم يترتب عليها حدوث شئ له معني علي الشاشة، لذلك فإن هذه المقالة تتحدث عن كيفية جعل لمس الشاشة مرتبطآ بحدوث شئ، وكيف أن نجعل تلك اللمسة تؤدي إلي تحريك شئ علي الشاشة وبناءًا عليه تؤدي مهمة سنقوم
بتخصصيها، وفي النهاية ستكون تلك اللمسة البسيطة آداة تحكم قوية، والتي من الممكن أن نقوم بإعادة استخدامها مرة أخري لفعل أشياء تفوق ما تتخيل أن تقوم به.
الخطوة 1: إنشاء مشروع جديد
قم بفتح برنامج xCode واختر بدء مشروع جديد،
Start new project > View Based applications
قم بتسمية المشروع "Jumping" وبذلك ستطيع أن تسير معي خلال المقالة بشكل سلس.
خطوة 2: قم بجلب المصادر التي سوف تعمل بها
بعد أن تقوم بفتح الملفات المرفقة، قم بفتح المجلد المسمي "images" ستجد في هذا المجلد كل الصور التي سنحتاجها خلال هذا المشروع، سوف تحتاج إلي أن تصنع نسخة من الصور في المجلد الخاص بالمصادر Resources Folder، إفعل هذا ببساطة بطريقة السحب والإسقاط Drag & Drop، قم بسحب الصور من المجلد الخاص إلي جزء "Groups & Files" في الشريط الجانبي لبرنامج xCode.
في النافذة التي سوف تظهر لك، قم بتعليم علامة صح علي المربع المكتوب امامه Copy items into destination group's folder.
الآن يفترض أن تكون كل الصور التي نحتاج إليها في المشروع قد تم نسخها إلي نفس المجلد الذي يحتوي علي ملفات المشروع، ولكي تحتفظ بهذا المجلد نظيفا دائمًا، دعنا نقوم بتجميّع كل الصور التي قمنا بجلبها معًا، قم باختيار كل الصور عن طريق الضغط باستمرار علي السهم الأسفل مع النقر علي كل واحدة علي حدة بينما تضغط علي زر Ctrl، بعد أن تقوم بتعليم كل الملفات قم بالضغط ضغطة يمني علي الفأرة مع الإستمرار في الضغط علي زر Ctrl قم بإعادة تسميّة هذه المجموعة معًا بأي إسم تريد إختياره، لقد قمت بتسميّة خاصتي "images".
قم ببناء وتنفيذ التطبيق الآن بحالته الحالية، يفترض ألا يكون هناك أخطاء أثناء تنفيذ الكود، ويفترض أن يُظهر لك المحاكي Simulator شاشة مُسطحّة رُماديّة اللون.
خطوة 3: قم بتعديل JumpingAppDelegate.m
بداخل الملف المسمي jumpingAppDelegate.m قم بالتعديل علي الدالة المسماة didFinishLaunchingWithOptions عن طريق إضافة السطر التالي:
// Allocate a new view, add this line:self.viewController = [jumpingViewController alloc]; [window addSubview:viewController.view];
سيقوم هذا التعديل بإعادة تخصيص شكل جديد للعرض قابل للتحكم، هذه الخطوة هامة لأننا لا نريد أن نستخدم شكل العرض المصنوع من واجهة المنشئ interface Builder ولكن نريد أن نصنع اسلوب آخر للعرض خاص بالتطبيق الذي ننشأه.
خطوة 4: تعديل JumpingViewController.h
في الملف المسمي jumpingViewController.h قم بتعريف خاصيّة جديدة، عن طريق إضافة:
UIImageView *player;
وقبل كلمة @end قم بإضافة:
@property (nonatomic, retain) UIImageView *player;
سوف يسمح هذا لنا بإستخدام المُشغِّل Player كما لو أنَّه خاصية من خواص الفئة الخاصة بالصور.
الآن يجب أن يكون الجانب الأعلي من أسطر الكود كالآتي:
#import <UIKit/UIKit.h> @interface jumpingViewController : UIViewController { UIImageView *player;} @property (nonatomic, retain) UIImageView *player; @end
خطوة 5: تعديل jumpingViewController.m
ستكون خطوتنا التالية هى إضافة بعض الواجهات الرسوميّة للعرض
قم بفتح jumpingViewController.m ثم قم بمسح الدوال التي عليها تعليقات، واترك الدوال التي ليس عليها تعليقات.
في الأعلي، وبعد علامة @ قم بإضافة:
@synthesize player;
قم بتحديث الدالة المسماة dealloc إلي الآتي:
- (void)dealloc { [player release]; [super dealloc];}
وبعد هذه الدالة، قم بإضافة الكود الآتي:
- (void)addButton {
UIButton *button = [[UIButton buttonWithType:UIButtonTypeCustom]
initWithFrame:CGRectMake(240, 150, 50, 50)];
// Set the button's image
[button setBackgroundImage:[UIImage imageNamed:@"button.png"]
forState:UIControlStateNormal];
// Attach an event
[button addTarget:self action:@selector(buttonPressed)
forControlEvents:UIControlEventTouchUpInside];
// Add the button to the view
[self.view addSubview:button];
}
الدالة المسماة addButton سوف تُنادي مؤخرًا لإضافة زر إلي الواجهة، وأول شئ يجب ملاحظته هنا أن هذا زر قابل للتعديل، هناك ايضًا الدالة المسماة buttonPressed والتي سوف تُنادي تلقائيًا عندما يتم لمس الشاشة.
قم بتعريف دالة مؤقتة بإسم buttonPressed بإضافة الكود الآتي:
- (void)buttonPressed {
NSLog(@"Button pressed");
}
ستقوم الدالة NSLog بإرسال إخطار إلي الكونوسول، والذي من الممكن أن تدخل إليه عبر القائمة، فقط بتحرير cmd+shift+run.
الزر الجديد يجب أن يظهر علي الشاشة بعد أن يتم تحميل الواجهة، ولكي يحدث هذا قم بإضافة الكود الآتي:
- (void)loadView {
// Allocate the view
self.view = [[UIView alloc] initWithFrame:[[UIScreen mainScreen] applicationFrame]];
// Set the view's background color
self.view.backgroundColor = [UIColor blackColor];
// Create the background image
UIImageView *bg = [[UIImageView alloc] initWithFrame:CGRectMake(0 , 0, 572, 206)];
[bg setImage:[UIImage imageNamed:@"bg.jpg"]];
[self.view addSubview:bg];
// Create the button
[self addButton];
}
هذه الدالة تكون مُعرَّفة إفتراضيًا لُمتحكمات العرض، سنقوم بإضافة صورة كخلفيّة للشاشة ونقوم بإرسالها إلي الدالة addButton Message.
قم بحفظ عملك، ثم قم ببناء المشروع وتشغيله، يجب أن تري خلفيّة الشاشة التي قد قمت بإضافتة مع زر أحمر اللون، إذا تم فتح نافذة الكونسول، فإن لمس هذا الزر يجب أن يعرض رسالة في الكونسول عبر الدالة NSLog ()
خطوة 6: إضافة شخصيّة إلي الشاشة
لكي نقوم بعرض الكائن UIImage قم بإضافة هذا الكود إلي jumingViewController.m بأعلي الدالة addButton:
- (void)initPlayer { self.player = [[UIImageView alloc] initWithFrame: CGRectMake(10, 100, 77.0, 94.0)]; [self normalStance]; // opaque for better performance self.player.opaque = YES; [self.view addSubview:self.player];}- (void)normalStance { [self.player setImage:[UIImage imageNamed:@"ryu.png"]];}
هذا الكود سوف يقوم بكلا من - إنشاء وبدء الكائن UIImage، و إضافته إلي الواجهة الرئيسية، أما الدالة normalStance فسوف تكون هامة في إستخدامات قادمة.
سنقوم الآن بإرسال initPlayer إلي الواجهة الرئيسية، نقوم بعمل هذا عن طريق تعديل الدالة loadView كالآتي:
- (void)loadView { // Allocate the view self.view = [[UIView alloc] initWithFrame:[[UIScreen mainScreen] applicationFrame]]; // Set the view's background color self.view.backgroundColor = [UIColor blackColor]; // create the background image UIImageView *bg = [[UIImageView alloc] initWithFrame:CGRectMake(0 , 0, 572, 206)]; [bg setImage:[UIImage imageNamed:@"bg.jpg"]]; [self.view addSubview:bg]; //create the button [self addButton]; // now initialize the player [self initPlayer];}
قم ببناء الكود وتشغيله، هل ظهرت لك شخصيّة علي الشاشة الآن؟
الخطوة 7: جعل الشخصيّة التي قمنا بإضافته تقفز
الآن، لنقم ببعض المرح!
قم بإضافة الكود الآتي أعلي الدالة addButton
- (void)cleanStance {
[self.player setImage:nil];
self.player.animationImages = nil;
}
-(void)jumpStance {
[self cleanStance];
NSArray *imageArray = [[NSArray alloc] initWithObjects:
[UIImage imageNamed:@"jump1.png"],
[UIImage imageNamed:@"jump2.png"], nil];
self.player.animationImages = imageArray;
self.player.animationDuration = 0.3;
self.player.contentMode = UIViewContentModeBottomLeft;
[self.view addSubview:self.player];
[self.player startAnimating];
}
تقوم الدالة الأولي التي قمنا بإضافتها بمسح أيّ صور مرتبطة بالكائن player، نقوم بإستخدامها لمحو كل اُطر التحريك المستخدمة سابقًا، أما الدالة الثانية تقوم بإضافة حركة بسيطة إلي الكائن player، ستظهر اثناء حركة الكائن.
قم بإضافة الكود الآتي بعد الدالة jumpStance
- (void)jump:(UIImageView *)image { [self jumpStance]; [UIView beginAnimations:nil context:NULL]; [UIView setAnimationDuration: 0.3]; [UIView setAnimationCurve: UIViewAnimationCurveEaseOut]; [UIView setAnimationBeginsFromCurrentState:YES]; image.transform = CGAffineTransformMakeTranslation(0, -40); [UIView commitAnimations];}
تقوم هذه الدالة تحديدًا بتحريك الكائن، في البداية تقوم بتغيير مجموعة الصور، ثم تقوم بتحريك الكائن بمقدار 40 بيكسل رأسيًا.
أما هذا السطر البرمجي:
[UIView setAnimationCurve: UIViewAnimationCurveEaseOut];
يقوم بإضافة تأثير easing، مما يجعل الحركة تبدو واقعيّة.
قم بتغيير الدالة buttonPressed حتي تبدو الدالة هكذا:
- (void)buttonPressed { [self jump:self.player];}
قم ببناء الكود وتشغيله، بالضغط علي الزر الآن، ستقوم الشخصيّة بالقفز، لكن سوف تتجمد في الهواء، لقد قمت بعمل رائع لجعله يقفز، والآن دعنا نكمل العمل لنقوم بإنزاله مرة أخري!
خطوة 8: إنهاء تحريك الشخصيّة
أعلي الدالة jump التي قمنا بإضافتها من قبل، أضف الكود الآتي:
-(void)fall:(NSString *)animationID finished:(NSNumber *)finished context:(void *)context { [self cleanStance]; [self normalStance]; [UIView beginAnimations:nil context:NULL]; [UIView setAnimationCurve: UIViewAnimationCurveEaseOut]; [UIView setAnimationBeginsFromCurrentState:YES]; [UIView setAnimationDuration:0.2]; self.player.transform = CGAffineTransformMakeTranslation(0, 0); [UIView commitAnimations];}
ستقوم مجموعة الدوال هذه بإرجاعه مرة اخري إلي وضعه الطبيعي، ستقوم بتحريكه إلي الوضع الإبتدائي.
الآن قم بتعديل الدالة jump لتبدو كالآتي:
- (void)jump:(UIImageView *)image {
[self jumpStance];
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration: 0.3];
[UIView setAnimationCurve: UIViewAnimationCurveEaseOut];
[UIView setAnimationBeginsFromCurrentState:YES];
// Execute fall after the animation ended
[UIView setAnimationDelegate:self];
[UIView setAnimationDidStopSelector:@selector(fall:finished:context:)];
image.transform = CGAffineTransformMakeTranslation(0, -40);
[UIView commitAnimations];
}
قم ببناء الكود وتشغيله، الآن قم بالضغط علي الزر الأحمر، ستقوم الشخصيّة بالقفز والعودة مرة أخري الي الأرض، هذا هو كل شئ !
الخلاصة
الآن يجب أن يكون لديك فهم أساسي بأكثر الدوال إستخدامًا مثل: UIButton, NSLog, UIImageView وكيف أن هذه الدوال تقوم بتحريك الكائنات، هناك أيضًا نماذج مختلفة يمكن تطبيقها واستخدامها لإضافة أزرار أخري إلي الشاشة، والتي ستقوم بدعم حدوث اشياء أخري، لذا، من الممكن أن يقوم الكائن لديك بالمزيد من الحركات.
ليست هناك تعليقات: