شرح انشاء ColorSelector في تطبيقك باستخدام اندرويد ستوديو

شرح انشاء ColorSelector في تطبيقك باستخدام اندرويد ستوديو

واحد من اهم الاشياء التي لا غنى عنها في تطبيقات الاسواق الرقمية او e-commerce وهي اتاحة اختيار لون المنتج من طرف العميل حيث انه اذا كان لديك منتج يتوفر بعدة الوان يمكنك ادراج تلك الالوان في التطبيق ويقوم المستخدم بعد مشاهدة المنتج ان يقوم بإختيار اللون الذي يريده والذي يناسبة ويتابع بعد ذلك عمليات الدفع والتوصيل وما الى ذلك وبسبب اهمية تلك الميزة سنحاول شرحها لكم في هذة المقالة مع العلم اننا نستخدم Databinding .

أصبح الاقبال على ظيفة android developer كبير جدا في هذه الايام وذلك لان مجال ال developing اصبح مطور بكثره في مختلف الدول سواء العربيه او الاجنبيه وليس فقط android developer بل هناك ios developer وهو الشخص المتخصص في تطوير تطبيقات نظام ios الخاص بشركة apple وفي الغالب يكون راتب الios developer اكبر في بعض الاحيان وذلك بسبب قلة المبرمجين في نظام ios واصبحت الكثير من القنوات والمواقع على منصة YouTube تختص بشروحات ios وايضا android ويعد موقعنا واحد من اكبر المواقع المختصه في هذا المجال ومساعدة المبرمجين في التعلم .

اثناء تعلمك للdevelopment يفضل ان يكون لديك ورقه وقلم لتدوين كل ما تحتاجه وتتعلمه ولكن نحن في موقعنا نقوم بتوفير لك كل ما تريد دون الحاجه الى الورقه والقلم فقط كل ما تحتاجه هو التطبيق على الدروس التي نضعها وحسب لكي تفهم كيف يعمل الكود وايضا تكتسب خبره من كثرة كتابة الcode, ودائما حاول ان تعتمد بشكل كبير على انماط التصميم في البرجخ مثل mvvm وهو اشهر نمط حاليا والكثير من الشركات تطلبه ولك لاهميته التنظميه في كتابة الكود مما يجعل من اي شخص اخر قادر على التعديل على الكود الخاص بك ويعرف كل شخص عمله ui , back , developer يكون كل شخص قادر على معرفة وظيفته بالتحديد 

تصميم class يحمل بيانات الالوان

في هذا الجزء سوف نقوم بعمل كلاس عادي جدا ونضع بداخله int color ليكون مسؤول عن عملية تغيير الالوان ويتيح لك اضافة لون معين وهكذا وهذا ما سنحتاجه فقط وهي تغيير الالوان اثناء الrecyclerview ولهذا قمنا بعمل هذا الclass

Data color

public class Data_color {
    int color ;

    public Data_color(int color) {
        this.color = color;
    }


    public int getColor() {
        return color;
    }

    public void setColor(int color) {
        this.color = color;
    }
}

تصميم xml لل ColorSelector

هنا قمنا باستخدام مكتبة circleimageview والتي قمنا بشرحها مسبقا والتي تقوم بتحويل اي صورة داخل دائرة وقمنا بعمل لها background وسوف نقوم بتغيير الbackground من الadapter لكي نتمكن من تغيير اللون بدون اي مشاكل واسفلها قمنا بعمل ايقونه تحتوي على علامة True ما نريدة حاليا هو عندما يقوم الستخدم بالنقر على اللون الذي يرغب به تظهر العلامة عليه ولهذا سوف يتم ضبط كل تلك الخصائص من داخل Adapter .

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

    <data>
    <variable
        name="data"
        type="com.example.final_project_java.data.Data_color" />
    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:orientation="horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <de.hdodenhof.circleimageview.CircleImageView
            android:id="@+id/image_color"
            android:layout_width="@dimen/_40sdp"
            android:layout_height="@dimen/_40sdp"
            android:layout_margin="@dimen/_5sdp"
            tools:src="@color/red_based"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent">
        </de.hdodenhof.circleimageview.CircleImageView>

        <ImageView
            android:id="@+id/selector"
            android:layout_width="@dimen/_30sdp"
            android:layout_height="@dimen/_30sdp"
            android:layout_margin="@dimen/_5sdp"
            android:layout_marginTop="4dp"
            app:cardCornerRadius="@dimen/_40sdp"
            android:src="@drawable/ic_check"
            app:layout_constraintBottom_toBottomOf="@+id/image_color"
            app:layout_constraintEnd_toEndOf="@+id/image_color"
            app:layout_constraintStart_toStartOf="@+id/image_color"
            app:layout_constraintTop_toTopOf="@+id/image_color">
        </ImageView>

    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

