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)方法,不然你懂得。
- Snackbar、CoordinatorLayout、CardView、AppBarLayout
- CardView、CoordinatorLayout
- Android CoordinatorLayout + AppBarLayout
- CoordinatorLayout 之 AppBarLayout
- CoordinatorLayout结合AppBarLayout
- CollapsingToolbarLayout / AppBarLayout / CoordinatorLayout / FloatingActionB
- AppBarLayout,CoordinatorLayout常用属性
- CoordinatorLayout+AppBarLayout的使用
- 初涉CoordinatorLayout,AppBarLayout,CollapsingToolbarLayout
- CoordinatorLayout,AppBarLayout, NestedScrollView
- CoordinatorLayout + AppBarLayout + ToolBar
- CoordinatorLayout + AppBarLayout+GridView
- CoordinatorLayout&AppBarLayout&CollapsingToolbarLayout组合
- AppBarLayout&CoordinatorLayout&Behavior
- CoordinatorLayout+AppBarLayout+appbar_scrolling_view_behavior
- AppBarLayout、CoordinatorLayout、CollapsingToolbarLayout、NestedScrollView
- CoordinatorLayout+AppBarLayout实现联动
- CoordinatorLayout +AppBarLayout(续)
- BZOJ 1045 [HAOI2008] 糖果传递
- 读书笔记《Effective C++》条款05:了解C++默默编写并调用哪些函数
- java复习——值传递机制
- Harris角点检测
- ECMAScript垃圾回收机制及性能提升
- Snackbar、CoordinatorLayout、CardView、AppBarLayout
- 2017最新python教程老男孩Python14期视频教程下载
- layer 动态加载select 失效
- 零基础入门深度学习(4)
- odoo10 工作流属性介绍
- ofbiz中定时任务的一个重复执行的问题
- 序
- 在网站内建立地图(百度地图)
- Python基本语法