Android 头像折叠效果

一、前言：

我们在开发中，经常遇到头像折叠效果，特别是直播软件，以前都是写死的，太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主布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    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"
    >
    
    <LinearLayout
        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"
        >

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/rv_message"
            android:layout_marginLeft="@dimen/dp_4"
            android:layout_width="wrap_content"
            android:layout_height="@dimen/dp_40"/>

        <TextView
            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"
            />
    </LinearLayout>

</LinearLayout>

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<String> 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<String, BaseViewHolder> {
    public ItemImageAdapter(int layoutResId, @Nullable List<String> 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子布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    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"
    >

    <ImageView
        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" />
</RelativeLayout>