Material Design 控件（二）

Snackbar

Snackbar 与 Toast非常相像，但是Snackbar并不是用来取代Toast的。

Toast用来提示用户发生了什么，而用户只能被动的接受，本不能做出任何提醒。
Snackbar可以进行提示，同时也可以接受当用户点击时，去执行一些操作。

用法：

btn.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            Snackbar.make(v,"消息",Snackbar.LENGTH_SHORT).setAction("处理事件", new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    Toast.makeText(FloatingActionButtonActivity.this,"处理事件",Toast.LENGTH_SHORT).show();
                }
            }).show();
        }
    });

Snackbar的用法和Toast一样。但是第一接受的参数是View，而这一个View可以是当前View的任何一个View都可以，Snackbar会使用这个View来查找出最外层的布局，用来展示Snackbar.

值得注意的是，我们可以为Snackbar添加一个点击事件，使用setAction（）。使用后Snackbar上就出现了一个按钮，第一个参数为按钮的名字，第二是点击所要执行的事件，在onClick（）上写上要执行的事件就可以了。

CardView

卡片式布局

实际上CardView也是一个FrameLayout。只是额外提供了圆角和阴影的效果等，看上去更加有立体的感觉。

要使用他，那么就要先引入依赖
compile 'com.android.support:cardview-v7:23.4.0'

<android.support.v7.widget.CardView
    android:layout_width="300dp"
    android:layout_height="300dp"
    android:layout_centerInParent="true"
    app:cardCornerRadius="50dp"   
	android:elevation="10dp">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@color/colorAccent" />

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

app:cardCornerRadius="50dp" 设置圆角弧度
android:elevation="10dp" 设置高度

SwipeRefreshLayout

下拉刷新

<android.support.v4.widget.SwipeRefreshLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">


</android.support.v4.widget.SwipeRefreshLayout>

代码中使用：

private SwipeRefreshLayout sr;
 @Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_swipe_refresh);

    sr = (SwipeRefreshLayout) findViewById(R.id.sr);
    sr.setColorSchemeColors(R.color.colorAccent);

	//设置下拉啊刷新所要做的事情
    sr.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
        @Override
        public void onRefresh() {
            refresh();
        }

    });
}

private void refresh() {
    new Thread(new Runnable() {
        @Override
        public void run() {
            try {
                Thread.sleep(2000);
            } catch (InterruptedException e) {
                e.printStackTrace();
            }
            runOnUiThread(new Runnable() {
                @Override
                public void run() {
                    //关闭刷新
                    sr.setRefreshing(false);
                }
            });
        }
    }).start();
}

上面代码中的下拉刷新，为下拉刷新添加了下拉刷新的事件。用线程模拟请求数据，最后调用 sr.setRefreshing(false); 来关闭刷新状态。

CollapsingToolbarLayout、AppBarLayout、CoordinatorLayout

这个可以用来做可折叠式标题栏

CollapsingToolbarLayout是已个作用于Toolbar基础上的布局，他使得Toolbar的效果变得更加丰富，不仅是展示一个标题栏，而是能够实现非常华丽的效果。

不过CollapsingToolbarLayout这个是不能独立存在得出，他在设计的时候只能被限定作为AppBarLayout的直接子布局来使用，而AppBarLayout又必须是CoordinatorLayout的子布局。

CoordinatorLayout

这个可以说是一个加强版的FrameLayout。他可以监听其所有的子控件的各种事件，然后自动帮助我们做出最为合理的响应。

例如：

CoordinatorLayout可以用来配合浮动操作按钮的 layout_anchor 和 layout_gravity属性创造出浮动效果，详情请参见浮动操作按钮指南。

当Snackbar在显示的时候，往往出现在屏幕的底部。为了给Snackbar留出空间，浮动操作按钮需要向上移动。

只要使用CoordinatorLayout作为基本布局，将自动产生向上移动的动画。浮动操作按钮有一个默认的 behavior来检测Snackbar的添加并让按钮在Snackbar之上呈现上移与Snackbar等高的动画。

AppBarLayout

AppBarLayout是一个垂直方向的LinearLayout，它在内部做了很多滑动事件的封装。

因为外部的CoordinatorLayout是一个加强版的FrameLayout，那么FrameLayout中的所有控件在不进行明确定位的情况下，默认都会摆放在布局的左上角，从而会产生了遮挡的现象。以前我们可以让布局向下偏移，从而使布局不会用遮掩现象的出现。因为我们现在使用的是CoordinatorLayout，所以我们可以AppBarLayout来避免这种情况的发生。

