پاسخ : آموزش برنامه نویسی اندروید برنامه نویسی [h=1]آموزش برنامه نویسی اندروید - قسمت ۳۱: نحوه نامگذاری String ها در یک اپلیکیشن[/h] اهداف آموزشی این قسمت عبارتند از: 1. معرفی نحوه نامگذاری String ها در اندروید 2. نحوه حذف، اضافه و ویرایش String ها در یک اپلیکیشن در آموزش قسمت سی ام تقریباً با ماهیت string ها در اندروید آشنا شدیم. چیزی که در ایجاد string ها از اهمیت بسزایی برخوردار است نحوه نامگذاری آن ها است. [h=3]نحوه نامگذاری string ها[/h] رعایت این نکان موجب می گردد تا Error های یک اپلیکیشن را به حداقل برسانیم. در نامگذاری string ها به هیچ وجه نباید از Space یا جای خالی استفاده کنیم: Hello World, MainActivity! همانطور که در کد فوق ملاحظه می شود مقابل name پس از علامت مساوی hello world به این صورت نوشته شده است که مابین hello و world یک فاصله قرار گرفته است و همین فاصله موجب می گردد تا اپلیکیشن ما Compile نشود و تا این مشکل رفع نگردد نخواهیم توانست به ادامه کار بپردازیم. نکته دیگر که در مورد نامگذاری string ها می بایست مد نظر قرار دهیم این است که می توانیم در نامگذاری خود از اعداد هم استفاده کنیم: Hello World, MainActivity! همانطور که در کد فوق ملاحظه می شود نام hello1 برای این string در نظر گرفته شده است. در نامگذاری string ها از _ یا به عبارتی همان Underscore هم می توان استفاده کرد(برای تایپ این علامت می توان با پایین نگه داشتن دکمه Shift دکمه Dash را فشار داد): Hello World, MainActivity! همانطور که در کد فوق ملاحظه می شود دو کلمه hello و world با یک _ از یکدیگر در نام hello_world جدا شده اند. در نامگذاری string ها از ساختار cameCase هم به صورت زیر می توان استفاده کرد: Hello World, MainActivity! همانطور که در کد فوق ملاحظه می شود کلمه hello نوشته شده سپس کلمه بعد که world است به آن چسبیده است با این شرط که حرف اول آن با حرف بزرگ نوشته شده است. در حقیقت اینکار برای خوانایی بیشتر صورت می گیرد(برای آشنایی بیشتر با ساختار camelCase به سری آموزش های زبان برنامه نوسی جاوا در سایت نردبان قسمت دهم مراجعه نمایید). به خاطر داشته باشیم که در نامگذاری string ها از Dash به هیچ وجه نمی توانیم استفاده کنیم: Hello World, MainActivity! همانطور که در کد فوق ملاحظه می شود دو کلمه hello و world با یک – یا همان Dash از یکدیگر جدا شده اند که اینکار خلاف استاندارد نامگذاری string ها است. علاوه بر Dash از دیگر علائم همچون @ و # و $ و % و & و غیره به هیچ وجه نمی توان استفاده کرد: Hello World, MainActivity! Hello World, MainActivity! Hello World, MainActivity! Hello World, MainActivity! Hello World, MainActivity! همانطور که در کد فوق ملاحظه می شود کلیه نام های در نظر گرفته شده به خاطر برخورداری از یکی از علائم فوق الذکر غیر قابل قبول می باشند. در آموزش گذشته با نحوه ایجاد یک string جدید آشنا شدیم. در ادامه قصد داریم تا با نحوه حذف، اضافه و ویرایش یک string بیشتر آشنا شویم: همانطور که در تصویر فوق مشاهده می شود فایل strings.xml را باز نموده و Tab مرتبط با Resources آن را کلیک می کنیم. همانطور که قبلا توضیح داده شد در سمت چپ این پنجره لیستی از string هایی که ایجاد کرده ایم را مشاهده می کنیم. در این تصویر دکمه Remove به معنی "حذف کردن" با یک بیضی قرمز رنگ مشخص شده است. در واقع پس از آنکه یک string را با یک بار کلیک کردن روی آن انتخاب کرده و به رنگ آبی درآمد، می توان روی دکمه Remove کلیک کنیم و آن string را حذف کنیم. نکته ای که در اینجا حائز اهمیت است این است که اگر string یی که قصد داریم آنرا حذف کنیم در جایی در اپلیکیشن ما مورد استفاده قرار گرفته باشد و ما آن را حذف کنیم، بلافاصله پس از Save کردن فایل خود برنامه با مشکل مواجه خواهد شد. از اینرو می بایست مراقب بوده تا string هایی که مورد استفاده نیستند را از این لیست حذف کنیم. پس از دکمه Remove دو دکمه Up و Down دیده می شوند که به ترتیب "بالا" و "پایین" ترجمه می شوند. کاری که این دو دکمه انجام می دهند این است که جایگاه string انتخاب شده در این لیست را به بالا و پایین انتقال می دهند. علاوه بر این روش حذف و همچنین روش اضافه کردن یک string که در آموزش قبل توضیح داده شد، می توان با استفاده از روش دیگری هم به حذف، اضافه و حتی ویرایش یک string پرداخت. برای این منظور در پنجره بالا روی Tab مربوط به strings.xml کلیک کرده و پنجره ای به شکل زیر خواهیم دید: همان لیستی که در پنجره قبل داشتیم اکنون به صورت کد قابل مشاهده است. فرض کنیم که در این کد قصد داریم متن مربوط به string مرتبط با hello را از Hello World, MainActivity! به فقط دو کلمه Hello World تغییر دهیم. برای این منظور به سادگی می توانیم بخشی از متن که نمی خواهیم را Delete کرده و فایل خود را Save کنیم: همانطور که در تصویر فوق ملاحظه می شود متن خود را به Hello World تغییر داده ایم. حال مجدد به Tab مرتبط با Resources باز می گردیم: همانطور که در تصویر فوق ملاحظه می شود پس از انتخاب کردن string مرتبط با hello ، به Value مرتبط با این string نگاه کرده و همانطور که در تصویر فوق با یک بیضی قرمز رنگ مشخص شده است خواهیم دید که مقدار آن در این پنجره هم آپ دیت شده است. مجدد به Tab مرتبط با strings.xml باز گشته این بار قصد داریم تا با کد نویسی یک string جدید ایجاد کنیم: همانطور که در تصویر فوق ملاحظه می شود، یک string جدید تحت عنوان newText به معنی "متن جدید" به صورت دستی کدنویسی کرده ایم و مقدار آن را معادل با متن This is a new text به معنی "این یک متن جدید است" قرار داده ایم. اکنون مجدد روی Tab مرتبط با Resources کلیک کرده و نتیجه را مشاهده می کنیم: ملاحظه می کنیم که string جدید با یک فلش قرمز رنگ نشان داده شده است و مقدار آن هم در کارد قرمز رنگ حاکی از آن است که دقیقاً همان چیزی است که در مرحله قبل وارد کردیم. توجه داشته باشیم که به همین راحتی که در Tab مرتبط با strings.xml می توانیم یک string جدید ایجاد کنیم، به همین آسانی هم می توانیم یک string را پاک کرده و آن را از لیست string ها حذف کنیم. پس از مطالعه این آموزش انتظار می رود بتوانیم به سؤالات زیر پاسخ بدهیم: 1. از چه علائمی در نامگذاری یک string نمی توان استفاده کرد؟ 2. منظور از اصطلاح camelCase چیست؟ 3. چنانچه یک string در جایی از اپلیکیشن مورد استفاده قرار گرفته باشد و آن را از لیست String های اپلیکیشن Delete کنیم چه اتفاقی خواهد افتاد؟
پاسخ : آموزش برنامه نویسی اندروید برنامه نویسی [h=1]آموزش برنامه نویسی اندروید قسمت ۳۲: آشنایی با واحد Hexadecimal[/h] اهداف آموزشی این قسمت عبارتند از: 1. معرفی مقادیر Hexadecimal 2. آشنایی با مقدار آلفا 3. آشنایی با واحد RGB 4. نحوه استفاده از ماشین حساب ویندوز برای تبدیل واحدها در این آموزش قصد داریم تا به طور خلاصه مبحث رنگ در توسعه اپلیکیشن را مورد بررسی قرار دهیم. شاید تاکنون مشاهده کرده باشید که در CSS مثلاً به منظور نشان دادن رنگ سفید از کد #ffffff استفاده می شود. در این آموزش خواهیم فهمید که به چه نحوی می توانیم به تحلیل کد فوق پرداخته و از این پس کد رنگ مد نظرمان را بنویسیم (به خاطر داشته باشیم که علامت # در زبان انگلیسی Hash Mark یا Pound Sign نامیده می شود). به طور کلی سیستم Hexadecimal یک سیستم نامگذاری است که بر پایه عدد 16 می باشد که در آن اعداد 0 تا 9 نشانگر اعداد صفر تا نه بوده به علاوه حروف a، b، c، d، e، f که به ترتیب حرف a نشانگر عدد 10 است، حرف b نشانگر عدد 11 است، حرف c نشانگر عدد 12 است، حرف d نشانگر عدد 13 است، حرف e نشانگر عدد 14 است و در نهایت حرف f نشانگر عدد 15 است. فایده استفاده از اعداد Hexadecimal این است برنامه نویس یا طراح بهتر می تواند آنها را بخواند چرا که در آن هر هشت بیت با کنار هم قرار گرفتن دو Digit که می توانند هم یکی از اعداد بالا باشند و هم یکی از حروف بالا و یا ترکیبی از هر دو آنها نمایش داده می شود. کد #ffffff تحت عنوان RGB بیست و چهار بیتی شناخته می شود. به عبارت دیگر دو f اول مربوط به R است که مخفف واژه Red به معنی"قرمز"می باشد، دو f دوم مربوط به G است که مخفف واژه Green به معنی "سبز" بوده و در نهایت دو f سوم مربوط به B است که مخفف Blue به معنی "آبی" می باشد. حال همین کد را می توانیم به ARGB سی و دو بیتی تبدیل کنیم که اینکار با اضافه کردن دو f دیگر به ابتدای کد فوق صورت می گیرد. به عبارت دیگر کد ما به صورت #ffffff ff در خواهد آمد. در واقع این دو f جدید نماینده آلفا هستند که این وظیفه را دارا است که رنگ ما را به مقداری که تمایل داریم محو سازد. اکنون با مد نظر قرار دادن توضیحات فوق می توان این نتیجه را گرفت که هر یک از رنگ های قرمز، سبز، آبی و آلفا هشت بیت را به خود اختصاص می دهند: حال ببینیم که هشت بیت به چه معنا است. در حقیقت هر عدد هشت بیتی از 0 تا 255 را می تواند شامل شود که با هشت عدد که ترکیبی از 0 و 1 هستند می توان آن را نمایش داد. در حقیقت این 0 و 1 همان دو عدد معروفی هستند که تحت عنوان Binary Numbering System شناخته شده و در کامپیوترها مورد استفاده قرار می گیرند. [h=3]نحوه استفاده از ماشین حساب ویندوز برای تبدیل واحدها[/h] اگر بخواهیم یک عدد هشت بیتی را به صورت Hexadecimal نمایش دهیم می بایست محاسبه کنیم که معادل Hexadecimal آن عدد هشت بیتی چند است. برای این منظور همانطور که در تصویر فوق ملاحظه می شود می توان از ماشین حساب خود ویندوز استفاده کرد: همانطور که در تصویر فوق مشاهده می شود، پس از اجرای کردن نرم افزار Calculator خود سیستم عامل ویندوز به منوی اصلی روی گزینه View کلیک کرده سپس گزینه Programmer را انتخاب می کنیم: حال می بینیم که گزینه های بیشتری به این ماشین حساب اضافه شده است. همانطور که در تصویر فوق ملاحظه می شود، گزینه Dec که مخفف واژه Decimal است انتخاب شده است. زمانیکه این گزینه انتخاب شده باشد می توانیم عدد هشت بیتی خود که از 0 تا 255 است را وارد کنیم. به طور مثال عدد 255 را وارد می کنیم: حال همانطور که در تصویر فوق مشخص شده است روی گزینه Hex کلیک می کنیم که با اینکار به معادل Hexadecimal عدد هشت بیتی 255 دست خواهیم یافت: همانطور که در تصویر فوق ملاحظه می شود معادل FF برای عدد هشت بیتی 255 در نظر گرفته می شود. برای درک بهتر مطالب فوق اقدام به ساخت یک رنگ جدید می کنیم به این صورت که می خواهیم رنگ ما از 255 واحد رنگدانه قرمزی که دارد 150 واحد آن را استفاد کنیم، از 255 واحد سبزی که داریم کل آن 255 واحد رنگدانه را اضافه کنیم و در نهایت 50 واحد از 255 واحد مرتبط با رنگدانه آبی را نیز مورد استفاده قرار دهیم(در این مثال از آلفا استفاده نمی کنیم). به طور خلاصه: حال برای تبدیل واحدهای فوق مجدداً به ماشین حساب ویندوز رجوع می کنیم به این صورت که اول می خواهیم معادل Hexadecimal رنگ قرمز را محاسبه کنیم. برای این منظور عدد 150 را با انتخاب حالت Dec وارد کرده سپس روی گزینه Hex کلیک می کنیم: همانطور که در تصویر فوق ملاحظه می شود، معادل Hexadecimal عدد 150 معادل با 96 است. سپس ماشین حساب را صفر کرده، آن را در حالت Dec قرار می دهیم و برای محاسبه رنگ سبز عدد 255 را وارد می کنیم و مجدد روی گزینه Hex کلیک می کنیم: می بینیم که معادل Hexadecimal عدد 255 معادل با FF است. در نهایت برای مشخص کردن رنگ آبی مجدد ماشین حساب را صفر کرده، آن را در حالت Dec قرار داده و عدد 50 را وارد می کنیم: همانطور که در تصویر فوق ملاحظه می شود پس از کلیک کردن روی گزینه Hex عدد 32 نمایش داده خواهد شد. حال به طور خلاصه رنگ ساخته شده ما به صورت زیر خواهد بود: یعنی رنگی با کد #96FF32 رنگی است که 150 رنگ دانه قرمز دارد، رنگ سبز کاملاً در آن استفاده شده است و مقدار آبی آن معادل با 50 است. اکنون اگر بخواهیم ببینم که کد فوق در صفحات مانیتور به چه رنگ است می توانیم عکس زیر را مد نظر قرار دهیم: به خاطر داشته باشیم که برای حروف در مقادیر Hexadecimal می توان هم از حروف بزرگ به صورت FF و هم از حروف کوچک به صورت ff استفاده کرد (به نظر می رسد اگر یک رویکدر ثابت را همواره در کدنویسی اتخاذ کنیم در زمان ویرایش کد خود کمتر دچار سر در گمی شویم). پس از مطالعه این آموزش انتظار می رود بتوانیم به سؤالات زیر پاسخ بدهیم: 1. منظور از Hexadecimal چیست؟ 2. مزیت Hexadecimal نسبت به 0 و 1 چیست؟ 3. تفاوت مابین RGB بیست و چهار بیتی و سی و دو بیتی در چیست؟ 4. عبارت RGB مخفف چه واژگانی است؟ 5. هر یک از رنگهای RGB چند بیت را به خود اختصاص می دهند؟ 6. هر بیت چه طیفی از اعداد را شامل می شود؟ 7. نحوه تبدیل واحدهای Decimal به Hexadecimal به چه شکل است؟ در آموزش آتی به شکل عملی نحوه به کارگیری واحد Hexadecimal را مورد بررسی قرار خواهیم داد(لازم به ذکر است در این آموزش از مطالب آموزشی سایت خانه اندروید ایران استفاده شده است).
پاسخ : آموزش برنامه نویسی اندروید برنامه نویسی [h=1]آموزش برنامه نویسی اندروید - قسمت ۳۳: به کار گیری واحد Hexadecimal در تولید رنگ[/h] اهداف آموزشی این قسمت عبارتند از: 1. معرفی روش استفاده از فتوشاپ برای تولید رنگ 2. نحوه استفاده از فتوشاپ برای یافتن Hexadecimal مد نظر 3. نحوه ایجاد یک رنگ بدون نیاز با فتوشاپ و ماشین حساب 4. نحوه خلاصه نویسی یک کد Hexadecimal پس از آشنایی با واحد Hexadecimal در آموزش گذشته، در این آموزش قصد داریم تا به طور علمی از Hexadecimal برای تولید رنگ استفاده کنیم. اگر خاطرمان باشد در آموزش سی و دوم رنگی به مقادیر زیر ایجاد کردیم: اکنون برای آنکه بتوانیم ببینیم که این رنگ در دنیای واقعی چه رنگی است، نیاز است تا از یک نرم افزار ویرایش عکس مثل فتوشاپ استفاده کنیم. برای این منظور نرم افزار فتوشاپ را اجرا کرده و به صورت زیر عمل می کنیم: از منوی اصلی نرم افزار روی گزینه Window کلیک کرده سپس همانطور که در تصویر فوق مشخص شده است روی گزینه Color کلیک می کنیم(در عوض می توان بدون مراجعه به منوی فوق کلید F6 را فشار داد): همانطور که در تصویر فوق ملاحظه می شود پنجره مربوط به Color باز خواهد شد. همانطور که در تصویر فوق با یک فلش قرمز رنگ مشخص شده است، روی منوی پنجره Color کلیک کرده و از میان گزینه های موجود گزینه Web Color Sliders را انتخاب می کنیم: پس از انتخاب گزینه Web Color Sliders، گزینه های پنجره Color به گزینه هایی که در کادر قرمز رنگ در تصویر فوق نشان داده شده اند تغییر پیدا خواهند کرد. در مقابل می بینیم که برای هر عدد یک Slider متناظر با R و G و B در نظر گرفته شده است که به ترتیب همان رنگهای قرمز، سبز و آبی هستند. در این پنجره فقط رنگ ها مد نظر قرار داده شده اند و خبری از گزینه آلفا نیست. حال اعداد به دست آمده را به وارد می کنیم: پس از وارد کردن اعداد به دست آمده در پنجره Color، رنگ نهایی با یک فلش قرمز رنگ نشان داده شده است. به عبارت دیگر اگر در اپلیکیشن خود رنگ متنی را معادل با #96ff32 قرار دهیم، متن ما به رنگی نزدیک به سبز روی صفحه دستگاه به نمایش در خواهد آمد. [h=3]استفاده از فتوشاپ برای یافتن Hexadecimal مد نظر[/h] در پایان می توان به یکی از مزیت های نرم افزار فتوشاپ نیز اشاره کرد. در واقع ما با استفاده از این نرم افزار بدون نیاز به ماشین حساب خواهیم توانست به معادل Hexadecimal یک رنگ دست پیدا کنیم. برای این منظور روی مربع سبز رنگی که در تصویر فوق با فلش مشخص شده است دو بار کلیک می کنیم و پنجره ای به شکل زیر مشاهده خواهیم کرد: همانطور که در تصویر فوق ملاحظه می شود، کادر قرمز رنگ نشانگر همان مقادیر هشت بیتی که در ماشین حساب وارد کردیم تا معادل Hexadecimal آنها را بیابیم می باشد. چیزی که با یک فلش قرمز رنگ مشخص شده است معادل Hexadecimal همان اعدادی است که در کادر قرمز رنگ می باشند. علاوه بر این در تصویر فوق چیزی با یک دایره قرم رنگ مشخص شده است که با نشانگر موس خود می توانیم آن را جا به جا سازیم. برای نمونه جایگاه آن را تغییر می دهیم: همانطور که در تصویر فوق مشاهده می شود، جایگاه دایره که در تصویر قبل با یک دایره قرمز رنگ نشان داده شده بود را با موس خود به پایین انتقال داده ایم. حال می بینیم که مقادیر RGB که در کادر قرمز رنگ قرار دارند تغییر پیدا کرده و بالتبع مقدار Hexadecimal که با یک فلش قرمز رنگ مشخص شده نیز به عدد #578928 تغییر پیدا کرده است. در این تصویر مربعی که پایین آن کلمه Current به معنی "کنونی" نوشته شده است را با عدد 1 و مربعی که بالای آن کلمه New به معنی "جدید" نوشته شده است را با عدد 2 مشخص کرده ایم. به عبارت دیگر مربع شماره یک رنگ قبلی ما بوده است و مربع شماره دو رنگ جدیدی است که ساخته ایم. علاوه بر این، یک Slider که به صورت عمودی در این پنجره قرار گرفته است نیز با یک بیضی قرمز رنگ مشخص شده است که با بالا و پایین بردن آن به طیف های رنگی گوناگونی دست پیدا خواهیم کرد. [h=3]نحوه ایجاد یک رنگ بدون نیاز با فتوشاپ و ماشین حساب[/h] به طور کلی می توان گفت که 00 معادل با "حداقل رنگ" است و FF معادل با "حداکثر رنگ" می باشد بطوریکه یک عدد Hexadecimal از صفر شروع شده و تا عدد نه ادامه می یابد و پس از عدد نه به جای آنکه عدد ده در نظر گرفته شود حرف A مدنظر قرار داده می شود و به همین ترتیب تا حرف F که معادل با عدد 16 است ادامه می یابد: برای روشن شدن این مطلب به جدول زیر توجه نمایید: همانطور که در جدول فوق ملاحظه می شود، چنانچه مقادیر رنگ های قرمز، سبز و آبی معادل با صفر باشد رنگ حاصله سیاه خواهد بود، چنانچه مقادیر رنگ های قرمز، سبز و آبی به طور کامل استفاده شده باشد رنگ ما سفید خواهد بود، چناچه از سه رنگ قرمز، سبز و آبی فقط رنگ قرمز به طور کامل استفاده شده باشد و دو رنگ دیگر سبز و آبی اصلا استفاده نشده باشند رنگ حاصله قرمز خواهد بود، چنانچه از سه رنگ قرمز، سبز و آبی فقط رنگ سبز به طور کامل استفاده شده باشد و دو رنگ دیگر قرمز و آبی اصلا استفاده نشده باشند رنگ حاصله سبز خواهد بود و در نهایت چنانچه از سه رنگ قرمز، سبز و آبی فقط رنگ آبی به طور کامل استفاده شده باشد و دو رنگ دیگر قرمز و سبز اصلا استفاده نشده باشند رنگ حاصله آبی خواهد بود. در حقیقت با این قیاس حتی اگر به ماشین حساب و نرم افزار فتوشاپ هم دسترسی ندشته باشیم، خواهیم توانست رنگی نزدیک به رنگی که مد نظرمان است را ایجاد کنیم. مثلاً اگر رنگشناسی ما خوب باشد می دانیم که رنگ بنفش از ترکیب رنگهای قرمز و آبی به دست می آید. حال با دانستن این نکته یک کد Hexadecimal می نویسیم که مقدار قرمز آن کامل باشد، اصلا رنگ سبز نداشته باشد و مجدد مقدار آبی آن هم کامل باشد، بنابراین کد #FF00FF را به دست خواهیم آورد که به رنگ بنفش روشن به صورت زیر خواهد بود: (لازم به ذکر است این رنگ بسته به نوع صفحه نمایش و میزان کیفیت آن می تواند طیفی از صورتی پررنگ تا بنفش روشن باشد). [h=3]نحوه خلاصه نویسی یک کد Hexadecimal[/h] به خاطر داشته باشیم که اگر مقادیر یک کد Hexadecimal برابر یک دیگر بودند می توانیم یکی از آنها را بنویسیم. مثلاً کد رنگ قرمز که در بالا دارای مقدار #FF0000 بود را از آنجا که هر دو رقم مربوط به رنگ قرمز مشابه هستند(هر دو F هستند)، هر دو رقم مربوط به رنگ سبز مشابه هستند(هر دو 0 هستند) و هر دو رقم مربوط به رنگ آبی مشابه هستند(هر دو 0 هستند) می توانیم یک از آنها را نوشته و کد فوق را به صورت خلاصه به شکل #F00 بنویسیم(تفاوتی مابین حروف بزرک و کوچک نیست. در واقع اگر در فتوشاپ با حرف بزرگ چیزی را وارد کنیم به صورت خودکار به حرف کوچک تبدیل خواهد شد). پس از مطالعه این آموزش انتظار می رود بتوانیم به سؤالات زیر پاسخ بدهیم: 1. FF در واحد Hexadecimal به چه معنا است؟ 2. 00 در واحد Hexadecimal به چه معنا است؟ 3. معادل عددی حرف D در بازه شانزده تایی مقادیر Hexadecimal چند است؟ 4. به چه نحوی می توان یک کد Hexadecimal کامل را به صورت خلاصه نوشت؟ 5. با توجه به چرخه رنگ زیر رنگ های درخواست شده را به صورت ذهنی بسازید؟ الف: کد Hexadecimal رنگ زرد چیست؟ ب: کد Hexadecimal رنگ صورتی روشن چیست؟
پاسخ : آموزش برنامه نویسی اندروید برنامه نویسی [h=1]آموزش برنامه نویسی اندروید - قسمت ۳۴: نحوه ذخیره سازی پروژه ها در اکلیپس[/h] اهداف آموزشی این قسمت عبارتند از: 1. نحوه ذخیره سازی پروژه ها در اکلیپس 2. نحوه Import کردن یک پروژه به اکلیپس در این آموزش قصد داریم تا پروژه ای که در آموزش هشتم تحت عنوان My First Android Project ساختیم را به صورت یک فایل Zip ذخیره سازیم. [h=3]نحوه ذخیره سازی پروژه ها در اکلیپس[/h] برای این منظور به محلی که در حین آماده سازی محیط برنامه نویسی اکلیپس برای Workspace در نظر گرفتیم مراجعه می کنیم. چنانچه به خاطر نیاوریم که محل انتخابی برای Workspace کجا است، می توانیم به صورت زیر عمل کنیم: از منوی اصلی اکلیپس روی گزینه File کلیک کرده سپس روی گزینه Switch Workspace کلیک می کنیم و همانطور که در تصویر فوق با یک فلش قرمز رنگ مشخص شده است روی گزینه Other کلیک می کنیم: سپس پنجره ای به صورت فوق باز خواهد شد که نشانگر محلی است که Workspace ما در آن ذخیره شده است. برای مثال Workspace خود را روی درایو C داخل فولدر dev ذخیره کرده ام. اکنون که مشخص شد Workspace در چه محلی ذخیره شده است، به راحتی می توانیم وارد آن فولدر شویم(لازم به ذکر است این مکان ممکن است روی سیستم هر کاربری متفاوت باشد): همانطور که در تصویر فوق ملاحظه می شود، وارد فولدری شده ایم که Workspace در آن ذخیره شده است. حال می توانیم فولدر مربوط به پروژه خود تحت عنوان My First Android Project را مشاهده کنیم: اکنون روی فولدر مربوط به پروژه خود راست کلیک کرده و همانطور که در تصویر فوق ملاحظه می شود از میان گزینه های موجود، روی گزینه Add to archive به معنی "اضافه کردن به آرشیو" کلیک می کنیم(چنانچه به تصویر کنار این گزینه دقت کنیم، متوجه خواهیم شد که مربوط به لوگوی نرم افزار WinRAR است. چنانچه کاربری این نرم افزار را روی سیستم خود نصب نداشته باشد به سادگی می توان این نرم افزار را از اینترنت به صورت رایگان دانلود نمود): پس از کلیک کردن روی گزینه Add to archive پنجره ای به صورت فوق باز خواهد شد. از میان کلیه تنظیمات این پنجره صرفاً نیاز است که فرمت فایلی که می خواهیم ایجاد کنیم را همانطور که در تصویر فوق با یک فلش قرمز رنگ نشان داده شده است روی گزینه ZIP قرار دهیم و مابقی تظیمات را به صورت پیش فرض بگذاریم. حال می توانیم روی گزینه OK کلیک نماییم: به محض کلیک کردن روی گزینه OK یک فایل zip با همان نامی که برای پروژه خود در نظر گرفته بودیم ایجاد خواهد شد. حال می توانیم این فایل جدید zip را Cut کردن و جایی روی سیستم خود ذخیره سازیم. برای این مثال بنده آن را روی Desktop قرار خواهم داد. اکنون نرم افزار اکلیپس را اجرا می کنیم: پس از مراجعه به پنجره Package Explorer همانطور که در تصویر فوق مشاهده می شود تنها پروژه خود را ملاحظه خواهیم کرد. از آنجا که ما توانسته ایم با موفقیت پروژه خود را به صورت یک فایل zip ذخیره سازیم، خواهیم توانست با خیال راحت این پروژه را Delete کنیم: برای Delete کردن پروژه خود روی نام پروژه راست کلیک کرده و از میان گزینه های موجود همانطور که با یک فلش قرمز رنگ مشخص شده روی گزینه Delete کلیک می کنیم: پس از کلیک کردن روی گزینه Delete با پنجره جدیدی به صورت بالا مواجه خواهیم شد. در این تصویر گزینه ای تحت عنوان Delete project content on disk با یک فلش قرمز رنگ مشخص شده است. این عبارت به معنی "محتویات این پروژه را از روی هارد دیسک پاک کن" می باشد. به عبارت دیگر اگر این گزینه را تیک دار نماییم، کل این پروژه را از روی سیستم خود پاک خواهیم کرد و دیگر به هیچ وجه نخواهیم توانست به آن دست پیدا کنیم(لازم به ذکر است که پس از پاک کردن پروژه ها در اکلیپس، پروژه های Delete شده به Recycle Bin منتقل نخواهند شد و از همین رو است که نمی توانیم به آنها دسترسی پیدا کنیم). حال چنانچه این گزینه را تیک دار نکنیم، این پروژه فقط از داخل Package Explorer پاک خواهد شد و این در حالی است که هنوز در داخل Workspace باقی خواهد ماند. از آنجا که در این مثال از قبل یک Backup یا فایل پشتیبان از پروژه خود گرفته ایم با خیال راحت می توانیم تیک گزینه فوق را بزنیم و سپس روی گزینه OK کلیک کنیم: حال با نگاهی به فولدر Workspace خواهیم دید که این پروژه کاملاً از روی سیستم ما پاک شده است. اکنون اگر به پنجره Package Explorer در محیط اکلیپس نگاهی بیندازیم، خواهیم دید که هیچ پروژه ای داخل آن نیست: [h=3]نحوه Import کردن یک پروژه به اکلیپس[/h] اکنون فرض کنیم که قصد داریم تا اولین پروژه ای را که در قسمت هشتم از آموزش ها ایجاد کردیم و در این آموزش از روی آن یک Backup گرفتیم را مجدد وارد اکلیپس کنیم تا تغییراتی روی آن اعمال کنیم: همانطور که پس از تبدیل پروژه خود به یک فایل zip گفتیم، این فایل را روی Desktop قرار می دهیم. حال به محیط اکلیپس باز گشته و همانند تصویر زیر از منوی اصلی نرم افزار روی گزینه فایل کلیک کرده و روی گزینه Import کلیک می نماییم: پس از کلیک روی گزینه Import با پنجره دیگری به صورت زیر مواجه خواهیم شد: همانطور که در تصویر فوق مشاهده می کنیم، چندین گزینه وجود دارند که از میان آنها روی فولدر General کلیک کرده و سپس همانطور که در تصویر فوق با یک فلش قرمز رنگ مشخص شده است گزینه Existing Projects into Workspace به معنی "وارد کردن پروژه های موجود به داخل Workspace اکلیپس" را انتخاب کرده و سپس روی گزینه Next کلیک می کنیم: پس از کلیک روی گزینه Next با پنجره فوق مواجه خواهیم شد که دارای دو گزینه است. از آنجا که فرمت فایلی که می خواهیم به اکلیپس Import کنیم zip است، از اینرو گزینه Select archive file که در تصویر فوق با یک بیضی قرمز رنگ مشخص شده است را انتخاب نموده سپس روی گزینه Browse کلیک می کنیم و با پنجره ای به صورت زیر مواجه خواهیم شد: حال در این مرحله می بایست به مکانی که فایل zip خود را در آن قرار داده ایم برویم و از آنجا که در این آموزش فایل خود را روی Desktop قرار داده ایم، به Desktop رفته، فایل zip را انتخاب کرده و روی گزینه Open کلیک می کنیم: پس از کلیک کردن روی دکمه Open به پنجره قبل بازگشته و این در حالی است که در بخش مربوط به Projects در این پنجره، همانطور که در تصویر فوق مشاهده می شود پروژه ما که My First Android Project نام داشت وارد شده و کنار آن هم تیک خورده است. حال می توانیم روی گزینه Finish کلیک کنیم که پس از اینکار خواهیم دید که این پروژه جدید وارد اکلیپس خواهد شد: همانطور که می بینیم پروژه با موفقیت وارد اکلیپس شده است. در واقع چنانچه به فولدر مربوط به Workspace هم مراجعه کنیم، خواهیم دید که این پروژه جدید وارد آن فولدر هم شده است: همانطور که در آموزش اول اشاره شد، یکی از محیط های برنامه نویسی که از آن طریق می توان اقدام به ساخت اپلیکیشن اندروید کرد محیط برنامه نویسی ADT Bundle است که ساختاری شبیه اکلیپس دارد. در واقع نکاتی که پیرامون ذخیره سازی و همچنین Import کردن یک پروژه به داخل اکلیپس که در این آموزش مورد بحث قرار گرفت را نیز می توان در مورد ADT Bundle نیز مورد استفاده قرار داد. پس از مطالعه این آموزش انتظار می رود بتوانیم به سؤالات زیر پاسخ بدهیم: 1. فرمتی که می توان با آن پروژه اندروید خود را ذخیره سازیم چیست؟ 2. آیا در صورت پاک کردن کامل پروژه از داخل اکلیپس، امکان باز گرداندن آن از داخل Recycle Bin وجود دارد یا خیر؟ 3. به چه نحوی می توان یک پروژه را وارد اکلیپس نمود؟
پاسخ : آموزش برنامه نویسی اندروید برنامه نویسی [h=1]آموزش برنامه نویسی اندروید - قسمت ۳۵: آشنایی با LinearLayout[/h] اهداف آموزشی این قسمت عبارتند از: 1. برنامه نویسی مهم تر است یا طراحی رابط گرافیکی 2. آشنایی با LinearLayout 3. نحوه به کار گیری Graphical Layout پس از آشنایی با نحوه به کار گیری XML در طراحی UI در آموزش بیست و هشتم، در این آموزش قصد داریم تا نگاهی عمیق تر به مبحث رابط گرافیکی کاربر در توسعه یک اپلیکیشن اندرویدی داشته باشیم. [h=3]برنامه نویسی مهم تر است یا طراحی رابط گرافیکی؟[/h] اگر بخواهیم تصور کنیم که در توسعه اندروید، برنامه نویسی جاوا از اهمیت بیشتری برخوردار است یا طراحی رابط گرافیکی یا همان UI مسلماً گروهی را خواهیم یافت که طرفدار اهمیت بیشتر برنامه نویسی یک اپلیکیشن هستند و گروهی هم بیشتر روی طراحی UI تکیه می کنند. واقعیت امر این است که این دو مسئله مکمل یکدیگر می باشند. فرض کنیم که ما به زبان برنامه نویسی جاوا بسیار مسلط هستیم و در پشت پرده یک کدنویسی بسیار حرفه ای انجام داده ایم اما این در حالی است که اپلیکیشن طراحی شده ما از لحاظ بصری ضعیف است و حتی کاربر را سردرگم هم می کند. عکس این قضیه هم صادق است. به عبارت دیگر فرض کنیم که ما یک طراح گرافیکی حرفه ای هستیم و با اصول طراح و رنگ شناسی به خوبی آشنا هستیم و به راحتی می توانیم UI هایی برای اپلیکیشن های خود طراحی کنیم که نظر هر کاربر را به خود جلب می کند اما در عین حال کدنویسی اپلیکیشن ما تا حدودی دارای Bug است و حتی این احتمال وجود دارد که کاربر در حین کار با اپلیکیشن ما با مشکل مواجه شود. برای روشن شدن این مسئله می توانیم بازی Angry Birds که در سطح دنیا با استقبال خوبی مواجه شده است را مد نظر قرار دهیم. فرض کنیم که این بازی کدنویسی بسیار حرفه ای داشت به همین صورت که می بینیم اما از لحاظ بصری همانند بازی های آتاری که بیست سال پیش وجود داشتند بود. در چنین حالتی این بازی به هیچ وجه توان رقابت با بازی هایی که امروزه در بازار وجود دارند را نداشت. حال عکس این قضیه را فرض کنیم. بازی پرندگان خشمگین با همین UI که مشاهده می کنیم بود ولی برنامه نویسی آن بسیار ضعیف بود. به عبارت دیگر در حین بازی کردن اپلیکیشن متوقف می شد و یا سطح دشواری آن حساب شده نبود. مثلا با یک شلیک بسیار آهسته کل ساختمان هدف می آمد پایین! می بینیم که برنامه نویسی یک اپلیکیشن و طراحی رابط گرافیکی لازم و ملزوم یکدیگر می باشند. اکنون از آنجا که در این سری از آموزش ها قصد داریم تا یکسری پروژه تعریف کنیم و در قالب آن پروژه ها توسعه اندروید را فرا بگیریم، پس نیاز است تا با هر دو مسئله آشنا شویم. در ابتدا به مسئله UI یا همان رابط گرافیکی کاربر می پردازیم. [h=3]انواع Layout ها[/h] به طور کلی می توان گفت که هر فایل XML در برگیرندۀ یکی از انواع مختلف Layout ها می باشد. برای مثال پروژه ای جدید تحت عنوان Layouts به معنی "انواع Layout ها" در محیط اکلیپس ایجاد می کنیم(برای آشنایی بیشتر با نحوه ساخت یک پروژه جدید در محیط برنامه نویسی اکلیپس به آموزش هشتم مراجعه نمایید). پس از باز کردن فایل main.xml که در زیر شاخه فولدر layout قرار دارد، با کد زیر مواجه خواهیم شد: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" androidrientation="vertical" > <TextView android:layout_width="fill_parent" android:layout_height="fill_parent" android:text="@string/hello" android:textColor="#fff"> <LinearLayout> همانطور که در کد فوق مشاهده می کنیم، نوع Layout به کار گرفته شده در این پروژه به صورت پیش فرض یک LinearLayout می باشد(لازم به ذکر است واژه Linear از واژه Line به معنی "خط" گرفته شده است که به معنی "خطی" می باشد). در یک LinearLayout همانطور که از نام این Layout بر می آید، عناصر روی صفحه در امتداد یک خط یکی پس از دیگری قرار می گیرند. حال اینکه این عناصر به صورت عمودی در کنار یکدیگر قرار گیرند یا به صورت افقی بسته تنظیماتی است که داخل این Layout انجام می دهیم. همانطور که در کد فوق ملاحظه می شود Value متد orientation این Layout معادل با vertical به معنی "عمودی" در نظر گرفته شده است. به عبارت دیگر اگر مثلاً یک TextView دیگر به این Layout اضافه کنیم، این TextView جدید زیر TextView قبلی قرار می گیرد و هر دو به صورت عمودی در کنار یکدیگر قرار می گیرند. [h=3]نحوه به کار گیری Graphical Layout[/h] همانطور که در آموزش بیست و هشتم توضیح داده شد، می توانیم با کدنویسیی مشابه آنچه در آن آموزش دیدیم، اقدام به ایجاد یک TextView ، دکمه و یا هر چیزی دیگری روی UI اپلیکیشن خود نماییم اما این در حالی است که اینکار نه تنها زمان بر می باشد بلکه احتمال خطای ما را نیز افزایش خواهد داد. به عبارت دیگر با استفاده از Graphical Layout به سادگی با استفاده از Drag & Drop خواهیم توانست بدون نیاز به نوشتن کد اقدام به ساخت عناصر مختلفی همچون TextView نماییم. برای روشن شدن این مطلب، این کار را به صورت عملی انجام خواهیم داد: همانطور که در تصویر فوق مشاهده می کنیم، با کلیک کردن روی گزینه Graphical Layout که با یک بیضی قرمز رنگ مشخص شده است به محیط گرافیکی فایل XML مرتبط با Layout دست پیدا خواهیم کرد. همانطور که در قسمت فوق توضیح داده شد، قصد داریم تا یک TextView دیگر به UI خود اضافه کنیم. برای این منظور از Tab های مختلفی که در Graphical Layout وجود دارد روی گزینه Form Widgets کلیک کرده و از میان گزینه های موجود یکی از گزینه های مربوط به TextView را انتخاب می کنیم(به طور کلی برای ساخت یک TextView سه گزینه TextView ، Medium Text و Large Text وجود دارد). برای مثال، همانطور که در تصویر فوق مشاهده می شود، با موس خود گزینه Large Text را گرفته و به سمت UI می کشیم و به محض اینکه نشانگر موس ما روی UI قرار گیرد یک علامت به علاوه کوچک کنار نشانگر موس نمایان خواهد شد که به معنی این است که پس از رها کردن دکمه موس TextView به UI اضافه خواهد شد: در تصویر فوق نقطه چینی به رنگ شبرنگ با یک فلش قرمز رنگ مشخص شده است. در حقیقت این نقطه چین حاکی از آن است که این TextView جدید که قرار است روی UI قرار بگیرد، داخل مستطیلی قرار خواهد گرفت که با نقطه چین زیر TextView قبلی مشخص شده است(در واقع از آنجا که Value متد orientation این Layout معادل با vertical است، TextView جدید زیر TextView قبلی قرار خواهد گرفت): پس از رها کردن دکمه موس، TextView جدید روی UI قرار می گیرد(لازم به ذکر است از آنجا که از میان سه نوع TextView گزینه Large Text را انتخاب کردیم، از اینرو اندازه فونت این TextView جدید بزرگ تر از حالت قبلی خواهد بود). اکنون اگر روی Tab مربوط به main.xml کلیک کنیم خواهیم دید که یک TextView دیگر پس از TextView قبلی ایجاد شده است: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" androidrientation="vertical"> <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/hello" > <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Large Text" android:textAppearance="?android:attr/textAppearanceLarge" > <LinearLayout> حال فرض کنیم که به جای آنکه این دو TextView زیر یکدیگر به صورت عمودی قرار گیرند، می خواهیم آن دو را در کنار یکدیگر به صورت افقی قرار دهیم. برای این منظور دو راه کار وجود دارد که یک از طریق ویرایش فایل XML است و دیگری از طریق پنجره Properties است که در ابتدا این کار را از طریق ویرایش فایل XML انجام خواهیم داد. همانطور که در کد فوق ملاحظه می شود، در کد مربوطه به LinearLayout مقدار نسبت داده شده به متد orientation برابر با vertical است. حال اگر این مقدار را به horizontal تغییر دهیم عناصر داخل این Layout به صورت افقی کنار یکدیگر قرار خواهند گرفت. اکنون برای مشاهده نتیجه مجدد روی Tab مربوط به Graphical Layout کلیک می کنیم: همانطور که در تصویر فوق ملاحظه می شود، پس از تغییر مقدار متد orientation از حالت vertical به horizontal فقط همان TextView اول را خواهیم دید و TextView جدیدی که ساختیم از دید پنهان است. در حقیقت علت این مسئله این است که همانطور که در تصویر فوق مشاهده می شود width یا عرض TextView قبلی برابر با fill_parent است: به عبارت دیگر عرض این TextView کل صفحه UI را در برخواهد گرفت از این روی TextView جدیدی که به صورت افقی در کنار آن قرار گرفته است به بیرون UI رانده شده است. برای رفع این مشکل می بایست مقدار متد width را از حالت fill_parent به wrap_content تغییر دهیم(برای آشنایی بیشتر با این مقادیر به آموزش بیست و هشتم مراجعه نمایید): اکنون مشاهده می کنیم که هر دو TextView در کنار یکدیگر قرار گرفته اند. راهکار دوم برای تغییر مقدار width از fill_parent به wrap_content استفاده از پنجره Properties است. برای این منظور مقدار متد width را دوباره با حالت اول باز می گردانیم تا این بار این تغییرات را در پنجره Properties اعمال کنیم: ابتدا روی چیزی که می خواهیم تنظیمات آن را در پنجره Properties تغییر دهیم کلیک می کنیم تا انتخاب شود (مرحله 1). سپس در پنجره Properties روی Tab مربوط به Misc کلیک می کنیم تا زیرشاخه های آن باز شوند (مرحله 2) و در نهایت همانطور که در مرحله 3 نشان داده شده است روی مقدار مقابل Layout width کلیک کرده و روی گزینه wrap_content کلیک می کنیم تا انتخاب شود: همانطور که در تصویر فوق ملاحظه می شود، باز هم هر دو TextView به صورت افقی در کنار یکدیگر قرار می گیرند (برای آشنایی بیشتر با پنجره Properties به آموزش بیستم مراجعه نمایید). پیش از این گفتیم که برای تغییر مقدار متد orientation از vertical به horizontal راه کار دیگری هم وجود داشته و آن استفاده از پنجره Properties است. پس از آنکه تنظیمات UI را به حال اول برگرداندیم، ابتدا روی جایی در صفحه مشکی UI کلیک می کنیم. با این کار به اکلیپس می فهمانیم که منظور ما از این کار انتخاب کل UI است. سپس به پنجره Properties رفته و تنظیمات آن را به صورت زیر تغییر می دهیم: می بینیم که مجدد هر دو TextView در کنار یکدیگر قرار گرفته اند: 1. کدنویسی مهم تر است یا طراحی رابط گرافیکی؟ 2. منظور از یک LinearLayout چیست؟ 3. مزیت استفاده از Graphical Layout نسبت به ویرایش XML به صورت دستی چیست؟
پاسخ : آموزش برنامه نویسی اندروید برنامه نویسی [h=1]آموزش برنامه نویسی اندروید- قسمت ۳۶: آشنایی با RelativeLayout در اندروید[/h] اهداف آموزشی این قسمت عبارتند از: 1. معرفی RelativeLayout 2. نحوه تغییر یک LinearLayout به یک RelativeLayout 3. آشنایی با برخی متدهای مرتبط با RelativeLayout پس از آشنایی با LinearLayout در آموزش سی و پنجم، در این آموزش قصد داریم تا یکی دیگر از رایج ترین انواع Layout ها که RelativeLayout است را مورد بررسی قرار دهیم. در این آموزش از پروژه ای که در آموزش سی و پنجم ایجاد کردیم استفاده خواهیم کرد از این رو پروژه ای که در آموزش پیشین تحت عنوان Layouts ایجاد کردیم را در محیط برنامه نویسی اکلیپس باز می کنیم. حال که نوع Layout ما LinearLayout است اگر سعی کنیم تا با موس خود یکی از TextView ها را گرفته و روی صفحه جا به جا کنیم، مشاهده می کنیم که نمی توانیم عناصر روی UI را به هر قسمتی که تمایل داریم مثلا پایین صفحه انتقال دهیم بلکه تنها گزینه ای که پیش روی ما است این می باشد که چنانچه Layout ما vertical باشد خواهیم توانست یک TextView با موس گرفته و آنرا به پایین یا بالای TextView دیگری کشیده و رها سازیم و یا اگر Layout ما horizontal یا "افقی" باشد فقط می توانیم یک TextView را با موس گرفته و آنرا به سمت راست یا چپ TextView دیگری کشیده و رها سازیم. به عبارت دیگر به هیچ وجه نخواهیم توانست تا با گرفتن یک TextView و کشیدن آن به سمت پایین صفحه آن را در آنجا قرار دهیم. نوع Layout به کار گرفته شده در این پروژه LinearLayout است و چنانچه بخواهیم آن را به یک RelativeLayout تبدیل کنیم می بایست به صورت زیر عمل کنیم: همانطور که در تصویر فوق مشاهده می شود با قرار دادن نشانگر موس خود روی UI یا همان صفحه مشکلی رنگ و راست کلیک کردن پنجره ای باز خواهد شد که از میان گزینه های آن همانطور که در تصویر فوق با یک بیضی قرمز رنگ مشخص شده است روی Change Layout به معنی "تغییر Layout پروژه" کلیک کرده و پنجره ای به شکل زیر خواهیم دید: همانطور که در پنجره فوق مشاهده می شود مقابل New Layout Type: به معنی "نوع جدید Layout " یک Drop Down لیست است که با باز کردن آن می توانیم به لیستی از انواع مختلف Layout های مورد استفاده در یک اپلیکیشن دست پیدا کنیم. در این مثال پس از کلیک روی لیست گزینه RelativeLayout را انتخاب می کنیم. سپس با گزینه ای تحت عنوان Flatten hierarchy مواجه می شویم. در حقیقت زمانیکه بخواهیم یک Layout را به RelativeLayout تبدیل کنیم این گزینه نمایان خواهد شد. در صورتیکه این گزینه را تیک بزنیم این امکان برای ما فراهم خواهد شد تا نه تنها بتوانیم نوع Layout خود را به یک RelativeLayout تبدیل کنیم بلکه این امکان برای ما فراهم خواهد شد تا به صورت خودکار سلسله مراتب و جایگاه عناصر داخل UI را نیز تبدیل کنیم. به عبارت دیگر اندازه عناصر داخل UI و همچین ترتیب و جایگاه آن ها را نیز مد نظر قرار داده و بهترین حالت ممکن را ایجاد خواهد کرد. اکنون می توانیم روی گزینه OK کلیک نماییم. پس از کلیک کردن روی دکمه OK و باز گشتن به محیط اکلیپس مشاهده خواهیم کرد که چیزی تغییر نکرده است اما این در حالی است که نوع Layout ما از LinearLayout به RelativeLayout مبدل شده و از این پس دست ما به مراتب برای تغییر مکان عناصر روی UI باز تر خواهد بود. با کلیک کردن روی Tab مربوط به main.xml کد زیر را مشاهده خواهیم کرد: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/RelativeLayout1" android:layout_width="fill_parent" android:layout_height="fill_parent" androidrientation="horizontal" > <TextView android:id="@+id/TextView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignBaseline="@+id/textView1" android:layout_alignParentLeft="true" android:layout_alignParentTop="true" android:text="@string/hello"> <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:layout_toRightOf="@+id/TextView1" android:text="Large Text" android:textAppearance="?android:attr/textAppearanceLarge" > <RelativeLayout> همانطور که در کد فوق مشاهده می شود تگ های ابتدایی و انتهای به RelativeLayout تبدیل شده اند. لازم به ذکر است که به منظور تبدیل یک LinearLayout به یک RelativeLayout صرفاً با تغییر این دو تگ می توان این تغییر را انجام داد اما این در حالی است که اگر از این روش استفاده کنیم امکانی که گزینه Flatten hierarchy برای ما ایجاد می کرد محروم خواهیم شد (پیشنهاد می شود همواره برای تبدیل Layout ها به یکدیگر از روش اول استفاده شود چرا که روش فوق الذکر احتمال خطای کدنویسی ما افزایش خواهد داد). اگر به کد فوق با دقت بیشتری نگاه کنیم خواهیم دید که علاوه بر تغییر تگ های ابتدای و انتهای فایل XML تعدادی متد جدید دیگر نیز به هر یک از TextView ها اضافه شده است. به طور خلاصه می توان گفت که این متدهای جدید همان قابلیتی که از آن طریق خواهیم توانست عناصر روی UI را در هرکجای Layout که خواستیم قرار دهیم به اپلیکیشن ما اضافه می کنند. پیش از توضیح بیشتر پیرامون این متدها مجدد به Tab مربوط به Graphical Layout باز می گردیم: همانطور که در تصویر فوق نشان داده شده است با یک بار کلیک کردن روی TextView یی که حاوی متن Large Text است خواهیم دید که پنجره کوچکی نمایان خواهد شد که در تصویر فوق با یک مستطیل قرمز رنگ مشخص شده است. در حقیقت اینها همان متدهای جدیدی است که به این TextView پس از تبدیل Layout خود به RelativeLayout ایجاد شده اند. متد بالا متدی است تحت عنوان toRightOf به معنی "قرار گرفته در سمت راست ... " که Value این متد هم TextView1 است. به عبارت دیگر TextView1 همان TextView یی است که به صورت خودکار در حین ساخت اپلیکیشن ایجاد شده و حاوی عبارت Hello World می باشد. به طور خلاصه این متد حاکی از آن است که این TextView یی که روی آن کلیک کرده ایم در سمت راست TextView یی تحت عنوان TextView1 قرار دارد. متد دومی که در تصویر فوق مشاهده می شود alignParentTop نام دارد که معنی تحت الفظی آن "قرار گرفته به موازات قسمت بالایی رابط گرافیکی" می باشد. به عبارت دیگر خود RelativeLayout به منزله یک ظرفی است که دیگر عناصر روی UI همچون TextView ها و غیره را در خود جای می دهد. از همین روی RelativeLayout به عنوان Parent یا "والد" این TextView حساب خواهد شد. مقدار این متد برابر با true است یعنی این TextView به موازات قسمت فوقانی RelativeLayout قرار گرفته است. در حقیقت از آنجا که پس از تبدیل Layout خود به RelativeLayout هیچ گونه تغییری روی UI خود اعمال نکرده ایم، بالتبع همین دو متد در مورد این TextView نوشته شده اند. حال همانند تصویر زیر روی TextView دیگر کلیک می کنیم: همانطور که در تصویر فوق ملاحظه می شود با کلیک کردن روی TextView سمت چپ خواهیم دید که متدهای مرتبط این TextView با RelativeLayout تغییر خواهند کرد. اکنون همانطور که در تصویر زیر نمایش داده شده است جایگاه یکی از TextView ها را تغییر می دهیم: همانطور که در تصویر فوق مشاهده می شود با نشانگر موس TextView یی که حاوی متن Large Text است را گرفته و به وسط UI می کشیم و سپس دکمه موس خود را رها می کنیم. حال به متدهای مرتبط جدیدی که برای این TextView ایجاد شدند توجه کرده و می بینیم که تغییر کرده اند. به طور مثال متدی تحت عنوان centerHorizontal با Value یی تحت عنوان true برای این TextView ایجاد شده است. اگر به تصویر فوق توجه کنیم خواهیم دید که یک خط فرضی شبرنگ به صورت عمودی روی صفحه قرار گرفته است(البته از آنجا که ممکن است شما این TextView را دقیقاً در وسط UI رها نکرده باشید این خط فرضی را مشاهده نکنید که در این صورت پیشنهاد می شود این TextView را با نشانگر موس گرفته و آنقدر آن را به چپ و راست بکشیم که این خط نمایان شود). به طور کلی این خط حاکی از آن است که این TextView دقیقاً در وسط UI به صورت افقی قرار گرفته است. حال برای مشاهده کل متدهای ایجاد شده برای این TextView پس از تغییر جایگاه آن روی Tab مربوط به main.xml کلیک می کنیم: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/RelativeLayout1" android:layout_width="fill_parent" android:layout_height="fill_parent" androidrientation="horizontal" > <TextView android:id="@+id/TextView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignBaseline="@+id/textView1" android:layout_alignParentLeft="true" android:layout_alignParentTop="true" android:text="@string/hello" > <TextView android:id="@+id/textView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/TextView1" android:layout_centerHorizontal="true" android:layout_marginTop="190dp" android:text="Large Text" android:textAppearance="?android:attr/textAppearanceLarge" > <RelativeLayout> اگر به TextView دوم نگاه کنیم می بینیم که سه متد جدید به آن اضافه شده است. متد اول below به معنی "زیر" است که Value مرتبط با آن @+id/TextView1 است. به عبارت دیگر این متد حاکی از آن است که این TextView زیر یک TextView دیگر تحت عنوان TextView1 قرار گرفته است. متد بعدی centerHorizontal است که Value آن ture است که حاکی از آن است که این TextView به صورت افقی در وسط UI قرار گرفته است و متد آخر marginTop است که Value آن 190dp است که حاکی از آن است که این TextView دارای فاصله 190dp از بالای UI می باشد(به خاطر داشته باشیم که در XML کلیه Value ها داخل گیومه قرار می گیرند). به طور خلاصه می توان گفت که در RelativeLayout همانگونه که از نام آن بر می آید جایگاه عناصر روی UI نسبت به یکدیگر نسبی بوده و با استفاده از متدهای مختلف مرتبط با RelativeLayout می توان بر این نسبت ها کنترل داشت. پس از مطالعه این آموزش انتظار می رود بتوانیم به سؤالات زیر پاسخ بدهیم: 1. به چه نحوی می توان یک LinearLayout را به یک RelativeLayout به بالعکس تبدیل کرد؟ 2. منظور از Flatten hierarchy چیست؟ 3. در یک LinearLayout تا چقدر دست ما باز است که جایگاه عناصر روی UI را تغییر دهیم؟ 4. در یک فایل XML به چه نحوی یک Value را به یک متد اختصاص می دهیم؟
پاسخ : آموزش برنامه نویسی اندروید برنامه نویسی [h=1]آموزش برنامه نویسی اندروید- قسمت ۳۷: معرفی دکمه و نحوه ایجاد آن در یک اپلیکیشن[/h] اهداف آموزشی این قسمت عبارتند از: 1. معرفی دکمه ها در اندروید 2. ایجاد یک دکمه جدید روی UI 3. نحوه نامگذاری دکمه ها 4. نحوه به کارگیری منوی Properties جهت تغییر تنظیمات یک دکمه پس از آشنایی با دو نوع از رایج ترین انواع Layout ها در اندروید، در این آموزش قصد داریم تا به معرفی دکمه ها و نحوه ایجاد آنها در یک اپلیکیشن بپردازیم. برای این منظور همانطور که در آموزش هشتم توضیح داده شد یک پروژه جدید در محیط برنامه نویسی اکلیپس تحت عنوان Introduction to Buttons به معنی "معرفی دکمه ها" ایجاد می کنیم. همانطور که در تصویر فوق ملاحظه می شود اکلیپس یک Layout به صورت خودکار تحت عنوان main.xml ساخته و یک TextView حاوی جمله Hello World روی آن ایجاد می کند. از آنجا که در این آموزش قصد داریم تا بیشتر پیرامون نحوه ساخت دکمه ها در یک اپلیکیشن صحبت کنیم از اینرو این TextView را با یک بار کلیک کردن روی آن انتخاب کرده سپس دکمه Delete کیبورد را می زنیم: همانطور که در تصویر فوق نشان داده شده است از Tab مربوط به Form Widgets با نشانگر موس خود Button را گرفته و به سمت Layout می کشیم. به محض اینکه نشانگر موس روی UI قرار گیرد یک علامت به علاوه کنار نشانگر موس ظاهر خواهد شد که به این معنی است که می توان با رها کردن نشانگر موس خود این دکمه را به UI اضافه کرد. اگر به تصویر بالا خوب توجه کنیم خواهیم دید که در قسمت گوشه بالا سمت چپ یک نقطه چین شبرنگ ایجاد شده است که این نقطه چین بدان معنا است که این دکمه در آن قسمت قرار خواهد گرفت. حال پس از رها کردن دکمه موس خواهیم دید که یک دکمه روی UI قرار خواهد گرفت: اکنون با کلیک کردن روی Tab مربوط به main.xml کد مربوط به Layout این اپلیکیشن را خواهیم دید: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" androidrientation="vertical" > <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button" > <LinearLayout> همانطور که از کد فوق مشخص است Layout ما از جنس LinearLayout است که فقط یک دکمه روی آن قرار دارد. پس از تگ مربوط به Button اولین خط از کد مربوط به id است که مخفف واژه Identification به معنی "تعیین هویت" یا "شناسایی" می باشد. id اختصاص داده شده به این دکمه button1 است و این در حالی است که برخورداری یک دکمه از یک id دارای اهمیت بسیاری است چرا که در Activity مربوط به این اپلیکیشن فقط از طریق همین id است که می توانیم عملکردی برای این دکمه تعریف کنیم. آنچه در id یک دکمه از اهیمت بسزایی برخوردار است شیوه نامگذاری آن دکمه است. به عبارت دیگر زمانیکه ما در اپلیکیشن خود فقط یک الی دو دکمه داشته باشیم نامگذاری دکمه به هر شیوه ای خیلی مشکل زا نخواهد بود اما زمانیکه تعداد دکمه ها در یک اپلیکیشن زیاد باشند می بایست سعی کنیم که یک شیوه نامگذاری را در برنامه نویسی خود مد نظر قرار داده و آن را در کل اپلیکیشن دنبال کنیم. به طور مثال برای نامگذاری دکمه ها می توان از پیشوند btn که می توان آن را مخفف واژه Button به معنی "دکمه" در نظر گرفت به علاوه یک _ سپس نامی گویا برای دکمه استفاده کرد. به طور مثال می توان نام دکمه ای که ایجاد کردیم را به btn_myButton تغییر دهیم. به خاطر داشته باشیم که در نامگذاری دکمه ها به هیچ وجه نمی توانیم از علائمی همچون & و % و $ و غیره استفاده کنیم. در خط دوم کد مربوط به این دکمه عرض این دکمه قرار دارد که مقدار آن برابر با wrap_content است به این معنی که عرض این دکمه به اندازه ای خواهد بود که نوشته داخل آن را در خود جای دهد. خط بعدی به اندازه ارتفاع دکمه اختصاص داده شده است که مقداری مشابه با مقدار عرض دکمه برای آن در نظر گرفته شده است. در نهایت کد مربوطه به نوشته داخل دکمه است که حاوی مقداری معادل با Button به معنی "دکمه" است. به منظور شخصی سازی عنوان این دکمه نام آن را به Go to Next Page به معنی "برو به صفحه بعد" تغییر می دهیم. اکنون پس از بازگشتن به Tab مربوط به Graphical Layout با تصویر زیر مواجه خواهیم شد: می بینیم که نام این دکمه به نام دلخواه ما تغییر کرده است. چنانچه بخواهیم id مربوط به این دکمه را بدون مراجعه به کد XML تغییر دهیم می توان راه کار دیگری که در تصویر زیر آمده است را دنبال کنیم: در حقیقت با انتخاب دکمه ای که می خواهیم id آن را تغییر دهیم و راست کلیک کردن روی آن پنجره فوق نمایان خواهد شد و همانطور که در تصویر فوق با یک بیضی قرمز رنگ مشخص شده است می بایست روی گزینه Edit ID کلیک کرده و در پنجره دیگری که باز خواهد شد id این دکمه را تغییر دهیم: اگر خاطران باشد برای این دکمه id یی تحت عنوان btn_myButton را در بخش XML در نظر گرفتیم. حال همان نام در این پنجره به نمایش در آمده است که چنانچه تمایل داشته باشیم می توانیم این نام را تغییر داده و روی دکمه OK کلیک کنیم. در آموزش بیست و سوم با پنجره های کاربردی محیط برنامه نویس اکلیپس در ساخت یک اپلیکیشن اندرویدی آشنا شدیم. اگر خاطرمان باشد یکی از آن پنجره ها Properties نام داشت. در واقع از این مرحله از آموزش ها به بعد بیشتر به اهمیت چنین پنجره ای بیشتر پی خواهیم برد. به منظور به کارگیری این پنجره مطابق تصویر زیر عمل می کنیم: همانطور که در تصویر فوق مشخص است ابتدا پنجره Properties را باز می کنیم (چنانچه این پنجره بسته باشد همانطور که در تصویر زیر نشان داده شده است از منوی اصلی Window روی Show View سپس روی گزینه Properties کیک می کنیم): حال با کلیک کردن روی دکمه یا Widget یی که روی UI قرار دارد خواهیم توانست به تنظیمات آن در بخش Properties دست پیدا کنیم. همانطور که در تصویر پیش مشخص است، پس از کلیک کردن روی تنها دکمه قرار گرفته روی UI سه منوی Button و Misc و Deprecated در پنجره Properties نمایان می شود. حال روی منوی Button کلیک کرده تا به زیرشاخه های آن دست پیدا کنیم: می بینیم زیرشاخه منوی Button لیست بلندی از تنظیماتی است که می توان برای این دکمه در نظر گرفت. پس از مطالعه این آموزش انتظار می رود بتوانیم به سؤالات زیر پاسخ بدهیم: 1. به چه شکل می توان یک دکمه جدید روی UI ایجاد کرد؟ 2. هدف از ایجاد یک id برای دکمه ها چیست؟ 3. چگونه می توان نام پیش فرض یک دکمه را به نام دلخواه خود تغییر دارد؟ 4. چه راه کارهایی برای تغییر id یک دکمه وجود دارد؟
پاسخ : آموزش برنامه نویسی اندروید برنامه نویسی [h=1]آموزش برنامه نویسی اندروید قسمت ۳۸: تغییر برخی خصوصیات اصلی یک دکمه[/h] اهداف آموزشی این قسمت عبارتند از: 1. نحوه به کارگیری پنجره Properties جهت تغییر خصوصیات یک دکمه 2. نحوه تغییر id مرتبط با یک دکمه 3. نحوه تغییر متن داخل یک دکمه 4. نحوه تغییر رنگ متن داخل یک دکمه 5. نحوه تغییر اندازه فونت دکمه 6. نحوه تغییر استایل فونت 7. نحوه تغییر نوع فونت همانگونه که در آموزش سی و هفتم دیدیم یکی از راه کارهای سریع برای اعمال تغییرات روی یک دکمه یا هر Widget یی استفاده از پنجره Properties است. در ادامه آموزش قبل، در این آموزش قصد داریم تا ببینیم به چه نحوی می توان خصوصیات یک دکمه را در بخش Properties تغییر دارد. برای این منظور پروژه که در آموزش سی و هفتم ایجاد کردیم را مورد استفاده قرار خواهیم داد. همانطور که در تصویر فوق مشخص است با کلیک کردن روی دکمه مد نظر و باز کردن پنجره Properties در زیرشاخه Tab مربوط به Button در این پنجره، به لیستی از تنظماتی بر خواهیم خورد که با تغییر آنها می توانیم شاهد اعمال تغییرات روی دکمه مد نظر باشیم (لازم به ذکر است که این زیرشاخه ها بر اساس حروف الفبای انگلیسی هستند. پس برای یافتن یکی از آنها صرفاً کافی است حرف اول آن را مد نظر قرار داده سپس بر اساس ترتیب الفبای انگلیسی آن را در لیست پیدا کرد). همانطور که در تصویر فوق با یک فلش قرمز رنگ مشخص شده است با پایین آوردن اسلایدر کنار این پنجره می توان به گزینه هایی دست پیدا کرد که قابل مشاهده نیستند: برای مثال همانطور که در تصویر فوق مشاهده می کنیم یکی از گزینه ها Id نام دارد و در بخش مقابل آن Value یا مقدار Id در نظر گرفته شده است. این Id در حقیقت همان id یی است که در آموزش گذشته برای دکمه خود تحت عنوان btn_myButton در نظر گرفتیم. به منظور تغییر id در نظر گرفته شده برای این دکمه روی Vaule مرتبط با این Id که در تصویر فوق با یک مستطیل قرمز رنگ مشخص شده است یک بار کلیک می کنیم: با یک بار کلیک کردن روی این ناحیه، Value مرتبط با Id به رنگ آبی در آمده و این حاکی از آن است که می توان id یی که از قبل در نظر گرفته بودیم را ویرایش کنیم. یکی دیگر از ویژگی های استفاده از پنجره Properties تغییر متن داخل دکمه ها است: همانطور که در تصویر فوق با یک فلش قرمز رنگ مشخص شده است گزینه ای تحت عنوان Text به معنی "متن" وجود دارد که این وظیفه را دارا است تا متن داخل دکمه را به نمایش در آورد. همانطور که Value مرتبط با Text در تصویر فوق با یک مستطیل قرمز رنگ مشخص شده است، این Value حاوی جمله Go to Next Page است که در آموزش قبل در بخش XML وارد کردیم. همانند نحوه تغییر id در پنجره Properties با کلیک کردن روی این Value قادر خواهیم شد تا مقدار آن را تغییر دهیم. در تصویر زیر با برخی از دیگر تنظمات کاربردی یک دکمه آشنا خواهیم شد: در گزینه شماره 1 می توان رنگ متن داخل دکمه را تغییر داد (به منظور آشنایی بیشتر با رنگ ها در سیستم عامل اندروید به آموزش های سی و دوم و سی و سوم مراجعه نمایید). گزینه شماره 2 این امکان برای توسعه دهنده فراهم آورده است تا بتواند اندازه متن داخل دکمه را تغییر دهد (لازم به ذکر است که برای اندازه متن می بایست یکی از واحدهای dp یا sp را مد نظر قرار دهیم). در گزینه شماره 3 می توان یکی از سه استایل bold، normal و یا italic را برای دکمه خود در نظر گرفت: همانطور که در تصویر فوق ملاحظه می شود پس از کلیک کردن روی قسمتی که برای Value مرتبط با Text style در نظر گرفته شده است دکمه ای در بخش Value ظاهر می شود که با کلیک کردن روی آن پنجره زیر را مشاهده خواهیم کرد: در این پنجره گزینه مد نظر را می توان تیک زده سپس می بایست روی گزینه OK کلیک نماییم (به خاطر داشته باشیم که بدون کلیک کردن روی دکمه ای که ما را به پنجره فوق هدایت کند هم می توانیم یک استایل برای دکمه خود تعریف کنیم به این صورت که به صورت دستی استایل مد نظر را در بخش Value تایپ کنیم فقط به خاطر داشته باشیم که هر سه استایل با حرف کوچک نوشته می شوند). مجدد به تصویر قبل باز گشته و مورد 4 که Typeface است را مد نظر قرار می دهیم. در اندروید منظور از Typeface ساختار فونت از جهت نوع طراحی آن است که در حال حاضر چهار نوع Typeface بیشتر در نظر گرفته نشده است که عبارتند از noraml، sans، serif و monospace که در ادامه به توضیح پیرامون هر یک از آنها خواهیم پرداخت. مورد normal همانگونه که از نامش پیدا است یک فونت عادی است. به عبارت دیگر هیچ فرقی نمی کند که از گزینه Typeface گزینه normal را انتخاب کنیم یا نکنیم چرا که به صورت پیش فرض نوع فونتی که برای دکمه ایجاد شده در نظر گرفته خواهد شد normal خواهد بود اگرچه که پس از ساخت یک دکمه جدید گزینه normal در منوی Typeface انتخاب نشده باشد. مورد serif به نوعی از فونت ها اطلاق می گردد که دارای دنباله های بسیار کوچکی هستند که به یک حرف یا علامت می چسبند: همانطور که در تصویر فوق نشان داده شده است به قسمت پایینی حرف A یک دنباله کوچک چسبیده است که اصطلاحاً در تایپوگرافی Serif نام دارد. در زبان فرانسه معادل فارسی "بدون" Sans است. به عبارت دیگر Typeface یی که از جنس Sans Serif باشد به Typeface یی گفته می شود که همانند تصویر زیر آن دنباله های کوچک را نداشته باشد: از جمله فونت های معروف Serif می توان به Times New Roman و از جمله فونت های معروف Sans Serif می توان به فونت Helvetica اشاره کرد. مورد آخر از Typeface ها monospace نام دارد (نام دیگری که برای این نوع فونت در تایپوگرافی در نظر گرفته می شود fixed-width است به معنی "عرض ثابت"). کاربرد این نوع فونت بیشتر در محیط های برنامه نویسی است. به طور خلاصه می توان گفت که هرگاه کلیه کاراکترهای یک نوع فونت دارای عرض یکسانی باشند آن فونت یک monospace است: همانگونه در که در تصویر فوق مشخص است نوشته بالایی با فونتی از جنس serif نوشته شده است و نوشته پایینی با فونتی از جنس monospace نوشته شده است. اگر به نوشته بالا خوب دقت کنیم می بینیم که هر کاراکتری بسته نوع آن کاراکتر عرض متفاوتی را نسبت به دیگر کاراکترها به خود اختصاص داده است. مثلا حرف r عرض به مراتب کمتری نسبت به حرف n را به خود نسبت داده است اما این در حالی است که در نوشته پایین که با یک فونت monospace نوشته شده است می توان گفت کلیه کاراکترها داری عرض "تقریباً" یکسانی هستند. از جمله فونت هایی از این دست می توان به فونت Courier اشاره کرد. پس از توضیح مفصل پیرامون Typeface حال قصد داریم تا رنگ فونت دکمه ای که ایجاد کرده ایم را به قرمز تغییر داده، سپس اندازه فونت را به 24dip افزایش دهیم، استایل bold را برای فونت خود در نظر بگیریم و در نهایت از یک Typeface از جنس serif برای دکمه خود استفاده کنیم: پس از مطالعه این آموزش انتظار می رود بتوانیم به سؤالات زیر پاسخ بدهیم: 1. برای اندازه فونت از چه واحدهایی می توان استفاده کرد؟ 2. چند نوع استایل در اکلیپس وجود دارد که می توان برای فونت های استفاده کرد؟ 3. آیا اگر بخواهیم استایل فونت ما Noraml باشد بایستی حتما این Value را در بخش Text style وارد کنیم؟ 4. تفاوت مابین Serif و Sans Serif چیست؟ 5. منظور از monospace چیست؟ 6. نمونه فونت های معروف Serif و Sans Serif و Monospace کدامند؟
پاسخ : آموزش برنامه نویسی اندروید برنامه نویسی [h=1]آموزش برنامه نویسی اندروید قسمت ۳۹: شخصی سازی ظاهر یک دکمه[/h] اهداف آموزشی این قسمت عبارتند از: 1. شخصی سازی یک دکمه 2. نحوه نامگذاری یک فایل XML برای ایجاد یک دکمه 3. آشنایی با گرادیانت و padding و stroke پس از آشنایی با نحوه ایجاد یک دکمه و همچنین تغییر برخی خصویات آن مثل اندازه فونت، نوع فونت و غیره، در این آموزش قصد داریم ببینیم که به چه نحوه می توان ظاهر یک دکمه را از یک ظاهر پیش فرض به یک ظاهر شخصی مبدل ساخت. برای این منظور نیاز به ایجاد پروژه جدیدی نبوده و کار خود را در ادامه پروژه جلسات قبل دنبال می کنیم. اگر خاطرمان باشد در آموزش قبل موفق شدیم برخی ویژگی های دکمه را تغییر دهیم اما این در حالی است که علیرغم اعمال این تغییرات، این دکمه باز هم ظاهری شبیه به دکمه های پیش فرض دارد و ممکن است چنین ظاهر پیش فرضی با دیگر عناصر روی UI اپلیکیشن ما هم خوانی نداشته باشد. از این رو نیاز است تا فرا گیریم که به چه نحوی می توان ظاهری دلخواه برای یک دکمه تعریف کرد: برای شروع کار نیاز است تا از زیرشاخه فولدر res روی فولدر drawable راست کلیک کرده سپس از منوی New همانطور که در تصویر فوق مشخص است روی گزینه Android XML File کلیک کنیم (لازم به ذکر است چنانچه فولدر drawable در زیرشاخه فولدر res وجود نداشت ابتدا آن را ایجاد کنیم. به منظور فراگیری نحوه ایجاد یک فولدر جدید به آموزش دوازدهم مراجعه نمایید): اکنون همانطور که در تصویر فوق مشخص است با پنجره ساخت یک فایل XML جدید رو به رو خواهیم شد. از بخش Resource Type می بایست گزینه Drawable را انتخاب کرده و از بخش Project می بایست نام پروژه ای که می خواهیم این فایل XML در آن ایجاد شود را انتخاب نماییم که در این آموزش پروژه Introduction to Buttons را انتخاب می کنیم. در بخش مربوط به File می بایست نامی برای این فایل XML جدید انتخاب نماییم که در این مثال نام button_background را انتخاب کرده ایم. در انتخاب نام فایل دقت داشته باشیم که از – و حروف بزرگ مثل A و علائمی همچون & نمی توانیم استفاده کنیم. چنانچه نامی که برای این فایل در نظر گرفته ایم چند بخشی است می توان از _ مابین اسامی استفاده کرد. سپس از بخش Root Element می بایست گزینه shape را انتخاب نموده سپس روی گزینه Finish کلیک نماییم (در این مرحله از آموزش نیازی به کلیک کردن روی گزینه Next و اعمال تنظیمات بیشتر برای این فایل XML نیست). پس از کلیک کردن روی دکمه Finish خواهیم دید که فایلی به همان نام انتخابی ما در زیرشاخه فولدر drawable ایجاد خواهد شد. پس از دو بار کلیک کردن روی نام فایل، این فایل در محیط برنامه نویسی اکلیپس باز خواهد شد: همانطور که در تصویر فوق مشخص است پس از تگ آغازین می توانیم شروع به نوشتن کد نماییم. در حقیقت پس از تایپ کردن علامت < اکلیپس به صورت خودکار می بایست پنجره جدیدی مطابق با تصویر فوق باز نماید (در صورتیکه اکلیپس اینکار را به صورت خودکار انجام نداد می توان پس از نوشتن علامت < هم زمان دکمه های Ctrl و Space را فشار داد). همانطور که در این پنجره مشخص است عناصری که با استفاده از آنها می توانیم دکمه خود را Customize کنیم در اختیار ما قرار می گیرند. به طور خلاصه اگر بخواهیم در دکمه شخصی شده خود از گوشه های غیر قائم استفاده کنیم می بایست از دستور corners استفاده کنیم، اگر بخواهیم که در دکمه خود از گرادیانت استفاده کنیم می بایست از دستور gradient استفاده نماییم. منظور از گرادیانت حالتی است که در تصویر زیر نشان داده شده است: به طور خلاصه گرادیانت عبارت است از اینکه غلظت رنگ از 100 درصد شروع شده و به تدریج به شفافیت سیر می کند. چنانچه بخواهیم دکمه ما دارای padding باشد می بایست از دستور مرتبط با آن استفاده کنیم. همانطور که در تصویر فوق نشان داده شده است، منظور از padding فاصله ای است که مابین متن داخل دکمه تا لبه دکمه قرار می گیرد. دستور size همانطور که از نامش مشخص است این وظیفه را دارا است تا اندازه دکمه را مشخص سازد. چنانچه بخواهیم رنگ خاصی را برای پس زمینه دکمه خود در نظر بگیریم می بایست از دستور solid استفاده نموده و در نهایت دستور stroke این وظیفه را دارا است تا یک حاشیه برای دکمه ایجاد سازد. اکنون که با عملکرد هر یک از موارد فوق آشنا شدیم، قصد داریم تا به طور عملی آنها را مورد استفاده قرار دهیم: همانطور که در تصویر فوق مشخص است ابتدا روی گزینه solid کلیک کرده تا بتوانیم رنگی را برای دکمه خود در نظر بگیریم: سپس حرف a کوچک را نوشته و دکمه های Ctrl و Space را به صورت هم زمان فشار می دهیم و پنجره ای به صورت فوق نمایان خواهد شد. حال همانطور که در تصویر فوق نشان داده شده است روی اولین گزینه کلیک می کنیم: اکنون مابین دو علامت گیومه می بایست یک علامت # قرار داده و رنگ مد نظر خود را وارد نماییم (برای آشنایی بیشتر با نحوه ایجاد رنگ در سیستم عامل اندروید به آموزش های سی و دوم و سی و سوم مراجعه نمایید). از آنجا که قصد داریم دکمه ما زرد رنگ باشد کد #ffde57 را مابین دو علامت گیومه قرار می دهیم. حال همانطور که در تصویر زیر مشخص است پس از قرار دادن نشانگر موس خود بعد از گیومه دوم مجدد کلید های Ctrl و Space را زده و از پنجره ای که باز خواهد شد گزینه دوم را انتخاب می کنیم: در نهایت کد ما به شکل در خواهد آمد: <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" > <solid android:color="#ffde57 " /> به همین روش سعی می کنیم تا ویژگی های بیشتری به دکمه خود بیفزایم: <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" > <solid android:color="#ffde57 " /> <corners android:radius="20dip" /> <stroke android:width="4dip" android:color="#ffffff " /> </shape> در خط بعد که تگ مربوط به corners قرار دارد مقدار متد radius به معنی "شعاع" را برابر با 20dip قرار داده ایم. تگ مربوط به stroke دارای دو متد است که متد اول به مقدار 4dip عرض stroke را مشخص می کند و متد دوم به مقدار #ffffff رنگ سفید را برای این stroke در نظر می گیرد. حال برای ادامه کار مطابق تصویر زیر عمل می کنیم: همانطور که در تصویر فوق مشخص است ابتدا روی دکمه مد نظر کلیک کرده تا انتخاب شود سپس از پنجره Properties گزینه Background را پیدا نموده و روی خانه ای که برای Value آن در نظر گرفته شده است کلیک می کنیم و خواهیم دید که دکمه ای ظاهر خواهد شد که با کلیک روی آن خواهیم توانست به پنجره زیر دست پیدا کنیم: از آنجا که دکمه Customized شده خود را در فولدر drawable ایجاد کردیم در این پنجره نیز می بایست روی این گزینه کلیک کرده و نام مد نظر خود را بیابیم. پس از انتخاب آن می توانیم روی دکمه OK کلیک نماییم: به محض کلیک کردن روی گزینه OK خواهیم دید که خصوصیاتی که در فایل XML تعریف کرده بودیم روی دکمه ما اعمال خواهد شد. پس از مطالعه این آموزش انتظار می رود بتوانیم به سؤالات زیر پاسخ بدهیم: 1. برای شخصی سازی یک دکمه، آن را در کدام فولدر اپلیکیشن می بایست تعریف کرد؟ 2. برای دکمه های شخصی چه ویژگی هایی را می توان در نظر گرفت که در حالت پیش فرض وجود ندارند؟ 3. برای نامگذاری دکمه ها از چه روشی می بایست استفاده کرد؟
پاسخ : آموزش برنامه نویسی اندروید برنامه نویسی [h=1]آموزش برنامه نویسی اندروید قسمت ۴۰: آموزش ساخت اپلیکیشن ذکر شمار (بخش اول) ساخت آیکان و رابط گرافیکی اپلیکیشن[/h] اهداف آموزشی این قسمت عبارتند از: 1. خوشحال کردن مادر بزرگ خود! 2. ساخت یک پروژه کاربردی در اندروید 3. نحوه تبدیل واحدهای RGB به واحدهای Hexadecimal در فتوشاپ شاید بتوان گفت این قسمت از آموزش پس از آشنایی با مفاهیم کلی توسعه اپلیکیشن اندروید اولین قسمتی است که به طور عملی به آموزش پیرامون یک پروژه واقعی خواهیم پرداخت. پیش از شروع کار نیاز است تا یک سناریو تعریف کنیم: فرض کنیم که روز مادر است و همه قصد دارند برای مادر بزرگ چیزی بخرند. دایی ها و خاله ها روی هم پول گذاشته اند و یک تلفن همراه با سیستم عامل اندروید برای مادر بزرگمان خریده اند. (لطفا نگویید که مادر بزرگ با یک تلفن اندرویدی چه می کند! داریم سناریو میسازیم!) بقیه اقوام هم هر کدام قصد دارند چیزی شبیه به عطر، کتاب و... برای مادر بزرگ بخرند اما از آنجا که ما پول نداریم تا هدیه ای برای مادر بزرگ خود بخریم کمی شرمنده شده ایم اما ناگهان فکر بکری به ذهنمان خطور می کند. درست است که پول نداریم اما دانش برنامه نویسی خوبی داریم. می دانیم که مادر بزرگ آدم همیشه هم در حال ذکر گفتن است و با خودمان فکر می کنیم که برای آشتی دادن مادر بزرگ با فناوری راه خوبی است که یک اپلیکیشن «ذکر شمار» برایش طرحی کنیم. دو ساعت مانده که همه در خانه مادر بزرگ دو هم جمع بشن و خیلی هم زمان نداریم. اکلیپس را باز می کنیم و شروع به برنامه نویسی می کنیم. پس از رسیدن به خانه مادر بزرگمان، می بینیم که همه با خوشحالی هدیه های خود را به مادر بزرگ تقدیم می کنند و تنها کسی باقیمانده ما هستیم. با لبخند به مادر بزرگ می گوییم که لطفا بولوتوث را روشن کنید تا هدیه را برایتان بفرستم! برای شروع کار همانطور که در آموزش هشتم توضیح داده شد یک پروژه جدید در محیط برنامه نویسی اکلیپس تحت عنوان My Prayer Counter به معنی "ذکر شمار من" ایجاد می کنیم: همانطور که در تصویر فوق مشخص است UI اپلیکیشن ما در قالب یک فایل تحت عنوان main.xml که به صورت خودکار توسط اکلیپس ایجاد شده است در زیرشاخه فولدر layout که در زیرشاخه فولدر res قرار گرفته است می باشد. اکلیپس به صورت پیش فرض یک TextView حاوی عبارت Hello World به علاوه نام فایل جاوایی که در حین ساخت پروژه در نظر گرفتیم که در اینجا MainActivity است را ایجاد می کند. ابتدا نیاز است تا این TextView را با موس انتخاب کرده سپس دکمه Delete را فشار دهیم. اولین کاری که می بایست انجام دهیم این است تا آیکان اپلیکیشن خود را به موضوع اپلیکیشن مرتبط سازیم. حال طبق آموزش های 24 و 25 و 26 یک آیکان مرتبط با ذکر شمار طراحی می کنیم: همانطور که در تصویری که از Emulator گرفته شده است مشخص است، آیکانی مرتبط طراحی کرده و در سه نسخه 36*36 و 48*48 و 72*72 تبدیل به فرمت PNG شده و در فولدر های مربوطه drawalbe-ldpi و drawable-mdpi و drawable-hdpi به ترتیب با نام ic-launcher.png قرار گرفته اند (عکس انتخاب شده برای این آیکان با نوشتن نام "صلوات" در گوگل در اولین صفحه از سرچ پیدا شده است). حال مجدد به محیط اکلیپس بازگشته و این بار با نشانگر موس خود یکبار روی صفحه مشکی رنگ UI کلیک می کنیم. هدف از انجام اینکار این است که کل Layout ما انتخاب شود تا بتوانیم برخی خصوصیات آن را در پنجره Properties تغییر دهیم: از آنجا که ما کل Layout را با نشانگر موس خود انتخاب کرده ایم، از اینرو همانطور که در تصویر فوق مشخص است خصوصیات LinearLayout به ما نشان داده می شوند. حال از میان گزینه های موجود Backgound به معنی "پس زمینه" را پیدا نموده و Value مرتبط با آن را #fbfbdd قرار می دهیم سپس دکمه Enter را می زنیم تا تغییرات اعمال شوند. در حقیقت برای آنکه یکنواختی مابین اجزای مختلف اپلیکیشن ما وجود داشته باشد در فتوشاپ با ابزار Eyedropper نمونه رنگی از روی آیکانی که در نظر گرفته شده انتخاب کرده ایم: در تصویر فوق ابزار قطره چکان با یک دایره قرمز رنگ کوچک مشخص شده است. در واقع پس از انتخاب این ابزار و کلیک کردن روی نقطه ای که می خواهیم نمونه رنگی از آن نقطه بگیریم، جزئیات رنگ نمونه در پنجره Color به نمایش در خواهد آمد (لازم به ذکر است که اگر پنجره Color باز نبود می توان از منوی اصلی Window و کلیک کردن روی گزینه Color آن را باز نمود). همانطور که در تصویر فوق با یک بیضی قرمز رنگ بزرگ نشان داده شده است جزئیات به نمایش درآمده از نمونه رنگ مد نظر RGB است و همانطور هم که قبلاً توضیح داده شد در سیستم عامل اندروید تنها رنگی که می توانیم مورد استفاده قرار دهیم واحد Hexadecimal است. برای تبدیل واحد RGB به Hexadecimal می بایست طبق تصویر زیر عمل نماییم: منوی پنجره Color با یک فلش قرمز رنگ مشخص شده است. با کلیک روی منو پنجره دیگری باز خواهد شد که همانطور که در تصویر فوق مشخص است با کلیک روی گزینه Web Color Sliders رنگ های RGB را به واحدهای Hexadecimal تبدیل می کنیم: همانطور که در تصویر فوق مشخص است یک علامت Hash قرار گرفته و مقابل آن واحد Hexadecimal معادل با هر سه رنگ قرمز، سبز و آبی نوشته شده است که به طور خلاصه عبارت است از #fbfbdd . این کد را برای رنگ پس زمینه اپلیکیشن خود در نظر می گیریم. اکنون اگر به UI خود نگاهی بیندازیم مشاهده خواهیم کرد که رنگ آن تغییر کرده است: برای آنکه بتوانیم از رنگ تیره موجود در آیکان هم برای نوشته های روی UI استفاده کنیم، باز هم به روش فوق مقدار Hexadecimal آن را پیدا نموده تا در ادامه آموزش بتوانیم از این رنگ برای متون روی UI استفاده کنیم. حال همانطور که در آموزش بیست و نهم گفته شد، یک TextView روی UI ایجاد می کنیم: یک TextView روی UI قرار گرفته است اما از آنجا که رنگ متن داخل این TextView روشن است به دشواری متن داخل آن را می توان دید. حال بایستی از طریق پنجره Properties برخی خصوصیات این TextView را تغییر دهیم که برای اینکار می بایست ابتدا این TextView را با کلیک بر روی آن انتخاب کنیم: اولین کاری که انجام می دهیم این است که id اختصاص داده شده به این TextView را به id مد نظر خود تغییر می دهیم. برای این TextView بنده id یی تحت عنوان txt_textOne را در نظر گرفته ام و این در حالی است که می توان با id اختصاص داده شده توسط اکلیپس یا هر id دیگری به کار خود ادامه دهیم. سپس همانطور که در تصویر زیر مشخص است اقدام به تغییر رنگ متن و اندازه متن می نماییم: کد #763f05 نمونه رنگی است که از متن داخل آیکان اپلیکیشن در فتوشاپ به دست آورده ایم که رنگی متمایل به قهوه ای است. در ارتباط با اندازه متن هم 40dip در نظر می گیریم: می بینیم تغییراتی که در پنجره Properties ایجاد کردیم روی TextView اعمال شده اند. حال چنانچه روی Tab مربوط به main.xml کلیک کنیم کدی مشابه زیر مشاهده خواهیم کرد: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="#fbfbdd " androidrientation="vertical" > <TextView android:id="@+id/txt_textOne" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Large Text" android:textAppearance="?android:attr/textAppearanceLarge" android:textColor="#763f05 " android:textSize="40dip" /> </LinearLayout> در آموزش بعد خواهیم دید که به چه نحوه می توان یک متن فارسی را وارد اپلیکیشن خود نماییم. پس از مطالعه این آموزش انتظار می رود بتوانیم به سؤالات زیر پاسخ بدهیم: 1. به چه نحوی می توان یک واحد RGB را به یک واحد Hexadecimal در فتوشاپ تغییر داد؟ 2. چرا آیکان اپلیکیشن را در سه اندازه متفاوت ایجاد می کنیم؟
