تماشای برخط [لینک مستقیم] فیلم آموزشی «سبک‌های نمایش»

زیر نویس انگلیسی [English Subtitle]

دریافت نسخه‌ی pdf این آموزش [1.15 مگابایت]

سبک نمایش پیش‌فرض اندروید، ممکنه قشنگ به نظر برسه اما خیلی ها دوست دارن که خودشون تعیین کنن که هر چیزی چطور نمایش داده بشه، منظورم ابعاد و رنگ و خیلی ویژگی‌های ظاهری دیگه است. می‌خوایم تو این آموزش یاد بگیریم چطور یه سبک نمایش بسازیم و در قسمت‌های مختلف ازش استفاده کنیم.

۱.برای شروع یه پروژه جدید بسازید و فایل activity_main.xml (در زیرشاخه res->layout) رو باز کنید، (اگر همین الان پروژه رو ساختید خودش این فایل رو براتون باز می کنه) روی متن Hello world کلیک کنید، حالا می‌خوایم یه سری از ویژگی‌هاشو تغییر بدیم، مثلا اندازه‌اش، فونت‌اش و رنگش. من این تغییرات رو دادم: رنگ f00 اندازه 25sp فونت serif و text style: bold

۲.حالا می‌خوایم یاد بگیریم که چطور همین ویژگی‌ها رو دوباره روی یه متن دیگه اعمال کنیم بدون اینکه ریزه کاری ها رو دوباره انجام بدیم. یعنی یه سبک با همین مشخصات می سازیم و روی هر متنی که خواستیم اون سبک رو اعمال می‌کنیم تا همین تغییرات روش اعمال بشه. این کار به درد زمانی می‌خوره که شما می خواید مثلا تمام دکمه‌هاتون یه رنگ و شکل و اندازه خاص داشته باشن و وقتی پروژه بزرگ باشه اعمال کردن همه تغییرات به صورت تک به تک واقعا زمان‌بره و درست کردن یه سبک کلی، خیلی کمک می‌کنه.

برای ساختن یه سبک نمایش، فایل styles.xml (زیر شاخه res->values) رو باز کنید. قسمت متنی رو از روی زبانه‌ی پایین انتخاب کنید.

۳.همون طور که می‌بینید قبلا دوتا سبک نمایش (style) تو این فایل تعریف شده، حالا ما هم می‌خوایم یکی دیگه تعریف کنیم، هر سبک نمایش اول احتیاج به یه اسم داره، مثلا من می‌ذارم ekhtar، بعد هم باید از یک نوع سبک نمایش ارث‌بری کنیم، چون در غیر اینصورت باید تمامی ویژگی های اون سبک رو تعریف و مقداردهی کنیم که عملا کار عقلانی نیست چون هر شی‌ای هزاران ویژگی داره که ممکنه ما فقط بخوایم یه موردشو تغییر بدیم. از اونجایی که الان می‌خوایم سبک نمایش متن رو گسترش بدیم بهتره به عنوان والد (parent) از ظاهرمتن (TextAppearance) استفاده می‌کنیم تا تمام ویژگی‌های ظاهری متن رو داشته باشیم و موارد دلخواه رو بازنویسی (override) کنیم. تمامی سبک‌های نمایش پیش‌فرض در /android:style@ قرار دارن. خوب تا اینجا کدمون اینطوری شد:

<style name="ekhtar" parent="@android:style/TextAppearance">
</style>

۴.در داخل برچسب style باید اون چیزایی که قصد داریم بازنویسی کنیم رو قرار بدیم. برای هر ویژگی که می‌خوایم بازنویسی کنیم باید یه برچسب item تشکلیل بدیم. هر item یه اسم داره و یه مقدار، مثلا برای اندازه‌ی متن می‌تونیم از این خط استفاده کنیم:

<item name="android:textSize">25sp</item>

اسم هر item باید کلمات مشخصی باشه تا برنامه بفهمه منظور مون دقیقا چیه، برای اینکه بدونیم چه اسمی باید بذاریم، فایل activity_main.xml رو در قسمت متنی باز کنید. می‌بینید برای اون متنی که چند دیقه پبش تغییرش دادیم یه سری ویژگی رو نوشته که ما هم دقیقا از همون اسامی در item ها استفاده می‌کنیم.

بعد از وارد کردن ویژگی‌هایی که می‌خوایم، کد سبک نمایش‌مون اینطوری می‌شه:

<style name="ekhtar" parent="@android:style/TextAppearance">
        <item name="android:textSize">25sp</item>
        <item name="android:textStyle">bold</item>
        <item name="android:typeface">serif</item>
        <item name="android:textColor">#f00</item>
</style>

۵.فایل styles.xml رو ذخیره کنید و به قسمت گرافیکی activity_main.xml برید. اون متنی که بود رو پاک کنید و یه متن دیگه روی صفحه بندازید. حالا از ستون properties خط style رو پیدا کنید و روش دوتا کلیک کنید تا سبک‌های نمایش موجود رو بهتون نشون بده و از بینشون همونی که الان ساختید (ekhtar) رو انتخاب کنید. بعد از انتخاب اون سبک، متن‌تون دقیقا همون ویژگی‌هایی که تعریف کرده بودید رو پیدا می‌کنه.

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

۶.حالا می‌خوایم یه سبک نمایش درست کنیم که دقیقا همین شکلی باشه ولی متن به جای bold،کج (italic) باشه، یعنی انگار یه زیرکلاس می‌خوایم برای سبک قبلی تعریف کنیم. برای این کار، تو فایل styles.xml یه برچسب جدید درست می‌کنیم و این بار اسمشو می‌ذاریم ekhtar.kaj این یعنی ما می‌خوایم تمام ویژگی‌های سبک ekhtar رو داشته باشیم ولی فقط کجش کنیم. اینطوری:

<style name="ekhtar.kaj">
        <item name="android:textStyle">italic</item>
</style>

الان اگه تو فایل activity_main.xml اون متن رو انتخاب کنیم، می‌تونیم از قسمت style در properties گزینه ekhtar.kaj رو انتخاب کنیم تا متن کجکی بشه :)

۷.ممکنه تو مرحله ۳ براتون سوال پیش اومده باشه که من چطور فهمیدم باید از ظاهرمتن (TextAppearance) به عنوان والد در ارث‌بری استفاده کنیم. باید بگم خوبیه اندروید اینه که متن‌بازه، یعنی تمام محتوای سیستم عاملش رو اینترنت هست، ما‌ می‌تونیم به قسمت سبک‌های نمایش‌اش بریم و اسم تمامی سبک‌های موجود رو ببینیم، مثلا یکی از جاهایی که سیستم عامل اندروید رو به صورت متن‌باز قرار داده اینجاست. توی این سایت از ستون سمت چپ رو نسخه‌ی API ای که استفاده می‌کنید کلیک کنید و مسیر زیر رو باز کنید: (مثلا من نسخه 2.3.3 رو باز کردم)

2.3.3_r1 -> frameworks -> base -> core -> res -> res -> values -> styles.xml

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

فهرست‌ مطالب

ادامه آموزش: قالب (Theme)