##一、描述
此文章说明Material Design类型的控件使用说明。

##二、控件使用方法

###1. TabLayout + ViewPager

<LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><android.support.design.widget.TabLayoutandroid:id="@+id/tabs"android:layout_width="match_parent"android:background="?colorPrimary"android:layout_height="wrap_content"android:paddingBottom="4.0dip"app:tabIndicatorColor="@color/colorAccentReal"  //Tab指示器的颜色app:tabBackground="?selectableItemBackgroundBorderless"app:tabMinWidth="@dimen/tablayout_indicator_size_min" //Tab的宽度app:tabMaxWidth="@dimen/tablayout_indicator_size_max"app:tabSelectedTextColor="@color/colorPrimaryTextWhite" //Tab选中的选项卡文字的颜色app:tabTextColor="@color/colorSubTextWhite"app:tabGravity="center"app:tabMode="fixed" //两个模式 scrollable ：代表tab自适应宽度 fixed：固定宽度，平分宽度android:tag="bg_primary_color"/><android.support.v4.view.ViewPagerandroid:id="@+id/content_viewPager"android:layout_width="match_parent"android:layout_height="match_parent"android:background="#fff" /></LinearLayout>复制代码

<style name="MyTabLayoutTextAppearance" parent="TextAppearance.AppCompat.Widget.ActionBar.Title"><item name="android:textSize">12sp</item>
</style>
复制代码

代码

contentViewPager.setAdapter(new PagerFragmentAdapter(getSupportFragmentManager())); //ViewPager设置适配器
tabLayout.setupWithViewPager(contentViewPager); //TabLayout和VIewpager结合
//tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE); //设置他的模式,如果需要选项卡自适应宽度的话
复制代码

并且在适配器中重写Tab文本标题：

@Overridepublic CharSequence getPageTitle(int position) {return titles[position];}
复制代码

重写Tab图片标题

 @Overridepublic CharSequence getPageTitle(int position) {Drawable image = MainActivity.this.getResources().getDrawable(imageResId[position]);image.setBounds(0, 0, image.getIntrinsicWidth(), image.getIntrinsicHeight());SpannableString sb = new SpannableString(" ");ImageSpan imageSpan = new ImageSpan(image, ImageSpan.ALIGN_BOTTOM);sb.setSpan(imageSpan, 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);return sb;}
复制代码

TabLayout控制Item选中的背景色 解决方案：就是声明一个Secetor，点击和正常的颜色，然后再声明一个style,最后运用在TabLayout上就可以了

 <style name="MyTabLayout" parent="android:Widget"><item name="tabBackground">@drawable/bg_person_tab_background</item><item name="tabIndicatorColor">#ff00ff</item><item name="tabIndicatorHeight">0dp</item></style>
复制代码

http://blog.csdn.net/u012045061/article/details/53423857

###2. FloatingActionButton

<android.support.design.widget.FloatingActionButtonandroid:id="@+id/fab"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentBottom="true"android:layout_alignParentRight="true"android:layout_gravity="bottom|end"android:layout_margin="25dp"android:src="@mipmap/ic_launcher"app:backgroundTint="#31B566" //背景颜色app:elevation="10dp" //阴影深度app:fabSize="normal" //大小 另一个是 miniapp:pressedTranslationZ="50dp" //按下的阴影深度app:rippleColor="@color/colorAccent"  />
复制代码

###3. AppCompatSpinner

<android.support.v7.widget.AppCompatSpinnerandroid:id="@+id/main_spinner"android:layout_width="200dp"android:layout_height="wrap_content"android:layout_gravity="center_horizontal"android:overlapAnchor="false"    //这个属性是让下拉框显示在这个控件的下面/>
复制代码

代码赋值

ArrayAdapter<String> arrayAdapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, data);
arrayAdapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
mainSpinner.setAdapter(arrayAdapter);
复制代码

###4. Toolbar
布局 ```

下面这个style是为了让标题栏的三个点成为白色
复制代码

设置标题字体颜色(可加)
复制代码

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"><!-- Customize your theme here. --><item name="colorPrimary">@color/colorPrimary</item><item name="colorPrimaryDark">@color/colorPrimaryDark</item><item name="colorAccent">@color/colorAccent</item><item name="android:textColorPrimary">#968e48</item> <!--标题字体颜色-->
</style>
复制代码

ActionBar的标题menu文件
复制代码

<itemandroid:id="@+id/action_settings"android:icon="@drawable/ic_menu_send"android:orderInCategory="100"android:title="@string/action_settings"app:showAsAction="always" />
<itemandroid:id="@+id/search"android:icon="@mipmap/ic_launcher"android:title="dd"app:actionViewClass="android.support.v7.widget.SearchView"app:showAsAction="collapseActionView|always" />
复制代码

``` 创建菜单，并且对搜索按钮进行处理 ``` // 创建关联菜单 @Override public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.menu_main, menu);

    MenuItem searchItem = menu.findItem(R.id.search);SearchView mSearchView = (SearchView) MenuItemCompat.getActionView(searchItem);//设置搜索框hint内容mSearchView.setQueryHint("输入要搜索的内容...");SearchView.SearchAutoComplete textView = (SearchView.SearchAutoComplete)mSearchView.findViewById(R.id.search_src_text);//设置搜索框中输入文字的颜色textView.setTextColor(Color.BLACK);//搜索内容监听mSearchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() {@Overridepublic boolean onQueryTextSubmit(String query) {Toast.makeText(MainActivity.this, query, Toast.LENGTH_SHORT).show();return false;}@Overridepublic boolean onQueryTextChange(String newText) {Log.d("onQueryTextChange", newText);return false;}});return true;
}
复制代码

Menu点击事件
复制代码

toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() { @Override public boolean onMenuItemClick(MenuItem item) { String msg = ""; switch (item.getItemId()) { case R.id.action_ball: msg += "Click ball"; break; case R.id.action_tip: msg += "Click action_tip"; break; case R.id.action_menu: msg += "Click setting"; break; } Toast.makeText(MainActivity.this, msg, Toast.LENGTH_SHORT).show(); return false; } });

代码
复制代码

toolbar.setTitle("标题");//设置标题，必须在setSupportActionBar方法之前 setSupportActionBar(toolbar); toolbar.setNavigationIcon(R.mipmap.ic_launcher);//设置标题最左的图标 toolbar.setLogo(R.mipmap.ic_launcher_round); //设置一个Logo在左边图标的 右侧 toolbar.setSubtitle("SubTit"); //设置子标题，在标题的下面

</br>
###5. 回退按钮1 在布局的ActionBar中添加返回键图片
复制代码

app:navigationIcon="@drawable/ic_back"

2 在代码中处理返回事件
复制代码

@Override public boolean onOptionsItemSelected(MenuItem item) { switch (item.getItemId()) { case android.R.id.home: if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { finishAfterTransition(); } else { finish(); } break; } return super.onOptionsItemSelected(item); }

</br>
###6. DrawerLayout侧滑
</br>
直接用官方给的侧滑模版就好
复制代码