MaterialDesign实现之主题使⽤Theme
Material Design 是Google在Android L推出来的⼀套新的设计规范，有着鲜明的⾊彩，极致的⽤户体验，酷炫的动画。本系例将带给⼤家⼀套完整的Material实现⽅案。预计本系例将覆盖以下⼏个主题：
1.MaterialDesign主题的使⽤
2.Toolbar的应⽤，及其菜单动画
3.属性动画的基本介绍（基础)
4.Transition场景动画
5.Activity的切换动画
7.触动反馈之Ripple的使⽤
8.触动反馈之响应动画
9.阴影介绍与CardView
10.RecycleView的使⽤
11.RecycleView的特效
12.AndroidL风格的下拉刷新
这是本系例的第⼀篇，主题的使⽤。
原⽣主题的使⽤
在Android 5.0中，新引⼊了以Material为关键字的主题。
@android:style/Theme.Material
@android:style/Theme.Material.Light
@android:style/Theme.Material.Light.DarkActionBar
使⽤⽅式都是在l的定义中，
<style name="MaterialTheme" parent="android:Theme.Material">
</style>
但注意，这个定义不能放在values中，只能放在values-v21中。因为低版本的机型不识别这个主题。
因此，为了兼容低于androidL的机型，通常的做法，需要在values中，添加⼀个中间主题CustomCompactTheme。
对于values-21(⾼于5.0的版本), CustomCompactTheme可继承android.Theme.Material,
<style name="CustomeCompatTheme" parent="android:Theme.Material">
</style>
对于values(低于5.0的版本)，CustomCompactTheme可继承Holo。
<style name="CustomeCompatTheme" parent="android:Theme.Holo">
</style>
完整代码如下： l
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!--定义基础主题 -->
<style name="CustomeCompatTheme" parent="android:Theme.Material">
</style>
</resources>
l
<resources>
<!--定义基础主题 -->
<style name="CustomeCompatTheme" parent="android:Theme.Holo">
</style>
<!--定义使⽤的主题-->
<!-- Base application theme. -->
<style name="AppTheme" parent="CustomeCompatTheme">
<!-- Customize your theme here. -->
</style>
</resources>
兼容低版本主题的使⽤
幸运的是在android-support-v7包（21版以上）已经为我们实现了兼容⽅案，只要引⼊相关的主题即可。加⼊v7包，在gradle.build⽂件的dependencies节点中加⼊
compile 'com.android.support:appcompat-v7:23.0.0'
则l可以精简为
<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
<!-- customize the color palette -->
</style>
主题的配⾊
在theme中，我们可以为系统界⾯⾃定义⼀些配⾊，见下图。
这些配⾊，可以在主题中进⾏设置如
<item name="colorPrimary">#675634</item>
<item name="colorPrimaryDark">#993309</item>
<item name="colorAccent">#7767ff</item>
<item name="android:textColorPrimary">#ffff33</item>
<item name="android:navigationBarColor">#44ef54</item>
效果图：
同样，在代码设置如下⽅式
getWindow().setStatusBarColor(0xff873434);
getWindow().setNavigationBarColor(0xff345644);
效果图
margin属性怎么用ThemeOverlay
通常情况下，主题只能应⽤到全局，粒度最低只能到Activity这⼀层次，那如果说只想把界⾯中的某⼀个布局使⽤主题，怎么办？这在以前是⾏不通的，但现在新引⼊Overlay系列主题就能使⽤到某⼀个ViewGroup上⾯，如：
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:theme="@style/ThemeOverlay.AppCompat.Dark"
>
<Button
android:layout_width="wrap_content"
android:text="33333"
android:layout_height="wrap_content" />
<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New CheckBox"
android:id="@+id/checkBox"
android:layout_below="@+id/button"
android:layout_alignParentStart="true"
android:layout_marginTop="51dp" />
</LinearLayout>
这样LinearLayout所有的⼦元素都将继承ThemeOverlay.AppCompat.Dark的风格。
使⽤预定义的数值
为了与保持整个应⽤程序的统⼀，有时我们需要使⽤系统预定义的值，⽐如不同的主题下，ActionBar的⾼度或不⼀样，则为了兼容各种主题，则我们在代码中不需要把⾼度写死，应该使⽤引⽤的⽅式的设置⾼度，如
<Toolbar
android:layout_height="?android:attr/actionBarSize"
android:layout_width="match_parent"
android:background="?android:attr/colorPrimaryDark"
/>
如上所⽰，同样的，在必要的时候，我们也需要引⽤主题的颜⾊，这样当换⼀个主题的时候，UI的颜⾊就随着变改，增强代码的灵活性。
在Android5.0中，Google推出了更加灵活的Toolbar来取代ActionBar。Toolbar的优点是更加灵活，⽐如以前⼀个界⾯只能设置⼀个ActionBAR，但可以有多个Toolbar。⽽Toolbar同样可以设置菜单，颜⾊图标等，可以⾃定义的元素⽐ActionBAR多。因此，在Android应⽤程序中使⽤toolbar是⼀种趋势。
为了提⾼程序的兼容性，我们通常都使⽤V7包中的Toolbar（当然如果你的应⽤只需要在Android5.0上运⾏，则可以直接使⽤
android.widget.Toolbar），要在程序中使⽤toolbar，则需要在gradle脚本中加上依赖项：
compile 'com.android.support:appcompat-v7:23.0.0'
如果是使⽤eclipse开发，则需要加⼊appcompat的库⼯程。
使⽤Toolbar的注意事项， 1. 由于Actionbar和Toolbar本⾝是有冲突的，因此，如果使⽤了Toolbar，则需要使⽤不带Actionbar的主题如：Theme.AppCompat.NoActionBar。 2. 由于使⽤的v7中的toolbar，因此，activity的基类也需要是v7中的AppCompatActivity。 3. 由于使⽤了AppCompatActivity对应的主题也需要是v7中的Theme.AppCompat.Light.NoActionBar
先看简单的效果图.
布局⽂件：
<RelativeLayout xmlns:android="schemas.android/apk/res/android"
xmlns:tools="schemas.android/tools" android:layout_width="match_parent"
android:layout_height="match_parent" tools:context=".MainActivity">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
></android.support.v7.widget.Toolbar>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"></RelativeLayout>
</RelativeLayout>
MainActivity
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(lbar);
setSupportActionBar(toolbar);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().u.menu_main, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
/
/ Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity l.
int id = ItemId();
//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return true;
}
OptionsItemSelected(item);
}
}
这⾥要介绍的是setSupportActionBar(对应Activity的setActionBar)这个⽅法，它是在AppCompatActivity 中的，我们需要调⽤它，把布局中的Toolbar设置为actionbar。
如此简单的，就完成了⼀个toolbar的实现。如果你需要对Toolbar进⾏⾃定义，⽐如修改背景⾊，只需要在对应的属性上修改就好，如
android:background="?attr/colorPrimary"
当然，⽬前的实现仅仅是框架的⼀部分。我们继续添加常见的侧滑菜单，即android.support.v4.widget.DrawerLayout。
Drawerlayout包括两个⼦元素，第⼀个是主界⾯，即正常显⽰的界⾯，第⼆元素是侧滑菜单的布局。我们要实现的界⾯如下，当菜单展开：当菜单关闭
我们的布局⽂件如下：
<RelativeLayout xmlns:android="schemas.android/apk/res/android"
xmlns:tools="schemas.android/tools"
xmlns:app="schemas.android/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.win16.materialtheme.MaterialActivity">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:minHeight="?attr/actionBarSize"
app:contentInsetLeft="72dp"
app:contentInsetStart="72dp"
android:background="?attr/colorPrimary"
></android.support.v7.widget.Toolbar>
<android.support.v4.widget.DrawerLayout
android:id="@+id/drawer"
android:layout_below="@id/toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--第⼀个元素，主界⾯ -->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="@+id/button"
android:layout_marginTop="55dp"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true" />
</RelativeLayout>
<!--第⼆个元素，侧滑菜单 -->
<LinearLayout
android:id="@+id/menu_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start|left"
android:layout_marginEnd="10dip"
android:background="#087654"
android:layout_marginRight="10dip"
android:orientation="vertical"
android:paddingTop="@dimen/abc_action_bar_default_height_material" />
</android.support.v4.widget.DrawerLayout>
</RelativeLayout>
对于主界⾯
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论