可折叠的视图+RecyclerView以及下拉刷新
- 安卓6.0出来已经很长时间,我们接下来要说的控件就是6.0的新特性。现在市面上很多APP都已经采用了类似的样式。由于图片太大,就不上效果图了。喜欢的同学可以下载demo运行下看看。
废话就不多说了,直接说如何实现的。
- 首先需要添加依赖,如下所示:
在项目对应的build.gradle中添加以下配置
- 首先需要添加依赖,如下所示:
dependencies {
compile 'com.android.support:appcompat-v7:23.1.1'
compile 'com.android.support:design:23.1.0'
}
- 因为十分简单,都是使用的谷歌原生的东西,所以就不啰嗦了。
<?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:layout_width="match_parent"
android:layout_height="350dp">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsingToolbarLayout"
android:layout_width="match_parent"
android:layout_height="350dp"
app:contentScrim="#30469b"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:expandedTitleMarginStart="14dp">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@mipmap/a"/>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="parallax" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
**<include layout="@layout/content_main" />**
</android.support.design.widget.CoordinatorLayout>
- 在Activity中找到布局然后进行简单的设置。
CollapsingToolbarLayout collapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsingToolbarLayout);
//设置title的信息
collapsingToolbarLayout.setTitle("可折叠的View");
//设置展开后title的颜色
collapsingToolbarLayout.setExpandedTitleColor(Color.GREEN);
//设置收缩后titile的颜色
collapsingToolbarLayout.setCollapsedTitleTextColor(Color.RED);
4.OK到这里,可折叠的控件就介绍完毕了,另外附上一份属性参数介绍。
RecyclerView以及下拉刷新
在这里先介绍一个谷歌自己的下拉刷新SwipeRefreshLayout,是在v4包下的。我们今天使用的就是这个东东。
- 同样直接上代码,首先看布局文件,RecyclerView很简单和ListView相似
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.SwipeRefreshLayout 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/refresh_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:context="com.sunshine.test.MainActivity"
tools:showIn="@layout/app_bar_main">
<android.support.v7.widget.RecyclerView
android:id="@+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v7.widget.RecyclerView>
</android.support.v4.widget.SwipeRefreshLayout>
- 和其他布局使用方式都一样,首先我们要在Activitiy中找到控件。还有一些简单的使用,因为很简单我就不一一介绍了,看代码吧。如下:
recyclerView = (RecyclerView) findViewById(R.id.recycler_view);
final SwipeRefreshLayout refreshLayout = (SwipeRefreshLayout) findViewById(R.id.refresh_layout);
//设置下拉刷新的样式
refreshLayout.setColorSchemeResources(android.R.color.holo_blue_light, android.R.color.holo_red_light, android.R.color.holo_orange_light, android.R.color.holo_green_light);
//下拉刷新的监听
refreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
@Override
public void onRefresh() {
new Thread(new Runnable() {
@Override
public void run() {
try {
Thread.sleep(5000);
runOnUiThread(new Runnable() {
@Override
public void run() {
//隐藏下拉刷新
refreshLayout.setRefreshing(false);
Toast.makeText(MainActivity.this,"已经是最新了",Toast.LENGTH_SHORT).show();
}
});
} catch (InterruptedException e) {
e.printStackTrace();
}
}
}).start();
}
});
- 下拉刷新很简单,就是一个回调方法,下面我们主要看RecyclerView的使用,与ListView很相似。如下:
LinearLayoutManager linearLayoutManager = new LinearLayoutManager(this, LinearLayoutManager.VERTICAL,false);
//设置布局管理器
recyclerView.setLayoutManager(linearLayoutManager);
//设置适配器
RecyclerAdapter recyclerAdapter = new RecyclerAdapter(this, 1, dataBeanList);
recyclerView.setAdapter(recyclerAdapter);
看到这里的同学们是不是感觉到,使用的方法很有印象,不错和ListView没有区别,多了一个布局管理器的东东。这就是它的强大之处,布局管理器有三个(LinearLayoutManager,GridLayoutManager,StaggeredGridLayoutManager),前两个我们都经常用到,第三个是比较炫酷的瀑布流管理器,实用起来也非常方便,如上面的代码一样,直接使用即可。
- RecyclerAdapter的实现,因为RecyclerView没有item的点击事件的,所以只能我们自己写接口实现。下面是我自己写的,供大家参考。
package com.sunshine.test.adapter;
import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
import com.sunshine.test.R;
import com.sunshine.test.bean.DataBean;
import com.sunshine.test.inter.MyItemListener;
import java.util.List;
/**
* RecyclerView的适配器
* Created by Sunshine on 2016/5/23.
*/
public class RecyclerAdapter extends RecyclerView.Adapter<RecyclerAdapter.ViewHolder>{
private Context context;
private List<DataBean> dataBeanList;
private int style = 0;
private MyItemListener myItemListener;
public RecyclerAdapter(Context context,int style,List<DataBean> dataBeanList){
this.context = context;
this.dataBeanList = dataBeanList;
this.style = style;
}
@Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
//每一个条目创建的回调
View view = null;
if (style==0){
view = View.inflate(context, R.layout.item_grid, null);
}else {
view = View.inflate(context, R.layout.item_list, null);
}
return new ViewHolder(view,myItemListener);
}
@Override
public void onBindViewHolder(ViewHolder holder, int position) {
//数据绑定条目的回调
DataBean dataBean = dataBeanList.get(position);
holder.setData(dataBean);
}
public void setOnItemListener(MyItemListener myItemListener){
this.myItemListener = myItemListener;
}
@Override
public int getItemCount() {
//数据的个数
if (dataBeanList!=null){
return dataBeanList.size();
}
return 0;
}
public class ViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener {
public ImageView ivIcon;
public TextView tvName;
private MyItemListener myItemListener;
public ViewHolder(View itemView,MyItemListener myItemListener) {
super(itemView);
ivIcon = (ImageView) itemView.findViewById(R.id.iv_icon);
tvName = (TextView) itemView.findViewById(R.id.tv_name);
this.myItemListener = myItemListener;
itemView.setOnClickListener(this);
}
public void setData(DataBean dataBean) {
ivIcon.setImageResource(dataBean.ivIcon);
tvName.setText(dataBean.tvName);
}
@Override
public void onClick(View v) {
if (myItemListener!=null){
myItemListener.onItemClick(v,getPosition());
}
}
}
}