前几天看到干货集中营的gank这个app的架构，给我最大的吸引地方是里面动态app的主题。今天就总结出来，分享给大家吧。里面的一些资源文件用的都是里面的，这些都是次要的。下面来看下效果图吧:
simple.gif
可能有人一上来就觉得这没啥的啊，不就是去改变一些背景的颜色吗?nono，如果你这样想的话，那你就错了，现在画面上就这么几个简单的控件，假如现在页面上很多的控件的话，那不你得要费很多的时间去一个个设置控件的背景、字体的颜色了。那样真的是事倍功半了。下面就简单地讲讲如何实现的吧。我这里就动态设置了两块的背景色，还有一块文本的字体颜色。
讲解:
第一步:
你得先列出你的style组合，这里就是控制你的控件显示那种样式的。
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"/>
<style name="BlueTheme" parent="AppTheme">
<item name="colorPrimary">@color/colorBluePrimary</item>
</style>
<style name="RedTheme" parent="AppTheme">
<item name="colorPrimary">@color/colorRedPrimary</item>
</style>
<style name="BrownTheme" parent="AppTheme">
<item name="colorPrimary">@color/colorBrownPrimary</item>
</style>
<style name="GreenTheme" parent="AppTheme">
<item name="colorPrimary">@color/colorGreenPrimary</item>
</style>
<style name="PurpleTheme" parent="AppTheme">
<item name="colorPrimary">@color/colorPurplePrimary</item>
</style>
<style name="TealTheme" parent="AppTheme">
<item name="colorPrimary">@color/colorTealPrimary</item>
</style>
<style name="PinkTheme" parent="AppTheme">
<item name="colorPrimary">@color/colorPinkPrimary</item>
</style>
<style name="DeepPurpleTheme" parent="AppTheme">
<item name="colorPrimary">@color/colorDeepPurplePrimary</item>
</style>
<style name="OrangeTheme" parent="AppTheme">
<item name="colorPrimary">@color/colorOrangePrimary</item>
</style>
<style name="IndigoTheme" parent="AppTheme">
<item name="colorPrimary">@color/colorIndigoPrimary</item>
</style>
<style name="CyanTheme" parent="AppTheme">
<item name="colorPrimary">@color/colorCyanPrimary</item>
</style>
<style name="LightGreenTheme" parent="AppTheme">
<item name="colorPrimary">@color/colorLightGreenPrimary</item>
</style>
<style name="LimeTheme" parent="AppTheme">
<item name="colorPrimary">@color/colorLimePrimary</item>
</style>
<style name="DeepOrangeTheme" parent="AppTheme">
<item name="colorPrimary">@color/colorDeepOrangePrimary</item>
</style>
<style name="BlueGreyTheme" parent="AppTheme">
<item name="colorPrimary">@color/colorBlueGreyPrimary</item>
</style>
在这里定义了多种style的样式，其中里面的item就只有一个，因为在该demo里面就简单地只用到一个属性item。如果你想在app里面用到多个item属性的时候，你也可以在此基础上添加多个。大家可以看到我这里的colorPrimary就定义成一个颜色的值，其实你也可以定义drawable、anim等等。
首先来看状态栏的背景动态改变吧。其实这里我是把自带的状态栏给去隐藏掉了，而是用我们自定义的view来代替了状态栏。首先来看如何隐藏系统的statusbar的。
public class MainActivity extends AppCompatActivity{
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
if(Build.VERSION.SDK_INT>=Build.VERSION_CODES.KITKAT){
setTranslucentStatus(true);
}
}
@TargetApi(19)
private void setTranslucentStatus(boolean on) {
Window win = getWindow();
WindowManager.LayoutParams winParams = win.getAttributes();
final int bits = WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS;
if (on) {
winParams.flags |= bits;
} else {
winParams.flags &= ~bits;
}
win.setAttributes(winParams);
}
}
这里就是隐藏掉系统的状态栏的，隐藏掉后，下面就是用我们自定义的View来代替状态栏了。下面先看下MainActivity的布局吧。
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity" >
<com.demo.statusbar.ColorView
android:id="@+id/status_bar"
android:layout_width="match_parent"
android:layout_height="20dp"
android:background="?attr/colorPrimary" />
<com.demo.statusbar.ColorRelativeLayout
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="48dp"
android:background="?attr/colorPrimary">
<TextView
android:id="@+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="10dp"
android:layout_toRightOf="@+id/icon"
android:text="状态栏切换"
android:textColor="@android:color/white"
android:textSize="18sp" />
<ImageView
android:id="@+id/menu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="10dp"
android:src="@mipmap/ic_menu" />
</com.demo.statusbar.ColorRelativeLayout>
<com.demo.statusbar.ColorTextView
android:id="@+id/main_text"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="点击右上角的图标"
android:textColor="?attr/colorPrimary"
android:textSize="15sp" />
</LinearLayout>
其中这里的com.demo.statusbar.ColorView就是一个自定义的View，用来代替系统的statusBar。
这里的com.demo.statusbar.ColorRelativeLayout就是用来表示toolBar了。
这里的com.demo.statusbar.ColorTextView就是用来表示下面自定义的textView。
下面就讲讲com.demo.statusbar.ColorView是如何实现改变样式的：
public class ColorView extends View implements SelectColorsWindow.OnItemClickListener {
private static final String TAG =ColorView.class.getSimpleName();
private int attr_background = -1;
public ColorView(Context context) {
super(context);
}
public ColorView(Context context, AttributeSet attrs) {
super(context, attrs);
this.attr_background = ViewAttributeUtil.getBackgroundAttibute(attrs);
}
public ColorView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
this.attr_background = ViewAttributeUtil.getBackgroundAttibute(attrs);
}
@Override
public View getView() {
return this;
}
@Override
public void setMyTheme(int index) {
}
@Override
public void ItemClick(Resources.Theme theme) {
if (attr_background != -1) {
ViewAttributeUtil.applyBackgroundDrawable(this, theme, attr_background);
}
}
}
这里实际上做了三件事，第一就是在构造里面获取了该View的background属性值，而我们在布局里面定义了android:background="?attr/colorPrimary"这么个属性，因此大家可以看得出来，马上看到该字眼很熟，是不是在style里面见到了该item的定义呢。这里就是用到了不同style下的colorPrimary这个item。第二就是监听了主题切换的回调，我这里定义的是ItemClick方法的回调，这个没什么好说的。第三就是设置background了，这个是在ViewAttributeUtil类中实现的，由于ViewAttributeUtil类太庞大了，这里就不赘述了。
借鉴的项目:https://github.com/dongjunkun/GanK
关于我
email: a1002326270@163.com
github:enter
网友评论