android 实现头像堆叠效果

1:依赖

```
implementation ("com.github.bumptech.glide:glide:4.12.0")
annotationProcessor ("com.github.bumptech.glide:compiler:4.12.0")
```
第一种方式,布局创建frameLayout使用动态添加view方式实现

```
        android:id="@+id/frameLayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
```
代码中动态添加view
```
public class MainActivity extends Activity {

    private FrameLayout frameLayout;
    private List avatarUrls = new ArrayList<>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.act_main_layout);
        frameLayout = findViewById(R.id.frameLayout);
        // 模拟从接口获取的头像 URL 列表
        avatarUrls.add("https://pic.365chiji.com/m00/a9/ce/fb50c5b2a31d8f207c2e521aab05ca59.png");
        avatarUrls.add("https://pic.365chiji.com/m00/a9/ce/fb50c5b2a31d8f207c2e521aab05ca59.png");
        avatarUrls.add("https://pic.365chiji.com/m00/a9/ce/fb50c5b2a31d8f207c2e521aab05ca59.png");
        avatarUrls.add("https://pic.365chiji.com/m00/a9/ce/fb50c5b2a31d8f207c2e521aab05ca59.png");
        avatarUrls.add("https://pic.365chiji.com/m00/a9/ce/fb50c5b2a31d8f207c2e521aab05ca59.png");

        displayAvatars();
    }

    private void displayAvatars() {
        int marginStep = 50;//左侧遮盖的距离
        for (int i = 0; i < avatarUrls.size(); i++) {
            ImageView imageView = new ImageView(this);
            FrameLayout.LayoutParams layoutParams = new FrameLayout.LayoutParams(
                    100,
                    100
            );
            layoutParams.setMargins(i * marginStep, 0, 0, 0);
            imageView.setLayoutParams(layoutParams);
            imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
            // 创建 RequestOptions 对象设置图片圆角
            RequestOptions requestOptions= RequestOptions.bitmapTransform(new RoundedCorners(50));
            Glide.with(this)
                    .load(avatarUrls.get(i))
                    .apply(requestOptions)
                    .into(imageView);
            frameLayout.addView(imageView);
        }
    }


}
```

第二种方式布局文件使用recyclerview
2:布局不用写了直接功能代码

```
public class MainActivity extends AppCompatActivity {
    private List images = new ArrayList<>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        images.add("https://m.zhaokaobao.com.cn/uploads/202007/fd4222c22333217927dfc9c68146f0f0.jpg");
        images.add("https://m.zhaokaobao.com.cn/uploads/202007/ce07d7461bf4c33e795c46f2e51b76fc.jpg");
        images.add("https://m.zhaokaobao.com.cn/uploads/202007/ce07d7461bf4c33e795c46f2e51b76fc.jpg");
        images.add("https://m.zhaokaobao.com.cn/uploads/202007/ce07d7461bf4c33e795c46f2e51b76fc.jpg");
        images.add("https://m.zhaokaobao.com.cn/uploads/202007/ce07d7461bf4c33e795c46f2e51b76fc.jpg");
        RecyclerView mSameitempersion = findViewById(R.id.same_item_persion);
        LinearLayoutManager linearLayoutManager = new LinearLayoutManager(MainActivity.this, LinearLayoutManager.HORIZONTAL, false);//这里的true和false控制堆叠的方向,我的效果右侧堆叠所以是false
        linearLayoutManager.setStackFromEnd(true);
        mSameitempersion.setLayoutManager(linearLayoutManager);
        SameItemImageAdapter imageAdapter = new SameItemImageAdapter(MainActivity.this, images);
        mSameitempersion.setAdapter(imageAdapter);
    }
}

```
适配器

```
public class SameItemImageAdapter extends RecyclerView.Adapter {
    private Activity mActivity;
    private List list;
    public SameItemImageAdapter(Activity activity, List list) {
        this.mActivity = activity;
        this.list = list;
    }
    @NonNull
    @Override
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int i) {
        ViewHolder holder = new ViewHolder(LayoutInflater.from(mActivity).inflate(R.layout.same_image, viewGroup, false));
        return holder;
    }

    @Override
    public void onBindViewHolder(@NonNull ViewHolder viewHolder, int i) {
        Glide.with(mActivity).load(list.get(i)).placeholder(R.mipmap.repalec).diskCacheStrategy(DiskCacheStrategy.RESULT).skipMemoryCache(false).into(viewHolder.mLikehead);
        if(i==0){
            setMargins(viewHolder.mRelayout,0,0,0,0);
        }

    }
    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();
        }
    }
    @Override
    public int getItemCount() {
        return list.size();
    }

    public class ViewHolder extends RecyclerView.ViewHolder {

        private final ShapedImageView mLikehead;
        private final RelativeLayout mRelayout;

        public ViewHolder(@NonNull View itemView) {
            super(itemView);
            mRelayout = itemView.findViewById(R.id.relayout);
            mLikehead = itemView.findViewById(R.id.sameitem_head);
        }
    }
}
```
same_image实现 圆角图片请参照[圆角图片实现](https://blog.csdn.net/weixin_43117800/article/details/107676184)

```

    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/relayout"
    android:layout_marginRight="-10dp"//左侧堆叠或右侧堆叠的长度,左侧请换成margin_left
    xmlns:app="http://schemas.android.com/apk/res-auto">
            android:id="@+id/sameitem_head"
        android:layout_centerVertical="true"
        android:scaleType="fitXY"
        android:layout_width="50dp"
        app:shape_mode="circle"
        android:layout_height="50dp"/>

 

你可能感兴趣的:(android)