تصميم Custom BottomSheet وارسال بيانات الarray بداخله

 تصميم Custom BottomSheet وارسال بيانات الarray بداخله

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

Android Studio هو IDE الرسمي لبرمجة Android ويأتي مع كل ما تحتاجه للبدء. يسمح لك ConstraintLayout بإنشاء تخطيطات معقدة عن طريق ربط القيود من طريقة عرض إلى طرق عرض وإرشادات أخرى. بعد ذلك ، من خلال تحديد أحد تكوينات الجهاز المتعددة أو ببساطة تغيير حجم نافذة المعاينة ، قد ترى التخطيط الخاص بك على أي حجم شاشة. محلل لملفات APK افحص محتويات ملف APK للتطبيق الخاص بك لمعرفة طرق تقليل حجم تطبيق Android ، حتى لو لم يتم إنشاؤه باستخدام Android Studio. افحص ملف البيان ، بالإضافة إلى الموارد وملفات DEX. قارن بين ملفي APK لملاحظة كيفية تطور حجم التطبيق بمرور الوقت. 

إنشاء تصميم للCustom BottomSheet في الاندرويد

سوف تقوم بعمل عدد 2 layout واحده تحتوي على تصميم الbottom والاخر سوف تكون لعمل recycler لكي يتم تكرار العناصر بداخله وهذا ما نسعى له .

انشاء DataModel لتغيير البيانات

هنا سوف تقوم بعمل DataModel تحتوي على البيانات التي سوف نقوم بتمريرها الى ملف الdataModel لتغير البيانات .

DataModel.java

public class DataTest2 {
    String name;

    public DataTest2(String name) {
        this.name = name;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }
}

تهيئة ملف Adapter

في هذه المرحلة سوف نقوم بتهيئة ملف للadapter لكي نقوم بتمرير بيانات الrecycler بداخله .

Adapter.java

public class AdapterTest2 extends RecyclerView.Adapter<AdapterTest2.Holder> {
    List<DataTest2> list;
    ClickSurah clickSurah;

    public AdapterTest2(List<DataTest2> list, ClickSurah clickSurah) {
        this.list = list;
        this.clickSurah = clickSurah;
    }

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

    @Override
    public void onBindViewHolder(@NonNull Holder holder, @SuppressLint("RecyclerView") int position) {
        holder.binding.tv.setText(list.get(position).getName());

        holder.itemView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                clickSurah.click(position);
            }
        });
    }

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

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

امكانية الضغط على العنصر من داخل الrecyclerView

سوف نقوم بعمل interface لكي يساعدك على الضغط على العنصر .

Click.Interface

public interface ClickSurah {
    void click(int position);
}

إنشاء class مخصص للBottomSheet

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

BottomSheet.class

public class BottomSheet extends BottomSheetDialogFragment {
    List<DataTest2> list;
    ClickSurah clickSurah;

    public BottomSheet(List<DataTest2> list, ClickSurah clickSurah) {
        this.list = list;
        this.clickSurah = clickSurah;
    }

    @NonNull
    @Override
    public Dialog onCreateDialog(@Nullable Bundle savedInstanceState) {
        BottomSheetDialog bottomSheetDialog = (BottomSheetDialog) super.onCreateDialog(savedInstanceState);
        View view = LayoutInflater.from(getContext()).inflate(R.layout.layout_bottom_sheet , null);
        bottomSheetDialog.setContentView(view);
        RecyclerView recyclerView = view.findViewById(R.id.recycler_bottom_sheet);
        recyclerView.setLayoutManager(new LinearLayoutManager(getContext()));
        AdapterTest2 adapterPrayer = new AdapterTest2(list ,new ClickSurah() {
            @Override
            public void click(int position) {
                clickSurah.click(position);
            }
        });
        recyclerView.setAdapter(adapterPrayer);
        RecyclerView.ItemDecoration itemDecoration = new DividerItemDecoration(getContext() , DividerItemDecoration.VERTICAL);
        recyclerView.addItemDecoration(itemDecoration);

        return bottomSheetDialog;
   
}

استدعاء الCustom BottomSheet من الMainActivity

سوف نقوم هنا بعمل List من البيانات وارسالها الى الكلاس السابق الذي يحمل منا الlist وايضا سوف نرسل له الcontext واخيرا سوف نقوم بإستدعاء الdialog .

MainActivity.class

public class PrayerActivity extends AppCompatActivity implements ClickSurah {
    ActivityPrayerBinding binding;
    List<DataTest2> list2;
    BottomSheet bottomSheet;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        binding= DataBindingUtil.setContentView(this,R.layout.activity_prayer);


        binding.btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                bottom_();
            }
        });
    }
    
 private void bottom_ () {
          
        list2 = new ArrayList<>();
        list2.add(new DataTest2("ahmed"));
        list2.add(new DataTest2("mohamed"));
        list2.add(new DataTest2("khaled"));
        list2.add(new DataTest2("hamed"));
        list2.add(new DataTest2("hamed"));
        list2.add(new DataTest2("hamed"));
        list2.add(new DataTest2("hamed"));
        list2.add(new DataTest2("hamed"));
        list2.add(new DataTest2("hamed"));
        list2.add(new DataTest2("hamed"));
        list2.add(new DataTest2("hamed"));
        list2.add(new DataTest2("hamed"));
        list2.add(new DataTest2("hamed"));
        list2.add(new DataTest2("hamed"));
        list2.add(new DataTest2("hamed"));
        list2.add(new DataTest2("hamed"));
        list2.add(new DataTest2("hamed"));

        bottomSheet = new BottomSheet(list2, this);
        bottomSheet.show(getSupportFragmentManager() , bottomSheet.getTag());
    }

    @Override
    public void click(int position) {
        Toast.makeText(this, list2.get(position).getName(), Toast.LENGTH_SHORT).show();
        bottomSheet.dismiss();
    }
}