Snackbar、CoordinatorLayout、CardView、AppBarLayout

来源:互联网 发布:坏坏的女人有魅力知乎 编辑:程序博客网 时间:2024/06/05 20:08

Snackbar

Snackbar使用一个动画效果从屏幕的底部弹出来,弹出的时间分为三种:
LENGTH_INDEFINITE :表示长期显示,用户可以调用Snackbar的dismiss方法取消显示,如果设置了Action,点击Action后也会消失。
LENGTH_SHORT 和LENGTH_LONG 不用多说,和Toast一样。
下面看一个实例:

Snackbar snackbar= Snackbar.make(v,"Snackbar",Snackbar.LENGTH_INDEFINITE)                        .setAction("undo", new View.OnClickListener() {                            @Override                            public void onClick(View v) {                            }                        });                snackbar.show();

CoordinatorLayout

CoordinatorLayout可以说是一个加强版的FrameLayout,CoordinatorLayout可以监听其所有子控件的各种事件,然后做出合理的响应。(暂时先说这么多)

CardView

我们通过一个实例来介绍这个控件:
首先是布局:

<?xml version="1.0" encoding="utf-8"?><RelativeLayout 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"    android:id="@+id/activity_main"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context="com.example.administrator.actionbar.MainActivity">    <android.support.design.widget.CoordinatorLayout        android:layout_width="match_parent"        android:layout_height="match_parent">        <android.support.v7.widget.Toolbar            android:id="@+id/toolBar"            android:layout_width="match_parent"            android:layout_height="?attr/actionBarSize"            android:background="?attr/colorPrimary"            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"            app:layout_scrollFlags="scroll|enterAlways|snap">            <TextView                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_centerInParent="true"                android:layout_gravity="center"                android:maxLines="1"                android:text="shanshui"                android:textColor="#ffffff"                android:textSize="20sp" />        </android.support.v7.widget.Toolbar>        <android.support.v7.widget.RecyclerView            android:id="@+id/recyclerView"            android:layout_width="match_parent"            android:layout_height="match_parent"            app:layout_behavior="@string/appbar_scrolling_view_behavior" />    </android.support.design.widget.CoordinatorLayout></RelativeLayout>

这里我们使用了CoordinatorLayout作为外部布局,他是为了和后面的AppBarLayout配合使用的。布局分为toolbar和RecyclerView两部分。

然后开始写RecyclerView的适配器:
首先定义一个实体类Fruit:

public class Fruit {    private String name;    private int imagrId;    public Fruit(int imagrId, String name) {        this.imagrId = imagrId;        this.name = name;    }    public int getImagrId() {        return imagrId;    }    public void setImagrId(int imagrId) {        this.imagrId = imagrId;    }    public String getName() {        return name;    }    public void setName(String name) {        this.name = name;    }}

接着给RecyclerView的适配器写一个布局:

<?xml version="1.0" encoding="utf-8"?><android.support.v7.widget.CardView    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_margin="5dp"    //卡片的圆角    app:cardCornerRadius="4dp"    android:layout_height="wrap_content">    <LinearLayout        android:orientation="vertical"        android:layout_width="match_parent"        android:layout_height="wrap_content">        <ImageView            android:id="@+id/fruit_image"            android:layout_width="match_parent"            android:layout_height="100dp"            android:scaleType="centerCrop"/>        <TextView            android:id="@+id/fruit_name"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_margin="5dp"            android:textSize="16sp"/>    </LinearLayout></android.support.v7.widget.CardView>

这里就用到了CardView了。
最后就是适配器了:

public class FruitAdapter extends RecyclerView.Adapter<FruitAdapter.ViewHolder> {    private Context mContext;    private List<Fruit> mFruitList;    public FruitAdapter(List<Fruit> mFruitList) {        this.mFruitList = mFruitList;    }    class ViewHolder extends RecyclerView.ViewHolder{        CardView cardView;        ImageView fruitImage;        TextView fruitName;        public ViewHolder(View itemView) {            super(itemView);            cardView= (CardView) itemView;            fruitName = (TextView) itemView.findViewById(R.id.fruit_name);            fruitImage = (ImageView) itemView.findViewById(R.id.fruit_image);        }    }    @Override    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {        if(mContext==null){            mContext=parent.getContext();        }        View view = LayoutInflater.from(mContext).inflate(R.layout.fruit_item, parent, false);        return new ViewHolder(view);    }    @Override    public void onBindViewHolder(ViewHolder holder, int position) {        Fruit fruit=mFruitList.get(position);        holder.fruitName.setText(fruit.getName());        Glide.with(mContext).load(fruit.getImagrId()).into(holder.fruitImage);    }    @Override    public int getItemCount() {        return mFruitList.size();    }}

