طراحی تم (Theme) سفارشی در اندروید

تم (Them) سبکی است که روی اپلیکیشن یا تمام اکتیویتی ها اعمال می شود. بنابراین هنگامی که یک سبک به عنوان تم استفاده می شود ویژگی های آن روی تمام کامپوننت های برنامه و اکتیویتی ها اعمال می گردد.در این آموزش با ما باشید با ساخت و طراحی تم سفارشی و اعمال آن بر روی لایوت(layout):

وراثت در سبک ها

اندروید نیز در روشی بسیار مشابه به ارث بری سبک ها در طراحی صفحات وب از وراثت پشتیبانی می کند. این امر باعث می شود تا بتوانیم در تعریف یک سبک(تم) جدید از ویژگی های سبک های موجود استفاده کنیم و فقط ویژگی هایی که لازم داریم را تغییر دهیم یا اضافه کنیم.

به منظور پیاده سازی یک تم جدید در نرم افزار باید یک فایل مانند Demo theme/res/values/themes.xml ایجاد کنیم و سپس محتوایی مانند زیر را در آن قرار دهیم

در اینجا ویژگی parent والد تم ما را تعیین می کند. پس از آن مانند زیر تم مورد نظرمان را در فایل مانیفست روی اکتیویتی اعمال می کنیم.

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

سبک

استفاده از رنگ ها برای ویژگی های تم

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

Themeدر اندروید

استفاده از تصاویر Nine-Patch در طراحی

nine-patchها (تصاویر نه تکه) تصاویری با فرمت بیت مپ در ابعاد کوچک می باشند که می توانند ضمن حفظ کیفیت در طراحی تم برای کامپوننت هایی با ابعاد بزرگ مورد استفاده قرار گیرند. در اندروید استفاده از این تصاویر رایج ترین روش در ایجاد ظاهر جدید برای دکمه ها می باشد، در عین حال از تصاویر معمولی هم می توان استفاده کرد.

NINE-PATCH
یک نمونه تصویر NINE-PATCH

مراحل ساخت دکمه ها با استفاده از تصاویر نه تکه

۱_  تصویر بیت مپ را در مسیر res/drawable/ ذخیره کنید
۲_  یک سبک جدید تعریف کنید.
۳_  سبک جدید را برای دکمه ها تعیین کنید.

نحوه ی استفاده از تم ها

به عنوان مثال می توانیم سبک “CustomFontStyle” را به عنوان تم یک اکتیویتی مشخص کنیم که پس از آن تمام متن های داخل این اکتیویتی سبز رنگ خواهد بود.

به منظور تعیین تم برای تمام اکتیویتی های برنامه فایل AndroidManifest.xml را باز کنید و مانند زیر در داخل تگ <application> نام تم مورد نظر را برای صفت android:theme تعیین کنید.

اما اگر بخواهیم پوسته فقط روی یک اکتیویتی اعمال شود، باید مانند زیر ویژگی android:theme را تنها به تگ <activity> مورد نظر اضافه کنیم.

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

رنگ بندی در قالب اصلی

می توان هنگام طراحی صفحه بندی قسمت های اصلی صفحه را نیز بر اساس رنگ پایه در طرح تغییر داد. برای مثال در تصویر زیر پوسته بر پایه ی رنگ آبی طراحی شده است.

تم در اندروید

صفحه ی بالا بر اساس تمی که در فایل res/values/style.xml طراحی گردیده، پیاده سازی شده است.

سبک ها و تم های پیش فرض

پلت فرم اندروید مجموعه ی بزرگی از سبک ها و تم ها را ارائه نموده است که می توانیم در ساخت اپلیکیشن از آن ها استفاده کنیم. همچنین یک مرجع از تمام سبک های مو جود در کلاس R.style وجود دارد که برای استفاده از آن ها کافی است “_” موجود در نام سبک را با “.” جایگزین کنیم. به عنوان مثال می توانیم سبک Theme_NoTitleBar را با استفاده از قطعه کد “android:@style/Theme.NoTitleBar” برای پوسته ی برنامه تعیین کنیم. همچنین می توانید در لینک های زیر سبک ها و تم های اندروید را ببینید.

Android Styles (styles.xml

(Android Themes (themes.xml

مثال

این مثال به صورت ساده نحوه ی ساختن یک تم و اعمال آن بر روی اپلیکیشن را نشان می دهد. برای این منظور مراحل جدول زیر را دنبال کنید.

مرحله توضیحات
۱ با استفاده از اندروید استودیو یک پروژه ی جدید با نام Demo theme تحت بسته ی com.example.demo.theme ایجاد کنید. نحوه ی ایجاد پروژه ی جدید در بخش آموزشی مثال ساخت اولین پروژه در اندروید استودیو توضیح داده شده است.
۲ ثابت های رشته ای مورد نیاز را مانند آنچه در ادامه آمده است در فایل res/values/strings.xml تعریف کنید.
۳ محتوای فایل res/values/style.xml را به منظور ایجاد یک تم جدید مانند آنچه در ادامه آمده است تغییر دهید.
۴ محتوای فایل res/layout/activity_main.xml را مانند آنچه در ادامه آمده است تغییر دهید.
۵ محتوای فایل java/com.example.demo.theme/MainActivity.java را نیز مانند آنچه در ادامه آمده است تغییر دهید.
۶ سرانجام باید در فایل AndroidManifest.xml تم جدیدمان را به عنوان پوسته ی اپلیکیشن تعیین کنیم.
۷ برنامه را با استفاده از شبیه ساز اندروید اجرا کنید و نتیجه را مورد بررسی قرار دهید.

در زیر محتوای فایل res/values/strings.xml آورده شده است.

محتوای زیر مربوط به فایل res/values/style.xml می باشد که یک تم جدید را در آن تعریف کرده ایم.

در زیر محتوا ی فایل رابط کاربری گرافیکی res/layout/activity_main.xml آورده شده است.

محتوای زیر مربوط به فایل java/com.example.demo.theme/MainActivity.java می باشد.

در زیر محتوای فایل AndroidManifest.xml آورده شده است که در آن برای تعیین تم جدید مقدار “android:theme=”@style/AppTheme را به “android:theme=”@style/MyTheme تغییر داده ایم.

حال نوبت آن رسیده تا با استفاده از اندروید استودیو برنامه را اجرا کنیم. برای این منظور روی آیکون Run که در نوار ابزار قرار دارد کلیک کنید.اگر همه چیز بدون مشکل پیش برود پنجره ی شبیه ساز شما مانند تصویر زیر خواهد بود.

Theme

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *