آموزش برنامه نویسی اندروید قسمت هفتم

1395/1/14 ستاره مقاری 3556

سلام.  جلسه قبل با یک سری از مفاهیم مهم در جاوا آشنا شدیم و سپس به یک سری نکات در مورد دیزاین نرم افزارهای اندروید پرداختیم و margin و padding را یاد گرفتیم.

در این جلسه میخوام اول دیزاین جلسه قبل را به شما یاد بدم بعد بریم سراغ یک سری مولفه های دیگری در مورد دیزاین.

اگر تا الان پروژه قبلی را دارید همان را باز کنید و یا اینکه یک پروژه جدید بسازید. میخواهیم روی همین پروژه خیلی مطالب را کار کنیم.

برای جلسات بعد قرار هست به این پروژه یک موضوع بدهم و روی آن جلو برویم. یک موضوعی هم برای پروژه ذهنم هست که احتمالا با همان پیش برویم و در نهایت پایگاه داده Sqlite هم روی آن پیاده کنیم (پایگاه داده اندروید) 

خب من خودم پروژه جدید میسازم. اسمش را میگذارم FirstApplication

فقط یک نکته بگم. برای باز کردن یک پروژه از قبل شاید یک سری­ از دوستان به مشکل برخورده باشند. برای اینکار کافی هست یا از منوی بالای اینتلیجی File بعد Open  بزنید. بعد هم برید توی مسیری که پروژتان را ساختید. پوشه ای که پروژه را ساختید به شکل آیکون اینتلیجی میشود (خود پوشه اصلی) آن را باز کنید.

یا راه دوم. خارج از اینتلیجی (اینتلیجی باز نباشد اصلا) بروید به مسیر پروژتان بعد بروید داخل پوشه src و یکی از کلاسها(اکتیویتی ها) را باز کنید. خودش با اینتلیجی باز شده  و کل پروژتان را در اصل میاره بالا.

 

یک نکته دیگه. بعضی ها با شبیه ساز به مشکل خوردن. من امروز شبیه ساز اینتلیجی را یک دور از اول میگم که چطور بیارید. اما اگر باز هم مشکل داشتید میتوانید فایل نصبی خوده برنامه را روی گوشی نصب و تست کنید. مسلما وقت گیر هست اما خب بهتر از هیچی هم هست! حالا چطور؟ (البته این را برای کسایی میگم که گوشی شان وصل نشده به اینتلیجی). خب در همین مسیر پروژتان که برید یک پوشه هست به اسم out. داخل آن و سپس داخل production بشوید. فایل apk شما آنجاست. (فایل نصبی برای اندروید). همان فایلی که اسم پروژتان با پسونده apk هست را بریزید توی گوشی و نصبش کنید. به همین سادگی.

شبیه ساز را هم در ادامه میگم. در آخر جلسه

خب برگردیم به پروژمان. برید در صفحه main.xml و هرچی داخلش هست را بجز layout اصلی پاک کنید طرح ما شکل زیر بود:

آموزش برنامه نویسی در اندروید

یادتان باشد LinearLayout نمیگذاشت که دوتا ابزار توی یک ردیف باشند (برای نوع vertical) و همچنین نمیگذاشت که دوتا ابزار زیر هم باشند (برای نوع horizontal)

پس باید از Relative استفاده کنیم. خب پس تگ layout اصلی تان را بکنید Relative. یعنی الان اینطور هست:

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="fill_parent"
              android:layout_height="fill_parent"
        >
    </RelativeLayout>

که البته می­بینید که از linear  که خارجش کردم صفت orientation را هم برداشتم چون برای linear بود.

حال برای دیزاین صفحه فعلا یک دکمه بندازید روی صفحه (ترجیحا با کد. یاد بگیرید حرفه ای کار کنید از اول)

اینطور:

<Button android:layout_width="170dp"
android:layout_height="170dp"/>

یک نکته بگم یادتان باشد گفته بودم برای واحد اندازه گیری هم dp کاربرد دارد هم px

px
Pixels - corresponds to actual pixels on the screen.

dp
Density-independent Pixels

ببینید پیکسل های انواع صفحه­های مانیتور و تلوزیون یا گوشی برای مدل های مختلف... باهم فرق دارد. اگر بر اساس پیکسل بدید واحد را در گوشی­های متفاوت دیزاین­های متفاوتی خواهید داشت. اما dp یک واحد ثابت هست در نتیجه تغییر نمیکند ابزارتان در گوشی­ های متفاوت. پس از dp استفاده کنید بهتر هست.

خب تا الان دارم:

 

آموزش برنامه نویسی در اندروید

حالا دکمه دوم را بندازید ببینید چه میشود. یعنی کدم هست:

<Button android:layout_width="170dp"

        android:layout_height="170dp"/>

 <Button android:layout_width="170dp"

         android:layout_height="170dp"/>

خب میبینید که هیچی نخواهد شد! برای اینکه دکمه ها را روی هم انداخت. کلا RelativeLayout هیچ قیدی روی این مسائل ندارد که ابزاراتان تداخل داشته باشند باهم! که البته خیلی هم خوب هست این. برای اینکه دکمه دومتا ظاهر بشود کدش را اینطوری کنید:

آموزش برنامه نویسی در اندروید

خب واضح هست و توضیحاتش را دادم. به اولی یک id دادم (اسمی که انتخاب کردم با توجه به کاربردی هست که در ادامه میخواهیم از این دکمه) بعد در دکمه دومی طبق خواصی که یاد دادم گفتم که زیر چه چیز باشد دکمم.

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

آموزش برنامه نویسی در اندروید

