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

پس از آشنایی با نحوه ایجاد یک دکمه و همچنین تغییر برخی خصویات آن مثل اندازه فونت، نوع فونت و غیره، در این آموزش قصد داریم ببینیم که به چه نحوه می توان ظاهر یک دکمه را از یک ظاهر پیش فرض به یک ظاهر شخصی مبدل ساخت. برای این منظور نیاز به ایجاد پروژه جدیدی نبوده و کار خود را در ادامه پروژه جلسات قبل دنبال می کنیم.

اگر خاطرمان باشد در آموزش قبل موفق شدیم برخی ویژگی های دکمه را تغییر دهیم اما این در حالی است که علیرغم اعمال این تغییرات، این دکمه باز هم ظاهری شبیه به دکمه های پیش فرض دارد و ممکن است چنین ظاهر پیش فرضی با دیگر عناصر روی 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 را زده و از پنجره ای که باز خواهد شد گزینه دوم را انتخاب می کنیم:

در نهایت کد ما به شکل در خواهد آمد:

1. <?xml version="1.0" encoding="utf-8"?>
2. <shape xmlns:android="http://schemas.android.com/apk/res/android" >
3. <solid android:color="#ffde57" />
4.  

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

1. <?xml version="1.0" encoding="utf-8"?>
2. <shape xmlns:android="http://schemas.android.com/apk/res/android" >
3. <solid android:color="#ffde57" />
4. <corners android:radius="20dip" />
5. <stroke
6. android:width="4dip"
7. android:color="#ffffff" />
8. </shape>

در خط بعد که تگ مربوط به corners قرار دارد مقدار متد radius به معنی "شعاع" را برابر با 20dip قرار داده ایم. تگ مربوط به stroke دارای دو متد است که متد اول به مقدار 4dip عرض stroke را مشخص می کند و متد دوم به مقدار #ffffff رنگ سفید را برای این stroke در نظر می گیرد. حال برای ادامه کار مطابق تصویر زیر عمل می کنیم:

همانطور که در تصویر فوق مشخص است ابتدا روی دکمه مد نظر کلیک کرده تا انتخاب شود سپس از پنجره Properties گزینه Background را پیدا نموده و روی خانه ای که برای Value آن در نظر گرفته شده است کلیک می کنیم و خواهیم دید که دکمه ای ظاهر خواهد شد که با کلیک روی آن خواهیم توانست به پنجره زیر دست پیدا کنیم:

از آنجا که دکمه Customized شده خود را در فولدر drawable ایجاد کردیم در این پنجره نیز می بایست روی این گزینه کلیک کرده و نام مد نظر خود را بیابیم. پس از انتخاب آن می توانیم روی دکمه OK کلیک نماییم:

به محض کلیک کردن روی گزینه OK خواهیم دید که خصوصیاتی که در فایل XML تعریف کرده بودیم روی دکمه ما اعمال خواهد شد.