RecycleView与GridView的结合使用实现“云相册”粗略界面视图？

RecycleView与GridView的结合使用实现“云相册”粗略界面视图？

第一步：新建工程，新建一个Activity，之后分别在XML布局文件和类中代码实现以下步骤。

XML：

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:id="@+id/activity_main2"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:paddingBottom="@dimen/activity_vertical_margin"

    android:paddingLeft="@dimen/activity_horizontal_margin"

    android:paddingRight="@dimen/activity_horizontal_margin"

    android:paddingTop="@dimen/activity_vertical_margin"

tools:context="com.example.weihuan.recycleviewandgridview.Main2Activity">

 

    <android.support.v7.widget.RecyclerView

        android:id="@+id/recycleview2"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"></android.support.v7.widget.RecyclerView>

 

</RelativeLayout>

 

第二步MainActivity.java

代码如下：

 

public class Main2Activity extends AppCompatActivity {
    private RecyclerView recycleview2;
    private RecycleviewGridViewAdapter adapter;
    private List<CloudPhotosInfo> cloudPhotosInfoList;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main2);
        recycleview2 = ((RecyclerView) findViewById(R.id.recycleview2));
        initData();//初始化数据
        adapter = new RecycleviewGridViewAdapter(this,cloudPhotosInfoList);//recycleView的适配器
        recycleview2.setAdapter(adapter);
        LinearLayoutManager m = new LinearLayoutManager(this);
        recycleview2.setLayoutManager(m);//设置RecycleView的布局管理器，，必须的，不能少了
//        recycleview2.setItemAnimator();//.设置RecycleView的滑动动画

recycleview2.setItemAnimator(new DefaultItemAnimator());

//        recycleview2.addItemDecoration(new MyItemDecoration(1));
        MyItemDecoration myItemDecoration = new MyItemDecoration(10);
//        recycleview2.addItemDecoration(new DividerItemDecoration(this,DividerItemDecoration.VERTICAL_LIST));
    }
    private void initData(){//初始化一些用来演示的假数据
        String picUrl = Environment.getExternalStorageDirectory().getPath() +"/" +"temp.png";
        cloudPhotosInfoList = new ArrayList<>();//新建几个类来保存假数据：CloudPhotosMediaInfo、CloudPhotosInfo
        List<CloudPhotosMediaInfo> mediaInfoList = new ArrayList<>();
        for (int i = 0; i < 10; i++) {
            CloudPhotosMediaInfo m = new CloudPhotosMediaInfo();
            m.setPhotoAddress(picUrl);
            mediaInfoList.add(m);//第二层recycleView中子布局中的GridView需要的Adapter数据
        }
        for (int i = 0; i < 10; i++) {
            CloudPhotosInfo cloudPhotosInfo = new CloudPhotosInfo(getTime(),mediaInfoList);
            cloudPhotosInfoList.add(cloudPhotosInfo);//第一层recycleView需要的Adapter数据
        }

    }
    private String getTime(){
        return new SimpleDateFormat("yyyy-MM-dd HH:mm:SS").format(new Date(System.currentTimeMillis()));//获取当前系统的时间
    }
}

 

第三步RecycleView的子布局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">

    <TextView

        android:id="@+id/tv_time"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_marginTop="10dp"

        9android:text="2017年05月20日  15:30"/>

    <GridView

        android:id="@+id/gridview"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:horizontalSpacing="1dp"

        android:verticalSpacing="1dp"

        android:numColumns="4"></GridView>

</LinearLayout>

 

 

第四步RecycleView的适配器RecycleviewGridViewAdapter

代码如下：

public class RecycleviewGridViewAdapter extends RecyclerView.Adapter {

    private Context context;

    private List<CloudPhotosInfo> list;

    private LayoutInflater inflater;

    public RecycleviewGridViewAdapter(Context context, List<CloudPhotosInfo> list) {

        this.context = context;

        this.list  = list;

        inflater = LayoutInflater.from(context);

    }

    @Override

    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {

        View inflate = inflater.inflate(R.layout.recycleview_gridview_item, parent, false);

        ViewHolder viewHolder = new ViewHolder(inflate);

        return viewHolder;

    }

 