上面是RecyclerView的使用流程,我们就不细说了。

下面是主要的MainActivity:

public class MainActivity extends AppCompatActivity {    private List<Fruit> fruitList = new ArrayList<>();    private FruitAdapter fruitAdapter;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        Toolbar toolbar = (Toolbar) findViewById(R.id.toolBar);        setSupportActionBar(toolbar);        ActionBar actionBar = getSupportActionBar();        //隐藏标题        actionBar.setDisplayShowTitleEnabled(false);        //显示返回按钮以及返回按钮的点击事件        actionBar.setDisplayHomeAsUpEnabled(true);        //配置recyclerView        fruitList.clear();        for(int i=0;i<50;i++){            fruitList.add(new Fruit(R.mipmap.ic_launcher,"apple"));        }        RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recyclerView);        //设置卡片布局        GridLayoutManager layoutManager = new GridLayoutManager(this, 2);        recyclerView.setLayoutManager(layoutManager);        fruitAdapter = new FruitAdapter(fruitList);        recyclerView.setAdapter(fruitAdapter);    }    @Override    public boolean onCreateOptionsMenu(Menu menu) {        getMenuInflater().inflate(R.menu.toolbar, menu);        MenuItem item = menu.findItem(R.id.search);        SearchView searchView = (SearchView) item.getActionView();        return true;    }    @Override    public boolean onOptionsItemSelected(MenuItem item) {        switch (item.getItemId()) {            case R.id.delete:                Toast.makeText(MainActivity.this, "delete", Toast.LENGTH_SHORT).show();                break;            case R.id.setting:                Toast.makeText(MainActivity.this, "setting", Toast.LENGTH_SHORT).show();                break;        }        return true;    }}

上面最主要的就是
GridLayoutManager layoutManager = new GridLayoutManager(this, 2);
recyclerView.setLayoutManager(layoutManager);
我们来看一下效果吧。
这里写图片描述

AppBarLayout

在前面的CardView中,我们可以看到我们定义的toolbar被遮挡住了,出现这种效果的主要原因是CoordinatorLayout,还记CoordinatorLayout是一个FrameLayout的升级版吗,在FrameLayout中不进行明确定位的情况下都会摆放在右上角,这就造成了遮挡。而我们即将介绍的AppBarLayout就能解决这种问题,我们把toolbar包裹在AppBarLayout中,然后给RecyclerView设置一条属性:app:layout_behavior=”@string/appbar_scrolling_view_behavior”
具体看以下代码:

<?xml version="1.0" encoding="utf-8"?><RelativeLayout 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"    android:id="@+id/activity_main"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context="com.example.administrator.actionbar.MainActivity">    <android.support.design.widget.CoordinatorLayout        android:layout_width="match_parent"        android:layout_height="match_parent">        <android.support.design.widget.AppBarLayout            android:layout_width="match_parent"            android:layout_height="wrap_content">            <android.support.v7.widget.Toolbar                android:id="@+id/toolBar"                android:layout_width="match_parent"                android:layout_height="?attr/actionBarSize"                android:background="?attr/colorPrimary"                android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"                app:layout_scrollFlags="scroll|enterAlways|snap"                >                <TextView                    android:layout_width="wrap_content"                    android:layout_height="wrap_content"                    android:layout_centerInParent="true"                    android:layout_gravity="center"                    android:maxLines="1"                    android:text="shanshui"                    android:textColor="#ffffff"                    android:textSize="20sp" />            </android.support.v7.widget.Toolbar>        </android.support.design.widget.AppBarLayout>        <android.support.v7.widget.RecyclerView            android:id="@+id/recyclerView"            android:layout_width="match_parent"            android:layout_height="match_parent"            app:layout_behavior="@string/appbar_scrolling_view_behavior"            />    </android.support.design.widget.CoordinatorLayout></RelativeLayout>

这样就解决了遮挡问题。
当RecyclerView滚动的时候就已经将滚动事件都通知给AppBarLayout了,这样我们当RecyclerView接受到滚动事件的时候,他内部的子控件其实是可以指定如何去影响这些事件的,通过app:layout_scrollFlags属性就能实现,在toolbar中加入这个属性:

<android.support.v7.widget.Toolbar                android:id="@+id/toolBar"                android:layout_width="match_parent"                android:layout_height="?attr/actionBarSize"                android:background="?attr/colorPrimary"                android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"                app:layout_scrollFlags="scroll|enterAlways|snap"                >                <TextView                    android:layout_width="wrap_content"                    android:layout_height="wrap_content"                    android:layout_centerInParent="true"                    android:layout_gravity="center"                    android:maxLines="1"                    android:text="shanshui"                    android:textColor="#ffffff"                    android:textSize="20sp" />            </android.support.v7.widget.Toolbar>

我们看一下效果:
这里写图片描述

介绍一下app:layout_scrollFlags的属性:

