效果:
主要实现方法是通过使用RecyclerView中的GridLayoutManager,通过setSpanCount()方法,设置每行1列或每行三列。点击切换按钮后通过adapter的notifyDateSetChange方法,刷新列表,重走getItemViewType,onBindViewHolder,onCreateViewHolder的逻辑。达到切换视图的显示方式的目的。
点击切换按钮执行的方法:
private class ChangeShowTypeListener implements View.OnClickListener {
@Override
public void onClick(View v) {
if (gridLayoutManager.getSpanCount() == SPAN_COUNT_ONE) {
gridLayoutManager.setSpanCount(SPAN_COUNT_THREE);
// user_homepage_change.setImageDrawable(getResources().getDrawable(R.mipmap.homepage_show_threepic));
recyclerView.scrollToPosition(0);
// loadData(2);
} else {
gridLayoutManager.setSpanCount(SPAN_COUNT_ONE);
// user_homepage_change.setImageDrawable(getResources().getDrawable(R.mipmap.homepage_show_onepic));
recyclerView.scrollToPosition(0);
// loadData(2);
}
// ugcWebItemList.clear();
homePageAdapter.notifyItemRangeChanged(0, homePageAdapter.getItemCount());
}
}
@Override
public int getItemViewType(int position) {
// if (position == 0) return TYPE_HEADER;
int spanCount = mLayoutManager.getSpanCount();
if (spanCount == SPAN_COUNT_ONE) {
return VIEW_TYPE_ONE;
} else {
return VIEW_TYPE_THREE;
}
}
@Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View view;
/* if (viewType == TYPE_HEADER) {
view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_header_homepage, parent, false);
return new HeaderViewHolder(view);
}*/
if (viewType == VIEW_TYPE_ONE) {
view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_onepic_homepage, parent, false);
return new HomePageOnePicViewHolder(view);
} else {
view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_threepic_homepage, parent, false);
return new HomePageThreePicViewHolder(view);
}
}
@Override
public void onBindViewHolder(final ViewHolder holder, int position) {
final UserHomePageBean userHomePageItem = userHomePageBeanList.get(position);
if (holder.getItemViewType() == VIEW_TYPE_THREE) {
HomePageThreePicViewHolder homePageThreePicViewHolder = (HomePageThreePicViewHolder) holder;
//设置每张小图的宽高为屏幕宽度的1/3
ViewGroup.LayoutParams layoutParams = homePageThreePicViewHolder.imageView.getLayoutParams();
layoutParams.height = layoutParams.width = (ScreenUtils.getScreenWidth(mContext)) / 3;
//设置图片之间的间隔 homePageThreePicViewHolder.imageView.setLayoutParams(layoutParams);
if (position == 0 || position% 3 == 0) {
homePageThreePicViewHolder.itemView.setPadding(0, 0,
ScreenUtils.dp2px(mContext, 2), ScreenUtils.dp2px(mContext, 3));
} else if (position- 1 == 0 || (position- 1) % 3 == 0) {
homePageThreePicViewHolder.itemView.setPadding(ScreenUtils.dp2px(mContext, 1), 0,
ScreenUtils.dp2px(mContext, 1), ScreenUtils.dp2px(mContext, 3));
} else if ((position+ 1) % 3 == 0) {
homePageThreePicViewHolder.itemView.setPadding(ScreenUtils.dp2px(mContext, 2),
0, 0, ScreenUtils.dp2px(mContext, 3));
}
......
} else if (holder.getItemViewType() == VIEW_TYPE_ONE) {
HomePageOnePicViewHolder homePageOnePicViewHolder = (HomePageOnePicViewHolder) holder;
......
}
}
class ViewHolder extends RecyclerView.ViewHolder {
public ViewHolder(View itemView) {
super(itemView);
}
}
class HomePageOnePicViewHolder extends ViewHolder {
HomePageOnePicViewHolder(View itemView) {
super(itemView);
......
}
}
class HomePageThreePicViewHolder extends ViewHolder {
HomePageThreePicViewHolder(View itemView) {
super(itemView);
imageView = (ImageView) itemView.findViewById(R.id.homepage_image);
imageTag = (ImageView) itemView.findViewById(R.id.homepage_image_tag);
}
}
两种样式的layout:
每行3图样式:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<ImageView
android:id="@+id/homepage_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
/>
<ImageView
android:id="@+id/homepage_image_tag"
android:layout_width="25dp"
android:layout_height="20dp"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_marginRight="8dp"
android:layout_marginTop="8dp"
android:src="@mipmap/homepage_video"
/>
RelativeLayout>
每行1图样式:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/ll_root"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:id="@+id/homepage_rl_item"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ffffff"
android:orientation="vertical"
android:paddingTop="16dp">
.... 图片上面的控件....
<RelativeLayout
android:id="@+id/homepage_rl_image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/homepage_txt_content"
android:layout_marginTop="12dp">
<ImageView
android:id="@+id/homepage_image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="centerCrop" />
<TextView
android:id="@+id/homepage_image_toolong"
android:layout_width="match_parent"
android:layout_height="30dp"
android:layout_alignParentBottom="true"
android:background="#88000000"
android:gravity="center"
android:text="@string/view_full_image"
android:textColor="#ffffff"
android:textSize="12sp"
android:visibility="gone" />
<TextView
android:id="@+id/homepage_txt_count"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:background="#88000000"
android:gravity="center"
android:padding="7dp"
android:text="5P"
android:textColor="#ffffff"
android:textSize="12sp" />
RelativeLayout>
<com.gif.gifchannel.videoplayer.TextureVideoPlayer
android:id="@+id/video_player"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/homepage_txt_content"
android:layout_marginTop="12dp"
android:visibility="gone" />
<LinearLayout
android:id="@+id/ll_operate"
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_marginTop="8dp"
android:gravity="center_vertical"
android:orientation="horizontal"
android:paddingLeft="8dp"
android:paddingRight="8dp">
...图片下面的控件...
LinearLayout>
LinearLayout>
LinearLayout>