نحوه ساخت استایل و تم برای اپلیکیشن اندروید – بخش دوم
در مقاله قبلی شما را با نحوه ساخت استایل برای اپلیکیشن اندروید آشنا کردیم، در ادامه روش ساخت تم برای اپلیکیشن را به شما خواهیم آموخت، با ما همراه باشید.
3. ساخت تم ها
تا این مرحله تنها قادر به اعمال استایل ها به ویوهایی بودید که در داخل اکتیویتی قرار دارند. اندروید به شما امکان اعمال استایل ها به کل اکتیویتی ها و اپلیکیشن ها را نیز می دهد، زمانی که یک استایل برای یک اکتیویتی یا اپلیکیشن اعمال شود، به یک تم تبدیل می شود.
به طور پیش فرض تمامی اپلیکیشن ها که با استفاده از آخرین نسخه اندروید ساخته می شوند، یک تم به نام AppTheme را بکار می برند. این تم در واقع از نسل تم شناخته شده AppCompat می باشد که یک تم بسیار کامل است که ظاهر بسیاری از ویوهایی را که به طور معمول استفاده می شوند تحت تاثیر قرار می دهد.
در فایل styles.xml می توانید تعریف AppTheme را بیابید:
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
AppTheme از استانداردهای متریال دیزاین پیروی می کند، در نتیجه جهت ساخت تم های اختصاصی خود که با مشخصات متریال دیزاین هم خوانی داشته باشند، می توانید از AppTheme به عنوان تم والد استفاده کنید، این کار ایده خوبی خواهد بود و شما به طور مستقیم قادر به استفاده از Theme.AppCompat به عنوان والد هستید.
اما می توانید از طریق نوشتن کد XML نیز تم های خود را بسازید، اما این نکته را به خاطر سپارید که آنها تنها استایل هستند. در این مطلب آموزشی نحوه انجام این کار با استفاده از Theme Editor اندروید استودیو نمایش داده خواهد شد.
منوی Tools را باز کرده و Android>Theme Editor را انتخاب کنید، در قسمت راست پنجره ویرایشگر تم، کنترل هایی در اختیار شما قرار گرفته است که نه تنها برای تغییر تم ها، بلکه برای ساخت تم های جدید نیز می باشند. در قسمت چپ یک پیش نمایش از نتایج تغییرات اعمال شده بر روی تم ها به شما نمایش داده می شود.
به منظور ساخت یک تم جدید بر روی منوی کشویی Theme کلیک کرده و گزینه Create New Theme را انتخاب کنید.
در دیالوگی که نمایش داده می شود یک نام مانند MyTheme برای تم خود انتخاب کرده و OK را بزنید.
در این مرحله فایل styles.xml یک خط جدید مشابه زیر خواهد داشت:
<style name="MyTheme" parent="AppTheme" />هم اکنون می خواهیم با استفاده از ویرایشگر تم MyTheme را تغییر دهیم، به منظور سادگی کار، در این مطلب تنها مقادیر ویژگی های colorPrimary، colorPrimaryDark و colorAccent را تغییر خواهیم داد.
جهت تغییر مقدار colorPrimary بر روی دکمه colorPrimary کلیک کنید، ویرایشگر تم یک دیالوگ را که دربرگیرنده یک کالر پیکر است به شما نشان می دهد. هر رنگی را که مد نظر دارید انتخاب کنید و مطمئن شوید که نام جدیدی را برای آن انتخاب کرده اید. چنانچه نام را عوض نکنید، ویراشگر تم رنگی را که توسط AppTheme استفاده شده اوررایت خواهد نمود.
به منظور تغییر مقادیر colorPrimary و colorAccent اقدامات مشابه را انجام دهید. ویرایشگر تم به طور خودکار از رنگی که برای colorPrimary انتخاب کرده اید استفاده کرده و رنگ های مناسبی برای colorPrimaryDark و colorAccent پیشنهاد می دهد.
تعریف MyTheme هم اکنون چیزی مطابق زیر خواهد بود:
<style name="MyTheme" parent="AppTheme" >
<item name="colorPrimary">@color/colorPrimaryMyTheme</item>
<item name="colorPrimaryDark">@color/colorPrimaryDarkMyTheme</item>
<item name="colorAccent">@color/colorAccentMyTheme</item>
</style>
4. اعمال تم ها
پیش از اینکه تمی را که ساخته بودیم مورد استفاده قرار دهیم، بهتر است چندین ویو که به طور متداول مورد استفاده قرار می گیرند را به اکتیویتی اضافه نماییم، با این کار اثرات اعمال شده بر روی تم برای ما مشهودتر خواهد شد.
کد زیر یک Button معمولی، یک دکمه بدون حاشیه، یک دکمه رنگی، یک Checkbox، یک Switch، یک Seeker، یک TextView و یک EditText می سازد.
<Button android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="normal"
android:id="@+id/normal_button" />
<Button android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="borderless"
android:id="@+id/borderless_button"
style="@style/Widget.AppCompat.Button.Borderless" />
<Button android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="colored"
android:id="@+id/colored_button"
style="@style/Widget.AppCompat.Button.Colored" />
<CheckBox android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="New CheckBox"
android:id="@+id/checkBox" />
<RadioButton android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="New RadioButton"
android:id="@+id/radioButton" />
<Switch android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="New Switch"
android:id="@+id/switchButton" />
<SeekBar android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/seekBar" />
<TextView android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="New Text"
android:id="@+id/textView" />
<EditText android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/editText"
android:hint="Input" />
لی اوت جدید با تمامی ویوهایی که جدیدا اضافه شده اند چیزی مشابه زیر خواهد بود:
چنانچه مشخصه های متریال دیزاین را مطالعه کرده باشید، می دانید که در حال حاضر اکتیویتی از سایه های رنگ نیلی برای colorPrimary و colorPrimaryDark استفاده می کند و برای colorAccent سایه های رنگ صورتی مورد استفاده قرار می گیرد. این رنگ ها، رنگ های پیش فرض تعریف شده توسط اندروید استودیو می باشند و می توانید در فایل values/colors.xml/ پروژه خود معادل آنها را پیدا کنید.
جهت اعمال MyTheme به اکتیویتی فایل مانیفست پروژه را باز کرده و ویژگی android:theme را به تعریف اکتیویتی اضافه کنید و مقدار آن را به style/MyTheme@ ست کنید.
<activity android:name=".MainActivity"
android:theme="@style/MyTheme">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
به طور مشابه می توانید تم را به کل اپلیکیشن خود اعمال کنید، برای این کار لازم است مقدار ویژگی android:theme در تعریف اپلیکیشن را به style/MyTheme@ ست کنید.
اکتیویتی شما در این مرحله چیزی مشابه زیر خواهد بود:
جمع بندی
در این مطلب آموزشی با نحوه ساخت و اعمال استایل ها و تم های کاستوم اندروید آشنا شدید و با استفاده از آن می توانید ظاهر بهتری به اپلیکیشن های خود بدهید، اما اعتدال را حفظ کنید، چرا که برخی از کاربران اندروید به متریال دیزاین عادت کرده اند و انحراف از این قوانین ممکن است منجر به آزار آنها گردد.
اپریویو
