1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > RecyclerView瀑布流的形式利用Gilde加载网络图片

RecyclerView瀑布流的形式利用Gilde加载网络图片

时间:2023-06-10 13:29:49

相关推荐

RecyclerView瀑布流的形式利用Gilde加载网络图片

RecyclerView的简单介绍

RecyclerView 是在Android5.0之后推出的,是一个比ListView更加灵活更加高效的适配器类型控件。但是RecyclerView不同于其他类型的适配器,它还需要一个LayoutManager进行页面控制展示。RecyclerView提供了三种布局管理器:

1、LinearLayoutManager:线性布局管理器,支持水平和垂直效果。

2、GridLayoutManager:网格布局管理器,支持水平和垂直效果。

3、StaggeredGridLayoutManager:分布型管理器,瀑布流效果

效果图1

效果图2

单独点击一张图片的效果!

1,先创建一个class 把所有图片地址放进去

package com.example.bx.recyclerviewdemo.util;/*** Created by kuangxiaoguo on /5/6.*/public class ImageUtil {public final static String[] imageUrls = new String[]{"https://img-/uploads/09/01/1378037235_3453.jpg","https://img-/uploads/09/01/1378037235_7476.jpg","https://img-/uploads/09/01/1378037235_9280.jpg","https://img-/uploads/09/01/1378037234_3539.jpg","https://img-/uploads/09/01/1378037234_6318.jpg","https://img-/uploads/09/01/1378037194_2965.jpg","https://img-/uploads/09/01/1378037193_1687.jpg","https://img-/uploads/09/01/1378037193_1286.jpg","https://img-/uploads/09/01/1378037192_8379.jpg","https://img-/uploads/09/01/1378037178_9374.jpg","https://img-/uploads/09/01/1378037177_1254.jpg","https://img-/uploads/09/01/1378037177_6203.jpg","https://img-/uploads/09/01/1378037152_6352.jpg","https://img-/uploads/09/01/1378037151_9565.jpg","https://img-/uploads/09/01/1378037151_7904.jpg","https://img-/uploads/09/01/1378037148_7104.jpg","https://img-/uploads/09/01/1378037129_8825.jpg","https://img-/uploads/09/01/1378037128_5291.jpg","https://img-/uploads/09/01/1378037128_3531.jpg","https://img-/uploads/09/01/1378037127_1085.jpg","https://img-/uploads/09/01/1378037095_7515.jpg","https://img-/uploads/09/01/1378037094_8001.jpg","https://img-/uploads/09/01/1378037093_7168.jpg","https://img-/uploads/09/01/1378037091_4950.jpg","https://img-/uploads/08/31/1377949643_6410.jpg","https://img-/uploads/08/31/1377949642_6939.jpg","https://img-/uploads/08/31/1377949630_4505.jpg","https://img-/uploads/08/31/1377949630_4593.jpg","https://img-/uploads/08/31/1377949629_7309.jpg","https://img-/uploads/08/31/1377949629_8247.jpg",}

2,在mainActivity 中把Recyclerview 设置成瀑布流的形式,在利用Gilde把加载的图片放进瀑布流中,代码中有注释 我就不细说

package com.example.bx.recyclerviewdemo;import android.app.Activity;import android.content.Context;import android.content.Intent;import android.support.v4.app.ActivityCompat;import android.support.v4.app.ActivityOptionsCompat;import android.support.v7.app.AppCompatActivity;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.bumptech.glide.Glide;import com.example.bx.recyclerviewdemo.util.ImageUtil;import java.util.ArrayList;import java.util.List;public class MainActivity extends AppCompatActivity {private RecyclerView mRecyclerView;String[] imageArray;private List<Integer> mHeight;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);//初始化RecyclerViewmRecyclerView= (RecyclerView) findViewById(R.id.recyclerView);init();}private void init() {//获取imageutil中的集合 放在imagearray中imageArray= ImageUtil.imageUrls;//2竖行的布局 就像两个并排的listviewmRecyclerView.setLayoutManager(new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL));mRecyclerView.setAdapter(new WaterFallAdapter(this));//设置分割线mRecyclerView.addItemDecoration(new StoreItemDecoration(30,30));//随机设置图片的宽高getRandomHeight();}public void getRandomHeight() {//获取所有图片mHeight=new ArrayList<>();for (int i = 0; i <= imageArray.length; i++) {//依次给给图片设置宽高mHeight.add((int)(300+Math.random()*400));}}public class WaterFallAdapter extends RecyclerView.Adapter<WaterFallAdapter.ViewHolder>{//蒋值传进来private Context mContext;public WaterFallAdapter(Context content){this.mContext=content;}@Overridepublic ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {//获取item_layout的布局View view= LayoutInflater.from(mContext).inflate(R.layout.item_layout,parent,false);return new ViewHolder(view);}@Overridepublic void onBindViewHolder(ViewHolder holder, int position) {LinearLayout.LayoutParams params= (LinearLayout.LayoutParams) holder.imageview.getLayoutParams();//设置高params.height=mHeight.get(position);holder.imageview.setLayoutParams(params);//用glide加载网络图片 并放入imageview中Glide.with(MainActivity.this).load(imageArray[position]).into(holder.imageview);//调用setItemListener 传入三个参数setItemListener(holder,position,imageArray[position]);}//设置图片的点击事件private void setItemListener(final ViewHolder holder, final int position, final String url){//如果holder为空 return;if(holder==null){return;}//每个图片的点击事件holder.imageview.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View view) {int[] location = new int[2];holder.imageview.getLocationOnScreen(location);Intent it=new Intent(MainActivity.this,ImageActivity.class);String optionName = "transition_image";//获取图片的宽高int width = holder.imageview.getWidth();int height = holder.imageview.getHeight();ActivityOptionsCompat compat=ActivityOptionsCompat.makeSceneTransitionAnimation(MainActivity.this,holder.imageview,optionName);//利用Bundle蒋点击的图片的网址传递过去Bundle bundle=compat.toBundle();if(bundle!=null){bundle.putString(ImageActivity.IMAGE_TAG,url);}it.putExtras(bundle);ActivityCompat.startActivity(MainActivity.this,it,bundle);}});}@Overridepublic int getItemCount() {return imageArray.length;}public class ViewHolder extends RecyclerView.ViewHolder{ImageView imageview;public ViewHolder(View view) {super(view);imageview=(ImageView)view.findViewById(R.id.image_view);}}}}

3,给RecyclerView设置分割线

为什么要给RecyclerView设置分割线?

RecyclerView并没有支持divider这样的属性。那么怎么办,你可以给Item的布局去设置margin,当然了这种方式不够优雅,我们文章开始说了,我们可以自由的去定制它,当然我们的分割线也是可以定制的,它不像listview可以直接设置设定中界线 所以一般都给RecyclerView设置分割线

package com.example.bx.recyclerviewdemo;import android.graphics.Rect;import android.support.v7.widget.RecyclerView;import android.support.v7.widget.StaggeredGridLayoutManager;import android.view.View;/*** Created by kuangxiaoguo on /7/29.*/public class StoreItemDecoration extends RecyclerView.ItemDecoration {private int space;private int bottomSpace;public StoreItemDecoration(int space) {this.space = space;}public StoreItemDecoration(int space, int bottomSpace) {this.space = space;this.bottomSpace = bottomSpace;}@Overridepublic void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {//StaggeredGridLayoutManager随机的宽高GridLayoutManager等高等宽StaggeredGridLayoutManager.LayoutParams params = (StaggeredGridLayoutManager.LayoutParams) view.getLayoutParams();int spanIndex = params.getSpanIndex();if (spanIndex == 0) {outRect.left =30;} else {outRect.left = space;}outRect.bottom = bottomSpace;}}

4,在第二个activity中加载第一个activity点击的图片

package com.example.bx.recyclerviewdemo;import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import android.widget.ImageView;import com.bumptech.glide.Glide;public class ImageActivity extends AppCompatActivity {public static final String IMAGE_TAG = "imageTag";ImageView mimageView;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_image);//设置一个ImageView 接受传过来的值mimageView= (ImageView) findViewById(R.id.big_image_view);Bundle bundle=getIntent().getExtras();String url=bundle.getString(IMAGE_TAG);//Glide蒋传过来的图片网址,加载出来Glide.with(this).load(url).into(mimageView);}}

xml中的代码比较简单 就不给代码了

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。