如何自定义Theme让应用适配多套UI风格
前言
这是一段无聊的碎碎念。
昨晚练琴的时候太无聊了,开始看了黄轩主演的《创业时代》。我很喜欢里面的剧情和他骑自行车去西藏沿途的风景,创业的曲折也我想到了第一家公司创业的老板老靳和那时的故事…
中午在公交上看到《创业时代》的第四集,里面黄轩敲了一段代码,乍一看很熟悉啊,这不就是Android嘛,我每天都在敲这玩意儿。以前刚开始工作的时候就有很优秀的人告诉我他每周末都会把遇到的问题做一次总结,只是那个我还没有坚持下去,最近终于在外力的驱使下开始反思自己。过去的一年在舒适区呆的太久了,走出来后变得很狼狈,我想诗和远方应该放到心里面,好好写一写博客提升一下自己的技术。
言归正传,前几天接到一个需求是要修改整体的UI风格,之前是深色,现在要改为白色。当然我们不能把每个页面的代码里面的背景或者颜色都改一遍,万一下次又要改成其他颜色呢 ?这篇博客想写一下应用如何适配多套UI以及开发中一些好习惯的问题。
效果预览
上面分别是白色和深色的UI的界面截图。
开发中的一些疑问
带着疑问去解决问题会更好的理解,做适配的时候我也遇到这些问题。
1、attr 里面的属性是什么
2、Application 里面设置的Theme 和Activity 设置的Theme 以及Dialog的Theme有什么区别
3、android:windowBackground
和android:background
有什么区别
4、开发过程中好的开发习惯
适配主题UI
废话不多说,端代码上菜了。
一、自定义attr的属性
首先在res/value下面建一个attrs 文件,里面定义的是我们需要的自定义属性。
<?xml version="1.0" encoding="utf-8"?>
<resources>
<attr name="main_background" format="reference" />
<attr name="bt_text_color" format="reference" />
<attr name="bt_background" format="reference" />
<attr name="pro_color_start" format="color" />
<attr name="pro_color_center" format="color" />
<attr name="pro_color_end" format="color" />
<attr name="progress_drawable" format="reference"/>
<attr name="check_btn_color" format="color"/>
<attr name="check_btn_bg" format="color"/>
<attr name="scorllview_bg" format="reference"/>
</resources>
二、自定义Style的主题
在value/styles.xml里面定义两套主题的style HolatekLight
和HolatekDark
<!--H90白色UI-->
<style name="HolatekLight" parent="Theme">
<item name="main_background">@drawable/bg_light_theme</item>
<item name="bt_text_color">@color/btn_textcolor_light_selector</item>
<item name="bt_background">@drawable/btn_bg_light_selector</item>
<item name="android:textColor">@color/text_dark_color</item>
<item name="pro_color_start">@color/text_dark_color</item>
<item name="pro_color_center">@color/progress_color_center</item>
<item name="pro_color_end">@color/progress_color_end</item>
<item name="progress_drawable">@drawable/recycle_progressbar</item>
<item name="check_btn_color">@color/checkview_text_selector</item>
<item name="check_btn_bg">@drawable/factory_reset_bg_light_selector</item>
<item name="scorllview_bg">@drawable/scorview_bg_light</item>
</style>
<!--S90深色UI-->
<style name="HolatekDark" parent="Theme">
<item name="main_background">@drawable/bg</item>
<item name="bt_text_color">@color/btn_textcolor_dark_selector</item>
<item name="bt_background">@drawable/btn_bg_dark_selector</item>
<item name="android:textColor">@color/block_checkbox_white</item>
<item name="pro_color_start">@color/text_dark_color</item>
<item name="pro_color_center">@color/progress_color_center</item>
<item name="pro_color_end">@color/progress_color_end</item>
<item name="progress_drawable">@drawable/pro_drawable_dark</item>
<item name="check_btn_color">@color/checkview_text_selector</item>
<item name="check_btn_bg">@drawable/factory_reset_bg_selector</item>
<item name="scorllview_bg">@drawable/des_bg</item>
</style>
三、应用自定义属性
在布局文件中使用类似android:indeterminateDrawable="?attr/progress_drawable
使用定义的自定义属性,我们只需要在定义的style里面根据不同的主题来配置就可以了。
<ScrollView
android:id="@+id/hola_scrollView"
android:layout_width="@dimen/layout_margin_left9"
android:layout_height="@dimen/layout_width8"
android:layout_centerInParent="true"
android:layout_marginTop="@dimen/layout_margin_top3"
android:layout_weight="2"
android:background="?attr/scorllview_bg"
android:clipToPadding="false"
android:padding="@dimen/layout_margin_top3"
android:focusable="false"
android:visibility="gone">
<TextView
android:id="@+id/hola_message"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:lineSpacingExtra="@dimen/layout_margin_left"
android:paddingLeft="@dimen/layout_margin_top3"
android:textSize="@dimen/text_size2" />
</ScrollView>
<ProgressBar
style="@android:style/Widget.Holo.ProgressBar.Small"
android:id="@+id/hola_update_progress"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_marginBottom="@dimen/layout_margin_bottom"
android:layout_marginEnd="@dimen/layout_margin_end"
android:layout_marginStart="@dimen/layout_margin_start"
android:indeterminate="true"
android:indeterminateDrawable="?attr/progress_drawable"
android:visibility="gone" />
四、应用style主题
如果需要白色主题就使用android:theme="@style/HolatekLight"
,深色就android:theme="@style/HolatekDark"
这样换主题就直接改application 的主题标签就可以了。
<application
android:name=".utils.UpdateApp"
android:icon="@drawable/ic_title"
android:label="@string/app_name"
android:persistent="true"
android:theme="@style/HolatekLight">
@android:color/white
关于那些疑惑
导出
如果你想尝试使用此编辑器, 你可以在此篇文章任意编辑。当你完成了一篇文章的写作, 在上方工具栏找到 文章导出 ,生成一个.md文件或者.html文件进行本地保存。
导入
如果你想加载一篇你写过的.md文件或者.html文件,在上方工具栏可以选择导入功能进行对应扩展名的文件导入,
继续你的创作。