معرفی کتابخانه های bottom navigation


مغرفی کتابخانه bottom navigation در اندروید

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

معرفی کتابخانه Bubble Navigation

یک کتابخانه سبک با پیاده سازی آسان که یک bottom navigation زیبا را در برنامه شما قرار می دهد. این کتابخانه با زبان جاوا و کاتلین نوشته شده و در هر دو زبان قابل استفاده می باشد. با این کتابخانه می توانید فونت آیتم ها را تغییر دهید.
برای افزودن این کتابخانه به پروژه باید خط زیر را در بلوک dependencies وارد کنید.

dependencies {
    implementation 'com.gauravk.bubblenavigation:bubblenavigation:1.0.7'
}

در این کتابخانه دو نوع navigation برای استفاده وجود دارند که هر دوی آنها در قالب xml بصورت زیر می باشند.

<com.gauravk.bubblenavigation.BubbleNavigationLinearView
        android:id="@+id/bottom_navigation_view_linear"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/white"
        android:elevation="8dp"
        android:orientation="horizontal"
        android:padding="12dp">

        <com.gauravk.bubblenavigation.BubbleToggleView
            android:id="@+id/l_item_home"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:bt_active="true"
            app:bt_colorActive="@color/home_active"
            app:bt_colorInactive="@color/home_inactive"
            app:bt_icon="@drawable/ic_home"
            app:bt_shape="@drawable/transition_background_drawable_home"
            app:bt_title="@string/home"
            app:bt_padding="@dimen/internal_padding"
            app:bt_titlePadding="@dimen/title_padding" />
  
    <!-- Add more child items here - max upto 5 -->
    
    </com.gauravk.bubblenavigation.BubbleNavigationLinearView>

معرفی کتابخانه BubbletabBar


برای استفاده از این کتابخانه minSdk در build.gradle باید روی 21 ست شود. این پروژه تماما با زبان کاتلین پیاده سازی شده اما برای پروژه هایی که با زبان جاوا نوشته شده اند هم قابل استفاده می باشد. در build.gradle کتابخانه را به شکل زیر به پروژه اضافه می نماییم.

 implementation  'com.fxn769:bubbletabbar:1.0.5'

برای استفاده از این کتابخانه و ایجاد navigation در layoutِ مربوطه، به دو صورت زیر می توان عمل کرد.

 <com.fxn.BubbleTabBar
               android:id="@+id/bubbleTabBar"
               android:layout_width="match_parent"
               android:layout_height="wrap_content"
               android:background="#FFF"
               android:elevation="16dp"
               android:padding="7dp"
               app:bubbletab_menuResource="@menu/list"
               app:bubbletab_custom_font="@font/opensans"
               app:bubbletab_disabled_icon_color="@color/colorPrimaryDark"
               app:bubbletab_horizontal_padding="20dp"
               app:bubbletab_icon_size="20dp"
               app:bubbletab_title_size="16sp"
               app:bubbletab_icon_padding="5sp"
               app:bubbletab_vertical_padding="10dp">
       </com.fxn.BubbleTabBar>

یا

<com.fxn.BubbleTabBar
               android:id="@+id/bubbleTabBar"
               android:layout_width="match_parent"
               android:layout_height="wrap_content"
               android:padding="7dp"
               app:bubbletab_menuResource="@menu/list">
       </com.fxn.BubbleTabBar>

هم چنین برای تعریف آیتم های منو در این حالت به شکل زیر می توان عمل کرد.

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/home"
        android:icon="@drawable/ic_grid"
        android:title="Home"
        android:checked="true"
        android:iconTint="@color/home"/>

    <item
        android:id="@+id/log"
        android:icon="@drawable/ic_clock"
        android:title="Logger"
        android:iconTint="@color/logger"/>
</menu>
         

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

bubbleTabBar.setupBubbleTabBar(viewpager)

معرفی کتابخانه Chip Navigation Bar


کتابخانه ی chip navigation bar بر اساس bottom navigation و chips در کتابخانه متریال دیزاین گوگل و به زبان کاتلین نوشته شده است. برای بکارگیری در پروژه minSdk باید روی 21 ست شود.
امتیاز استفاده از chip navigation bar در ست کردن navigation به صورت افقی یا عمودی در صفحه ست. هم چنین متدهای متعددی که امکان customizeِ یا شخصی سازی هرچه بیشتر را به دولوپر می دهد.
برای افزودن کتابخانه ی chip navigation bar در build.gradle کافی ست خط زیر را اضافه نمایید.

implementation 'com.ismaeldivita.chipnavigation:chip-navigation-bar:1.3.3'

ایجاد یک view از نوع chip navigation bar در layout مربوطه به صورت زیر انجام می گیرد.

<com.ismaeldivita.chipnavigation.ChipNavigationBar
    android:id="@+id/menu"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cnb_menuResource="@menu/bottom_menu"
    app:cnb_orientationMode="horizontal"
    app:cnb_addBottomInset="false"
    app:cnb_addLeftInset="false"
    app:cnb_addRightInset="false"
    app:cnb_addTopInset="false"
    app:cnb_unselectedColor="@color/my_menu_unselected_color"
    app:cnb_badgeColor="@color/my_menu_badge_color"
    app:cnb_radius="8dp"
    app:cnb_iconSize="24dp"
    app:cnb_textAppearance="?myThemeTextAppearance"/>

هم چنین با جستجوی نام این کتابخانه می توان ویدئوهای تکمیلی جهت بکارگیری آن در کدهای جاوا را به آسانی پیدا کرد.

کتابخانه MeowBottomNavigation


یک کتابخانه سبک و زیبا که با زبان کاتلین پیاده سازی شده و در حال حاضر برای پروژه هایی به زبان کاتلین و جاوا قابل استفاده می باشد. برای افزودن این کتابخانه به پروژه های کاتلینی در فایل build.gradle، ابتدا این خط را به dependencies اضافه می نماییم.

dependencies {
  implementation 'com.etebarian:meow-bottom-navigation:1.3.1'
}

و سپس در gradle.properties این بخش را اضافه می کنیم.

android.useAndroidX=true
android.enableJetifier=true

هم چنین برای قرار دادن MeowBottomNavigation در پروژه ی جاوایی، خط زیر را در build.gradle وارد می کنیم.

dependencies {
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:1.3.61"
}

مشخصه هایی که با این کتابخانه می توان آنها را customize نمود شامل مثال زیر می باشند.

<com.etebarian.meowbottomnavigation.MeowBottomNavigation
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:mbn_circleColor="#ffffff"
    app:mbn_backgroundBottomColor="#ffffff"
    app:mbn_countBackgroundColor="#ff6f00"
    app:mbn_countTextColor="#ffffff"
    app:mbn_countTypeface="fonts/SourceSansPro-Regular.ttf"
    app:mbn_defaultIconColor="#90a4ae"
    app:mbn_rippleColor="#2f424242"
    app:mbn_selectedIconColor="#3c415e"
    app:mbn_shadowColor="#1f212121"
    app:mbn_hasAnimation="true"    
/>

به این پست امتیاز دهید

روی ستاره های کلیک کنید و امتیاز بدید

میانگین امتیاز / 5. تعداد:

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

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




Enter Captcha Here : *

Reload Image