用法如下

添加这个 AppBarLayout 布局，成为CoordinatorLayout的子布局。
为AppBarLayout 布局下的第二个大布局添加一个布局行为。app:layout_behavior="@string/appbar_scrolling_view_behavior"

那么第二个布局就不会遮掩第一个的布局。

因为AppBarLayout在内部做了很多滑动事件的封装，当AppBarLayout接受到了滚动事件的时候，他在内部的子控件其实是可以指定如何去影响这些事件的，而要实现这些影响，则可以通过设置app:layout_scrollFlags="" 属性来实现。

属性有以下的可选：

scroll：设置的布局会一起向上滑动。

snap：设置的布局当没有完全隐藏或显示的时候，会根据当前滚动的距离，自动选择是隐藏还是显示。

enterAlways: 一旦向上滚动这个view就可见。

enterAlwaysCollapsed: 设置的布局，定义的是何时进入（已经消失之后何时再次显示）。假设你定义了一个最小高度（minHeight）同时enterAlways也定义了，那么view将在到达这个最小高度的时候开始显示，并且从这个时候开始慢慢展开，当滚动到顶部的时候展开完。

exitUntilCollapsed: 当你定义了一个minHeight，这个view将在滚动到达这个最小高度的时候才会消失。如果没有设置minHeight，则保留在界面上，不再移出屏幕。

CollapsingToolbarLayout

这个布局就是用来实现可折叠的标题栏的效果。在这个布局上添加上Toolbar，就可以了。同时我们可以在这布局上添加一些标题栏上出现的东西，入ImageView、TextView等.

其实在折叠之后就是一个Toolbar，利用这个的属性的设置：app:contentScrim="?attr/colorPrimary" ，这个是设置折叠之后的背景色，那么在折叠完之后，我们背景色就是colorPrimary 了.

可以为布局下的那些控件添加 app:layout_collapseMode="" 这个属性，那么就可以设置成不同的折叠模式。

模式有以下这几种：

parallax：表示在折叠的过程中会产生一定的错位偏移，这种模式的视觉效果非常的好。

pin：表示在折叠的过程中位置保持不变。

none：默认平滑移动。

注意的是，以前我们都是设置Toolbar的title，而现在，我们需要把title设置在CollapsingToolBarLayout上，而不是Toolbar。

CollapsingToolbarLayout collapsingToolbar = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
collapsingToolbar.setTitle("可折叠式菜单");

代码如下：

	<?xml version="1.0" encoding="utf-8"?>

<android.support.design.widget.CoordinatorLayout 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:fitsSystemWindows="true">

<android.support.design.widget.AppBarLayout
    android:id="@+id/appBar"
    android:layout_width="match_parent"
    android:layout_height="250dp"
    android:fitsSystemWindows="true">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        app:contentScrim="?attr/colorPrimary"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            android:scaleType="centerCrop"
            android:src="@drawable/head"
            app:layout_collapseMode="parallax" />

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

    </android.support.design.widget.CollapsingToolbarLayout>

</android.support.design.widget.AppBarLayout>

<android.support.v4.widget.NestedScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="QQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQ"
        android:textSize="50sp" />

</android.support.v4.widget.NestedScrollView>

<android.support.design.widget.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginRight="20dp"
    android:src="@drawable/ic_comment_love_yellow"
    app:layout_anchor="@id/appBar"
    app:layout_anchorGravity="bottom|end" />

</android.support.design.widget.CoordinatorLayout>

同时在布局上加上了一个悬浮按钮

app:layout_anchor="@id/appBar"
app:layout_anchorGravity="bottom|end"

layout_anchor 属性指定了一个锚点，将锚点设置成为APPBarLayout，这样悬浮按钮就会出现在标题栏上。

layout_anchorGravity 属性令悬浮按钮定位在标题栏区域的右下角。

public class SlideTitleActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_slide_title);

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        CollapsingToolbarLayout collapsingToolbar = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
        setSupportActionBar(toolbar);

        //设置显示返回键
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);

        collapsingToolbar.setTitle("可折叠式菜单");
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case android.R.id.home:
                Toast.makeText(SlideTitleActivity.this,"点击",Toast.LENGTH_SHORT).show();
                break;
        }
        return true;
    }
}

效果如下：

可以折叠，图片有位移的错位，同时悬浮按钮在折叠的时候会消失，标题会移动等效果。

posted @ 2017-01-15 09:21 吃枣的事阅读(406) 评论(0) 编辑收藏举报

吃枣的事