Создание верхнего меню навигации

Как сделать главное меню навигации в соответствии с скриншотом?

Я хочу, чтобы верхние ссылки были интерактивными и прокручиваемыми, так как в верхней навигации больше элементов.

скриншот навигации

Сначала вам нужна панель инструментов, а затем панель инструментов вам нужно tablayout и viewpager

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/mainLayout" android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="@color/colorPrimary" android:theme="@style/CustomToolbarTheme" app:titleTextAppearance="@style/Toolbar.TitleText" /> <android.support.design.widget.TabLayout android:id="@+id/tab_layout" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/colorPrimary" app:tabGravity="fill" app:tabIndicatorColor="@color/white" app:tabIndicatorHeight="1.6dp" app:tabMode="fixed" app:tabSelectedTextColor="@color/white" app:tabTextColor="#c3ffffff" /> <android.support.v4.view.ViewPager android:id="@+id/view_pager" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/white"> </LinearLayout> </android.support.design.widget.CoordinatorLayout> 

Тогда вам понадобится код ниже в вашей активности / фрагменте

  private TabLayout tabLayout; private ViewPager viewPager; @Override protected void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.your_layout); initialiseViews(); setUpTabLayout(); } public void initialiseViews() { tabLayout = (TabLayout) findViewById(tab_layout); viewPager = (ViewPager) findViewById(R.id.view_pager); } private void setUpTabLayout() { ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager()); adapter.add(new YourFragment1(), "Home"); adapter.add(new YourFragment2(), "Trending"); adapter.add(new YourFragment3(), "Friends"); viewPager.setAdapter(adapter); viewPager.setPageMargin((int) getResources().getDimension(R.dimen.view_pager_gap)); viewPager.setPageMarginDrawable(R.color.background); viewPager.setOffscreenPageLimit(2); tabLayout.setupWithViewPager(viewPager); } private class ViewPagerAdapter extends FragmentPagerAdapter { private List<Fragment> fragmentList = new ArrayList<>(); private List<String> titleList = new ArrayList<>(); private ViewPagerAdapter(FragmentManager fm) { super(fm); } void add(Fragment fragment, String title) { fragmentList.add(fragment); titleList.add(title); } @Override public Fragment getItem(int position) { return fragmentList.get(position); } @Override public CharSequence getPageTitle(int position) { return titleList.get(position); } @Override public int getCount() { return fragmentList.size(); } @Override public int getItemPosition(Object object) { return POSITION_NONE; } } 

Вы должны использовать TabLayout и ViewPager для создания пользовательского интерфейса, как указано выше. См. Это: https://developer.android.com/training/implementing-navigation/lateral.html

Также есть некоторые проекты github с открытым исходным кодом.

Пример: https://github.com/ogaclejapan/SmartTabLayout

Поскольку я вижу также навигационную кнопку, которая обычно использует NavigationDrawer на вашем экране, я предполагаю, что вам может понадобиться это в будущем.

Чтобы достичь того, что вы называете «наилучшим подходом», вы должны сначала описать, по крайней мере, какую архитектуру вы используете, показывая код и т. Д.

Предположим, вы пойдете «обычным» способом с помощью Activity и несколькими страницами Fragment s aka. Тогда, в основном, вам нужен пользовательский Adapter для ViewPager :

Сначала вам нужен правильный макет, что-то вроде этого:

 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="#464646" app:layout_scrollFlags="scroll|enterAlways|snap" app:popupTheme="@style/ThemeOverlay.AppCompat.Dark" app:theme="@style/AppTheme" app:titleTextColor="#e1e1e1" /> <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/drawer_layout" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" tools:context=".ui.main.MainActivity"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <android.support.design.widget.TabLayout android:id="@+id/tabLayout" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#606060" android:minHeight="?attr/actionBarSize" android:theme="@style/AppTheme" /> <android.support.v4.view.ViewPager android:id="@+id/viewPager" android:layout_width="match_parent" android:layout_height="wrap_content" /> </LinearLayout> <FrameLayout android:id="@+id/content_frame" android:layout_width="match_parent" android:layout_height="match_parent" /> <android.support.design.widget.NavigationView android:id="@+id/navigation_view" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="start" app:headerLayout="@layout/drawer_header" app:menu="@menu/drawer_menu_general" /> </android.support.v4.widget.DrawerLayout> </LinearLayout> 

