نحوه ساخت استایل و تم برای اپلیکیشن اندروید - بخش اول

نحوه ساخت استایل و تم برای اپلیکیشن اندروید - بخش اول

به طور معمول اکثر توسعه دهندگان اپلیکیشن های اندروید، بیشترین تمرکز خود را بر روی عملکرد اپلیکیشن های خود می گذارد، اما باید به این نکته توجه داشت که عملکرد به تنهایی کفایت نمی کند. گوگل پلی بیش از یک میلیون اپلیکیشن را میزبانی می کند و ظاهر اپلیکیشن ها در این استور به اندازه عملکرد آنها اهمیت دارند. با نگاهی به اپلیکیشن های برتر گوگل پلی به وضوح بر اهمیت و جایگاه طراحی و ظاهر پی می برید.

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

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

1. ساخت استایل ها

قاعدتا استایل ها به اجزای رابط کاربری اپلیکیشن و بخش بصری اعمال می شوند، از این رو کار را با ساخت یک اکتیویتی خالی جدید و افزودن دو ویو به فایل XML لی اوت آن آغاز می کنیم.

<View android:layout_width="100dp"

android:layout_height="100dp"

android:layout_margin="5dp"

android:background="#009688"

android:id="@+id/box1" />

<View android:layout_width="100dp"

android:layout_height="100dp"

android:background="#00BCD4"

android:layout_margin="5dp"

android:id="@+id/box2" />

همانطور که در قطعه کد بالا نیز مشخص است، ویژگی هایی مانند layout_width و layout_margin صریحا در تعریف هریک از ویوها گنجانده شده اند.

به منظور ساخت یک استایل جدید در ویوی اول، بر روی آن کلیک راست کرده و Refactor>Extract>Style را انتخاب کنید.

در این مرحله دیالوگی به نمایش در می آید و می توانید با استفاده از آن به استایل خود یک نام اختصاص دهید و ویژگی هایی را که باید در آن قرار گیرد انتخاب نمایید. در این مثال نام MyBox برای استایل گذاشته شده و تمامی ویژگی ها به غیر از background انتخاب شده اند.blog_21782_1

با زدن OK مشاهده می کنید که کدهای ویوی اول تغییر کردند.

<View android:background="#009688"

android:id="@+id/box1"

style="@style/MyBox" />

ویو دارای ویژگی style شده که در حقیقت به استایل MyBox اشاره می کند، با باز کردن فایل res/values/styles.xml می توانید نگاهی به تعریف استایل ساخته شده بیندازید.

<style name="MyBox">

<item name="android:layout_width">100dp</item>

<item name="android:layout_height">100dp</item>

<item name="android:layout_margin">5dp</item>

</style>

وقتی که استایل ساخته شد می توانید آن را برای هر ویویی که می خواهید مورد استفاده قرار دهید. برای نمونه در کد زیر استفاده از استایل MyBox برای ویوی دوم نمایش داده شده است:

View android:background="#00BCD4"

android:id="@+id/box2"

style="@style/MyBox" />

وقتی که استایل ها بر روی ویوها اعمال شدند، دو ویو به صورت زیر در اکتیویتی به نمایش در خواهند آمد:blog_21782_2

2. گسترش استایل ها

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

دو سینتکس متفاوت جهت گسترش استایل در اختیار شما قرار دارد، سینتکس اول implicit syntax نام دارد و از نماد نقطه استفاده می کند. در زیر نحوه ساخت دو استایل مشتق شده به نام های TEAL و CYAN با کمک استایل MyBox در نقش استایل والد نمایش داده شده است:

<style name="MyBox.TEAL">

<item name="android:background">#009688</item>

</style>

<style name="MyBox.CYAN">

<item name="android:background">#00BCD4</item>

</style>

همانطور که حدس زدید هر دو استایل MyBox.TEAL و MyBox.CYAN از تمامی ویژگی های MyBox برخوردارند. علاوه بر این ویژگی ها، این دو استایل دارای ویژگی android:background نیز می باشند که در استایل والد وجود نداشت.

سینتکس دوم جهت ساخت یک استایل مشتق شده explicit syntax نام دارد، در این روش از یک ویژگی parent استفاده می شود که مقدار آن به نام استایل والد ست شده است. قطعه کد زیر یک استایل به نام TealBox را تعریف می کند.

<style name="TealBox" parent="MyBox">

<item name="android:background">#009688</item>

</style>

اعمال استایل های مشتق شده هیچگونه تفاوتی با استفاده از استایل های معمولی ندارد.

View android:id="@+id/box1"

style="@style/TealBox" />

<View android:id="@+id/box2"

style="@style/MyBox.CYAN" />

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

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

 

http://code.tutsplus.com برگرفته از

اینها را هم بخوانید