دوست داری برنامه اندروید بسازی ...!؟
نمی دونی از کجا شروع کنی ... !؟
یادگیری گام به گام و کاملا رایگان در
آکادمی همیار اندروید
شروع یادگیری
همکاران ما
تبلیغات
مطلب انتخابی شما

تاریخ ارسال : ۲۷ , ۰۴ , ۱۳۹۵
تعداد نظرات : ۶ نظر
دسته بندی : Android Studio, Shape

آموزش طراحی رابط کاربری اندروید به کمک Shape (ساخت یک دکمه زیبا)

به نام خدا

 

سلام دوستان ؛

تو این جلسه می خوایم به رابط کاربری اپلیکیشن خودمون یه سروسامونی بدیم ، قراره که با کمک Shape یک دکمه خوشگل طراحی کنیم ،

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

 به هر حال تو این جلسه قصد داریم یک دکمه زیبا طراحی کنیم ، پس با ما همراه باشید …

 

اصلا می خوایم چی کار کنیم و طراحی این جلسه چه شکلیه …!؟

تو این جلسه قراره که سه دکمه زیبا طراحی کنیم مثل تصویر زیر

و مراحل انجام کار هم به صورت زیر هستش :

مرحله اول : ساخت یک پروژه جدید

مرحله دوم : ساخت یک طرح ساده درون لایوت اصلی

مرحله سوم : ساخت یک طرح زیبا درون یک لایه فرعی به کمک Shape

مرحله چهارم : اتصال طرح زیبا به تک تک دکمه ها

 

نکته مهم : چون قراره مرحله به مرحله پیش بریم ، شما دقیقا از نام هایی که من در پروژه خودم استفاده می کنم ، استفاده کنید تا به مشکل بر نخورید و پس از پایان کار در صورت تمایل نام ها را تغییر دهید .

و یه نکته دیگه : پس از پایان هر مرحله نتیجه کار را مشاهده کنید تا تغییرات را درک کنید

 

مرحله اول : ساخت یک پروژه جدید

نام پروژه من : Shape

نام پکیج من : HamyarRoid.com

نام اکتیویتی من : MainActivity

نام لایوت من : activity_main

توجه مهم : برای انتخاب یکی از حالت های پیش فرض در اندروید استودیو از حالت Empty Activity استفاده کنید

 

مرحله دوم : ساخت یک طرح ساده درون لایوت اصلی

ما به صورت عادی یک لایه طراحی می کنیم که در آن سه دکمه قرار دارد و چندین خصوصیت اختیاری به آن می دهیم تا دکمه ها در محل مناسب قرار بگیرند مثل تصویر زیر که لایه من است

کدهای زیر هم تمام کدهای لایه من هستند (شما تمام کدها را جایگزین کدهای خودتان کنید)

 

نکته مهم : تا اینجا ما یک طرح ساده داریم اما در مرحله بعدی قراره که طرح خودمون رو زیبا کنیم به کمک Shape

 

مرحله سوم : ساخت یک طرح زیبا درون یک لایه فرعی به کمک Shape

به پوشه res و سپس به پوشه drawable مراجعه کنید

درون پوشه drawable باید یک لایه xml ایجاد کنیم و نام آن را Shape.xml قرار دهید ،

برای این کار روی پوشه drawable کلیک راست کرده وسپس New و سپس  File را انتخاب کنید ، تا بتوانید یک فایل جدید ایجاد کنید ،

حال درون پنجره ای که ظاهر می شود دقیقا عبارت shape.xml را بنویسید و Ok بزنید

نکته مهم : اسنادی که درون پوشه drawable می سازیم حتما با حروف کوچک نوشته شوند

خیلی خوب ما توانستیم یک فایل xml ایجاد کنیم و حالا تمام کدهای زیر را درون آن قرار دهید (جلوتر کدها را توضیح خواهم داد)

توضیح کدهای بالا :

Size : از این خاصیت برای تعیین طول و عرض دکمه استفاده کردیم

Corners : از این خاصیت برای خمیدگی گوشه ها استفاده کردیم

Stroke : با این خاصیت ما یک خط دور تا دوره دکمه رسم کردیم

Gradient : از این خاصیت برای رنگ دادن به پس زمینه دکمه استفاده کردیم

توجه : تمام خصوصیات مربوط به ساخت Shape را به زودی در یک مبحث جداگانه توضیح خواهم داد

 

مرحله چهارم : اتصال طرح زیبا به تک تک دکمه ها

خوب حالا باید طرح Shape را به تک تک دکمه ها اتصال بدیم تا دکمه های ما به طرح زیبای ما تبدیل شوند ،

برای این کار خصوصیت زیر را به تک تک دکمه ها اضافه کنید

تصویر زیر هم محل صحیح قرار گیری کد را به شما نمایش می دهد

 

 

خیلی خوب دوستان بسیار روان توضیح دادم تا به مشکل بر نخورید

به هر حال اگه سوال یا پیشنهادی بود می تونید کامنت بزارید … حتما رسیدگی می شود

و یه درخواست داشتم دوستان ، خداییش پای آموزش ها زیاد وقت می زارم که تا با دقت و با کیفیت تقدیم شما کنم ، پس اگه سایت همیار اندروید رو دوست دارید ، اونو به دوستانتون  معرفی کنید …

پیروز باشید .

 

با ارائه پیشنهادات و انتقادات خود ، گروه آموزشی همیار اندروید را در این مسیر یاری فرمایید
این نوشته را در گوگل پلاس محبوب کنید
ارسال مطلب توسط : سامان سلطانی پور
من عاشق طراحی و کدنویسی هستم ، سایت همیار اندروید رو با عشق تاسیس کردم تا هرچی که می دونم رو به دیگران آموزش بدم ... چیزی به نام فوت و فن استادی وجود نداره ، همه چیز رو بی منت تقدیم شما می کنم تا شاید یه کمک کوچیکی به شما دوستای عزیز بشه ...

همیار اندروید را در شبکه های اجتماعی دنبال کنید
یــــــک راه آسان برای ارتباط با هـــــــم :)
مطالب مرتبط با موضوع شما

برچسب‌ها: , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,

نظرات کاربران

لطفا نظر ، پیشنهاد و انتقاد خود را فقط در ارتباط با موضوع بالا ذکر کنید و از سوالات پراکنده خود داری کنید
برای حفظ و برقراری نظم در سایت به سوالات پراکنده پاسخ داده نمی شود
در آینده سیستم پرسش و پاسخ راه اندازی خواهد شد
لطفا به قوانین احترام بگذارید

6 پاسخ به “آموزش طراحی رابط کاربری اندروید به کمک Shape (ساخت یک دکمه زیبا)”

  1. فاطمه می‌گه:

    خیلی ممنون واقعا  راحت و روان گفتید  خودم  کلاس برنامه  نویسی می روم اما استادم به  راحتی شمابیان نکردند و من  سایت  شمارابه  دوستانم معرفی کردم   

     

     

    عالی بود عالی 

    همه مطالب عالی 

  2. asghar می‌گه:

    بسیارعالی و تمیز

    دستتون درد نکنه و خسته نباشید.

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *


ما را محبوب کنید