حالا برای اینکه بیاد وسط کافی هست که بیام و یکم به دوتای سمت چپ margin بدهم از چپ و بعد به دوتا بالایی ها margin بدهم از بالا. (مارجین برای فاصله دادن از اطراف بود اگر یادتان باشد)

کد من بصورت زیر شد:

آموزش برنامه نویسی در اندروید

خب تبریک میگم به غیر اصولی ترین روش ممکن دیزاین کردیم!! چرا؟ برای اینکه همانطور که یادت دادم برید و مدل گوشی که نمایش میدهد را عوض کنید  ببینید چه بلایی سر کارتون میاد!

آموزش برنامه نویسی در اندروید

میبینید که در بدترین وضعیت ممکن هست! نه تنها دکمه ها نسبت به صفحه ریز دیده میشوند (که توی تبلت صد درصد بدتر هست میتوانید تست کنید) بلکه اصلا وسط هم نیستند!

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

یادتان باشه جلسه اول یه اصطلاحی گفتم به اسم Responsive Design.

خب این توی وب مطرح میشود. اما برای هر اپلیکیشن دیگه ای هم میشه بکار برد. یعنی طراحی ای کنید که در هر سایز گوشی درست باشد دیزاینتان. اما چطور؟ کار سختی نیست. البته حالا به اینکه سایز دکمه ها نسبت به صفحه بزرگ یا کوچیک شود کاری نداشته باشید در آینده میپردازیم. بیاید اول فکر کنیم که چکار کنیم وسط بیفتد دکمه مان. خب من دوتا راه به شما میگم. میخواهم روی این دو بحث کنیم.

دوستان ما میتونیم در یک layout یک layout دیگر بگذاریم! یعنی چی. شما میتوانید هر layout را به layout های بیشتر تقسیم کنید. مثلا من یک relative دارم میتونم داخل آن n تا linear داشته باشم و...

حالا چکار کنیم. کافی هست این چهار دکمه را در یک relativelayout دیگر بندازیم بعد آن را بندازیم وسط صفحه.

اینطوری:

<RelativeLayout …….>
    <RelativeLayout android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
            >
    <Button ……./>
    <Button ……./>
    <Button />
    <Button ……./>
    </RelativeLayout>
</RelativeLayout>

کدهای تکراری را جایشان نقطه چیم گذاشتم که گیج نشوید. خب Relative اول که layout اصلیمان هست. و Relative دومی را ببینید از اول دکمه های من باز شده تا آخرش. اما توجه کنید. اولا که طول و عرضش را دادم wrap content. این چی هست. برای طول و عرض سه نوع مقدار دهی میتوانید بکنید.

1)یا اینکه عدد بدهید بر اساس dp و px که گفتم

2)بگذارید fill parent  یا  match parent که یعنی کل والد خودش را پر کند. یعنی هرچقد والدش فضا گرفت این هم فضا بگیرد و به تعبیری هرچقد که layout ای که در آن هست جا دارد این همان قدر بزرگ شود

3)بگذارید wrapcontent که این یک جورهایی برعکس قبلی هست. یعنی اینکه هرچقدر که محتوایی که در آن هستند جا میخواهد این هم همانقدر بزرگ باشد! مثلا اگه 3 تا دکمه در آن هست همانقدر باشد سایزش نه بیشتر نه کمتر

شاید شما بپرسید که پس match parent چه تفاوت با fill parent دارد؟  این همان fill parent هست. فقط چون حس میکردن fill parent درست منظور را نمیرساند از API8 به بالا کردنش match parent. هرکدام را دوست دارید استفاده کنید پس.

در انتها هم گفتم که این Relative ای که ساختم وسطه والد خودش قرار بگیرد.

فقط حواستان باشد که margin هایی که دادیم را حذف کنید.

خب میبینید که حتی تبلت هم انتخاب کنم اینها وسط قرار میگیرند.

آموزش برنامه نویسی در اندروید

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

شما هرچی دوست دارید بگذارید. روی پوشه Res راست کلیک کنید و یک directory بنام drawable بسازید. اگر از نسخه های بالاتر API استفاده کنید خودش پیشفرض دارد اینها را که drawable های آن پسوند دارند. کاری نداشته باشید شما مثلا داخل  mdpi  بروید. اگر هم نداشتید این ها را همان drawable را خودتان بسازید و استفاده کنید.

حالا عکستان را در این پوشه کپی کنید. اینطوری مثلا:

آموزش برنامه نویسی در اندروید

حالا برای عکس دادن... یکی از دکمه ها را میگم و بقیه با خود شما. دکمه ای که میخواهید به آن عکس بدهید را داخل tag اش بنویسید:

android:background="@drawable/about"

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

شبیه ساز

فقط در نهایت شبیه ساز را بگم چطور اد کنید. ببینید در منوی start داخل run سرچ کنید: avd تا avd manager بالا بیاد برای شما. حال روی create کلیک کنید تا یک دستگاه جدید برای شما بسازد.

حالا ویژگی هایش را طبق زیر پر کنید. البته api که سلیقه خودتان هست وطبق نسخه هایی که دارید. تیک snapshot و GPU هم از اخرش بردارید حتما

خب تموم شد. حالا داخل اینتلیجی بروید. در بالا اسم پروژتان را نوشته سمت راست در یه منوی کشویی. آن را باز کنید بعد edit configuration را بزنید. حالا در تنظیماتی که خواهد آمد اسم شبیه سازتان را از بخش emulator انتخاب کنید. ok بزنیدو تمام. ازین به بعد run روی شبیه ساز اجرا میکند پروژه را.