Android Design Support Library详解（SnackBar、NavigationView、FloatActionButton等）

Material Design 设计风格非常受欢迎，那么支持其效果的Design Support Library（Android 2.1
 API  level 7及其以上）库又有哪些控件呢。主要包括SnackBar、Navigation View、FloatActionbutton、CoordinatorLayout、CollapsingToolBarLayout等。我在Git上看见一个非常炫的效果

谷歌官网介绍：http://android-developers.blogspot.com.es/2012/05/android-design-support-library.html

把该项目的Git附上，觉得有用的自行下载看源码：https://github.com/frogermcs/InstaMaterial，现在来一一介绍Design系列控件。这里还有极客学院整理的关于Material
Design的文档：

http://wiki.jikexueyuan.com/project/material-design/components/snackbars-and-toasts.html

1.SnackBar

SnackBar是带有动画效果的快速提示栏，它显示在屏幕底部，是用来代替Toast的一个全新控件，它基本上继承了Toast的属性和方法，用户可以点击按钮执行对应的操作，Snackbar支持滑动消失，如果没设任何操作，那么到时间自动消失。

SnackBar的构造：

// 参数分别是父容器，提示信息，持续时间public static Snackbar make(@NonNull View view, @NonNull CharSequence text,@Duration int duration)

SnackBar的常用方法：

// 用于给SnackBar设定一个Action，点击之后会回调OnclickListener中的Onclick方法public Snackbar setAction(CharSequence text, final View.OnClickListener listener)
// 用于设定Action的字体颜色public Snackbar setActionTextColor(@ColorInt int color)
// 设定提示的字体public Snackbar setText(@NonNull CharSequence message)
// 展示SnackBarpublic void show()
// 清除SnackBarpublic void dismiss()
// 设置回调，比如OnDismissed或者OnShownpublic Snackbar setCallback(Callback callback)

Snackbar需要一个控件容器view用来容纳，官方推荐使用CoordinatorLayout来确保Snackbar和其他组件的交互，比如滑动取消Snackbar、Snackbar出现时FloatingActionButton上移。举一个简单运用的例子：

[java] view
plain copy

print?

  1. <android.support.percent.PercentRelativeLayout
  2. xmlns:android="http://schemas.android.com/apk/res/android"
  3. xmlns:tools="http://schemas.android.com/tools"
  4. xmlns:app="http://schemas.android.com/apk/res-auto"
  5. android:id="@+id/activity_main"
  6. android:layout_width="match_parent"
  7. android:layout_height="match_parent"
  8. tools:context="com.example.administrator.singleinstance.MainActivity">
  9. <Button
  10. android:layout_width="0dp"
  11. android:layout_height="0dp"
  12. android:id="@+id/btn"
  13. android:onClick="click"
  14. android:layout_centerInParent="true"
  15. app:layout_widthPercent="25%"
  16. app:layout_heightPercent="10%"
  17. android:text="取消"
  18. />
  19. <android.support.design.widget.CoordinatorLayout
  20. android:id="@+id/coor"
  21. android:layout_width="0dp"
  22. android:layout_alignParentBottom="true"
  23. app:layout_widthPercent="100%"
  24. android:layout_height="wrap_content">
  25. </android.support.design.widget.CoordinatorLayout>
  26. </android.support.percent.PercentRelativeLayout>

[java] view
plain copy

print?

  1. public void click(View view) {
  2. Snackbar.make(coordinatorLayout, "确定取消吗？", Snackbar.LENGTH_LONG)
  3. .setAction("确定", new View.OnClickListener() {
  4. @Override
  5. public void onClick(View view) {
  6. Toast.makeText(MainActivity.this, "已经取消", Toast.LENGTH_SHORT).show();
  7. }
  8. })
  9. .setCallback(new myOnClick())
  10. .show();
  11. }
  12. /**
  13. * 滑动消失回调
  14. */
  15. public static final int DISMISS_EVENT_SWIPE = 0;
  16. /**
  17. * 点击消失回调
  18. */
  19. public static final int DISMISS_EVENT_ACTION = 1;
  20. /**
  21. * 超时回调
  22. */
  23. public static final int DISMISS_EVENT_TIMEOUT = 2;
  24. /**
  25. *调用Dismiss消失回调
  26. */
  27. public static final int DISMISS_EVENT_MANUAL = 3;
  28. /**
  29. * 再次出现消失SnackBar回调
  30. */
  31. public static final int DISMISS_EVENT_CONSECUTIVE = 4;
  32. class myOnClick extends Snackbar.Callback {
  33. @Override
  34. public void onDismissed(Snackbar snackbar, int event) {
  35. super.onDismissed(snackbar, event);
  36. switch (event) {
  37. case DISMISS_EVENT_SWIPE:
  38. Logger.i("DISMISS_EVENT_SWIPE");
  39. break;
  40. case DISMISS_EVENT_ACTION:
  41. Logger.i("DISMISS_EVENT_ACTION");
  42. break;
  43. case DISMISS_EVENT_TIMEOUT:
  44. Logger.i("DISMISS_EVENT_TIMEOUT");
  45. break;
  46. case DISMISS_EVENT_MANUAL:
  47. Logger.i("DISMISS_EVENT_MANUAL");
  48. break;
  49. case DISMISS_EVENT_CONSECUTIVE:
  50. Logger.i("DISMISS_EVENT_CONSECUTIVE");
  51. break;
  52. }
  53. }
  54. }

这些运用都很简单，就不更多的嚼舌根了。有个花式使用SnackBar的连接，感兴趣的可以去看看:

http://www.jianshu.com/p/cd1e80e64311

2.TextInputLayout

TextInputLayout主要作用是作为EditText的容器，从而为EditText默认生成一个浮动的label，当用户点击了EditText之后，EditText中设置的Hint字符串会自动移到EditText的左上角。使用非常简单

这有个例子写的不错：http://www.jcodecraeer.com/a/basictutorial/2015/0821/3338.html

  • getEditText() 得到控件中包含的
    EditText 控件
  • setError(CharSequence
    error)     设置错误信息并显示在 EditText 下方 应用场景：比如用户输错了密码或者用户名等
  • setHint(CharSequence hint) 设置提示信息
  • setErrorEnabled(boolean enabled) 设置 setError(CharSequence
    error)     这个函数是否可用 记住哦：这个函数一定要在 setError(CharSequence error) 这个函数之后执行哦！

[java] view
plain copy

