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

در این اموزش دو قسمتی،به شما اموزش میدم که چجوری یه موزیک پلیر باحال برای تلفن همراهتون درست کنین!منابع و فایل ها رو هم اخر پست دوم میذارم.برای انجام این اموزش،از Corona SDK استفاده میشه.

دلیل استفاده از این SDK هم این هستش که با این برنامه،ما یه بار کد رو برای مثلا IOS(سیستم عامل ایفون) می نویسیم،و بعد،میتونیم برای اندروید و تبلت و در سایز های مختلف برنامه رو کامپایل کنیم!البته بنا به دلایلی مجبور خواهیم بود که اندازه های عکس ها رو ادیت کنیم!

شکل نهایی برنامه

هدف اصلی برنامه،ایفون هستش،ولی همونطوری که عرض کردم،با این برنامه میشه اندروید رو هم کامپایل کرد!
اما مشکلی که هست،اینه که اندازه ها در ios ،اندازه ها مشخصه! چون فقط سه تا دستگاه دارن که استفاده میکنه:

•  ایپد  768*1024 و 132ppi
• ایفون/ایپاد تاچ 480*320 و 163ppi
• ایفون 4 640*960 و 326ppi

ولی به این دلیل که اندروید،یک سیستم عامل متن باز است،هر شرکت برای خود گوشی هایش را توی یک سایز میزنه!!

• نکسوس 1 800*480 و 254ppi
• دروید ایکس 854*480 , 228ppi

این وسط،اکس پریا ها و گلکسی ها رو هم باید در نظر گرفت،همچنین پردازنده های قوی و سبک اونها رو....

به دلایل بالا،طراحی گرافیک بر اساس ایفون خواهد بود.ولی همونطوری که گفتم،شما میتونید با تغییر رزولوشن ها و اندازه ی عکس ها،برای گوشی های مختلف اندروید هم برنامه رو کامپایل کنید.

رابط کاربری:

رابط کاربری تیره و بسیار زیبا شامل دکمه ها و عکس ها قسمت های مختلف که برای اموزش عالی هستن!

البته من فایل های مورد نیاز(گرافیک ها) رو براتون اماده شده برای دانلود گذاشتم که راحت بتونید استفاده کنید!

تنظیمات برنامه:

یه فایل جداگانه برای فول اسکرین کردن برنامه توی گوشی استفاده میشه.اسم فایل config.lua هستش.

این فایل،سایز اصلی صفحه نمایش رو نشون میده و همچنین تابعی داره که سایز برنامه رو در مواقعی که برنامه از سایز متفاوتی استفاده میکنه،تصحیح کنه:

application =

{

    content =

    {

        width = 320,

        height = 480,

        scale = "letterbox"

    },

}

main.lua

بیاین برنامه رو درست کنیم دیگه!

ادیتور متن خودتون رو باز کنین(از هر ادیتوری میشه استفاده کرد،مثل note pad ویندوز،ولی در اونصورت باید بیخیال  شکل دهی و رنگ بندی و سایر چیزایی بشین که معمولا برنامه نویس ها بهشون عادت دارن! میتونید از ++notepad استفاده کنید)

فقط یادتون باشه که تمام این فایل ها باید توی یه پوشه و کنار هم باشن!

ساختار کد ها:

کد ها رو جوری مینویسیم که شبیه به نوشتن کلاس ها در بیاد.اگر اکشن اسکریپت یا جاوا کار کرده باشین،کد ها براتون خیلی عادی و شبیه خواهند بود!

Necesary Classes

Variables and Constants

Declare Functions

    contructor (Main function)

    class methods (other functions)

call Main function

پنهان کردن استاتوس بار:

استاتوس بار،همان نوار بالایی است که در اون ساعت و سایر ایکون ها نشون داده میشه!با یه خط کد ساده،میشه اون رو پنهون کرد:

display.setStatusBar(display.HiddenStatusBar) 

پس زمینه:

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

-- Graphics

-- [Background]

local bg

نوار اطلاعات:

اینجا قسمتی هستش که اطلاعات اهنگ ها،عکسشون و دکمه ها توش قرار میگیره!

-- [Info Bar]

local infoBar

local progressBar

local progress

تصویر البوم:

البوم ارت،یا تصویر البوم،باید توی پوشه ی پروژه قرار بگیره....این متغییر،تصویر البوم رو در خودش نگه میداره:

-- [Image Marker]

local imageMarker

local cdCover

متن اطلاعات اهنگ:

اسم اهنگ و نام خواننده،به صورت زیر ایجاد میشوند:

-- [Info Bar Text]

local titleText

local byText

local artistText

نوار دگمه ها:

این قسمت،دکمه های کنترلی و نوار پیشرفت(پراگرس بار!) اهنگ را نشان میدهد که به صورت زیر مشخص میشود:

-- [Button Bar Bg]

local buttonBar

-- [Buttons]

local playBtn

local stopBtn

local prevBtn

local nextBtn

-- [Button Bar Text]

local current

local total

اهنگ های محلی:

بهترین راه حل برای ذخیره ی اطلاعات اهنگ ها،XML اس،اما چون در corona فعلا امکان استفاده از XML وجود ندارد،  مجبوریم که از توابع و کتاب خانه های خود corona به نام LuaXML استفاده کنیم.البته این کار،سریعتر هم خواهد بود!

-- URL, Name, Artist, Art

local song1Info = {'song1.m4a', 'Here Without You', '3 Doors Down', 's1.png'}

local song2Info = {'song2.m4a', 'Kriptonite', '3 Doors Down', 's2.png'}

local songsInfo = {song1Info, song2Info}

local song1 = audio.loadStream(song1Info[1])

local song2 = audio.loadStream(song2Info[1])

local songs = {song1, song2}

همینجوری که در بالا می بینید،از جدول ها برای ذخیره  ی اطلاعات کوتاهی از اهنگ ها استفاده شده است،که بعدا با استفاده از تابع audio.loadStream انها را فراخوانی  میکنیم!

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

-- Audio Player

-- Developed by Carlos Yanez

-- Hide Status Bar

display.setStatusBar(display.HiddenStatusBar)

-- Graphics

-- [Background]

local bg

-- [Info Bar]

local infoBar

local progressBar

local progress

-- [Image Marker]

local imageMarker

local cdCover

-- [Info Bar Text]

local titleText

local byText

local artistText

-- [Button Bar Bg]

local buttonBar

-- [Buttons]

local playBtn

local stopBtn

local prevBtn

local nextBtn

-- [Button Bar Text]

local current

local total

-- [Songs]

-- URL, Name, Artist, Art

local song1Info = {'song1.m4a', 'Here Without You', '3 Doors Down', 's1.png'}

local song2Info = {'song2.m4a', 'Kriptonite', '3 Doors Down', 's2.png'}

local songsInfo = {song1Info, song2Info}

local song1 = audio.loadStream(song1Info[1])

local song2 = audio.loadStream(song2Info[1])

local songs = {song1, song2}

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

• منبع
• سورس

Posted in: برنامه نویسی اندروید, برنامه نویسی ایفون, برنامه نویسی موبایل