Material Design1

author——XiYoung

参考文档：

链接1
链接2

强烈建议看英文原文文档，此处为我学习的时候写一些笔记，很多不当之处，共同学习；

Toobar

enter image description here

使用方法

1.确保在对应Application的build.gradle中添加了AppCompat-v7support

dependencies { compile 'com.android.support:appcompat-v7:23.1.0+'}

2.设置主题（让你的主题继承自Theme.AppCompat.NoActionBar）
一定要设置NoActionBar主题不然会抛出异常，导致崩溃

<resources> 
 <style name="AppTheme"
        parent="Theme.AppCompat.Light.NoActionBar">
           <item name="colorPrimary">#673AB7</item> 
          <item name="colorPrimaryDark">#512DA8</item>
         <item name="colorAccent">#FF4081</item> 
        <item name="android:windowBackground">@color/window_background</item>
   </style>
</resources>```

3.添加到对应的Activity Layout XML布局中
- **注意：** `xmlns:app="http://schemas.android.com/apk/resauto"`
```android:layout_height="?attr/actionbarSize"```
- 对应代码
```xml
<LinearLayout      xmlns:android="http://schemas.android.com/apk/res/android"   xmlns:app="http://schemas.android.com/apk/res-auto"     
        android:layout_width="match_parent"
       android:layout_height="match_parent" 
        android:orientation="vertical"> 
    <android.support.v7.widget.Toolbar 
        android:id="@+id/toolbar" 
        android:minHeight="?attr/actionBarSize"
        android:layout_width="match_parent" 
        android:layout_height="wrap_content"     
        app:titleTextColor="@android:color/white" 
        android:background="?attr/colorPrimary">   
    </android.support.v7.widget.Toolbar>
</LinearLayout>```

4.在代码中设置

public class MyActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_my);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
final ActionBar ab = getSupportActionBar(); //这是控制menu菜单的开关显示
ab.setHomeAsUpIndicator(R.drawable.ic_menu); //是否显示drawerlayout开关
ab.setDisplayHomeAsUpEnabled(true);
}
//填充菜单布局
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; 此处和actionbar一样写Menu（在Menu文件夹下）
getMenuInflater().inflate(R.menu.menu_main, menu); return true;
}

//toolbar的开始菜单开关
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch(item.getItemId()){
case android.R.id.home:
mdrDrawerLayout.openDrawer(GravityCompat.START);
break;
default :
break;
}
return super.onOptionsItemSelected(item);
}
}

###定制Toolbar的主题风格
####可以通过设置Theme的方法来设置Toolbar的主题
```xml
<android.support.v7.widget.Toolbar 
  android:id="@+id/toolbar" 
  android:layout_width="match_parent" 
  android:layout_height="wrap_content" 
  android:minHeight="?attr/actionBarSize"    
  android:theme="@style/ToolbarTheme" 
  app:titleTextAppearance="@style/Toolbar.TitleText" 
  app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

1.布局文件中定义你的主题样式

<!-- 让Application的BaseTheme继承自Theme.AppCompat.Light.NoActionBar -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
  <!--定义你的主题颜色-->
  <item name="colorPrimary">@color/colorPrimary</item>
  <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
  <item name="colorAccent">@color/colorAccent</item>
</style>

 <!--设置你的toolbar的主题继承自@style/ThemeOverlay.AppCompat.Dark.ActionBar-->
<style name="ToolbarTheme" parent="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
  <!-- 设置toolbar的背景颜色 -->
  <item name="android:background">@color/colorPrimary</item>
  <!-- 设置toolbar的文字颜色  -->
  <item name="android:textColorPrimary">@android:color/holo_blue_light</item>
  <!-- 设置菜单Menu的文字的颜色-->
  <item name="actionMenuTextColor">@android:color/holo_green_light</item>
  <!--如果你想要点击又说博文的效果需要设置一下的属性 -->
  <!-- 
  <item name="selectableItemBackground">?android:selectableItemBackground</item>
  <item name="selectableItemBackgroundBorderless">?android:selectableItemBackground</item> 
  -->
</style>

<!-- 这个是Toolbar的标题title的属性 -->

<style name="Toolbar.TitleText" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
    <item name="android:textSize">21sp</item>
    <item name="android:textStyle">italic</item>
</style>

结果

效果图

2.单独自定义标题View

<android.support.v7.widget.Toolbar 
android:id="@+id/toolbar" 
android:minHeight="?attr/actionBarSize"  
android:layout_width="match_parent" 
android:layout_height="wrap_content" 
app:titleTextColor="@android:color/white" 
android:background="?attr/colorPrimary"> 
<TextView 
    android:id="@+id/toolbar_title"  
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Toolbar Title"        
    android:textColor="@android:color/white" 
   style="@style/TextAppearance.AppCompat.Widget.ActionBar.Title"     
    android:layout_gravity="center" /></android.support.v7.widget.Toolbar>

这就意味着设置空间的时候需要在toolbar中找控件

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);setSupportActionBar(toolbar);
getSupportActionBar().setDisplayShowTitleEnabled(false);
TextView mTitle = (TextView) toolbar.findViewById(R.id.toolbar_title);
mTitle.setText("Toolbar Title");

结果:

enter image description here

getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setHomeButtonEnabled(true);

即将更新

TabLayout：导航栏

AppBarLayout：配合导航栏形成可折叠的效果

CollapsingToolbarLayout：可折叠效果的协调器

NestedScrollView：可折叠效果的滚动控件

CardView：卡片

RipperView：点击水波纹效果

FloatingActionButton：悬浮窗口

Snackbar：代替Toast的小控件

NavigationView：配合DrawnLayout的侧滑拦