ساخت تب سفارشی در اندروید SpaceTabLayout

۲۱ خرداد ۱۳۹۷     سعید نوشادی    

ساخت تب سفارشی در اندروید SpaceTabLayout

ساخت تب سفارشی در اندروید SpaceTabLayout

سلام و خسته نباشید خدمت تمامی کاربران محترم کافه لرن

خیلی وقتا پیش میاد که میخواید توی برنامتون یک قابلیتی رو پیاده کنید که ظاهر برنامتون رو از دیگر برنامه ها متمایز کنه و در واقع ظاره حرفه ای تری به اپ اندرویدی خودتون بدید.

استفاده از تب ها یکی از کارهای متداولی هستش که شما توی اکثر برنامه ها دارید میبینید و استفاده خیلی زیادی داره حالا چقدر خوب میشه

که این قابلیت رو با طراحی متفاوتی پیاده کنید.

یکی از کتابخانه هایی که برای این کار ساخته شده و طراحی بسیار زیبایی هم داره کتابخانه SpaceTabLayout هستش

که در ادامه این مطلب ساخت تب سفارشی در اندروید SpaceTabLayout  رو براتون قرار میدم.

ساخت تب سفارشی در اندروید SpaceTabLayoutساخت تب سفارشی در اندروید SpaceTabLayoutساخت تب سفارشی در اندروید SpaceTabLayout

 

 

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

compile 'eu.long1:spacetablayout:1.0.4'

2- بعد از انجام این کار فایل xml رو باز کنید و کدهای زیر و توی فایل قرار بدید.

<eu.long1.spacetablayout.SpaceTabLayout
        android:id="@+id/spaceTabLayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        app:number_of_tabs="five"
        app:starting_position="three"
        app:tab_color="@color/colorPrimary"
        app:button_color="@color/colorAccent"
        app:text_color="#61FFFFFF"
        app:icon_one="@drawable/ic_hotel_black_24dp"
        app:icon_two="@drawable/design_ic_visibility"
        app:icon_three="@drawable/ic_content_cut_black_24dp"
        app:icon_four="@drawable/ic_check_black_24dp"
        app:icon_five="@drawable/ic_fingerprint_black_24dp"/>

3- اگر شما از CoordinatorLayout به عنوان لایه اصلی توی فایل xml استقاده کردید فراموش نکنید که اتربیوت زیر رو هم مانند کد بالا به کدهاتون اضافه کنید.

 app:layout_behavior="eu.long1.spacetablayout.SpaceTabLayoutBehavior"

4- پس با این تقاسیر کد کامل لایه xml شما باید به صورا زیر باشه.

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="56dp" />

    <eu.long1.spacetablayout.SpaceTabLayout
        android:id="@+id/spaceTabLayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_behavior="eu.long1.spacetablayout.SpaceTabLayoutBehavior"
        app:number_of_tabs="five"
        app:starting_position="three" />

</android.support.design.widget.CoordinatorLayout>

5- الان نوبت این هستش که کدهای اکتیویتی رو رار بدید.توی کلاس اکتیویتی کدهای زیر رو قرار بدید.

  SpaceTabLayout tabLayout;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            //add the fragments you want to display in a List
            List<Fragment> fragmentList = new ArrayList<>();
            fragmentList.add(new FragmentA());
            fragmentList.add(new FragmentB());
            fragmentList.add(new FragmentC());
            
            ViewPager viewPager = (ViewPager) findViewById(R.id.viewPager);
            tabLayout = (SpaceTabLayout) findViewById(R.id.spaceTabLayout);
            
            //we need the savedInstanceState to get the position
            tabLayout.initialize(viewPager, getSupportFragmentManager(), 
                            fragmentList, savedInstanceState);
        }
    
    
        //we need the outState to save the position
        @Override
        protected void onSaveInstanceState(Bundle outState) {
            tabLayout.saveState(outState);
            super.onSaveInstanceState(outState);
        }

خب تا به اینجا شما میتونید از این کتابخانه جذاب استفاده کنید اما برای اینکه بتونید سفارشی سازی بیشتری انجام بدید یکسری کدهای  دیگه وجود داره که براتون قرارش میدم

getTabLayout();	Gives you the base RelativeLayout.
setTabColor(@ColorInt int backgroundColor);	   .برای تغییر رنگ تب ها
getCurrentPosition();   	به شما موقعیت تب فعلی رو میده.
getButton();    	به شما دسترسی به اکشن باتن رو میده.
setButtonColor(@ColorInt int backgroundColor);	    تغییر رنگ اکشن باتن.
setOnClickListener(View.OnClickListener l);     	رویداد کلیک رو تنظیم میکنه
setTabOneOnClickListener(View.OnClickListener ll);   	رویداد کلیک تب اول رو تنظیم میکنه.
setTabTwoOnClickListener(View.OnClickListener cl);	      رویداد کلیک تب دوم رو تنظیم میکنه.
getTabOneView();       لیوت اصلی تب اول که ویو ها رو در خودش داره رو تنظیم میکنه
setTabOneView(View tabOneView);	      برای تنظیم کردن لیوت اصلی در تب اول
getTabTwoView();	           لیوت اصلی تب دوم که ویوها رو در خودش داره تنظیم میکنه
setTabTwoView(View centerView);	            برای تنظیم کردن لیوت اصلی در تب دوم
setTabOneIcon(@DrawableRes int tabOneIcon);        	تنظیم کردن ایکن برای تب اول وقی اکشن باتن کلیک شده
setTabTwoIcon(@DrawableRes int tabTwoIcon);	    تنظیم کردن آیکن برای تب دوم وقتی اکشن باتن کلیک شده

برای سفارشی سازی بیشتر توی فایل xml هم یکسری اتربیوت ها وجود داره که اونا رو هم براتون قرار میدم

        app:number_of_tabs="five"
        app:starting_position="three"
        
        app:tab_color="@color/colorPrimary"
        app:button_color="@color/colorAccent"
        app:text_color="#61FFFFFF"
        
        app:icon_one="@drawable/ic_hotel_black_24dp"
        app:icon_two="@drawable/design_ic_visibility"
        app:icon_three="@drawable/ic_content_cut_black_24dp"
        app:icon_four="@drawable/ic_check_black_24dp"
        app:icon_five="@drawable/ic_fingerprint_black_24dp"
         
        app:text_one="Action"
        app:text_two="Action"
        app:text_three="Action"

 

دیگه کارمون تمام شده و شما میتونید از این طراحی زیبا در اپ اندرویدی خودتون استفاده کنید و لذت ببرید.

ممنونیم که ما رو همراهی میکنیم.

سوالی و یا پیشنهادی داشتید پشتیبانی کافه لرن همه روزه در اختیار شماس 🙂

 

دسته بندی ها : آموزش متنی اندروید

پاسخی بگذارید

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

*

code

Rating*