android新控件之toolbar,floatingActionButton,SnackBar,CollapsingToolbarLayout

最新推荐文章于 2024-08-22 08:37:25 发布

showCar

最新推荐文章于 2024-08-22 08:37:25 发布

阅读量2.2k

点赞数

分类专栏： android android技术分享与探讨文章标签： android

本文链接：https://blog.csdn.net/u014486880/article/details/48814577

版权

android 同时被 2 个专栏收录

40 篇文章 2 订阅

订阅专栏

android技术分享与探讨

34 篇文章 0 订阅

订阅专栏

本文介绍了Google 2015 I/O大会上推出的四个Android控件：SnackBar、FloatingActionButton、ToolBar和CollapsingToolbarLayout，并通过实例演示了它们的使用方法和效果，展示了如何在项目中应用这些MD风格的组件。

摘要由CSDN通过智能技术生成

google 2015I/O大会推出了8个新的控件，继续推进了android5.0之后的Materia Design风格，个人觉得MD风格还是相当好看的，最近做项目用到了一部分控件，现在把几个控件用到同一个Demo中，结合demo来讲解它们，先看看效果图：

其中列表内容是通过xmlpull读取xml文件来显示的。限于篇幅，本次只讲几个。了解东西总是要从简单到复杂，那么我们就从简单的开始讲起。

一，snackBar

使用这些控件前先导入相关包，在android studio的build.gradle中添加

compile 'com.android.support:appcompat-v7:22.1.1'

Toast大家是再熟悉不过。那么如果会使用Toast，那么snackBar自然也会使用。那么snackBar长什么样呢，看下图

snackBar比Toast重量级一点，但又比Dialog轻。先看下snackBar的使用方法：

Snackbar snackbar = Snackbar.make(v, "弹出snackbar", Snackbar.LENGTH_LONG);
                snackbar.show();
                snackbar.setAction("取消", new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        Toast.makeText(MainActivity.this, "SnackBar action", Toast.LENGTH_SHORT).show();
                    }
                });

其实跟Toast使用没什么两样，只是多也一个按钮的触发。其中取消是按钮的名称。注意Snackbar.make（）第一个参数不是context而是view，表示snackbar画在哪个view之上，所以第一个参数不能是scrollview，因为scrollview能滑动，snackbar不知放于哪个位置。

二.floatingActionButton

看以下图片就知道这是什么了。

这种悬浮按钮在Materia Design风格的app中很常见。可触发，可隐藏，用法也很简单，定义布局

<android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_discuss"
        app:backgroundTintMode="multiply"
        app:layout_anchorGravity="bottom|end|right"></android.support.design.widget.FloatingActionButton>

可以通过backgroundTint来改变改变背景颜色。anchorGravity确定button的放置位置。调用如下：

fab = (FloatingActionButton)findViewById(R.id.fab);

fab.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { } });

至此FloatingActionButton就完成了。

三、toolbar

个人觉得toolbar是一个非常实用的控件。之前使用ActionBar总会发现它自定义相当不方便，toolbar完美的解决了这个缺点，来看看toolbar的使用方法。

首先，将style文件中的AppTheme删除，不使用ActionBar风格，添加以下代码：

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <!-- Customize your theme here. -->
        <!--导航栏底色-->
        <item name="colorPrimary">@color/material_primary_color</item>
        <!--状态栏底色-->
        <item name="colorPrimaryDark">@color/material_primary_color_dark</item>
        <!--导航栏上的标题颜色-->
        <item name="android:textColorPrimary">@android:color/black</item>
        <!--Activity窗口的颜色-->
        <item name="android:windowBackground">@android:color/white</item>
        <!--按钮选中或者点击获得焦点后的颜色-->
        <item name="colorAccent">@color/accent_material_light</item>
        <!--和 colorAccent相反，正常状态下按钮的颜色-->
        <item name="colorControlNormal">@color/material_blue_grey_950</item>
        <!--Button按钮正常状态颜色-->
        <item name="colorButtonNormal">@color/button_material_light</item>
        <!--EditText 输入框中字体的颜色-->
        <item name="editTextColor">@android:color/white</item>
        <item name="android:textColorHint">@color/hint_foreground_material_dark</item>
    </style>

这些样式文件的值是可以修改的，改成你自己想要的颜色。

接下来添加toolbar的配置文件

 <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            />

在activity中通过如下代码调用：

