平板电脑的侧栏导航

Question

我正在为平板电脑制作一个 Android 应用程序。我使用与 Google 地图非常相似的设计，并且我使用 BottomNavigationView 进行纵向显示。

查看材料设计指南，建议底部导航在左侧作为栏。如图所示：

侧边栏导航

在帖子中它被称为紧凑的“轨道”。

是否有类似于 BottomNavigationView 的东西，看起来像上面链接的图片？

Answer 1

如果你愿意

然后尝试下面

在应用程序级别 gradle 文件中添加

compile 'devlight.io:navigationtabbar:1.2.5'

依赖项。 现在添加下面的

.xml

文件和相关的java代码

<devlight.io.library.ntb.NavigationTabBar
   android:id="@+id/ntb"
   android:layout_width="match_parent"
   android:layout_height="50dp"
   app:ntb_animation_duration="400"
   app:ntb_preview_colors="@array/colors"
   app:ntb_corners_radius="10dp"
   app:ntb_active_color="#fff"
   app:ntb_inactive_color="#000"
   app:ntb_badged="true"
   app:ntb_titled="true"
   app:ntb_scaled="true"
   app:ntb_tinted="true"
   app:ntb_title_mode="all"
   app:ntb_badge_position="right"
   app:ntb_badge_gravity="top"
   app:ntb_badge_bg_color="#ffff0000"
   app:ntb_badge_title_color="#ffffffff"
   app:ntb_typeface="fonts/custom_typeface.ttf"
   app:ntb_badge_use_typeface="true"
   app:ntb_swiped="true"
   app:ntb_bg_color="#000"
   app:ntb_icon_size_fraction="0.5"
   app:ntb_badge_size="10sp"
   app:ntb_title_size="10sp"/>

在java中

    final NavigationTabBar navigationTabBar = (NavigationTabBar) findViewById(R.id.ntb);
final ArrayList<NavigationTabBar.Model> models = new ArrayList<>();
models.add(
        new NavigationTabBar.Model.Builder(
                getResources().getDrawable(R.drawable.ic_first),
                Color.parseColor(colors[0])
        ).title("Heart")
                .badgeTitle("NTB")
                .build()
);
models.add(
        new NavigationTabBar.Model.Builder(
                getResources().getDrawable(R.drawable.ic_second),
                Color.parseColor(colors[1])
        ).title("Cup")
                .badgeTitle("with")
                .build()
);
models.add(
        new NavigationTabBar.Model.Builder(
                getResources().getDrawable(R.drawable.ic_third),
                Color.parseColor(colors[2])
        ).title("Diploma")
                .badgeTitle("state")
                .build()
);
models.add(
        new NavigationTabBar.Model.Builder(
                getResources().getDrawable(R.drawable.ic_fourth),
                Color.parseColor(colors[3])
        ).title("Flag")
                .badgeTitle("icon")
                .build()
);
models.add(
        new NavigationTabBar.Model.Builder(
                getResources().getDrawable(R.drawable.ic_fifth),
                Color.parseColor(colors[4])
        ).title("Medal")
                .badgeTitle("777")
                .build()
);
navigationTabBar.setModels(models);
navigationTabBar.setViewPager(viewPager, 2);

navigationTabBar.setTitleMode(NavigationTabBar.TitleMode.ACTIVE);
navigationTabBar.setBadgeGravity(NavigationTabBar.BadgeGravity.BOTTOM);
navigationTabBar.setBadgePosition(NavigationTabBar.BadgePosition.CENTER);
navigationTabBar.setTypeface("fonts/custom_font.ttf");
navigationTabBar.setIsBadged(true);
navigationTabBar.setIsTitled(true);
navigationTabBar.setIsTinted(true);
navigationTabBar.setIsBadgeUseTypeface(true);
navigationTabBar.setBadgeBgColor(Color.RED);
navigationTabBar.setBadgeTitleColor(Color.WHITE);
navigationTabBar.setIsSwiped(true);
navigationTabBar.setBgColor(Color.BLACK);
navigationTabBar.setBadgeSize(10);
navigationTabBar.setTitleSize(10);
navigationTabBar.setIconSizeFraction(0.5);

欲了解更多信息，请查看 此 github 存储库。

Answer 2

通过材质组件库，您可以使用

NavigationRailView

：

添加到您的布局中：

<com.google.android.material.navigationrail.NavigationRailView
    android:id="@+id/navigation_rail"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    app:menu="@menu/menu_5n" />

代码中：

NavigationBarView.OnNavigationItemSelectedListener { item ->
    when(item.itemId) {
        R.id.item1 -> {
            // Respond to navigation item 1 click
            true
        }
        R.id.item2 -> {
            // Respond to navigation item 2 click
            true
        }
        else -> false
    }
}

Answer 3

我想出了一个方法来得到我想要的。我刚刚创建了一个导航抽屉片段，就像您通常所做的那样，并且只是将宽度指定得非常小，因此只显示图标。

Answer 4

devlight.io:navigationtabbar:1.2.5

依赖项现在存储在 repo.grails.org 中。下面是使依赖项正常工作的示例。

在build.gradle（应用程序级别）中：

implementation 'devlight.io:navigationtabbar:1.2.5'

在settings.gradle中：

pluginManagement {
    repositories {
        google()
        mavenCentral()
        gradlePluginPortal()
        maven { url 'https://jcenter.bintray.com' }
        maven { url 'https://jitpack.io' }
        maven { url "https://repo.grails.org/grails/core" } 
    }
}
dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
        google()
        mavenCentral()
        maven { url "https://repo.grails.org/grails/core" } 
        maven { url 'https://jitpack.io' }
        maven { url 'https://jcenter.bintray.com' }
    }
}
rootProject.name = "xxx"
include ':app'

在build.gradle（项目级别）中：

buildscript {
    repositories {
        mavenCentral()
        google()
    }
    dependencies {
        classpath 'com.github.dcendents:android-maven-gradle-plugin:1.5'
        classpath "com.jfrog.bintray.gradle:gradle-bintray-plugin:1.7.3"
        classpath 'com.android.tools.build:gradle:3.1.2'
    }
}

plugins {
    id 'com.android.application' version '8.3.1' apply false
    id 'com.android.library' version '8.3.1' apply false
}