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

【问题标题】：How to create bottom navigation bar similar to instagram如何创建类似于 instagram 的底部导航栏
【发布时间】：2017-06-04 06:47:47
【问题描述】：

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

我需要recyclerview 来显示约会。如何仅在单击底部的搜索图标时才显示搜索栏。在实现这一点上进行了很多搜索，但找不到任何有用的东西。

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

【问题讨论】：

看来你对Android开发的很多基本概念都不是很了解。我建议您遵循有关 Android 开发的适当教程来学习基础知识，然后自己尝试。到那时你应该知道如何使用片段、标签和动态显示/隐藏搜索栏了。

标签： android android-fragments android-recyclerview instagram bottomnavigationview

【解决方案1】：

我应该用三个activities来显示对应的内容吗 tabs 或 fragments 我该如何实现？

您绝对应该为每个底部导航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的教程

我需要recyclerview 来显示约会

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

这里有一个关于：How to use RecyclerView in Fragment的教程

只有在底部有search 图标时，我才能显示search bar 被点击了吗？

您可以根据片段更改以编程方式从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);
}

这里有一些有用的链接：

希望这将有助于理解该场景。

【讨论】：

非常欢迎。如果我的回答似乎有用，我希望你也能给予支持。谢谢~
@FAT 赞成并接受了这个答案，非常感谢:)
最佳答案...我有一个疑问...如果需要在fragmentHome中设置片段怎么办？
@simon 只是在 fragmenthome 布局中使用 viewpager。创建一个 FragmentPagerAdapter 并在 viewpager 上填充所需的片段。
这是一个很好的答案，但是，Instagram 保留了片段的状态，如果您像以前一样使用transaction.replace(R.id.frame_layout, selectedFragment);，则每次都会重新创建片段。这正是我现在遇到的问题......

【解决方案2】：

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

bottomNavigationView.setOnNavigationItemSelectedListener(this);

添加项目选择侦听器。您还可以像这样在您的活动中实现所需的方法

@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;
}

现在选择某些项目时要做任何您想要的事情，例如选择搜索项目时，可以显示搜索部分并在选择其他项目时隐藏它。

【讨论】：

@Alireza 我应该使用三个活动还是使用三个单独的片段来显示每个选项卡的详细信息
@Alireza 我已经实现了你建议的代码，只是想知道接下来我应该使用哪一个来显示详细信息片段或活动。谢谢
片段！您使用包含底部导航的活动和包含片段的框架布局，然后我们用户单击您在该容器中显示片段的选项卡。

【解决方案3】：

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

【讨论】：

@Nikhya 感谢链接。我应该使用三个片段或三个活动来显示选项卡的详细信息
将三个片段与 View pager 一起使用，这样您就会看起来像 WhatsApp/Instagram。由于 ViewPager，您可以滑动这些片段。您可以为 ViewPager 搜索更多内容

【解决方案4】：

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

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

【讨论】：

@Razvan 非常感谢你的建议会试试这个

【解决方案5】：

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

Navigation Advanced Sample

【讨论】：