水平显示圆形图片以显示用户个人资料图片 [英] Horizontally of circular images to show user profile picture

问题描述

我需要向用户显示在指定事件中都加入的个人资料图片，该图片应该是一个水平接一个的圆形图像，一个接一个的是5个图像.它应该显示剩余用户总数.我需要java和xml文件.这些配置文件图像将来自数据库.请给我建议任何图书馆或方法

I need to show the users profile picture who all are joining in a specified event and it should be in horizontal circular images one after other and after 5 images. it should show the remaining users total count. I need both java and xml file. These profile images will be from database. Please suggest me any library or a way to do it

推荐答案

在这里尝试一下，这是java的工作代码

Try this here is the working code for java

RecyclerViewActivity

RecyclerViewActivity

public class RecyclerViewActivity extends AppCompatActivity {


    private  final Integer[] IMAGES = {R.drawable.nilesh, R.drawable.nilesh, R.drawable.nilesh, R.drawable.nilesh,
            R.drawable.nilesh, R.drawable.nilesh, R.drawable.nilesh, R.drawable.nilesh};
    private ArrayList<Integer> arrayList = new ArrayList<Integer>();

    RecyclerView myRecyclerView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_recycler_view);

        Collections.addAll(arrayList, IMAGES);

        myRecyclerView=findViewById(R.id.myRecyclerView);
        myRecyclerView.setLayoutManager(new LinearLayoutManager(this,
                LinearLayoutManager.HORIZONTAL,false));
        myRecyclerView.addItemDecoration(new OverlapDecoration());
        myRecyclerView.setHasFixedSize(true);
        myRecyclerView.setAdapter(new DataAdapter(this,arrayList));


    }

    public class OverlapDecoration extends RecyclerView.ItemDecoration {

        private final static int vertOverlap = -40;

        @Override
        public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
            final int itemPosition = parent.getChildAdapterPosition(view);


            outRect.set(0, 0, vertOverlap, 0);


        }
    }
}

activity_recycler_view

activity_recycler_view

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="?attr/colorBackgroundFloating"
    android:orientation="vertical">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/myRecyclerView"
        android:layout_width="match_parent"
        android:layout_height="250dp"
         />


</LinearLayout>

DataAdapter

DataAdapter

public class DataAdapter extends RecyclerView.Adapter<DataAdapter.ViewHolder> {

    private Context context;
    private ArrayList<Integer> arrayList = new ArrayList<Integer>();

    public DataAdapter(Context context, ArrayList<Integer> imagesArray) {
        this.context = context;
        arrayList = imagesArray;
    }

    @NonNull
    @Override
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {

        View imageLayout = LayoutInflater.from(context).inflate(R.layout.aa, parent, false);
        return new ViewHolder(imageLayout);
    }

    @Override
    public void onBindViewHolder(@NonNull ViewHolder holder, int position) {

        holder.imageView.setImageResource(arrayList.get(position));

        if (position == 3) {
            holder.relativeLayout.setVisibility(View.VISIBLE);
            holder.tvCount.setText(String.valueOf(arrayList.size()-4));
        }else {
            holder.relativeLayout.setVisibility(View.GONE);
        }
    }

    @Override
    public int getItemCount() {
        return 4;
    }

    public class ViewHolder extends RecyclerView.ViewHolder {

        RelativeLayout relativeLayout;
        TextView tvCount;
        CircleImageView imageView;

        public ViewHolder(View itemView) {
            super(itemView);

            relativeLayout = itemView.findViewById(R.id.relative);
            tvCount = itemView.findViewById(R.id.tvCount);
            imageView = itemView
                    .findViewById(R.id.profile_image);


        }
    }
}

layout.aa

layout.aa

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal">


    <de.hdodenhof.circleimageview.CircleImageView xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/profile_image"
        android:layout_width="96dp"
        android:layout_height="96dp"
        android:src="@drawable/kid"
        app:civ_border_color="#FF000000"
        app:civ_border_width="2dp" />

    <RelativeLayout
        android:id="@+id/relative"
        android:visibility="gone"
        android:layout_marginLeft="-40dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">


        <de.hdodenhof.circleimageview.CircleImageView
            android:id="@+id/imageCircleImageView"
            android:layout_width="96dp"
            android:layout_height="96dp"
            android:src="#919191"
            app:civ_border_color="#FF000000"
            app:civ_border_width="2dp"  />

        <TextView
            android:id="@+id/tvCount"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@id/imageCircleImageView"
            android:layout_alignEnd="@id/imageCircleImageView"
            android:layout_alignStart="@id/imageCircleImageView"
            android:layout_alignTop="@id/imageCircleImageView"
            android:layout_gravity="center"
            android:gravity="center"
            android:padding="10dp"
            android:text=""
            android:textColor="#FFFFFF" />

    </RelativeLayout>

</LinearLayout>

这篇关于水平显示圆形图片以显示用户个人资料图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！