print?

  1. <android.support.percent.PercentRelativeLayout
  2. xmlns:android="http://schemas.android.com/apk/res/android"
  3. xmlns:tools="http://schemas.android.com/tools"
  4. xmlns:app="http://schemas.android.com/apk/res-auto"
  5. android:id="@+id/activity_main"
  6. android:layout_width="match_parent"
  7. android:layout_height="match_parent"
  8. tools:context="com.example.administrator.singleinstance.MainActivity">
  9. <android.support.design.widget.TextInputLayout
  10. android:id="@+id/input"
  11. app:layout_widthPercent="80%"
  12. android:layout_height="wrap_content"
  13. android:layout_centerHorizontal="true"
  14. app:errorEnabled="true"
  15. app:errorTextAppearance="@style/TextAppearance.Design.Error">
  16. <EditText
  17. android:layout_width="match_parent"
  18. android:layout_height="match_parent"
  19. android:imeOptions="actionGo"
  20. android:inputType="text"
  21. android:hint="输入姓名"
  22. android:lines="1"
  23. />
  24. </android.support.design.widget.TextInputLayout>
  25. <android.support.design.widget.TextInputLayout
  26. android:id="@+id/input2"
  27. android:layout_below="@+id/input"
  28. app:layout_widthPercent="80%"
  29. android:layout_height="wrap_content"
  30. android:layout_centerHorizontal="true"
  31. app:errorEnabled="true"
  32. app:errorTextAppearance="@style/TextAppearance.Design.Error">
  33. <EditText
  34. android:layout_width="match_parent"
  35. android:layout_height="match_parent"
  36. android:imeOptions="actionGo"
  37. android:inputType="textPassword"
  38. android:hint="输入密码"
  39. android:lines="1"
  40. />
  41. </android.support.design.widget.TextInputLayout>
  42. </android.support.percent.PercentRelativeLayout>

[java] view
plain copy

print?

  1. public void TextInputLayout(){
  2. textInputLayout = (TextInputLayout) findViewById(R.id.input);
  3. textInputLayout2 = (TextInputLayout) findViewById(R.id.input2);
  4. textInputLayout2.getEditText().addTextChangedListener(new TextWatcher() {
  5. @Override
  6. public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {
  7. }
  8. @Override
  9. public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {
  10. if (charSequence.length() < 4){
  11. textInputLayout2.setError("必须输入6个字符！");
  12. textInputLayout2.setErrorEnabled(true);
  13. }else {
  14. textInputLayout2.setErrorEnabled(false);}
  15. }
  16. @Override
  17. public void afterTextChanged(Editable editable) {
  18. }
  19. });
  20. textInputLayout.getEditText().addTextChangedListener(new TextWatcher() {
  21. @Override
  22. public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {
  23. }
  24. @Override
  25. public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {
  26. if (charSequence.length() < 4){
  27. textInputLayout.setError("必须输入4个字符！");
  28. textInputLayout.setErrorEnabled(true);
  29. }else {
  30. textInputLayout.setErrorEnabled(false);}
  31. }
  32. @Override
  33. public void afterTextChanged(Editable editable) {
  34. }
  35. });
  36. }

3.TabLayout

TabLayout控件用于应用中轻松的添加Tab分组功能，总共有两种类型可选。

1.固定的Tabs：对应的xml配置中的 app:tabMode="fixed"

2.可滑动的Tabs：对应xml配置中的 app:tabMode="scrollable"。

TabLayout，它就可以完成TabPageIndicator的效果，而且还是官方的，最好的是它可以兼容到2.2以上版本，包括2.2。接下来就简单使用一下。

先来布局：

[java] view
plain copy

print?

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. xmlns:tools="http://schemas.android.com/tools"
  4. xmlns:app="http://schemas.android.com/apk/res-auto"
  5. android:id="@+id/activity_tab_layout"
  6. android:layout_width="match_parent"
  7. android:layout_height="match_parent"
  8. tools:context="com.example.administrator.designtest.TabLayoutActivity">
  9. <android.support.v4.view.ViewPager
  10. android:id="@+id/viewpager"
  11. android:layout_below="@+id/tablayout_top"
  12. android:layout_width="match_parent"
  13. android:layout_height="match_parent">
  14. </android.support.v4.view.ViewPager>
  15. <android.support.design.widget.TabLayout
  16. android:id="@+id/tablayout_top"
  17. app:tabTextColor="#000"
  18. app:tabSelectedTextColor="#fff"
  19. android:background="@color/colorPrimary"
  20. android:layout_width="match_parent"
  21. android:layout_height="wrap_content"
  22. app:tabMode="fixed"
  23. app:tabGravity="fill">
  24. </android.support.design.widget.TabLayout>
  25. </RelativeLayout>

这个很简单，再来一个适配器。

[java] view
plain copy

print?

  1. public class ViewPagerAdapter extends FragmentPagerAdapter {
  2. private List<BlankFragment>fragmentList;
  3. private List<String>titleList;
  4. public ViewPagerAdapter(FragmentManager fm, List<BlankFragment> fragmentList, List<String> titleList) {
  5. super(fm);
  6. this.fragmentList = fragmentList;
  7. this.titleList = titleList;
  8. }
  9. @Override
  10. public Fragment getItem(int position) {
  11. return fragmentList.get(position);
  12. }
  13. @Override
  14. public int getCount() {
  15. return fragmentList.size();
  16. }
  17. @Override
  18. public CharSequence getPageTitle(int position) {
  19. return titleList.get(position);
  20. }
  21. }

用过viewpager套Fragement的猿友都知道，就不啰嗦了。getPageTitle是获取需要显示的tab标题。新建一个fragment空的。

[java] view
plain copy

print?

  1. public class BlankFragment extends Fragment {
  2. @Override
  3. public View onCreateView(LayoutInflater inflater, ViewGroup container,
  4. Bundle savedInstanceState) {
  5. return inflater.inflate(R.layout.fragment_blank, container, false);
  6. }
  7. }

那么准备工作差不多了，开始进入主题，基本的介绍都加了注释

[java] view
plain copy

print?

  1. public class TabLayoutActivity extends AppCompatActivity {
  2. ViewPager viewPager;
  3. TabLayout tabLayout;
  4. List<BlankFragment>fragmentList;
  5. List<String>stringList;
  6. @Override
  7. protected void onCreate(Bundle savedInstanceState) {
  8. super.onCreate(savedInstanceState);
  9. setContentView(R.layout.activity_tab_layout);
  10. viewPager = (ViewPager) findViewById(R.id.viewpager);
  11. tabLayout = (TabLayout) findViewById(R.id.tablayout_top);
  12. //添加fragment
  13. fragmentList = new ArrayList<>();
  14. fragmentList.add(new BlankFragment());
  15. fragmentList.add(new BlankFragment());
  16. fragmentList.add(new BlankFragment());
  17. fragmentList.add(new BlankFragment());
  18. //添加标题
  19. stringList = new ArrayList<>();
  20. stringList.add("热门新闻");
  21. stringList.add("热门推荐");
  22. stringList.add("本月热榜");
  23. stringList.add("今日热榜");
  24. //添加tab
  25. tabLayout.addTab(tabLayout.newTab().setText("热门新闻"));
  26. tabLayout.addTab(tabLayout.newTab().setText("热门推荐"));
  27. tabLayout.addTab(tabLayout.newTab().setText("本月热榜"));
  28. tabLayout.addTab(tabLayout.newTab().setText("今日热榜"));
  29. //适配器
  30. ViewPagerAdapter viewPagerAdapter = new ViewPagerAdapter(getSupportFragmentManager(),fragmentList,stringList);
  31. //建立联系
  32. viewPager.setAdapter(viewPagerAdapter);
  33. tabLayout.setupWithViewPager(viewPager,true);
  34. }
  35. }