إنشاء Adapter خاص بالColorSelector في android studio

نقوم بإنشاء adapter عادي جدا وسبق وشرحناه لكم في كثير من الدروس , ولكن سوف نقوم بعمل متغير من نوع int باسم select وقيمته تكون -1 وبعدها نقوم بعمل methode باسم selected وتكون تحمل adapterPosition بداخلها وعندما يتم النقر على اي عنصر من العناصر يتم تحديث البيانات عن طريق الاول notifyDataSetChanged وبعدها نرسل العملية الى الadapterPosition او المكان الذي قام المستخدم بالنقر عليه ليتم وضع العلامه فوقة

داخل onBindViewHolder نقوم بعمل ما نرغب به وهو بكل بساطة عندما يقوم المستخدم بالنقر على عنصر معين يتم اظهار علامة صح عليه وتختفي العلامه من باقي العناصر وهذا هو الهدف , ايضا لا تنسى عمل setImageResource للون الخلفيه لكي تستطيع تغيرها من mainclass 

adapter class

public class Adapter_color extends RecyclerView.Adapter<Adapter_color.Holder> {
    ArrayList<Data_color> arrayList;
    Context context;
    int select = -1;

    // change select .
    private void selected(int adapterPosition) {
        if (adapterPosition == RecyclerView.NO_POSITION) return;
        notifyDataSetChanged();
        select = adapterPosition;
    }

    public Adapter_color(ArrayList<Data_color> arrayList, Context context) {
        this.arrayList = arrayList;
        this.context = context;
    }

    @NonNull
    @Override
    public Holder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
       return new Holder(DataBindingUtil.inflate(LayoutInflater.from(context) , R.layout.recycler_colorselector , parent , false));
    }

    @Override
    public void onBindViewHolder(@NonNull Holder holder, int position) {
       holder.binding.setData(arrayList.get(position));
        holder.binding.imageColor.setImageResource(arrayList.get(position).getColor());

        // select
        holder.binding.imageColor.setOnClickListener(new View.OnClickListener() 
            @Override
            public void onClick(View v) {
                selected(holder.getAdapterPosition());
            }
        });


        if (select == position) {
            holder.binding.selector.setVisibility(View.VISIBLE);
        } else {
            holder.binding.selector.setVisibility(View.GONE);
        }
        // select
    }


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

    class Holder extends RecyclerView.ViewHolder {
        RecyclerColorselectorBinding binding;
        public Holder(@NonNull RecyclerColorselectorBinding binding) {
            super(binding.getRoot());
            this.binding = binding;
        }
    }
}

اضافة وتغيير الالوان داخل ColorSelector

في هذا الجزء سوف نقوم بتشغيل الrecyclerview وايضا سوف نقوم باضافة الالوان التي نرغب بها وهنا قمنا بإضافة 3 الوان وايضا اسفلها جعلت ان طريقة عرض الrecyclerview تكون HORIZONTAL لكي تكون بشكل افقي وغير عمودي .

main class

 ArrayList<Data_color> arrayList = new ArrayList<>();
        Adapter_color adapter;

        arrayList.add(new Data_color(R.color.red_based));
        arrayList.add(new Data_color(R.color.teal_200));
        arrayList.add(new Data_color(R.color.design_default_color_secondary_variant));

        adapter = new Adapter_color(arrayList, requireContext());
        binding.rvColor.setLayoutManager(new LinearLayoutManager(requireContext() , LinearLayoutManager.HORIZONTAL , false));
        binding.rvColor.setAdapter(adapter);
        

لمزيد من الاكواد يمكنك مشاهدة باقي المقالات على الموقع

• شرح كيفية اضافة صندوق اختيار الدولة في تطبيقك في برنامج اندرويد ستوديو
• انشاء تطبيق note باستخدام room & rx java ( تطبيقات اندرويد ستوديو مفتوحة المصدر )
• اكواد اندرويد ستوديو تقوم بعمل broadcast receiver لعرض نسبة شحن الهاتف 
• شرح انشاء AnimatedBottomBar في نهاية التطبيق بواسطة برنامج اندرويد ستوديو
• كيفية رفع مجموعة صور svg مره واحده في android studio
• منع تدوير الهاتف اثناء استخدام تطبيقك في اندرويد ستوديو

تعديل المقال