如何创建类似于 instagram 的底部导航栏

Question

我是一名 android 新手，正在尝试为我的新 android 应用程序创建一个类似于 Instagram 中的底部导航栏。像这样 单击搜索图标会在操作栏中添加一个搜索栏。 我正在构建一个应用程序，用于提醒用户他的医疗预约，底部有三个导航选项卡。我一直创建到这个 之后我被卡住了。我应该使用三个活动来显示相应选项卡或片段的内容吗？我该如何实现。

我需要 recyclerview 来显示约会。如何仅在单击底部的搜索图标时显示搜索栏。 已经搜索了很多以实现此目的，但找不到任何有用的东西。

对于实现相同功能的代码或库的任何建议都将非常有帮助，谢谢。

Answer 1

你把你的底部导航放在 activity 中并用你想要的任何东西填充它然后你使用这个

bottomNavigationView.setOnNavigationItemSelectedListener(this);

添加项目select 侦听器。您还可以像这样

在 activity 中实现所需的方法

@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
    switch (item.getItemId()){
        case R.id.action_home:
            //open home fragment
            break;

        case R.id.action_search:
            //open search or whatever
            break;

    }

    return true;
}

现在，当某些项目被 selected 时，您可以随心所欲地做任何事情，例如，当搜索项目被 selected 时，您可以显示搜索部分并在其他项目被编辑时隐藏它selected.

Answer 2

如果你想要 BottomBar 的库 here's one。 您必须在单击该底部栏项目时控制 SearchBar 的可见性。如果您正在尝试实现自己的搜索栏，请查看此链接 link1 link2

Answer 3

选项卡的概念是您必须有一个 MainActivity，它将处理比方说 3 个片段。使用@Alireza 建议的代码，您将处理片段之间的变化。请查看有关如何实现 Tabs (like this one here) 的教程。之后，在您的 "SearchFragment.java" 中，您将相应地构建您的 XML ，顶部是搜索栏，下方是回收站视图，或者任何您想要的。建议：在使用fragments的时候，一定要有一个Context mContext = getActivity();首先定义，因为它会更容易实现所有功能。

*为你实现底部tab效果，可以动 android.support.design.widget.TabLayout 到屏幕底部

Answer 4

Should I use three activities to display the content of corresponding tabs or fragments and how can I achieve that?

绝对应该为每个底部导航 Item / Tab 使用 Fragment。喜欢 FragmentHome、FragmentSearch 和 FragmentSettings。

要更改 Fragment，请将 NavigationItemSelectedListener 添加到您的 BottomNavigationView 并根据 MenuItem 选择更改 Fragment：

    BottomNavigationView bottomNavigationView = (BottomNavigationView)
            findViewById(R.id.bottom_navigation_view);

    bottomNavigationView.setOnNavigationItemSelectedListener
            (new BottomNavigationView.OnNavigationItemSelectedListener() {
                @Override
                public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                    Fragment selectedFragment = null;
                    switch (item.getItemId()) {
                        case R.id.action_item1:
                            selectedFragment = FragmentHome.newInstance();
                            break;
                        case R.id.action_item2:
                            selectedFragment = FragmentSearch.newInstance();
                            break;
                        case R.id.action_item3:
                            selectedFragment = FragmentSettings.newInstance();
                            break;
                    }
                    FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
                    transaction.replace(R.id.frame_layout, selectedFragment);
                    transaction.commit();
                    return true;
                }
            });

这是一个教程：BottomNavigationView with multiple Fragments

I need a recyclerview to display appointments

在您的 Fragment's 布局 XML 中，添加 RecyclerView 以显示约会列表。在您的 Fragment class 中，初始化 RecyclerView 并创建一个 ArrayList<Appointment> 并将此 list 传递给您的 Adapter 以在 RecyclerView 上显示行项目。

这是一个教程：How to use RecyclerView in Fragment

How can I display the search bar only when the search icon at bottom is clicked?

您可以根据您的 Fragment 更改 show/hide 以编程方式从 ToolBar/ActionBar 中选择项目。

在您的 FragmentSearch 中，进行以下更改以显示 Searchbar：

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setHasOptionsMenu(true);
}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup parent, Bundle savedInstanceState)
{
    View v = inflater.inflate(R.layout.fragmet_search, parent, false);
    return v;
}


@Override
public void onCreateOptionsMenu(Menu menu, MenuInflater inflater) {
   inflater.inflate(R.menu.your_search_menu_xml, menu);
   super.onCreateOptionsMenu(menu, inflater);
}

这里有一些有用的链接：

1. Android Toolbar Adding Menu Items for different fragments
2. Hide/Show Action Bar Option Menu Item for different fragments
3. Adding ActionBar Items From Within Your Fragments

希望这有助于理解场景。

Answer 5

您可以查看 google 示例中名为 NavigationAdvancedSample 的示例。 NavigationExtensions 将解决您的问题

Navigation Advanced Sample