tabLayout.setupWithViewPager(viewPager,true);这句代码是关联viewpager和tabLayout。后面的true是是否自动刷新fragment的布尔值，看源码就知道了。

[java] view
plain copy

print?

  1. public void setupWithViewPager(@Nullable final ViewPager viewPager, boolean autoRefresh) {
  2. setupWithViewPager(viewPager, autoRefresh, false);
  3. }
  4. private void setupWithViewPager(@Nullable final ViewPager viewPager, boolean autoRefresh,
  5. boolean implicitSetup) {
  6. ......
  7. //这里需要先设置viewpager的adapter，在关联，不然这里判空不会走正常逻辑
  8. if (adapter != null) {
  9. // Now we‘ll populate ourselves from the pager adapter, adding an observer if
  10. // autoRefresh is enabled
  11. setPagerAdapter(adapter, autoRefresh);
  12. }
  13. if (mAdapterChangeListener == null) {
  14. mAdapterChangeListener = new AdapterChangeListener();
  15. }
  16. //设置自动刷新
  17. mAdapterChangeListener.setAutoRefresh(autoRefresh);
  18. viewPager.addOnAdapterChangeListener(mAdapterChangeListener);
  19. setScrollPosition(viewPager.getCurrentItem(), 0f, true);
  20. ......
  21. mSetupViewPagerImplicitly = implicitSetup;
  22. }

我们调用的第一个函数，实质是调用的第二个函数。这里需要注意的是需要先调用viewpager的setAdaper之后才能把tabLayout和viewpager关联起来。给个效果图（由于电脑跑不起模拟器，用的真机，所以只能截图，还得多担待）

4.NavigationView

以前做侧边栏的有SlideMenu三方库，这里不详细介绍了，想要了解的给个链接：http://blog.csdn.net/luck_apple/article/details/9207811。现在有了NavigationView官方提供的，当然都渐渐使用这个了。官网地址也给出来，有空的可以去瞅瞅：http://www.google.com/design/spec/patterns/navigation-drawer.html

使用导航视图需要传入一组参数，一个可选的头部布局，以及一个用于构建导航选项的菜单，完成这些步骤以后只需给导航选项添加响应事件的监听器就可以了。

在使用NavigationView时需要提前准备好两个xml文件，一个是头布局，一个是menu布局。menu的一些属性值是干嘛的，我相信有的猿友不是很清楚、下面简单介绍一下。

   4.1 menu属性值介绍

元素（ELEMENTS）：

<menu>

必须的。它必须是根节点，其中要包含<item>、<group>元素。

属性（ATTRIBUTES）：

xmlns:android

它定义了XML的命名空间，必须是：http://schemas.android.com/apk/res/android

<item>

它定义一个菜单项，可以包含一个<menu>元素作为子菜单。它必须是<menu>、<group>元素的子元素。

属性（ATTRIBUTES）：

android:id

定义资源ID，它是个唯一值，使用“@+id/name”格式可以给这个菜单项创建一个新的资源ID，“+”号指示要创建一个新的ID。

android:title

字符串资源，它用字符串资源或原始的字符串来定义菜单的标题。

android:titleCondensed

字符串资源。它用字符串资源或原始的字符串来定义一个简要的标题，以便在普通的标题太长时来使用。

android:icon

可绘制资源，它定义了一个菜单项所要使用的图标。

android:onClick

方法名。在这个菜单项被点击时，会调用这个方法。在Activity中，这个方法必须用public关键字来声明，并且只接受一个MenuItem对象，这个对象指明了被点击的菜单项。这个方法会优先标准的回调方法：onOptionsItemSelected()。

警告：如果要使用ProGuard（或类似的工具）来混淆代码，就要确保不要重名这个属性所指定的方法，因为这样能够破坏功能。

这个属性在API级别11中被引入。

android:showAsAction

关键词。它定义这个项目作为操作栏中的操作项的显示时机和方式。只用Activity包含了一个ActionBar对象时，菜单项才能够作为操作项来显示。这个属性在API级别11中被引入，有效值如下：


值
说明

ifRoom
如果有针对这个项目的空间，则只会把它放到操作栏中

withText
操作项也要包含文本（通过android:title属性来定义的）。可以把这个值与其他的Flag设置放到一起，通过管道符“|”来分离它们。

never
这个项目不会放到操作栏中

always
始终包这个项目放到操作栏中。要避免使用这个设置，除非在操作栏中始终显示这个项目是非常关键的。设置多个项目作为始终显示的操作项会导致操作栏中其他的UI溢出。

icollapseActiionView
它定义了跟这个操作项关联的可折叠的操作View对象（用android:actionViewLayout来声明）。这个关键词在API级别14中被引入。

这个属性在API级别11中被引入。

android:actionViewLayout

它引用一个布局资源，这个布局要用于操作窗口。更多的信息请参照“操作栏”开发指南。这个属性在API级别11中被引入。（http://blog.csdn.net/fireofstar/article/details/7358393）

android:actionViewClass

类名。它定义了操作窗口要使用的View对象的完整的类名。例如，“android.widget.SearchView”说明操作窗口要使用的SearchView类。

警告：如果要使用ProGuard（或类似的工具）来混淆代码，就要确保不要重名这个属性所指定的方法，因为这样能够破坏功能。

这个属性在API级别11中被引入。

android:actionProviderClass

类名，它是操作项目所使用的ActionProvider类的完整的类名。例如，“android.widget.ShareActionProvider”说明要使用ShareActionProvider类。

警告：如果要使用ProGuard（或类似的工具）来混淆代码，就要确保不要重名这个属性所指定的方法，因为这样能够破坏功能。

这个属性在API级别14中被引入。

android:alphabeticShortcut

字符，定义一个字符快捷键

android:numericShortcut

数字值，定义一个数字快捷键

android:checkable

布尔值，如果菜单项是可以复选的，那么就设置为true。

android:checked

布尔值，如果复选菜单项默认是被选择的，那么就设置为true。

android:visible

布尔值，如果菜单项默认是可见的，那么就设置为true。

android:enabled

布尔值，如果菜单项目默认是可用的，那么就设置为true。

android:menuCategory

关键词。它的值对应了定义菜单项优先级的CATEGORE_*常量，有效值如下：


值
说明

Container
菜单项是容器的一部分

system
菜单项是由系统提供的。

secondary
提供给用户的辅助选择的菜单项（很少使用）

alternative
基于当前显示的数据来选择操作的菜单项。

android:orderInCategory

整数值，它定义菜单项在菜单组中的重要性的顺序。

