一、前言：

我们在开发中，经常遇到头像折叠效果，特别是直播软件，以前都是写死的，太Low了，今天用recycleView实现头像折叠效果：

效果图.png

1、项目依赖：

//recyclerview使用

implementation 'com.android.support:recyclerview-v7:28.0.0'

// glide的使用

implementation 'com.github.bumptech.glide:glide:4.6.1'

2、item_message_tip主布局

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

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

android:layout_width="match_parent"

android:layout_height="@dimen/dp_70"

tools:ignore="MissingConstraints"

android:gravity="center"

android:orientation="horizontal"

android:id="@+id/ll_layout"

>

android:id="@+id/ll_tip"

android:layout_width="wrap_content"

android:layout_height="@dimen/dp_40"

android:background="@drawable/round_19_f1f3f6"

android:orientation="horizontal"

>

android:id="@+id/rv_message"

android:layout_marginLeft="@dimen/dp_4"

android:layout_width="wrap_content"

android:layout_height="@dimen/dp_40"/>

android:id="@+id/tv_message"

android:layout_marginLeft="@dimen/dp_10"

android:layout_marginRight="@dimen/dp_14"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="1条新消息"

android:textSize="@dimen/sp_14"

android:textColor="@color/color_FF333333"

android:layout_gravity="center_vertical"

/>

3、业务逻辑

private void initTopMessage() {

ll_layout = topMessage.findViewById(R.id.ll_layout);

ll_tip = topMessage.findViewById(R.id.ll_tip);

TextView tv_message = topMessage.findViewById(R.id.tv_message);

RecyclerView rvMessage = topMessage.findViewById(R.id.rv_message);

List list = new ArrayList<>();

list.add("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1597150953412&di=46e8b9da62a00e93dc048d68be84565f&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201503%2F18%2F20150318223723_vZrrA.jpeg");

list.add("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1597150875198&di=0c9488318607f40319c61ca4a94c05d4&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201710%2F18%2F20171018230400_5zmuJ.jpeg");

list.add("https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3715807199,284763637&fm=26&gp=0.jpg");

LinearLayoutManager linearLayoutManager = new LinearLayoutManager(getContext(), LinearLayoutManager.HORIZONTAL, false);//这里的true和false控制堆叠的方向，我的效果右侧堆叠所以是false

linearLayoutManager.setStackFromEnd(true);

rvMessage.setLayoutManager(linearLayoutManager);

ItemImageAdapter imageAdapter = new ItemImageAdapter(R.layout.item_image_adapter, list);

rvMessage.setAdapter(imageAdapter);

tv_message.setText("6条新消息");

//进入消息列表

ll_tip.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

//新评论

//新评论

Intent intent = new Intent(getContext(), MessageNewCommentActivity.class);

intent.putExtra("type", "11");

intent.putExtra("type_name", "被评论");

startActivityForResult(intent, CommonConstant.RESULT_COMMENT_CODE);

}

});

}

4、ItemImageAdapter

public class ItemImageAdapter extends BaseQuickAdapter {

public ItemImageAdapter(int layoutResId, @Nullable List data) {

super(layoutResId, data);

}

@Override

protected void convert(@NonNull BaseViewHolder helper, String item) {

int position = helper.getLayoutPosition();

//为0是不折叠(核心)

if(position==0){

setMargins(helper.itemView,0,0,0,0);

}

ImageView header = helper.getView(R.id.header);

GlideUtils.showImageViewToCircle(BaseApplication.mContext,item,header);

}

public void setMargins (View v, int l, int t, int r, int b) {

if (v.getLayoutParams() instanceof ViewGroup.MarginLayoutParams) {

ViewGroup.MarginLayoutParams p = (ViewGroup.MarginLayoutParams) v.getLayoutParams();

p.setMargins(l, t, r, b);

v.requestLayout();

}

}

}

5、item_image_adapter子布局

xmlns:app="http://schemas.android.com/apk/res-auto"

android:id="@+id/relayout"

android:layout_width="wrap_content"

android:layout_height="@dimen/dp_40"

android:layout_marginLeft="-6dp"

>

android:id="@+id/header"

android:layout_width="@dimen/dp_30"

android:layout_height="@dimen/dp_30"

android:layout_centerVertical="true"

android:src="@drawable/my_default_head"

android:scaleType="fitXY" />