Затем идет часть Котлина. Здесь я показываю фрагмент кода, который соединяет функции ViewPages и DrawerLayout:

 class MainActivity : AppCompatActivity(), NavigationView.OnNavigationItemSelectedListener { private val pageTitles = arrayOf("TITLE_ONE", "TITLE_TWO") private lateinit var mDrawer: DrawerLayout private lateinit var mNavigationView: NavigationView private lateinit var mDrawerToggle: ActionBarDrawerToggle private lateinit var mActionBar: ActionBar private var mToolBarNavigationListenerIsRegistered = false override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) mDrawer = findViewById(R.id.drawer_layout) val toolbar: Toolbar = findViewById(R.id.toolbar) setSupportActionBar(toolbar) mActionBar = supportActionBar!! for (i in 0..YOUR_VIEWS_COUNT) { tabLayout.addTab(tabLayout.newTab().setText(pageTitles[i])) } tabLayout.tabGravity = TabLayout.GRAVITY_FILL mDrawerToggle = ActionBarDrawerToggle(this, mDrawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close) mDrawer.addDrawerListener(mDrawerToggle) mDrawerToggle.syncState() mNavigationView = findViewById(R.id.navigation_view) mNavigationView.setNavigationItemSelectedListener(this) val pagerAdapter = ViewPagerAdapter(supportFragmentManager) viewPager.adapter = pagerAdapter viewPager.addOnPageChangeListener(TabLayout.TabLayoutOnPageChangeListener(tabLayout)) tabLayout.addOnTabSelectedListener(object : TabLayout.OnTabSelectedListener { override fun onTabSelected(tab: TabLayout.Tab) { viewPager.currentItem = tab.position } override fun onTabUnselected(tab: TabLayout.Tab) {} override fun onTabReselected(tab: TabLayout.Tab) {} }) if(savedInstanceState != null){ resolveUpButtonWithFragmentStack() } else { } } override fun onNavigationItemSelected(item: MenuItem): Boolean { when(item.itemId){ R.id.your_first_item_view -> { supportFragmentManager.beginTransaction().hide(getCurrentFragment()) .add(R.id.content_frame, YourFragment(), Integer.toString(getFragmentCount())) .addToBackStack("fragBack").commit() showUpButton(true) title = "YourFragment" } } mDrawer.closeDrawer(GravityCompat.START) return true } override fun onOptionsItemSelected(item: MenuItem): Boolean { when (item.itemId) { android.R.id.home -> { mDrawer.openDrawer(GravityCompat.START) return true } } return super.onOptionsItemSelected(item) } override fun onBackPressed() { if (mDrawer.isDrawerOpen(GravityCompat.START)) { mDrawer.closeDrawer(GravityCompat.START) } else { val backStackCount = getFragmentCount() if (backStackCount >= 1) { supportFragmentManager.popBackStack() if (backStackCount == 1) { showUpButton(false) } } else { super.onBackPressed() } } } private fun showUpButton(show: Boolean) { if (show) { mDrawerToggle.isDrawerIndicatorEnabled = false mActionBar.setDisplayHomeAsUpEnabled(true) if (!mToolBarNavigationListenerIsRegistered) { mDrawerToggle.toolbarNavigationClickListener = View.OnClickListener { onBackPressed() } mToolBarNavigationListenerIsRegistered = true } } else { mActionBar.setDisplayHomeAsUpEnabled(false) mDrawerToggle.isDrawerIndicatorEnabled = true mDrawerToggle.toolbarNavigationClickListener = null mToolBarNavigationListenerIsRegistered = false } } private fun resolveUpButtonWithFragmentStack() { showUpButton(supportFragmentManager.backStackEntryCount > 0) } fun getFragmentCount(): Int { return supportFragmentManager.backStackEntryCount } fun getFragmentAt(index: Int): Fragment { return if (getFragmentCount() > 0) supportFragmentManager.findFragmentByTag(Integer.toString(index)) else NearbyPlaceTypesFragment() } fun getCurrentFragment(): Fragment { return getFragmentAt(getFragmentCount() - 1) } // Your adapter for ViewPager class ViewPagerAdapter(val fragmentManager: FragmentManager) : FragmentStatePagerAdapter(fragmentManager) { override fun getItem(position: Int): Fragment { return when (position) { 0 -> { YourFragment() } else -> { YourOtherFragment() } } } override fun getCount(): Int { return 2 } } } 

Я не буду объяснять каждый шаг, который вам понадобится для создания этого кода, поскольку у вас много тутонов, которые объясняют всю концепцию, но прямо рекомендую вам использовать ее, чтобы избежать возможных проблем с стеке фрагментов или стандартным андроидом компонентов в будущем.