效果图:
git链接:https://github.com/BelongsH/RedBook
大概介绍一下项目里面的一些知识点:
- 动态更改ViewPager的高度
- RecyclerView瀑布流的处理
- RecyclerView多type的处理
如何动态的去修改ViewPager的高度?
要动态的修改ViewPager的高度,首先需要知道ViewPager中每一个Item的高度。那么怎么确定高度呢?在开发中,一般服务端会把图片的宽度和高度通过api传给我们, 如果没有的话,我们也可以通过图片加载框架获取到图片本身的宽和高。
假设这个时候,服务端传给我们这样的数据,我们就可以知道图片的宽和高。因为宽度是充满全屏不变的。然后我们拿图片的原始宽度/屏幕的宽度=缩放比率。通过这个缩放比率,就可以知道图片的高度。然后把它封装到一个数据结构中,方便使用。
public class PictureSize {
private int originalHeight;
private int originalWidth;
private float scale;
private int scaleHeight;
private int scaleWidth;
public static PictureSize caculatePictureSize(int originalHeight, int originalWidth, int screenWidth) {
PictureSize pictureSize = new PictureSize();
pictureSize.originalHeight = originalHeight;
pictureSize.originalWidth = originalWidth;
pictureSize.scale = (screenWidth + 0f) / originalWidth;
pictureSize.scaleHeight = (int) (originalHeight * pictureSize.scale);
pictureSize.scaleWidth = screenWidth;
return pictureSize;
}
}
这样的话,我们可以计算出ViewPage中的每一个item的高度。那么现在需要处理的就是滑动的距离和图片高度缩放的问题。首先我们需要获取到ViewPage的滑动比率(是指滑动距离相对整个屏幕的百分比)。通过setPageTransformer的方法就可以获取到一个position,这个position是相对View的一个的滑动比率。然后用这个滑动比率*item之间的高度差,就可以计算出滑动的高度值。
holder1.vpHeadDelegate.setPageTransformer(true, new ViewPager.PageTransformer() {
@Override
public void transformPage(View page, float position) {
if (position > 0 && position <= 1) {
int badgePosition = (int) (page.getX() / screenWidth) - 1;
PictureSize offsetModel = mPictureSizes.get(String.valueOf(badgePosition + 1));
if (offsetModel == null) return;
PictureSize nowModel = mPictureSizes.get(String.valueOf(badgePosition));
float disHeight = (offsetModel.getScaleHeight() - nowModel.getScaleHeight()) * (1 - position);
LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) holder1.vpHeadDelegate.getLayoutParams();
params.width = nowModel.getScaleWidth();
params.height = (int) (nowModel.getScaleHeight() + disHeight);
holder1.vpHeadDelegate.setLayoutParams(params);
holder1.vpHeadDelegate.requestLayout();
}
}
});
这样的话,我们就完成了,动态更改ViewPager的高度。
RecyclerView瀑布流的处理
使用RecyclerView来处理瀑布流的话,是非常easy的事情.通过
RecyclerView.LayoutManager layoutManager = new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL);
rvMain.setLayoutManager(layoutManager);
然后动态的去计算每一个item的高度
ViewHolder viewHolder = (ViewHolder) holder;
NoteModel itemModel = (NoteModel) items.get(position);
PictureModel model = itemModel.pictures.get(0);
LinearLayout.LayoutParams layoutParams = (LinearLayout.LayoutParams) viewHolder.ivContentImage.getLayoutParams();
float halfWidth = (ScreenUtils.getScreenWidth(holder.itemView.getContext()) - 60) / 2;
layoutParams.width = (int) halfWidth;
PictureSize pictureSize = PictureSize.caculatePictureSize(model.height, model.width, (int) halfWidth);
layoutParams.height = pictureSize.getScaleHeight();
viewHolder.ivContentImage.setLayoutParams(layoutParams);
viewHolder.tvNoteDes.setText(itemModel.desc);
viewHolder.tvNoteTitle.setText(itemModel.title);
viewHolder.tvUserName.setText(itemModel.user.nickname);
viewHolder.tvNoteTitle.setText(itemModel.title);
StaggeredGridLayoutManager.LayoutParams params = (StaggeredGridLayoutManager.LayoutParams) viewHolder.itemView.getLayoutParams();
params.setMargins(15, 15, 15, 15);
holder.itemView.setLayoutParams(params);
Glide.with(holder.itemView.getContext()).load(model.url).centerCrop().diskCacheStrategy(DiskCacheStrategy.ALL).into(viewHolder.ivContentImage);
需要注意的是,在StaggeredGridLayoutManager需要让item全屏的话,可以这样:
HeadViewHolder headViewHolder = new HeadViewHolder(LayoutInflater.from(parent.getContext()).inflate(R.layout.item_note_head, parent, false));
StaggeredGridLayoutManager.LayoutParams layoutParams = new StaggeredGridLayoutManager.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);
layoutParams.setFullSpan(true);
headViewHolder.itemView.setLayoutParams(layoutParams);
screenWidth = (ScreenUtils.getScreenWidth(parent.getContext()) + 0f);
RecyclerView多type的处理
在RecyclerView.Adapter 中处理多type的话,会让代码变得臃肿,而且不易协作开发。比如
public class NoteAdapter extends RecyclerView.Adapter {
final int VIEW_TYPE_ACCESS_0 = 0;
final int VIEW_TYPE_ACCESS_1 = 1;
final int VIEW_TYPE_ACCESS_2 = 2;
final int VIEW_TYPE_ACCESS_3 = 3;
List<Accessory> items;
@Override public int getItemViewType(int position) {
Accessory accessory = items.get(postion);
if (position==0){
return VIEW_TYPE_ACCESS_0;
} else if(position==1) {
return VIEW_TYPE_ACCESS_1;
}else if(position==2) {
return VIEW_TYPE_ACCESS_2;
}else {
return VIEW_TYPE_ACCESS_3;
}
}
@Override public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
if (VIEW_TYPE_ACCESS_0 == viewType){
return new ViewHolder1(inflater.inflate(R.layout.item_1, parent));
} else if(VIEW_TYPE_ACCESS_1==viewType) {
return new ViewHolder2 (inflater.inflate(R.layout.ietm_2,parent)):
}else if(VIEW_TYPE_ACCESS_2==viewType) {
return new ViewHolder2 (inflater.inflate(R.layout.ietm_3,parent)):
}else if(VIEW_TYPE_ACCESS_3==viewType) {
return new ViewHolder2 (inflater.inflate(R.layout.ietm_4,parent)):
}
}
}
这样的话,所有的代码都在一个类中,代码会变得越来越臃肿。不易维护。而且协作开发问题也是非常的大,(多人操作同一文件)我们可以通过给Adapter设置一个代理,由它来完成所需要的操作。下面是对这个代理的抽象
public abstract class AdapterDelegate<T> {
protected abstract boolean isForViewType(@NonNull T items, int position);
@NonNull abstract protected RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent);
protected abstract void onBindViewHolder(@NonNull T items, int position,
@NonNull RecyclerView.ViewHolder holder, @NonNull List<Object> payloads);
protected void onViewRecycled(@NonNull RecyclerView.ViewHolder viewHolder) {}
protected boolean onFailedToRecycleView(@NonNull RecyclerView.ViewHolder holder) {
return false;
}
protected void onViewAttachedToWindow(@NonNull RecyclerView.ViewHolder holder) {}
protected void onViewDetachedFromWindow(RecyclerView.ViewHolder holder) {}
}
然后我们将自己的核心代理继承并实现这个基类,在isForViewType中来判断当前的position是不是我们需要处理的Item,然后在onCreateViewHolder>onBindViewHolder。
public class ContentDelegate extends AdapterDelegate<List<HomeModel>> {
@Override
protected boolean isForViewType(@NonNull List<HomeModel> items, int position) {
return items.get(position) instanceof NoteModel;
}
@NonNull
@Override
protected RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent) {
View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_note_notes, parent, false);
return new ViewHolder(view);
}
@Override
protected void onBindViewHolder(@NonNull List<HomeModel> items, int position, @NonNull RecyclerView.ViewHolder holder, @NonNull List<Object> payloads) {
ViewHolder viewHolder = (ViewHolder) holder;
NoteModel itemModel = (NoteModel) items.get(position);
PictureModel model = itemModel.pictures.get(0);
LinearLayout.LayoutParams layoutParams = (LinearLayout.LayoutParams) viewHolder.ivContentImage.getLayoutParams();
float halfWidth = (ScreenUtils.getScreenWidth(holder.itemView.getContext()) - 60) / 2;
layoutParams.width = (int) halfWidth;
PictureSize pictureSize = PictureSize.caculatePictureSize(model.height, model.width, (int) halfWidth);
layoutParams.height = pictureSize.getScaleHeight();
viewHolder.ivContentImage.setLayoutParams(layoutParams);
viewHolder.tvNoteDes.setText(itemModel.desc);
viewHolder.tvNoteTitle.setText(itemModel.title);
viewHolder.tvUserName.setText(itemModel.user.nickname);
viewHolder.tvNoteTitle.setText(itemModel.title);
StaggeredGridLayoutManager.LayoutParams params = (StaggeredGridLayoutManager.LayoutParams) viewHolder.itemView.getLayoutParams();
params.setMargins(15, 15, 15, 15);
holder.itemView.setLayoutParams(params);
Glide.with(holder.itemView.getContext()).load(model.url).centerCrop().diskCacheStrategy(DiskCacheStrategy.ALL).into(viewHolder.ivContentImage);
Glide.with(viewHolder.ivContentImage.getContext()).load(itemModel.user.images).override(pictureSize.getScaleWidth(), pictureSize.getScaleHeight()).diskCacheStrategy(DiskCacheStrategy.ALL).bitmapTransform(new CropCircleTransformation(viewHolder.ivUserHead.getContext())).placeholder(R.drawable.ic_default_head).into(viewHolder.ivUserHead);
}
}
而这些核心代理会在AdapterDelegatesManager中被添加到AdapterDelegatesManager中,进行判断当前的逻辑,所以你需要做的就是继承AbsDelegationAdapter,然后,将自己的多type添加进去即可。
public class HomeAdapter extends AbsDelegationAdapter<List<HomeModel>> {
private List<HomeModel> mDatas;
public HomeAdapter(List<HomeModel> datas) {
super();
setItems(datas);
this.mDatas = datas;
this.delegatesManager.addDelegate(new HeadDelegate());
this.delegatesManager.addDelegate(new ContentDelegate());
this.delegatesManager.addDelegate(new CommentDelegate());
}
@Override
public int getItemCount() {
return mDatas.size();
}
}
关于多type的更多介绍:
http://hannesdorfmann.com/android/adapter-delegates
https://github.com/BelongsH/RedBook