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;
}
}
最终效果图如下:
http://pan.baidu.com/s/1hrZvsdY
提取码:ggrp