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

时间:2017-06-04 06:47:48

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

我是一个Android新手试图为我的新Android应用程序创建一个底部导航栏,类似于Instagram中的那个。像这样instagram.jpg,点击搜索图标会在操作栏中添加搜索栏。 我正在构建一个应用程序,用于提醒用户他的医疗预约,底部有三个导航标签。在此之后我创造了这个Screenshot_2017-06-04-11-59-56.png我被卡住了。我应该使用三个活动来显示相应选项卡或片段的内容,我该如何实现。

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

对代码或库实现相同的任何建议都将是非常有用的,谢谢。

5 个答案:

答案 0 :(得分:4)

  

我应该使用三个activities来显示相应的内容   tabsfragments我该如何实现?

您肯定应该为每个底部导航Fragment使用Item / Tab。与FragmentHomeFragmentSearchFragmentSettings一样。

要更改Fragment,请将NavigationItemSelectedListener添加到BottomNavigationView,然后根据Fragment选择更改MenuItem

    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 bar图标时显示search   点击了吗?

您可以根据片段更改从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
  4. 希望这有助于理解这种情况。

答案 1 :(得分:0)

您将底部导航放入活动中,并将其填入您想要的任何内容,然后使用此

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

现在,您可以在选择某个项目时执行任何操作,例如,当选择搜索项目时,您可以显示搜索部分并在选择其他项目时隐藏它。

答案 2 :(得分:0)

如果您想要BottomBar here's one的库。 您必须通过单击该底部条形项来控制SearchBar的可见性。如果您要尝试实施自己的搜索栏,请查看此链接link1 link2

答案 3 :(得分:0)

标签的概念是你必须有一个MainActivity,它将处理让我们说3个片段。使用@Alireza建议的代码,您将处理片段之间的更改。请查看有关如何实现选项卡(like this one here)的教程。在那之后,在你的&#34; SearchFragment.java&#34;您将通过顶部的搜索栏和下面的回收站视图或任何您希望的内容相应地构建XML。建议:使用片段时,一定要有一个Context mContext = getActivity();首先定义,因为它将更容易实现所有功能。

*为了获得底部标签效果,您可以移动  android.support.design.widget.TabLayout 到屏幕的底部

答案 4 :(得分:0)

您可以看一下这个示例,该示例在google示例中名为NavigationAdvancedSample。 NavigationExtensions将解决您的问题

Navigation Advanced Sample

相关问题