<group>

它定义了一个菜单组（它是一个具有共同特征的菜单项的组合，如菜单项的可见性、可用性或可复选性）。它要包含多个<item>元素，而且必须是<menu>元素的子元素。

属性（ATTRIBUTES）：

android:id

资源ID。它是资源的唯一标识。使用“@+id/name”格式给菜单项创建一个新的资源ID。“+”号指示应该给这个元素创建一个新的资源ID。

android:checkableBeharior

关键词。针对菜单组的可复选行为的类型。有效值如下：


值
说明

none
没有可复选性

all
组内的所有的项目都被复选（使用复选框）

single
仅有一个项目能够被复选（使用单选按钮）

android:visible

布尔值，如果菜单组是可见的，就设置为true。

android:enabled

布尔值，如果菜单组是可用的，就设置为true。

android:menuCategory

关键词。它的值对应了Menu类的CATEGORY_*常量，定义了菜单组的优先级。有效值如下：


值
说明

container
菜单组是容器的一部分

system
菜单组是由系统提供的。

secondary
提供给用户的辅助选择的菜单组（很少使用）

alternative
基于当前显示的数据来选择操作的菜单组。

android:orderInCategory

整数值，它定义了分类中菜单项目的默认顺序。差不多就这些了，在res文件夹下创建一个名为menu的文件夹存放menu的xml文件。取名为draw_view.xml。

[java] view
plain copy

print?

  1. <menu xmlns:app="http://schemas.android.com/apk/res-auto"
  2. xmlns:android="http://schemas.android.com/apk/res/android">
  3. <group android:checkableBehavior="single">
  4. <item
  5. android:id="@+id/nav_home"
  6. android:icon="@drawable/center_image_collection"
  7. android:title="Home"/>
  8. <item
  9. android:id="@+id/nav_messages"
  10. android:icon="@drawable/center_message"
  11. android:title="Messages"/>
  12. <item
  13. android:id="@+id/nav_friends"
  14. android:icon="@drawable/center_reading_collection"
  15. android:title="Friends"/>
  16. <item
  17. android:id="@+id/nav_discussion"
  18. android:icon="@drawable/center_night_mode"
  19. android:title="Discussion"/>
  20. </group>
  21. <item android:title="Sub items">
  22. <menu>
  23. <item
  24. android:id="@+id/sub1"
  25. android:icon="@drawable/center_setting"
  26. android:title="Sub item 1"
  27. />
  28. <item
  29. android:id="@+id/sub2"
  30. android:icon="@drawable/center_movie_collection"
  31. android:title="Sub item 2"
  32. />
  33. </menu>
  34. </item>
  35. </menu>

在创建一个头布局，命名为nav_header.xml。

[java] view
plain copy

print?

  1. <LinearLayout
  2. xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:orientation="vertical"
  4. android:layout_width="match_parent"
  5. android:layout_height="192dp"
  6. android:paddingTop="30dp"
  7. android:paddingLeft="16dp"
  8. android:background="@color/colorPrimaryDark"
  9. android:theme="@style/ThemeOverlay.AppCompat.Dark"
  10. android:gravity="center|left">
  11. <ImageView
  12. android:id="@+id/avatar"
  13. android:layout_width="64dp"
  14. android:layout_height="64dp"
  15. android:scaleType="centerCrop"
  16. android:src="@drawable/a"
  17. />
  18. <TextView
  19. android:layout_width="wrap_content"
  20. android:layout_height="wrap_content"
  21. android:layout_marginTop="10dp"
  22. android:textAppearance="@style/TextAppearance.AppCompat.Body1"
  23. android:text="鬼刀z六极之首"
  24. android:id="@+id/textView" />
  25. </LinearLayout>

好了，成功了一半，那么现在需要在主xml文件中布局，使用navigationView最外层是需要DrawerLayout的。

[java] view
plain copy

print?

  1. <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. xmlns:tools="http://schemas.android.com/tools"
  3. xmlns:app="http://schemas.android.com/apk/res-auto"
  4. android:id="@+id/activity_navigation"
  5. android:layout_width="match_parent"
  6. android:layout_height="match_parent"
  7. android:fitsSystemWindows="true"
  8. tools:context="com.example.administrator.designtest.NavigationActivity">
  9. <LinearLayout
  10. android:layout_width="match_parent"
  11. android:layout_height="wrap_content"
  12. android:orientation="vertical">
  13. <android.support.v7.widget.Toolbar
  14. android:id="@+id/id_toolbar"
  15. android:layout_width="match_parent"
  16. android:layout_height="?attr/actionBarSize"
  17. android:background="?attr/colorPrimary"
  18. app:layout_scrollFlags="scroll|enterAlways"
  19. app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
  20. app:title=" 魔尊重楼" />
  21. <FrameLayout
  22. android:id="@+id/content"
  23. android:layout_width="match_parent"
  24. android:layout_height="match_parent">
  25. </FrameLayout>
  26. </LinearLayout>
  27. <android.support.percent.PercentRelativeLayout
  28. android:fitsSystemWindows="true"
  29. android:layout_gravity="start"
  30. android:layout_width="match_parent"
  31. android:layout_height="match_parent">
  32. <android.support.design.widget.NavigationView
  33. android:id="@+id/nav_view"
  34. android:layout_width="0dp"
  35. app:layout_widthPercent="80%"
  36. android:layout_height="match_parent"
  37. app:headerLayout="@layout/nav_header"
  38. app:menu="@menu/draw_view">
  39. </android.support.design.widget.NavigationView>
  40. </android.support.percent.PercentRelativeLayout>
  41. </android.support.v4.widget.DrawerLayout>

这里我使用了一下百分比布局，防止有的产品经理有侧滑栏占屏幕的百分之多少多少之类的要求。

[java] view
plain copy

