一、简介
Android5.0 v7扩展包之RecyclerView
RecyclerView架构,提供了一种插拔式的体验,高度的解耦,异常的灵活,通过设置它提供的不同LayoutManager,ItemDecoration , ItemAnimator实现令人瞠目的效果。
二、简单实现步骤
1.添加依赖
compile 'com.android.support:recyclerview-v7:25.3.1'
2.布局里面的引用
<android.support.v7.widget.RecyclerView
android:id="@+id/id_recyclerview"
android:layout_width="match_parent"
android:layout_height="match_parent" />
3.代码的实现
package com.example.administrator.mystudydemo;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.DividerItemDecoration;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import com.example.administrator.mystudydemo.adapter.SimpleAdapter;
import java.util.ArrayList;
public class MainActivity extends AppCompatActivity {
private RecyclerView recyclerView;
private ArrayList<String> mDatas;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initData();
}
private void initData() {
mDatas = new ArrayList<String>();
for (int i = 0; i < 70; i++) {
mDatas.add("这是第几个Item?" + i);
}
initView();
}
private void initView() {
recyclerView = (RecyclerView) findViewById(R.id.id_recyclerview);
SimpleAdapter SimpleAdapter = new SimpleAdapter(MainActivity.this, mDatas);
recyclerView.setLayoutManager(new LinearLayoutManager(this));
//添加分割线
recyclerView.addItemDecoration(new DividerItemDecoration(MainActivity.this, DividerItemDecoration.VERTICAL));
recyclerView.setAdapter(SimpleAdapter);
}
}
package com.example.administrator.mystudydemo.adapter;
import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ListView;
import android.widget.TextView;
import com.example.administrator.mystudydemo.R;
import java.util.ArrayList;
/**
* Created by Administrator on 2017/4/25.
*/
public class SimpleAdapter extends RecyclerView.Adapter<SimpleAdapter.MyViewHolder> {
private Context mContext;
private ArrayList<String> mDatas;
public SimpleAdapter(Context mContext,ArrayList<String> mDatas) {
this.mContext=mContext;
this.mDatas=mDatas;
}
@Override
public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
MyViewHolder holder = new MyViewHolder(LayoutInflater.from(mContext).inflate(R.layout.item_simple, parent, false));
return holder;
}
@Override
public void onBindViewHolder(MyViewHolder holder, int position) {
holder.tv.setText(mDatas.get(position));
}
@Override
public int getItemCount() {
return mDatas.size();
}
class MyViewHolder extends RecyclerView.ViewHolder {
private TextView tv;
public MyViewHolder(View itemView) {
super(itemView);
tv= (TextView) itemView.findViewById(R.id.tv);
}
}
}
效果图
详解
1.关于分割线
//添加自定义的分割线 传递ItemDecoration(抽象类) 可以指定方向
recyclerView.addItemDecoration(new DividerItemDecoration(MainActivity.this, DividerItemDecoration.VERTICAL));
怎么修改系统默认的分割线:
1.在stytles.xml(系统主题)文件中添加 <item name="android:listDivider">@drawable/divider_bg</item>
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
<item name="android:listDivider">@drawable/divider_bg</item>
</style>
</resources>
2.自己写个drawable即可
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<gradient
android:centerColor="#ff00ff00"
android:endColor="#ff0000ff"
android:startColor="#ffff0000"
android:type="linear" />
<size android:height="4dp"/>
</shape>
效果:
开发中实现
修改ItemView的Margin+Background 这种是最简单的方法
关于万能分割线(贴出来网站,自己可以研究)
http://blog.youkuaiyun.com/chen413203144/article/details/52662378
2.recyclerView.setLayoutManager详解
RecyclerView提供了三种内置的LayoutManager:
LinearLayoutManager:线性布局,横向或者纵向滑动列表:
LinearLayoutManager layoutManager=new LinearLayoutManager(MainActivity.this);
//直接指定滑到第几个
layoutManager.scrollToPosition(10);
//指定方向 默认是竖的
layoutManager.setOrientation(OrientationHelper.HORIZONTAL);
recyclerView.setLayoutManager(layoutManager);
GridLayoutManager:表格布局
//指定个数
GridLayoutManager layoutManager =new GridLayoutManager(mContext,2);
layoutManager.setOrientation(OrientationHelper.HORIZONTAL);
StaggeredGridLayoutManager:流式布局
//指定个数和方向
StaggeredGridLayoutManager layoutManager=new StaggeredGridLayoutManager(3,OrientationHelper.VERTICAL);
recyclerView.setLayoutManager(layoutManager);
当然除了上面的三种内部布局之外,我们还可以继承RecyclerView.LayoutManager来实现一个自定义的LayoutManager。
3.仿京东商品列表转换(横向转换成竖向的)
package com.example.administrator.mystudydemo;
import android.app.Activity;
import android.os.Bundle;
import android.support.v7.widget.GridLayoutManager;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.View;
import android.widget.ImageButton;
import com.example.administrator.mystudydemo.adapter.RecyclerViewAdapter;
import com.example.administrator.mystudydemo.bean.ImageBean;
import java.util.ArrayList;
/**
* Created by Administrator on 2017/4/27.
*/
public class SwitchingActivity extends Activity implements View.OnClickListener {
private RecyclerView rv;
private ImageButton btnChange;
//切换标示,默认显示线性布局
private boolean isLinearLayout = true;
private RecyclerViewAdapter recyclerViewAdapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.content_main);
initView();
initData();
}
private void initView() {
rv = (RecyclerView) findViewById(R.id.recyclerView);
//切换按钮
btnChange = (ImageButton) findViewById(R.id.btn_change);
btnChange.setOnClickListener(this);
}
private void initData() {
ImageBean imageBean;
ArrayList<ImageBean> datas=new ArrayList<ImageBean>();
for (int i=0;i <20;i++){
imageBean=new ImageBean();
imageBean.setImageUrl(ImageBean.imageUrls[i]);
imageBean.setTitle("我是美女"+i);
imageBean.setDesc("别说话 请看图"+i);
datas.add(imageBean);
}
recyclerViewAdapter = new RecyclerViewAdapter(this,datas);
rv.setLayoutManager(new LinearLayoutManager(this));
rv.setAdapter(recyclerViewAdapter);
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.btn_change:
//切换
if(isLinearLayout) {
//切换成网格布局
recyclerViewAdapter.setType(1);
rv.setLayoutManager(new GridLayoutManager(this, 2));
recyclerViewAdapter.notifyDataSetChanged();
isLinearLayout = false;
} else {
//切换成垂直线性布局
recyclerViewAdapter.setType(0);
rv.setLayoutManager(new LinearLayoutManager(this));
recyclerViewAdapter.notifyDataSetChanged();
//startAnimation(R.anim.zoom_in);
isLinearLayout = true;
}
break;
default:
break;
}
}
}
package com.example.administrator.mystudydemo.adapter;
import android.content.Context;
import android.graphics.Bitmap;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
import com.bumptech.glide.Glide;
import com.example.administrator.mystudydemo.R;
import com.example.administrator.mystudydemo.bean.ImageBean;
import java.util.ArrayList;
import java.util.List;
/**
* Created by Song on 2016/7/19.
*/
public class RecyclerViewAdapter extends RecyclerView.Adapter<RecyclerViewAdapter.BaseViewHolder>{
private int type = 0;
private Context mContext;
private LayoutInflater inflater;
private ArrayList<ImageBean> datas;
public RecyclerViewAdapter(Context context, ArrayList<ImageBean> datas) {
this.datas=datas;
this.mContext = context;
inflater = LayoutInflater.from(context);
}
@Override
public BaseViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View rootView;
if(viewType == 0) {
rootView = inflater.inflate(R.layout.layout_linear,null,false);
LinearViewHolder linearViewHolder = new LinearViewHolder(rootView);
return linearViewHolder;
} else {
rootView = inflater.inflate(R.layout.layout_grid,null,false);
GridViewHolder gridViewHolder = new GridViewHolder(rootView);
return gridViewHolder;
}
}
@Override
public void onBindViewHolder(BaseViewHolder holder, int position) {
if(type == 0) {
LinearViewHolder linearViewHolder = (LinearViewHolder)holder;
linearViewHolder.tvName.setText(datas.get(position).getTitle());
linearViewHolder.tvDesc.setText(datas.get(position).getDesc());
String url=datas.get(position).getImageUrl();
Glide.with(mContext).load(url).asBitmap().into(linearViewHolder.ivPhoto);
} else {
GridViewHolder gridViewHolder = (GridViewHolder)holder;
gridViewHolder.tvName.setText(datas.get(position).getTitle());
String url=datas.get(position).getImageUrl();
Glide.with(mContext).load(url).asBitmap().into(gridViewHolder.ivPhoto);
}
}
@Override
public int getItemCount() {
return datas.size();
}
@Override
public int getItemViewType(int position) {
return type;
}
public void setType(int type) {
this.type = type;
}
public static class BaseViewHolder extends RecyclerView.ViewHolder{
public BaseViewHolder(View itemView) {
super(itemView);
}
}
public static class LinearViewHolder extends BaseViewHolder {
private TextView tvName;
private TextView tvDesc;
private ImageView ivPhoto;
public LinearViewHolder(View itemView) {
super(itemView);
tvName = (TextView) itemView.findViewById(R.id.tv_name);
tvDesc = (TextView) itemView.findViewById(R.id.tv_desc);
ivPhoto= (ImageView) itemView.findViewById(R.id.iv_photo);
}
}
public static class GridViewHolder extends BaseViewHolder {
private TextView tvName;
private ImageView ivPhoto;
public GridViewHolder(View itemView) {
super(itemView);
tvName = (TextView) itemView.findViewById(R.id.tv_name);
ivPhoto= (ImageView) itemView.findViewById(R.id.iv_photo);
}
}
}
效果图(没有找到合适图片,导致图片过大,显示丑陋,希望多多包涵)