  • scroll:Child View 伴随着滚动事件而滚出或滚进屏幕。注意两点:第一点,如果使用了其他值,必定要使用这个值才能起作用;第二点:如果在这个child View前面的任何其他Child View没有设置这个值,那么这个Child View的设置将失去作用。
  • enterAlways:快速返回模式。其实就是向下滚动时Scrolling View和Child View之间的滚动优先级问题。对比scroll和scroll | enterAlways设置,发生向下滚动事件时,前者优先滚动Scrolling View,后者优先滚动Child View,当优先滚动的一方已经全部滚进屏幕之后,另一方才开始滚动。
  • enterAlwaysCollapsed:enterAlways的附加值。这里涉及到Child View的高度和最小高度,向下滚动时,Child View先向下滚动最小高度值,然后Scrolling View开始滚动,到达边界时,Child View再向下滚动,直至显示完全。
  • exitUntilCollapsed:这里也涉及到最小高度。发生向上滚动事件时,Child View向上滚动退出直至最小高度,然后Scrolling View开始滚动。也就是,Child View不会完全退出屏幕。
  • snap:简单理解,就是Child View滚动比例的一个吸附效果。也就是说,Child View不会存在局部显示的情况,滚动Child View的部分高度,当我们松开手指时,Child View要么向上全部滚出屏幕,要么向下全部滚进屏幕,有点类似ViewPager的左右滑动。
    具体查看

下拉刷新

SwipeRefreshLayout就是实现下拉刷新的核心类,只需要将要实现下拉刷新的控件放到SwipeRefreshLayout中,就可以让这个控件支持下拉刷新,我们对之前的项目加入下拉刷新:

<?xml version="1.0" encoding="utf-8"?><RelativeLayout 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"    android:id="@+id/activity_main"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context="com.example.administrator.actionbar.MainActivity">    <android.support.design.widget.CoordinatorLayout        android:layout_width="match_parent"        android:layout_height="match_parent">        <android.support.design.widget.AppBarLayout            android:layout_width="match_parent"            android:layout_height="wrap_content">            <android.support.v7.widget.Toolbar                android:id="@+id/toolBar"                android:layout_width="match_parent"                android:layout_height="?attr/actionBarSize"                android:background="?attr/colorPrimary"                android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"                app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"                >                <TextView                    android:layout_width="wrap_content"                    android:layout_height="wrap_content"                    android:layout_centerInParent="true"                    android:layout_gravity="center"                    android:maxLines="1"                    android:text="shanshui"                    android:textColor="#ffffff"                    android:textSize="20sp" />            </android.support.v7.widget.Toolbar>        </android.support.design.widget.AppBarLayout>        <!--下拉刷新-->        <android.support.v4.widget.SwipeRefreshLayout            android:id="@+id/swipeRefresh"            android:layout_width="match_parent"            android:layout_height="match_parent"            app:layout_behavior="@string/appbar_scrolling_view_behavior">            <android.support.v7.widget.RecyclerView                android:id="@+id/recyclerView"                android:layout_width="match_parent"                android:layout_height="match_parent"                />        </android.support.v4.widget.SwipeRefreshLayout>    </android.support.design.widget.CoordinatorLayout></RelativeLayout>

上面的布局将RecyclerView放到SwipeRefreshLayout布局里。

然后在MainActivity中配置:

 swipeRefreshLayout = (SwipeRefreshLayout) findViewById(R.id.swipeRefresh);        //设置下拉刷新进度条的颜色        swipeRefreshLayout.setColorSchemeResources(R.color.colorPrimary);        swipeRefreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {            @Override            public void onRefresh() {                new Thread(new Runnable() {                    @Override                    public void run() {                        try {                            Thread.sleep(2000);                        } catch (InterruptedException e) {                            e.printStackTrace();                        }                        runOnUiThread(new Runnable() {                            @Override                            public void run() {                                swipeRefreshLayout.setRefreshing(false);                            }                        });                    }                }).start();            }        });

首先获取SwipeRefreshLayout实例,然后设置下拉刷新进度条的颜色,最后设置下拉刷新监听。在下拉刷新的时候我们开启一个子线程休眠2秒,然后调用setRefreshing(false)方法隐藏刷新进度条,注意我们是在主线程中调用的setRefreshing(false)方法,不然你懂得。
这里写图片描述

0 0
原创粉丝点击