print?

  1. public class NavigationActivity extends AppCompatActivity {
  2. Toolbar toolbar;
  3. DrawerLayout drawerLayout;
  4. NavigationView navigationView;
  5. @Override
  6. protected void onCreate(Bundle savedInstanceState) {
  7. super.onCreate(savedInstanceState);
  8. setContentView(R.layout.activity_navigation);
  9. toolbar = (Toolbar) findViewById(R.id.id_toolbar);
  10. drawerLayout = (DrawerLayout) findViewById(R.id.activity_navigation);
  11. navigationView = (NavigationView) findViewById(R.id.nav_view);
  12. //<activity android:name=".NavigationActivity" android:theme="@style/AppThemeNoActionBar"></activity>
  13. //<style name="AppThemeNoActionBar" parent="Theme.AppCompat.Light.NoActionBar">
  14. //初始化toolbar，这里得使用NoActionBar的主题，使用ToolBar替换系统自带的ActionBar达到自己的需求
  15. setSupportActionBar(toolbar);
  16. ActionBar actionBar = getSupportActionBar();
  17. //关联图标和侧滑栏
  18. actionBar.setHomeAsUpIndicator(R.drawable.center_image_collection);
  19. //设置actionBar和侧滑栏关联
  20. actionBar.setDisplayHomeAsUpEnabled(true);
  21. //初始化drawerlayout和navigationview
  22. if (navigationView != null){
  23. //设置监听回调
  24. navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
  25. @Override
  26. public boolean onNavigationItemSelected(@NonNull MenuItem item) {
  27. //根据选中不同的选项来进行不同的操作
  28. switch (item.getItemId()){
  29. case R.id.nav_home:
  30. getSupportFragmentManager().beginTransaction().replace(R.id.content,BlankFragment.newInstance("主页")).commit();
  31. toolbar.setTitle("主页");
  32. break;
  33. case R.id.nav_friends:
  34. getSupportFragmentManager().beginTransaction().replace(R.id.content,BlankFragment.newInstance("我的好友")).commit();
  35. toolbar.setTitle("我的好友");
  36. break;
  37. case R.id.nav_discussion:
  38. getSupportFragmentManager().beginTransaction().replace(R.id.content,BlankFragment.newInstance("热文论坛")).commit();
  39. toolbar.setTitle("热文论坛");
  40. break;
  41. case R.id.nav_messages:
  42. getSupportFragmentManager().beginTransaction().replace(R.id.content,BlankFragment.newInstance("我的消息")).commit();
  43. toolbar.setTitle("我的消息");
  44. break;
  45. case R.id.sub1:
  46. getSupportFragmentManager().beginTransaction().replace(R.id.content,BlankFragment.newInstance("子项1")).commit();
  47. toolbar.setTitle("子项1");
  48. break;
  49. case R.id.sub2:
  50. getSupportFragmentManager().beginTransaction().replace(R.id.content,BlankFragment.newInstance("子项2")).commit();
  51. toolbar.setTitle("子项2");
  52. break;
  53. }
  54. //设置选项选中效果
  55. item.setChecked(true);
  56. //选了侧边栏选项之后，关闭侧边栏
  57. drawerLayout.closeDrawers();
  58. //这里返回true有选中的效果，源码中有解释
  59. return true;
  60. }
  61. });
  62. }
  63. }
  64. @Override
  65. public boolean onOptionsItemSelected(MenuItem item) {
  66. switch (item.getItemId()){
  67. //点击左上角的菜单选项，这是在actionBar.setHomeAsUpIndicator(R.drawable.center_image_collection);这儿设置的。
  68. case android.R.id.home:
  69. //点击之后打开侧滑栏
  70. drawerLayout.openDrawer(GravityCompat.START);
  71. return true;
  72. }
  73. return super.onOptionsItemSelected(item);
  74. }
  75. }

一些详细的介绍都写在了注释里，若还是有什么不懂的，可以参考这篇博客：http://blog.csdn.net/lamp_zy/article/details/50126531，介绍的比较详细。NavigationView就到这儿了。下一个Design库里的。

5.FloatingActionButton

浮动操作按钮实在Material Design准则中新引入的组件。用于强调当前屏幕最重要，高频率的一些操作。

FloatingActionButton正常显示的情况下有个填充的颜色，有个阴影；点击的时候会有一个rippleColor，并且阴影的范围可以增大，那么问题来了:

  • 这个填充色以及rippleColor如何自定义呢？

    默认的颜色取的是，theme中的colorAccent，所以你可以在style中定义colorAccent。

    colorAccent 对应EditText编辑时、RadioButton选中、CheckBox等选中时的颜色。详细请参考：Android 5.x Theme
    与 ToolBar 实战

    rippleColor默认取的是theme中的colorControlHighlight。

    我们也可以直接用过属性定义这两个的颜色：

    app:backgroundTint="#ff87ffeb"
app:rippleColor="#33728dff"

      

    • 1
      • 

    • 2
      • 

    

      

    • 1
      • 

    • 2
      •
  • 立体感有没有什么属性可以动态指定？

    和立体感相关有两个属性，elevation和pressedTranslationZ，前者用户设置正常显示的阴影大小；后者是点击时显示的阴影大小。大家可以自己设置尝试下。

在5.x的设备上运行，你会发现一些问题（测试系统5.0）：

  • 木有阴影

记得设置app:borderWidth="0dp"。

  • 按上述设置后，阴影出现了，但是竟然有矩形的边界（未设置margin时，可以看出）

需要设置一个margin的值。在5.0之前，会默认就有一个外边距（不过并非是margin，只是效果相同）。

so，良好的实践是：

  • 添加属性app:borderWidth="0dp"
  • 对于5.x设置一个合理的margin

写一个简单的使用例子。

[java] view
plain copy

print?

  1. <android.support.design.widget.FloatingActionButton
  2. android:id="@+id/floatingaction"
  3. android:onClick="designClick"
  4. android:layout_width="wrap_content"
  5. android:layout_height="wrap_content"
  6. app:elevation="3dp"
  7. app:rippleColor="@color/colorAccent"
  8. app:borderWidth="0dp"
  9. android:backgroundTint="@color/colorPrimary"
  10. app:pressedTranslationZ="6dp"
  11. android:layout_margin="12dp"
  12. android:src="@mipmap/ic_launcher"
  13. android:layout_alignParentBottom="true"
  14. android:layout_alignParentRight="true"
  15. />

由于没办法运行模拟器，就上个图片吧，app:rippleColor这个是点击颜色，android:backgroundTint这个是显示背景颜色。会有一个渐变的过程，可以试试。也可以参考鸿神的一篇介绍：http://blog.csdn.net/lmj623565791/article/details/46678867

6.CoordinatorLayout

CoordinatorLayout是Design引入的一个功能强大的布局，本质上是一个增强的FrameLayout,它可以使得不同组件之间直接相互作用，并协调动画效果。我们可以定义CoordinatorLayout内部的视图组件如何相互作用并发生变化。例如刚才的FloatingActionButton
和 SnackBar，为了实现SnackBar出现时FAB能够上移，我们可以使用CoordinatorLayout为父容器。

[java] view
plain copy

print?

  1. <android.support.design.widget.CoordinatorLayout
  2. android:id="@+id/coordinator"
  3. android:layout_height="match_parent"
  4. android:layout_width="match_parent"
  5. android:layout_alignParentBottom="true">
  6. <android.support.design.widget.FloatingActionButton
  7. android:id="@+id/floatingaction"
  8. android:onClick="designClick"
  9. android:layout_width="wrap_content"
  10. android:layout_height="wrap_content"
  11. app:elevation="3dp"
  12. app:rippleColor="@color/colorAccent"
  13. app:borderWidth="0dp"
  14. android:backgroundTint="@color/colorPrimary"
  15. app:pressedTranslationZ="6dp"
  16. android:layout_margin="12dp"
  17. android:src="@mipmap/ic_launcher"
  18. android:layout_gravity="right|bottom"
  19. />
  20. </android.support.design.widget.CoordinatorLayout>