toolbar = (Toolbar) findViewById(R.id.toolbar);
        //setActionBar(toolbar);
        setSupportActionBar(toolbar);
        getSupportActionBar().setDisplayShowTitleEnabled(false);
        toolbar.setTitle("图书管理系统");

        toolbar.setSubtitle("CSDC");
        toolbar.setNavigationIcon(R.drawable.ic_list_black_24dp);
        toolbar.setOnMenuItemClickListener(this);

setTitle设置主标题，setSubtitle设置次标题。setNavigationIcon设置Navigation点击的图标。toolbar还可以调用按钮，在menu_main文件中添加如下item:

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools" tools:context=".MainActivity">
    <item
        android:id="@+id/action_edit"
        android:icon="@drawable/abc_ic_search_api_mtrl_alpha"
        android:orderInCategory="80"
        android:title="查找"
        app:showAsAction="always" />

    <item
        android:id="@+id/action_share"
        android:icon="@drawable/abc_ic_menu_share_mtrl_alpha"
        android:orderInCategory="90"
        android:title="分享"
        app:showAsAction="always" />

    <item
        android:id="@+id/action_settings"
        android:orderInCategory="100"
        android:title="@string/action_settings"
        app:showAsAction="never" />
</menu>

与Action一样，orderInCategory设置优先级，showAsAction设置是否显示在标题栏中。有四个属性，ifRoom,never,always,collapseActionView。

在Activity中复写onCreateOptionsMenu就可以显示菜单，可自行试试效果。

  @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

那么Toolbar如何自定义呢，不多说，贴出配置代码就知道了

<android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:layout_gravity="center_vertical"
                android:text="标题"
                android:textSize="18sp" />

    </android.support.v7.widget.Toolbar>

就是把toolbar当成父布局来使用，其中的标题样式可自行摆放。

关于toolbar的用法就说这些，接下来看看CollaspingToolbarLayout的用法。

四、CollaspingToolbarLayout

这个可以理解为是一个用来包裹toolbar并在toolbar折叠时提供另一个切换视图。效果如下图：

这里切换视图实现了一个轮播效果，实现代码如下：

<android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:contentScrim="?attr/colorPrimary"
        app:expandedTitleMarginEnd="64dp"
        app:expandedTitleMarginStart="48dp"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        app:statusBarScrim="?attr/colorPrimary"

        >
<LinearLayout
                  android:id="@+id/show_gallery"
                  android:layout_width="match_parent"
                  android:layout_height="match_parent"
                  app:layout_collapseMode="parallax"
                  app:layout_collapseParallaxMultiplier="0.6"
                  android:orientation="vertical" >

      <android.support.v4.view.ViewPager
            android:id="@+id/pager"
            android:layout_width="match_parent"
            android:layout_height="198dp" />


    --></LinearLayout>
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            />
    </android.support.design.widget.CollapsingToolbarLayout>

CollaspingToolbarLayout使用很简单，以上layout_collapseMode设置有两种模式：

1.pin:固定模式，折叠后最后固定在顶部。

2.parallax:折叠时有一个视差。

collapseParallxMultiplier设置的是视角差程度。

轮播（图片的左右切换）效果的实现如下：

 mRecommendPager = (ViewPager)findViewById(R.id.pager);
        mRecommendPager.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                PointF downP = new PointF();
                PointF curP = new PointF();
                int act = event.getAction();
                if (act == MotionEvent.ACTION_DOWN
                        || act == MotionEvent.ACTION_MOVE
                        || act == MotionEvent.ACTION_UP) {
                    ((ViewGroup) v).requestDisallowInterceptTouchEvent(true);
                    if (downP.x == curP.x && downP.y == curP.y) {
                        return false;
                    }
                }
                return false;
            }
        });
        mRecommendPager.setAdapter(mRecommendAdapter);
        LayoutInflater mLayoutInflater=LayoutInflater.from(this);
        View view1=mLayoutInflater.inflate(R.layout.guide_one, null);
        View view2=mLayoutInflater.inflate(R.layout.guide_two, null);
        View view3=mLayoutInflater.inflate(R.layout.guide_end, null);

        final ArrayList<View> views =new ArrayList<View>();
        views.add(view1);
        views.add(view2);
        views.add(view3);
        mRecommendAdapter = new RecommendAdapter(views,this);
        mRecommendPager.setAdapter(mRecommendAdapter);

以上实现有一个小细节，就是为了ViewPager能监听到手势，用requestDiasllowInterceptTouchEvent(true)来防止手势被上层捕获。
这个不是本文的重点。

最后提供app源码的下载地址，通过完整的代码相信会了解的更快。

下载地载