معرفی کتابخانه اندروید RTL Intro Slider

یه روز خیلی یهویی تصمیم گرفته شد که به همه برنامه‌های شرکت یه صفحه اینترو (خوش‌آمد گویی) اضافه بشه. صفحه اینترو رو احتمالا می‌دونید چیه. اگه نمیدونید چیه که باید عرض کنم اینه:


‌


یه صفحه که وقتی برنامه برای بار اول اجرا میشه، نمایش داده میشه و به کاربر یه سری اطلاعاتی رو میده. البته این تصویر بالا یه چیز خفن‌تریه و اینتروی مدنظر ما چیز ساده‌تری بود. شبیه این:



این که آیا اصلاً این کار خوبه یا نه، توی چه مواردی کاربرد داره و چطور بهتره پیاده‌سازی شه رو آقای تقی‌آبادی به زیبایی توی این مقاله گفتند.

https://virgool.io/@amirtaqiabadi/%D8%A7%D8%B5%D9%88%D9%84-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-user-onboarding-odq2c7vpapat

چون برنامه‌های شرکت به زبان فارسی طراحی شده بودن، نیاز بود که این صفحه اینترو هم به صورت راست چین (RTL) پیاده‌سازی بشه.

برای اینکه یه وقت چرخ رو دوباره نسازیم، شروع کردم به سرچ کردن دنبال اینکه آیا کسی از قبل چنین چیزی ساخته یا نه.

کتابخونه برای ساخت صفحه اینترو به وفور پیدا میشه، منتهی این ویژگی خاص یعنی RTL بودن چیزی بود که من پیداش نکردم. حالا شاید هم باشه.
در نتیجه تصمیم گرفتم که خودم یه کتابخونه بسازم و یه طوری هم بسازم که بشه توی همه پروژه‌ها به آسونی ازش استفاده کرد.

حاصل این تصمیم شد ایشون. (لینک کتابخونه)

https://github.com/alikhaleghi76/rtl-slider


یه کتابخونه اینترو که هم صفحات راست‌چین(RTL) رو پشتیبانی می‌کنه و هم صفحات چپ‌چین (LTR).


برای توسعه کتابخونه از زبان کاتلین و لایبرری androidx استفاده کردم. یه کم چون تحویل فوری باید می‌دادم کدش شاید شلوغ پلوغ و غیر بهینه باشه. اگه اصلاحی، چیزی دارید که خوشحال میشم.


طرز استفاده

توی فایل build.gradle سطح پروژتون، ریپازیتوری جیت‌پک رو اضافه کنید:

allprojects {
		repositories {
			...
			maven { url 'https://jitpack.io' }
		}
	}

بعد توی فایل build.gradle سطح app، لایبرری رو به دیپندنسی‌ها اضافه کنید:

dependencies {
	        implementation 'com.github.alikhaleghi76:rtl-slider:1.0.6'
	}

حالا کتابخونه به پروژه اضافه شده و می‌تونید ازش استفاده کنید.


برای استفاده می‌تونید ویوی اسلایدر رو این شکلی به layoutتون اضافه کنید:

<ali.khaleghi.rtlintroslider.RTLIntroSlider
        android:layout_width=&quotmatch_parent&quot
        android:layout_height=&quotmatch_parent&quot
        android:id=&quot@+id/introSlider&quot />

و توی سمت جاوا یا کاتلین با کد زیر بهش صفحه اضافه کنید:

RTLIntroSlider introSlider = findViewById(R.id.introSlider);
        
        introSlider.addPage(
                &quotTITLE1&quot,
                &quotDETAIL1&quot,
                ContextCompat.getColor(this, R.color.intro_text_color1),
                ContextCompat.getColor(this, R.color.intro_background_color1),
                R.drawable.icon1
        );
        
        introSlider.addPage(
                &quot&quot,
                &quotDETAIL2&quot,
                ContextCompat.getColor(this, R.color.intro_text_color2),
                ContextCompat.getColor(this, R.color.intro_background_color2),
                -1
        );


توی این کتابخونه هم می‌تونید از صفحات پیش‌فرض مثل همین کد بالا استفاده کنید که ظاهر بدی هم نداره و شما فقط بهش عنوان و عکس و این چیزا می‌دید، هم می‌تونید هر فرگمنتی که دوست داشتید، بهش بدید.


برای اینکه بتونید از همه امکانات کتابخونه استفاده کنید، می‌تونید این کارارو بکنید.

اول توی فایل xml مربوط به layoutتون و بالاترین لایش، یعنی همون لایه root این خط کدو اضافه کنید:

xmlns:sliderOptions=&quothttp://schemas.android.com/apk/res-auto&quot

بعدش می‌تونید اینطوری ویو رو کاستوم کنید:

<ali.khaleghi.rtlintroslider.RTLIntroSlider
        android:layout_width=&quotmatch_parent&quot
        android:layout_height=&quotmatch_parent&quot
        android:id=&quot@+id/introSlider&quot
        sliderOptions:next_text=&quot@string/next&quot
        sliderOptions:skip_text=&quot@string/skip&quot
        sliderOptions:enter_text=&quot@string/enter&quot
        sliderOptions:show_indicator=&quottrue&quot
        sliderOptions:is_rtl=&quottrue&quot
        sliderOptions:active_dot_color=&quot#CCFFFFFF&quot
        sliderOptions:inactive_dot_color=&quot#77FFFFFF&quot
        sliderOptions:separator_color=&quot#88FFFFFF&quot
        sliderOptions:next_color=&quot#FFFFFF&quot
        sliderOptions:skip_color=&quot#FFFFFF&quot />

فک کنم واضحه هر خط چیکار می‌کنه.

برای سفارشی کردن از سمت جاوا/کاتلین هم که می‌تونید اینطوری رفتار کنید:

// to set custom font
        introSlider.setTypeface(Typeface.createFromAsset(context.getAssets(), &quotfonts/custom_font.ttf&quot));

        // show/hide skip button
        introSlider.setSkipVisibile(true);

        // rtl/ltr slider
        introSlider.setRtl(true);

        // text of next button
        introSlider.setNextText(&quotNEXT&quot);

        // text of skip button
        introSlider.setSkipText(&quotSKIP&quot);
        
        // to add custom slider page
        introSlider.addFragment(new Fragment1());

        // show/hide indicator
        introSlider.setShowIndicator(true);
        
        // to add list of custom pages
        ArrayList<Fragment> fragments = new ArrayList<>(); 
        fragments.add(new Fragment1()); 
        fragments.add(new Fragment2()); 
        introSlider.addFragments(fragments);
        
        // observe skip button click
        introSlider.addOnSkipClickListener(() -> finish());


این اولین کتابخونه‌ای بود که توی زندگیم نوشتم. به خاطر همین حس خوبی داره و گفتم به شما هم معرفیش کنم. اگه برنامه‌نویس هستید و یا به هر دلیلی صفحه گیت‌هاب دارید و حال کردید، می‌تونید یه ستاره‌ای چیزی شاباش بدید!

لینک کتابخونه روی گیت‌هاب

پی‌نوشت

لعنت به ادیتور ویرگول


مطلب قبلیم

https://virgool.io/programming/copy-ad6ukw0tlndz