然后在代码中，把Coordinator给SnackBar.

[java] view
plain copy

print?

  1. Snackbar.make(coordinatorLayout,"点击了floatingActionButton",Snackbar.LENGTH_LONG).show();

这样就实现了简单的动画联动。这个是最简单的使用，等一下学了CollapsingToolbarLayout和AppbarLayout配合起来更华丽。

7.CollapsingToolbarLayout

CollapsingToolbarLayout控件可以实现当屏幕内容滚动时收缩Toolbar的效果，通常配合AppBarLayout一起使用。

先看看toolbar的一些区域划分

有了这图就知道我们该设置toolbar里的什么位置了。

CollapsingToolbarLayout 提供以下属性和方法是用：

1. Collapsing title：ToolBar的标题，当CollapsingToolbarLayout全屏没有折叠时，title显示的是大字体，在折叠的过程中，title不断变小到一定大小的效果。你可以调用setTitle(CharSequence)方法设置title。

2. Content scrim：ToolBar被折叠到顶部固定时候的背景，你可以调用setContentScrim(Drawable)方法改变背景或者 在属性中使用 app:contentScrim=”?attr/colorPrimary”来改变背景。

3. Status bar scrim：状态栏的背景，调用方法setStatusBarScrim(Drawable)。还没研究明白，不过这个只能在Android5.0以上系统有效果。

4. Parallax scrolling children：CollapsingToolbarLayout滑动时，子视图的视觉差，可以通过属性app:layout_collapseParallaxMultiplier=”0.6”改变。值de的范围[0.0,1.0]，值越大视察越大。

5. CollapseMode ：子视图的折叠模式，在子视图设置，有两种“pin”：固定模式，在折叠的时候最后固定在顶端；“parallax”：视差模式，在折叠的时候会有个视差折叠的效果。我们可以在布局中使用属性app:layout_collapseMode=”parallax”来改变。

CoordinatorLayout 还提供了一个 layout_anchor 的属性，连同 layout_anchorGravity 一起，可以用来放置与其他视图关联在一起的悬浮视图（如 FloatingActionButton）

使用CollapsingToolbarLayout实现折叠效果，需要注意3点 。

1. AppBarLayout的高度固定

2. CollapsingToolbarLayout的子视图设置layout_collapseMode属性

3. 关联悬浮视图设置app:layout_anchor，app:layout_anchorGravity属性

那么先写一个xml。

[java] view
plain copy

print?

  1. <android.support.design.widget.CoordinatorLayout
  2. xmlns:android="http://schemas.android.com/apk/res/android"
  3. xmlns:tools="http://schemas.android.com/tools"
  4. xmlns:app="http://schemas.android.com/apk/res-auto"
  5. android:id="@+id/activity_collasping"
  6. android:layout_width="match_parent"
  7. android:layout_height="match_parent"
  8. android:fitsSystemWindows="true"
  9. tools:context="com.example.administrator.designtest.CollaspingActivity">
  10. <android.support.design.widget.AppBarLayout
  11. android:id="@+id/appbar"
  12. android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
  13. android:fitsSystemWindows="true"
  14. android:layout_width="match_parent"
  15. android:layout_height="wrap_content">
  16. <android.support.design.widget.CollapsingToolbarLayout
  17. android:id="@+id/collasping_toolbar"
  18. android:layout_width="match_parent"
  19. android:layout_height="match_parent"
  20. android:fitsSystemWindows="true"
  21. app:contentScrim="?attr/colorPrimary"
  22. app:title="鬼刀"
  23. app:layout_collapseParallaxMultiplier="0.6"
  24. app:layout_scrollFlags="scroll|exitUntilCollapsed">
  25. <ImageView
  26. android:id="@+id/backdrop"
  27. android:background="@drawable/a"
  28. android:layout_width="match_parent"
  29. android:layout_height="256dp"
  30. android:fitsSystemWindows="true"
  31. android:scaleType="centerCrop"
  32. app:layout_collapseMode="parallax"/>
  33. <android.support.v7.widget.Toolbar
  34. android:id="@+id/toolbar"
  35. app:navigationIcon="@mipmap/ic_launcher"
  36. android:layout_width="match_parent"
  37. android:layout_height="?attr/actionBarSize"
  38. app:layout_collapseMode="pin"
  39. app:titleTextColor="#fff"
  40. android:popupTheme="@style/ThemeOverlay.AppCompat.Light">
  41. </android.support.v7.widget.Toolbar>
  42. </android.support.design.widget.CollapsingToolbarLayout>
  43. </android.support.design.widget.AppBarLayout>
  44. <android.support.v4.widget.NestedScrollView
  45. android:layout_width="match_parent"
  46. android:layout_height="match_parent"
  47. app:layout_behavior="@string/appbar_scrolling_view_behavior">
  48. <LinearLayout
  49. android:layout_width="match_parent"
  50. android:layout_height="match_parent"
  51. android:orientation="vertical"
  52. android:paddingTop="14dp">
  53. <android.support.v7.widget.CardView
  54. android:layout_width="match_parent"
  55. android:layout_height="100dp"
  56. android:background="@drawable/music_board"
  57. android:layout_margin="16dp">
  58. <LinearLayout
  59. android:orientation="vertical"
  60. android:padding="10dp"
  61. android:layout_width="match_parent"
  62. android:layout_height="wrap_content">
  63. <TextView
  64. android:layout_width="match_parent"
  65. android:layout_height="wrap_content"
  66. android:text="CardView"
  67. android:textAppearance="@style/TextAppearance.AppCompat.Title" />
  68. <TextView
  69. android:layout_width="match_parent"
  70. android:layout_height="wrap_content"
  71. android:text="this is a cardview ,so so good!\nthis is a cardview ,so so good!\nthis is a cardview ,so so good!" />
  72. </LinearLayout>
  73. </android.support.v7.widget.CardView>
  74. <android.support.v7.widget.CardView
  75. android:layout_width="match_parent"
  76. android:layout_height="100dp"
  77. android:background="@drawable/music_board"
  78. android:layout_margin="16dp">
  79. <LinearLayout
  80. android:orientation="vertical"
  81. android:padding="10dp"
  82. android:layout_width="match_parent"
  83. android:layout_height="wrap_content">
  84. <TextView
  85. android:layout_width="match_parent"
  86. android:layout_height="wrap_content"
  87. android:text="CardView"
  88. android:textAppearance="@style/TextAppearance.AppCompat.Title" />
  89. <TextView
  90. android:layout_width="match_parent"
  91. android:layout_height="wrap_content"
  92. android:text="this is a cardview ,so so good!\nthis is a cardview ,so so good!\nthis is a cardview ,so so good!" />
  93. </LinearLayout>
  94. </android.support.v7.widget.CardView>
  95. <android.support.v7.widget.CardView
  96. android:layout_width="match_parent"
  97. android:layout_height="100dp"
  98. android:background="@drawable/music_board"
  99. android:layout_margin="16dp">
  100. <LinearLayout
  101. android:orientation="vertical"
  102. android:padding="10dp"
  103. android:layout_width="match_parent"
  104. android:layout_height="wrap_content">
  105. <TextView
  106. android:layout_width="match_parent"
  107. android:layout_height="wrap_content"
  108. android:text="CardView"
  109. android:textAppearance="@style/TextAppearance.AppCompat.Title" />
  110. <TextView
  111. android:layout_width="match_parent"
  112. android:layout_height="wrap_content"
  113. android:text="this is a cardview ,so so good!\nthis is a cardview ,so so good!\nthis is a cardview ,so so good!" />
  114. </LinearLayout>
  115. </android.support.v7.widget.CardView>
  116. <android.support.v7.widget.CardView
  117. android:layout_width="match_parent"
  118. android:layout_height="100dp"
  119. android:background="@drawable/music_board"
  120. android:layout_margin="16dp">
  121. <LinearLayout
  122. android:orientation="vertical"
  123. android:padding="10dp"
  124. android:layout_width="match_parent"
  125. android:layout_height="wrap_content">
  126. <TextView
  127. android:layout_width="match_parent"
  128. android:layout_height="wrap_content"
  129. android:text="CardView"
  130. android:textAppearance="@style/TextAppearance.AppCompat.Title" />
  131. <TextView
  132. android:layout_width="match_parent"
  133. android:layout_height="wrap_content"
  134. android:text="this is a cardview ,so so good!\nthis is a cardview ,so so good!\nthis is a cardview ,so so good!" />
  135. </LinearLayout>
  136. </android.support.v7.widget.CardView>
  137. </LinearLayout>
  138. </android.support.v4.widget.NestedScrollView>
  139. <android.support.design.widget.FloatingActionButton
  140. app:layout_anchor="@id/appbar"
  141. app:layout_anchorGravity="bottom|right|end"
  142. android:src="@drawable/center_image_collection"
  143. android:backgroundTint="@color/colorPrimary"
  144. app:borderWidth="0dp"
  145. android:layout_margin="12dp"
  146. app:rippleColor="@color/colorPrimaryDark"
  147. app:elevation="6dp"
  148. app:pressedTranslationZ="12dp"
  149. android:layout_width="wrap_content"
  150. android:layout_height="wrap_content" />
  151. </android.support.design.widget.CoordinatorLayout>

