android RecyclerView 实现瀑布流带图库浏览效果

转载请声明出处http://blog.csdn.net/simon_yuyu/article/details/50924870

这是本人第一次写博客，不好的地方，望各位大神多多指教！

好了进入正题，平常大家想实现瀑布流的时候，第一想到的就是重写控件，来达到瀑布流效果，自从了解到了 RecyclerView 后，才发现实现这个效果就需要一行代码就可以搞定，是不是很惊讶，好了，先上代码来验证一下！`package com.example.administrator.stageredgriddemo;

import android.app.Activity;

import android.content.Intent;

import android.graphics.Rect;

import android.os.Bundle;

import android.support.v7.widget.RecyclerView;

import android.support.v7.widget.StaggeredGridLayoutManager;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.ImageView;

import android.widget.LinearLayout;

import com.squareup.picasso.Picasso;

import java.util.ArrayList;

public class MainActivity extends Activity {

private RecyclerView recyclerView;
private ReCycAdapter mAdapter;

private ArrayList<String> mDatas;

String[] urls = {"http://img4.duitang.com/uploads/item/201511/02/20151102130410_Mds2x.thumb.700_0.jpeg",
"http://img5.duitang.com/uploads/item/201409/13/20140913141545_E3xtA.thumb.700_0.jpeg",
"http://d.3987.com/yjyy_131018/001.jpg",
"http://img4.duitang.com/uploads/item/201411/30/20141130160518_FzGfQ.jpeg"};

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

recyclerView = (RecyclerView) this.findViewById(R.id.recyclerview);

//添加显示的图片链接
mDatas = new ArrayList<String>();
for (int i = 0; i < 30; i++) {
if (i % 4 == 0) {
mDatas.add(urls[1]);
} else if (i % 4 == 1) {
mDatas.add(urls[2]);
} else if (i % 4 == 2) {
mDatas.add(urls[3]);
} else {
mDatas.add(urls[0]);
}
}

// recyclerView.setLayoutManager(new LinearLayoutManager(this));

//设置布局为3列，垂直显示

StaggeredGridLayoutManager manager = new StaggeredGridLayoutManager(3, StaggeredGridLayoutManager.VERTICAL);

recyclerView.setLayoutManager(manager);

//设置item的间隔

SpacesItemDecoration decoration = new SpacesItemDecoration(10);

recyclerView.addItemDecoration(decoration);

recyclerView.setAdapter(new ReCycAdapter());

}

//recyclerView适配器
class ReCycAdapter extends RecyclerView.Adapter<ReCycAdapter.MyViewHolder>{

@Override
public MyViewHolder onCreateViewHolder(ViewGroup viewGroup, final int i) {
//创建视图
View view = LayoutInflater.from(getApplication()).inflate(R.layout.item_info, viewGroup, false);
MyViewHolder holder = new MyViewHolder(view);

return holder;
}

@Override
public void onBindViewHolder(MyViewHolder viewHolder, final int i) {
//控件在这做相应的处理
//点击当前item，查看大图
viewHolder.linearLayout.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//把显示图片的链接加入到list中和当前位置，传递给查看大图界面
Intent intent = new Intent(getApplication(), LookImage.class);
intent.putStringArrayListExtra("lookimages", mDatas);
intent.putExtra("lookimage_index", i);
startActivity(intent);
}
});
//加载图片
Picasso.with(getApplication()).load(mDatas.get(i)).into(viewHolder.tv);
}

@Override
public int getItemCount() {
return mDatas.size();
}

//定义控件管理
class MyViewHolder extends RecyclerView.ViewHolder {

ImageView tv;
LinearLayout linearLayout;

public MyViewHolder(View view) {
super(view);

tv = (ImageView) view.findViewById(R.id.item_text);
linearLayout = (LinearLayout)view.findViewById(R.id.item_lin);

}

}

}

public class SpacesItemDecoration extends RecyclerView.ItemDecoration {

private int space;

public SpacesItemDecoration(int space) {
this.space = space;
}

@Override
public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
//显示的界面的间隔
outRect.left = space;
outRect.right = space;
outRect.bottom = space;
if (parent.getChildPosition(view) == 0) {
//控件第一排时，让它低于正常高度
outRect.top = space;
} else if (parent.getChildPosition(view) == 2) {
//控件第三排时，让它低于正常高度，这样达到瀑布流效果
outRect.top = space + 10;
}
}
}

}

实现瀑布流后，发现RecyclerView没有点击事件，那么才能实现点击事件呢，告诉大家一个简单的方法，就是得到linearlayout控件后，获取布局控件的点击事件，在做相应操作。

接下来看根据点击单个item跳转到查看大图界面，先上代码，看注释

package com.example.administrator.stageredgriddemo;

import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

import com.squareup.picasso.Picasso;

import java.util.ArrayList;

public class LookImage extends Activity {

private Context mContext = this;
private ViewPager mPager;//左右滑动查看

private ArrayList<String> mList;
TextView textView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_look_image);

//获取传递过来的所有图片链接
mList = getIntent().getExtras().getStringArrayList("lookimages");
//获取瀑布流点击的item位置，根据点击的位置显示对应的那一张图
int index = getIntent().getExtras().getInt("lookimage_index", 0);

mPager = (ViewPager)this.findViewById(R.id.look_vpager);

textView = (TextView)this.findViewById(R.id.page_text);
LinearLayout linearLayout = (LinearLayout)this.findViewById(R.id.page_lin);
linearLayout.setAlpha(0.5f);//设置半透明

mPager.setAdapter(mPagerAdapter);
//根据点击的item位置，显示图片
mPager.setCurrentItem(index);
//显示浏览图片的位置
textView.setText((index + 1) + "/" + mList.size());
mPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

}

@Override
public void onPageSelected(int position) {
//viewpager滑动时，改变位置
textView.setText((position+1)+"/"+mList.size());
}

@Override
public void onPageScrollStateChanged(int state) {

}
});

}

/**
* viewpager显示
*/
PagerAdapter mPagerAdapter = new PagerAdapter() {

@Override
public int getCount() {
return mList.size();
}

@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}

@Override
public void destroyItem(ViewGroup container, int position, Object object) {
//container.removeViewAt(position);
//移除滑动过后的view
container.removeView((View)object);
}

@Override
public Object instantiateItem(ViewGroup container, int position) {

//将view加入到viewpager中
View view = LayoutInflater.from(mContext).inflate(R.layout.page_info, null);

ImageView imageView = (ImageView)view.findViewById(R.id.page_image);

//设置图片填充屏幕
imageView.setScaleType(ImageView.ScaleType.FIT_XY);
//加载图片
Picasso.with(mContext).load(mList.get(position)).into(imageView);
container.addView(view);
return view;

}
};

}

项目中用到的Picasso加载图片这个开源项目，大家可以百度找相应资料，接下来是布局文件

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent" tools:context=".MainActivity">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">

<android.support.v7.widget.RecyclerView
android:id="@+id/recyclerview"
android:divider="#ffff0000"
android:dividerHeight="10dp"
android:layout_width="match_parent"
android:layout_height="match_parent" />

</LinearLayout>

</LinearLayout>

activity_look_image.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.administrator.stageredgriddemo.LookImage">

<FrameLayout
android:id="@+id/page_fra"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<android.support.v4.view.ViewPager
android:id="@+id/look_vpager"
android:layout_width="match_parent"
android:layout_height="match_parent">

</android.support.v4.view.ViewPager>

<LinearLayout
android:id="@+id/page_lin"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_gravity="bottom"
android:background="#000000">

<TextView
android:id="@+id/page_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:text="1/20"
android:textColor="#fff"
android:textSize="16sp" />

</LinearLayout>

</FrameLayout>

</RelativeLayout>

page_info.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">

<ImageView
android:id="@+id/page_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:src="@drawable/a"/>

</LinearLayout>

好了，接下来，看看效果！





仅供刚入门的同学参考，望大神嘴下留人！！！