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

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/simon_yuyu/article/details/50924870

转载请声明出处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>

好了,接下来,看看效果!
查看大图效果可以左右滑动
瀑布流效果
仅供刚入门的同学参考,望大神嘴下留人!!!

展开阅读全文

没有更多推荐了,返回首页