پیاده سازی bottom sheet در اندروید

کامپوننت Bottom Sheet کامپوننتیه که اجازه میده یک ویوو از پایین صفحه به بالا کشیده بشه تا کانتنت بیشتری رو نشون بده. من اینجا قصد آموزش نحوه پیاده‌سازیش رو دارم و برای اینکه در مورد خیلی دقیقتر بخونید باید به گایدلاین‌های گوگل مراجعه کنید.

bottom sheet gif

ساختن ویوو

ابتدا باید مطمئن شوید که آخرین appcompat و design support library به پروژتون اضافه شده:

dependencies {
    //replace X.X.X with the latest version
    compile 'com.android.support:appcompat-v7:X.X.X'
    compile 'com.android.support:design:X.X.X'
}

و اینکه اکتیویتی زیرکلاسی از AppCompatActivity باشه.

public class ButtonActivity extends AppCompatActivity {
...
}

داخل فولدر layouts یک فایل xml با نام bottom_sheet بسازید و کد زیر رو داخلش کپی کنید.


ویژگی behavior_peekHeight ارتفاع بخشی که قابل مشاهده است رو تعیین میکنه و behavior_hideable تعیین میکنه که آیا bottom sheet با قابلیت hide شدن داره یا نه.

حالا قراره ویوو اصلی‌ای که این bottom sheet توش نمایش داده میشه رو بسازیم. برای اینکار باید ویوو ریشه رو از جنس CoordinatiorLayout بذاریم. دقت کنید که دو ویوو app_bar و activity_bottom_sheet_contet که اینجا include کردم دوتا layout الکیه که هیچ ربطی به bottom sheet نداره. شما میتونید اینجا هر چی که لازم داشتید بذارید.




    
    

    
    

    
    



حالا چیزی که ساختیم باید به این شکل کار کنه:

bottom sheet gif 2

 

ایجاد کنترل داینامیک 

رفتار bottom sheet رو میشه به این شیوه از طریق کدهای جاوا هم کنترل کرد:

// get the bottom sheet view
LinearLayout llBottomSheet = (LinearLayout) findViewById(R.id.bottom_sheet);

// init the bottom sheet behavior
BottomSheetBehavior bottomSheetBehavior = BottomSheetBehavior.from(llBottomSheet);

// change the state of the bottom sheet
bottomSheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);
bottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);
bottomSheetBehavior.setState(BottomSheetBehavior.STATE_HIDDEN);

// set the peek height
bottomSheetBehavior.setPeekHeight(340);

// set hideable or not
bottomSheetBehavior.setHideable(false);

// set callback for changes
bottomSheetBehavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
    @Override
    public void onStateChanged(@NonNull View bottomSheet, int newState) {
        
    }

    @Override
    public void onSlide(@NonNull View bottomSheet, float slideOffset) {

    }
});


به همین راحتی!

منبع

یک پاسخ به “پیاده سازی bottom sheet در اندروید”

  1. وحید گفت:

    خیلی متشکرم من هر روز یکی دو تا مطالب شما رو میخونم البته به تازگی.
    کارتون و قلمتون حرف نداره .
    اگه امکانش هست در مورد حسگر های اندروید که تقریبا میشه گفت منبع فارسی درست حسابی در موردش وجود نداره ارائه بدید بدون شک به درد خیلی ها خواهد خورد. با تشکر

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

android application Google I/O HomeBrew ImageMagick Material Design mobile PogressBar RecyclerView splash TEDxKish ux آموزش اندروید الوین تافلر اندروید اپلیکیشن برنامه نویسی برنامه نویسی اندروید برنامه‌نویسی برنامه‌نویسی اندروید تداکس کیش تعمیر تغییر سایز عکس با ترمینال خلاصه کتاب دانش داده دانشگاه دانشگاه ایده‌آل دزد دیتا ساینس رشته مهندسی کامپیوتر ریکامندرسیستم سیستم‌های توصیه‌گر فری‌لنس لپتاپ متریال دیزاین معرفی کتاب موج سوم نوار پیشرفت همایش هوش مصنوعی ُجزیره کیش کار کسب و کار یادگیری عمیق یادگیری ماشین