كيفية انشاء Size selector داخل تطبيقك في اندرويد ستوديو

 

كيفية انشاء Size selector داخل تطبيقك في اندرويد ستوديو

اذا كنت تعمل على تطبيق لمتجر اليكتروني رقمي فطبيعي ان يكون هذا المتجر يحتوي على منتجات وكل منتج له مقاس معين وهذا يكون متوفر بشكل اكبر في الملابس والاحذية وتريد وضع اكثر من مقاس والمستخدم يقوم بإختيار المقاس المناسب له وبعدها يكمل عمليه الشراء , وفي هذة المقالة سوف نساعدكم على إنشاء Size selector في android studio حيث انه قد سبق وقدمنا لكم شرح في انشاء color selector ولعمل هذا ال selecor يكون الكود الخاص به داخل الadapter لانه في طبيعة الحال العناصر يتم تمريرها من داخله ولذلك سوف نقوم بتصميم الكود الخاص به من هناك 

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

الامر لا يقتصر فقط على مجال .تطوير تطبيقات الموبايل فهنالك مجال برمجة تطبيقات سطح المكتب و التصميم وغيره من المجالات التي تستطيع تعلمها وتجلب لك الاموال ولكن اذا كنت تفضل مجال البرمجة فانصحك بالبدء في دورة جافا ولقد سبق وان قدمنا لكم كورس بسيط في لغة جافا في قسم java حيث شرحنا لكم كيف تقوم بكتابة اول كود لك وكيف تعمل هذة اللغة والكثير عنها انصحك بقرائتها للافادة , يتمتع مبرمج جافا بامكانية تطوير وبرمجة تطبيقات سطح المكتب وتطوير تطبيقات الاندرويد ومواقع الويب .

البيانات التي تحتاجها لعمل ( اختيار الحجم او المقاس ) في android studio

هذا هو الكلاس الذي يحمل البيانات التي سوف تتغير وهنا سوف نقوم بتغيير لون الخط الخاص بالعنصر الذي قام المستخدم بالنقر عليه , لذلك سوف نمرر String size ونقوم بعمل getter و setter وايضا constructor لكي نتمكن من تمرير بيانات لداخله .

Data size

public class Data_size {
    String size;

    public Data_size(String size) {
        this.size = size;
    }
    public String getSize() {
        return size;
    }

    public void setSize(String size) {
        this.size = size;
    }
}

تصميم RecyclerView خاصة بإختيار الحجم

في هذة المرحلة قمنا بعمل تصميم للRecyclerView وهو عبارة عن cardview بداخله محتوي نصي وهذا المحتوى هو عبارة عن رقم ويدل على المقاس الذي يقوم المستخدم بإختياره يمكنك عمل التصميم الذي ترغب به لا مشكلة .

xml code

<?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_size" />
    </data>

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="wrap_content"
        android:layout_height="match_parent">

        <androidx.cardview.widget.CardView
            app:cardCornerRadius="@dimen/_7sdp"
            android:layout_margin="@dimen/_10sdp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">

            <androidx.constraintlayout.widget.ConstraintLayout
                android:layout_width="@dimen/_70sdp"
                android:layout_height="@dimen/_40sdp">

                <TextView
                    android:id="@+id/tv_size"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@{data.size}"
                    tools:text="636"
                    android:textStyle="bold"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent" />

            </androidx.constraintlayout.widget.ConstraintLayout>
        </androidx.cardview.widget.CardView>
    </LinearLayout>
</layout>

إنشاء Adapter للتحكم بعملية اختيار المقاس المناسب للمنتج

في هذة المرحلة والتي تعد المرحله التي يوجد بها الكود الفعلي , بكل بساطة سوف نقوم بتعريف متغير من نوع int ونرمز له بالاسم select ونعطيه قيمة على سبيل المثال -1 وبعدها قمنا بعمل methode باسم select وهي تحتوي على الadapterPosition او بمعنى اخر على النقطة التي ينقر المستخدم عليها , وبداخل الonBindViewHolder قمنا بعمل الكود وهو عندما ينقر المستخدم على حجم معين يتم تغيير اللون الخاص به الى لون معين وهذة هي فكرة الكود .

Adapter code

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

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

    public Adapter_size(ArrayList<Data_size> 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_size , parent ,false));
    }

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

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

        // text select
        if (select == position) {
           holder.binding.tvSize.setTextColor(context.getResources().getColor(R.color.red_based));
        } else {
            holder.binding.tvSize.setTextColor(context.getResources().getColor(R.color.singup));
        }
        // **********************
    }
        
    @Override
    public int getItemCount() {
        return arrayList.size();
    }
    class Holder extends RecyclerView.ViewHolder {
        RecyclerSizeBinding binding;
        public Holder(@NonNull RecyclerSizeBinding binding) {
            super(binding.getRoot());
            this.binding = binding;

        }
    }
}

كود تشغيل الRecyclerView في MainActivity

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

main code

ArrayList<Data_size> arrayList = new ArrayList<>();
Adapter_size adapter;

arrayList.add(new Data_size("9.5"));
arrayList.add(new Data_size("6.7"));
arrayList.add(new Data_size("5.6"));
arrayList.add(new Data_size("8.6"));
arrayList.add(new Data_size("9.6"));

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

• كيفية عرض RecyclerView بشكل افقي HORIZONTAL في اندرويد ستوديو
• شرح استخدام الmvvm في برنامج Android Studio اندرويد ستوديو 
• انشاء TableLayout مع viewpager2 بالاندرويد ستوديو
• انشاء Dialog Fragment واستدعاءة في activity او fragment على شكل dialog
• حل مشكلة Data null بإستخدام DataBinding او Adapter في Android Studio
• حل مشكلة انعكاس تصميم البروجكت اثناء تشغيله على الهواتف في اندرويد ستوديو

تعديل المقال