    @Override

    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {

        ViewHolder holder1 = (ViewHolder) holder;

        CloudPhotosInfo cloudPhotosInfo = list.get(position);

        List<CloudPhotosMediaInfo> mediaInfoList = cloudPhotosInfo.getMediaInfoList();

        holder1.tv_time.setText(cloudPhotosInfo.getTime());

        GridViewAdapter adapter = new GridViewAdapter(context,mediaInfoList);//给子布局中的GridView设置适配器

        holder1.gridview.setAdapter(adapter);

    }

 

    @Override

    public int getItemCount() {

        return list.size();

    }

    class ViewHolder extends RecyclerView.ViewHolder{

        TextView tv_time;

        GridView gridview;

 

        public ViewHolder(View itemView) {

            super(itemView);

            tv_time = ((TextView) itemView.findViewById(R.id.tv_time));

            gridview = ((GridView) itemView.findViewById(R.id.gridview));

        }

    }

}

 

第五步RecycleView子布局中GridView的子布局XML代码如下：

 

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

     android:layout_width="match_parent"

    android:layout_height="match_parent">

    <ImageView

        android:id="@+id/iv_content"

        android:layout_width="match_parent"

        android:layout_height="100dp"/>

    <ImageView

        android:id="@+id/iv_check"

        android:layout_width="20dp"

        android:layout_height="20dp"

        android:layout_marginRight="10dp"

        android:layout_marginTop="10dp"

        android:layout_alignParentRight="true"

        android:src="@mipmap/ic_launcher"

        />

    <TextView

        android:id="@+id/tv_duration"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignParentBottom="true"

        android:layout_alignParentRight="true"

        android:layout_marginBottom="10dp"

        android:layout_marginRight="10dp"

        android:text="0:20"/>

</RelativeLayout>

 

第六步RecycleView子布局中GridView的适配器代码如下

 

public class GridViewAdapter extends BaseAdapter{
    private Context context;
    private List<CloudPhotosMediaInfo> list;
    private LayoutInflater inflater;
    public GridViewAdapter(Context context, List<CloudPhotosMediaInfo> list) {
        this.context = context;
        this.list  = list;
        inflater = LayoutInflater.from(context);
    }

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

    @Override
    public Object getItem(int position) {
        return list.get(position);
    }

    @Override
    public long getItemId(int position) {
        return 0;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ViewHolder holder = null;
        if (convertView == null){
            convertView = inflater.inflate(R.layout.gridview_item, parent, false);
            holder = new ViewHolder();
            holder.iv_content  = ((ImageView) convertView.findViewById(R.id.iv_content));
            holder.iv_check = ((ImageView) convertView.findViewById(R.id.iv_check));
            holder.tv_duration =  ((TextView) convertView.findViewById(R.id.tv_duration));
            convertView.setTag(holder);
        }else{
            holder = (ViewHolder) convertView.getTag();
        }
        CloudPhotosMediaInfo cloudPhotosMediaInfo = list.get(position);
        String url = cloudPhotosMediaInfo.getPhotoAddress();
        DisplayMetrics dm = new DisplayMetrics();
        WindowManager windowManager = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
        int width = windowManager.getDefaultDisplay().getWidth();//获取当前手机屏幕宽度
        int height = windowManager.getDefaultDisplay().getHeight();//获取当前手机屏幕高度
        //控件所在父容器是什么样的就声明什么样的LayoutParams
        RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(holder.iv_content.getLayoutParams());
        lp.height = width/4;//因为GridView分为4列，为了好看，也设置图片的高度和图片的宽度差不多
        holder.iv_content.setLayoutParams(lp);
//        getWindowManager().getDefaultDisplay().getMetrics(dm);
        Glide.with(context).load(url).centerCrop().into(holder.iv_content);//使用GLide加载本地手机的图片
        return convertView;
    }
    class ViewHolder {
        ImageView iv_check,iv_content;
        TextView tv_duration;
    }
}

 

 

最终效果图如下：

 

DEMO下载（百度云）：

 http://pan.baidu.com/s/1hrZvsdY

提取码：ggrp