android 实现头像堆叠效果

news2025/4/16 14:34:43

1：依赖

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

```
<FrameLayout
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<String> 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 对象设置图片圆形
            Glide.with(this)
                    .load(avatarUrls.get(i))
                    .apply(RequestOptions.circleCropTransform())
                    .into(imageView);
            frameLayout.addView(imageView);
        }
    }
}

```

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

```
public class MainActivity extends AppCompatActivity {
private List<String> 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<SameItemImageAdapter.ViewHolder> {
private Activity mActivity;
private List<String> list;
public SameItemImageAdapter(Activity activity, List<String> 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)

```
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
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">
<com.example.image.ShapedImageView
android:id="@+id/sameitem_head"
android:layout_centerVertical="true"
android:scaleType="fitXY"
android:layout_width="50dp"
app:shape_mode="circle"
android:layout_height="50dp"/>
</RelativeLayout>