直接可以运行了。看看效果咋样

这里的FloatingActionButton会随着AppBarLayout移动，是因为设置了

app:layout_anchor="@id/appbar"

app:layout_anchorGravity="bottom|right|end"

8.BottomSheetBehavior

BottomSheetBehavior可以轻松实现底部动作条功能，底部动作条的引入需要在布局添加app:layout_behavior属性，并将这个布局作为CoordianatorLayout的子View。这个可以用于一些从下面弹出选项的操作。

方法 用途
setPeekHeight 偷看的高度；哈，这么理解，就是默认显示后View露头的高度
getPeekHeight @see setPeekHeight()
setHideable 设置是否可以隐藏，如果为true,表示状态可以为STATE_HIDDEN
isHideable @see setHideable()
setState 设置状态;设置不同的状态会影响BottomSheetView的显示效果
getState 获取状态
setBottomSheetCallback 设置状态改变回调

举一个简单的运用

[java] view
plain copy

print?

  1. <android.support.design.widget.CoordinatorLayout
  2. android:id="@+id/coordinator"
  3. android:layout_below="@+id/design_bottom_sheet"
  4. android:layout_height="match_parent"
  5. android:layout_width="match_parent">
  6. <LinearLayout
  7. android:id="@+id/bottom_sheet"
  8. android:orientation="vertical"
  9. android:background="#e8e8e8"
  10. app:behavior_peekHeight="0dp"
  11. app:behavior_hideable="true"
  12. android:layout_marginTop="10dp"
  13. android:layout_width="match_parent"
  14. android:layout_height="200dp"
  15. app:layout_behavior="@string/bottom_sheet_behavior">
  16. <android.support.v7.widget.RecyclerView
  17. android:id="@+id/recyclerview"
  18. android:layout_width="match_parent"
  19. android:layout_height="wrap_content">
  20. </android.support.v7.widget.RecyclerView>
  21. </LinearLayout>
  22. <android.support.design.widget.FloatingActionButton
  23. android:id="@+id/floatingaction"
  24. android:onClick="designClick"
  25. android:layout_width="wrap_content"
  26. android:layout_height="wrap_content"
  27. app:elevation="3dp"
  28. app:rippleColor="@color/colorAccent"
  29. app:layout_anchor="@id/bottom_sheet"
  30. app:layout_anchorGravity="right|top"
  31. app:borderWidth="0dp"
  32. android:backgroundTint="@color/colorPrimary"
  33. app:pressedTranslationZ="6dp"
  34. android:layout_margin="10dp"
  35. android:src="@mipmap/ic_launcher"
  36. />
  37. </android.support.design.widget.CoordinatorLayout>

[java] view
plain copy

