اذهب إلى المحتوى
  • 0

كيف نعمل تاثير التحميل في صورة في RecyclerView

Flutter Dev

السؤال

السلام عليكم ورحمة الله وبركاته

تحيه طيبه للجميع

لدي استفسار لو تكرمتو . انا عامل RecyclerView لتعرض مجموعة صور للمستخدم ولكن في بعض الاوقات بسبب اسباب مختلفة الصور تاخذ وقت حتى تظهر للمستخدم.

ما اريد عمله الان في وقت تحميل هذا الصور للمستخدم في RecyclerView اريد ان يتم عرض مثل تاثير او شكل دائرة يدور في داخل الصورة حتى يعرف المستخدم بوجود عملية جاريه 

 

مثال على ما احتاجه الصورة التاليه:

device-2020-07-17.thumb.png.92d52636da52000027a28c5cf83277ab.png

 

كيف يمكنني عمل ذلك؟

 

مرفق لكم الكود الخاص فيني:

MyAdapter

public class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder> {
    List<List_Data>list_data;
    Context ct;




    public MyAdapter(List<List_Data> list_data, Context ct) {
        this.list_data = list_data;
        this.ct = ct;
    }

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view= LayoutInflater.from(parent.getContext()).inflate(R.layout.list_data,parent,false);
        return new ViewHolder(view);
    }

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        final List_Data listData=list_data.get(position);
        Picasso.with(ct)
                .load(listData.getImageurl())
                .into(holder.img);



    }



    @Override
    public int getItemCount() {
        return list_data.size();
    }

    public class ViewHolder extends RecyclerView.ViewHolder{
        private ImageView img;
        public ViewHolder(View itemView) {
            super(itemView);
            img=(ImageView)itemView.findViewById(R.id.image_view);
        }
    }

MainActivity

 private static final String HI = "https://uniqueandrocode.000webhostapp.com/hiren/androidtutorial/androidweb.php";
    private List<List_Data> list_data;
    private MyAdapter adapter;
    private RecyclerView rv;
    private JsonArrayRequest request;
    private RequestQueue requestQueue;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        rv=(RecyclerView)findViewById(R.id.recycler_view);
        rv.setHasFixedSize(true);
        rv.setLayoutManager(new LinearLayoutManager(this));
        list_data=new ArrayList<>();


        getImageData();
    }

    private void getImageData() {
        request=new JsonArrayRequest(HI, new Response.Listener<JSONArray>() {
            @Override
            public void onResponse(JSONArray response) {
                JSONObject jsonObject=null;
                for (int i=0; i<response.length(); i++){
                    try {
                        jsonObject=response.getJSONObject(i);
                        List_Data listData=new List_Data(jsonObject.getString("imageurl"));
                        list_data.add(listData);
                    } catch (JSONException e) {
                        e.printStackTrace();
                    }
                }
                setupData(list_data);
            }
        }, new Response.ErrorListener() {
            @Override
            public void onErrorResponse(VolleyError error) {

            }
        });
        requestQueue= Volley.newRequestQueue(this);
        requestQueue.add(request);

    }

    private void setupData(List<List_Data> list_data) {
        adapter=new MyAdapter(list_data,this);
        rv.setAdapter(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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

    </androidx.recyclerview.widget.RecyclerView>

</RelativeLayout>

 

تم التعديل في بواسطة مروان مروان3
رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 1


// build.gradle

implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.0.0"
  
// MyGlideModule.kt

@GlideModule
class MyGlideModule : AppGlideModule()
  
// MainActivity.kt

override fun onCreate(savedInstanceState: Bundle?) {
  super.onCreate(savedInstanceState)
  setContentView(R.layout.activity_main)

  val circularProgressDrawable = CircularProgressDrawable(this)
  circularProgressDrawable.strokeWidth = 5f
  circularProgressDrawable.centerRadius = 30f
  circularProgressDrawable.start()

  GlideApp.with(applicationContext)
      .load("https://raw.githubusercontent.com/bumptech/glide/master/static/glide_logo.png")
      .placeholder(circularProgressDrawable)
      .into(a_main_image)
}

 

يمكنك تنفيذ ذلك باستخدام CircularProgressDrawable

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 1 ساعة قال Yomna Raouf:



// build.gradle

implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.0.0"
  
// MyGlideModule.kt

@GlideModule
class MyGlideModule : AppGlideModule()
  
// MainActivity.kt

override fun onCreate(savedInstanceState: Bundle?) {
  super.onCreate(savedInstanceState)
  setContentView(R.layout.activity_main)

  val circularProgressDrawable = CircularProgressDrawable(this)
  circularProgressDrawable.strokeWidth = 5f
  circularProgressDrawable.centerRadius = 30f
  circularProgressDrawable.start()

  GlideApp.with(applicationContext)
      .load("https://raw.githubusercontent.com/bumptech/glide/master/static/glide_logo.png")
      .placeholder(circularProgressDrawable)
      .into(a_main_image)
}

 

يمكنك تنفيذ ذلك باستخدام CircularProgressDrawable

شكرا لك عزيزي

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...