如何创建类似于instagram的底部导航栏 [英] How to create bottom navigation bar similar to instagram

问题描述

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

I am an android newbie trying to create a bottom navigation bar for my new android app similar to one there in Instagram. Like this where clicking on the search icon adds a search bar in action bar. I am building an app for reminding the user about his medical appointments which has three navigation tabs at the bottom. I have created till this after this I am stuck. Should I use three activities to display the content of corresponding tabs or fragments and how can I achieve that.

我需要一个recyclerview来显示约会.仅当单击底部的搜索图标时，才能显示搜索栏. 在实现这一目标方面进行了很多搜索，但找不到任何有用的东西.

I need a recyclerview to display appointments. How can I display the search bar only when the search icon at bottom is clicked. Have searched a lot on achieving this but could not find anything useful.

任何对实现相同目标的代码或库的建议，将非常有帮助，谢谢.

Any suggestions for code or library which achieves the same would be great help thanks.

推荐答案

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

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.

Definitely you should use Fragment for each bottom navigation Item / Tab. Like FragmentHome, FragmentSearch and FragmentSettings.

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

To change the Fragment, add NavigationItemSelectedListener to your BottomNavigationView and change Fragment as per MenuItem selection:

    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

Here is a tutorial about: BottomNavigationView with multiple Fragments

我需要recyclerview来显示约会

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

In your Fragment's layout XML, add a RecyclerView to show list of appointments. In your Fragment class, initialize RecyclerView and create an ArrayList<Appointment> and pass this list to your Adapter to show on RecyclerView row items.

此处是有关以下内容的教程:如何使用RecyclerView在片段中

Here is an tutorial about: How to use RecyclerView in Fragment

仅当底部显示search图标时，如何显示search bar 被点击?

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

您可以根据片段更改从ToolBar/ActionBar以编程方式显示/隐藏选项.

You can show/hide option item programmatically from ToolBar/ActionBar as per your Fragment change.

在您的FragmentSearch中，执行以下更改以显示Searchbar:

In your FragmentSearch, do below changes to show 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);
}

以下是一些有用的链接:

Here are some useful links:

1. Android工具栏为不同片段添加菜单项
2. >隐藏/显示操作栏选项菜单项不同的片段
3. 从片段中添加ActionBar项

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

希望这将有助于您了解这种情况.

Hope this will help to understand the scenario.

这篇关于如何创建类似于instagram的底部导航栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！