print?

  1. public class MainActivity extends AppCompatActivity {
  2. CoordinatorLayout coordinatorLayout;
  3. RecyclerView  recyclerview;
  4. RecyclerView.Adapter<MyViewHolder>adapter;
  5. List<String>texts;
  6. BottomSheetBehavior<View> behavior;
  7. @Override
  8. protected void onCreate(Bundle savedInstanceState) {
  9. super.onCreate(savedInstanceState);
  10. setContentView(R.layout.activity_main);
  11. coordinatorLayout = (CoordinatorLayout) findViewById(R.id.coordinator);
  12. recyclerview = (RecyclerView) findViewById(R.id.recyclerview);
  13. texts = new ArrayList<>();
  14. texts.add("测试1");
  15. texts.add("测试2");
  16. texts.add("测试3");
  17. texts.add("测试4");
  18. texts.add("测试5");
  19. texts.add("测试5");
  20. texts.add("测试5");
  21. //创建适配器
  22. adapter = new RecyclerView.Adapter<MyViewHolder>() {
  23. @Override
  24. public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
  25. return new MyViewHolder(LayoutInflater.from(MainActivity.this).inflate(R.layout.item,parent,false));
  26. }
  27. @Override
  28. public void onBindViewHolder(MyViewHolder holder, final int position) {
  29. holder.getTextView(R.id.text).setText(texts.get(position));
  30. holder.getTextView(R.id.text).setOnClickListener(new View.OnClickListener() {
  31. @Override
  32. public void onClick(View view) {
  33. Toast.makeText(MainActivity.this, "点击了"+position, Toast.LENGTH_SHORT).show();
  34. }
  35. });
  36. }
  37. @Override
  38. public int getItemCount() {
  39. return texts.size();
  40. }
  41. };
  42. //初始化recyclerview
  43. recyclerview.setAdapter(adapter);
  44. recyclerview.setHasFixedSize(true);
  45. recyclerview.setItemAnimator(new DefaultItemAnimator());
  46. recyclerview.setLayoutManager(new LinearLayoutManager(this));
  47. //配置bottomSheet
  48. View bottomSheet =  findViewById(R.id.bottom_sheet);
  49. behavior = BottomSheetBehavior.from(bottomSheet);
  50. //设置监听bottomSheet的状态
  51. behavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
  52. @Override
  53. public void onStateChanged(@NonNull View bottomSheet, int newState) {
  54. Log.i("tag00","新状态："+newState);
  55. }
  56. @Override
  57. public void onSlide(@NonNull View bottomSheet, float slideOffset) {
  58. Log.i("tag00","拖动操作："+slideOffset);
  59. }
  60. });
  61. }
  62. //所有点击事件
  63. public void designClick(View view){
  64. switch (view.getId()){
  65. case R.id.tabLayout:
  66. startActivity(new Intent(this,TabLayoutActivity.class));
  67. break;
  68. case R.id.navigation:
  69. startActivity(new Intent(this,NavigationActivity.class));
  70. break;
  71. case R.id.collasping:
  72. startActivity(new Intent(this,CollaspingActivity.class));
  73. break;
  74. case R.id.floatingaction:
  75. Snackbar.make(coordinatorLayout,"点击了floatingActionButton",Snackbar.LENGTH_LONG).show();
  76. break;
  77. //点击BottomSheet使用,改变状态
  78. case R.id.design_bottom_sheet:
  79. int state = behavior.getState();
  80. if (state == BottomSheetBehavior.STATE_EXPANDED) {
  81. behavior.setState(BottomSheetBehavior.STATE_HIDDEN);
  82. }else{
  83. behavior.setState(BottomSheetBehavior.STATE_EXPANDED);
  84. }
  85. break;
  86. }
  87. }
  88. //用于展示弹窗的list
  89. public class MyViewHolder extends RecyclerView.ViewHolder{
  90. private SparseArray<View> array;
  91. public MyViewHolder(View itemView) {
  92. super(itemView);
  93. array = new SparseArray<>();
  94. }
  95. private <T extends View> T findViewById(int viewId){
  96. View view = array.get(viewId);
  97. if (view == null){
  98. view = itemView.findViewById(viewId);
  99. array.put(viewId,view);
  100. }
  101. return (T) view;
  102. }
  103. private View findView(int viewId){
  104. return findViewById(viewId);
  105. }
  106. public TextView getTextView(int viewid){
  107. return (TextView)findView(viewid);
  108. }
  109. }
  110. }

大致的说明都在注释里了，其实这些新控件更多的在于怎么使用，想要扣原理还是要去撸源码。看看效果吧。

时间： 2024-10-10 02:55:12

Android Design Support Library详解（SnackBar、NavigationView、FloatActionButton等）的相关文章

【翻】Android Design Support Library 的 代码实验——几行代码，让你的 APP 变得花俏

译者地址:[翻]Android Design Support Library 的 代码实验--几行代码,让你的 APP 变得花俏 原文:Codelab for Android Design Support Library used in I/O Rewind Bangkok session--Make your app fancy with few lines of code 原文项目 demo: Lab-Android-DesignLibrary 双语对照地址: [翻-双语]Android D

Android Design Support Library 的 代码实验——几行代码，让你的 APP 变得花俏

译者地址:[翻]Android Design Support Library 的 代码实验——几行代码,让你的 APP 变得花俏 原文:Codelab for Android Design Support Library used in I/O Rewind Bangkok session----Make your app fancy with few lines of code 原文项目 demo: Lab-Android-DesignLibrary 双语对照地址: [翻-双语]Android

【转】【翻】Android Design Support Library 的 代码实验——几行代码，让你的 APP 变得花俏

转自:http://mrfufufu.github.io/android/2015/07/01/Codelab_Android_Design_Support_Library.html [翻]Android Design Support Library 的 代码实验——几行代码,让你的 APP 变得花俏 Jul 1, 2015 译者地址:[翻]Android Design Support Library 的 代码实验——几行代码,让你的 APP 变得花俏 原文:Codelab for Androi

Android Design Support Library使用详解

Android Design Support Library使用详解 Google在2015的IO大会上,给我们带来了更加详细的Material Design设计规范,同时,也给我们带来了全新的Android Design Support Library,在这个support库里面,Google给我们提供了更加规范的MD设计风格的控件.最重要的是,Android Design Support Library的兼容性更广,直接可以向下兼容到Android 2.2.这不得不说是一个良心之作. 使用S

Android Design Support Library 使用详解

概述 Android Design Support Library 是Google在2015年的IO大会上,带来的全新适应Material Design设计规范的支持库.在这个支持库中,给我们提供了更加规范的MD设计风格控件.重要的是,Android Design Support Library中,支持所有的Android 2.1以上版本系统.在这个支持库中,主要包含下面几大控件: Snackbar,FloatingActionButton,TextInputLayout,TabLayout,A

Android Design Support Library（二）用NavigationView实现抽屉菜单界面

NavigationView在MD设计中很重要,之前Google也提出了使用DrawerLayout来实现导航抽屉. 这次,在Android Design Support Library中,Google提供了NavigationView来实现导航菜单界面. 这次我们写的代码在Android用TabLayout实现相似网易选项卡动态滑动效果这篇文章代码的基础上进行改动,所以最好先看看上面这篇文章 首先仍旧是配置build.gradle: dependencies { compile fileTre

Material Design 开发利器：Android Design Support Library 介绍

转自:https://blog.leancloud.cn/3306/ Android 5.0 Lollipop 是迄今为止最重大的一次发布,很大程度上是因为 material design —— 这是一门新的设计语言,它刷新了整个 Android 的用户体验.但是对于开发者来说,要设计出完全符合 material design 哲学的应用,是一个很大的挑战.Android Design Support Library 对此提供了很好的支持,里面汇集了很多重要的 material design 控

Android Design Support Library（三）用CoordinatorLayout实现Toolbar隐藏和折叠

此文的代码在Android Design Support Library(一)用TabLayout实现类似网易选项卡动态滑动效果代码的基础上进行修改,如果你没有看过本系列的第一篇文章最好先看一看. CoordinatorLayout是Android Design Support Library中比较难的控件,顾名思义,它是用来组织它的子views之间协作的一个父view.CoordinatorLayout默认情况下可理解是一个FrameLayout,它的布局方式默认是一层一层叠上去,在这里我会介

Android：加载Android Design Support Library异常解决方案

Google最新的兼容包Android Design Support Library增加了许多符合Material Design设计规范的控件,如Navigation View,Floating Action Button,SnackBar,Tabs,CoordinatorLayout,AppbarLayout,CollapsingToolbarLayout等. 笔者也及时更新了SDK,获得了Android Design Support Library支持包,但是在导入eclipse工程的过程中