ggg
Amazing Categories :
Android
Node.js

دسته بندی نشده
(16)

آماده سازی محیط برنامه نویسی
(11)

آموزش ها و مباحث پایه ای اندروید
(8)

نکات پایه ای اندروید استودیو
(3)

وب سایت های مفید و کاربردی
(1)

AlertDialog
(1)

LogCat
(1)

Activity Lifecycle
(1)

Activity
(3)

Manifest
(2)

Strings
(1)

StatusBar
(1)

ActionBar
(2)

Toast
(1)

Library
(6)

ListView
(3)

آموزش های مرتبط با طراحی متریال ( Material Design )
CardView
(1)

RecyclerView
(0)

ویوها و ابزارهای موجود در محیط برنامه نویسی
MediaPlayer
(4)

WebView
(1)

VideoView
(1)

Button
(1)

ImageButton
(1)

RadioButton & RadioGroup
(1)

EditText
(0)

TextView
(1)

ScrollView
(2)

طراحی رابط کاربری و زیباسازی
Layout
(4)

Style
(2)

Shape
(2)

Animation
(2)

Typeface
(2)

آموزش های مرتبط با سخت افزار
Camera
(1)

Vibrator
(1)

Bluetooth
(0)

WiFi
(0)

ذخیره اطلاعات و پایگاه داده
SQLite Database
(0)

Shared Preferences
(0)


دسته بندی نشده
(8)


آموزش طراحی رابط کاربری اندروید به کمک 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 را به تک تک دکمه ها اتصال بدیم تا دکمه های ما به طرح زیبای ما تبدیل شوند ،

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

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

 

 

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

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

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

پیروز باشید .

 




این آموزش ویدیویی برای دانلود ندارد




این آموزش فایلی برای دانلود ندارد

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

آموزش های مرتبط با موضوع انتخابی شما
معرفی و روش استفاده از متد setOnClickListener در برنامه نویسی اندروید
آموزش کار با کارد ویو (CardView) در برنامه نویسی اندروید
معرفی و روش استفاده از آلرت دیالوگ (AlertDialog) در برنامه نویسی اندروید
معرفی و روش استفاده از ایمیج باتن (ImageButton) در برنامه نویسی اندروید
آموزش کامل و استاندارد تغییر دادن آیکون اپلیکیشن در اندروید استودیو (روش دستی)
آموزش کامل و استاندارد تغییر دادن آیکون اپلیکیشن در اندروید استودیو (روش اتوماتیک)

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

دیدگاه ها و پرسش های دانشجویان
دیدگاه یا پرسش خود را فقط در رابطه با همین مطلب ارسال کنید .
پرسش های دیگر دانشجویان را بررسی کنید ، به پرسش های تکراری رسیدگی نمی شود .
تایپ به صورت فینگلیش تایید نخواهد شد .
لطفا قوانین را رعایت کنید .
تا الان تعداد ۱۰ دیدگاه و پرسش برای این مطلب ارسال شده است .

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

  1. فاطمه گفت:

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

     

     

    عالی بود عالی 

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

  2. asghar گفت:

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

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

  3. میثم گفت:

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

  4. حسین طیبی گفت:

     با سلام

    واقعا آموزش هاتون گویا،روان و کاربردی هست همیشه به نتیجه می رسم

دیدگاهتان را بنویسید

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

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