Question

如何根据屏幕截图制作顶部导航菜单？

我希望顶部链接可点击和滚动，因为顶部导航中有更多项目。

Answer 1

首先你需要工具栏然后在工具栏下面你需要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>

然后，您需要 activity / fragment

中的以下代码

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

Answer 2

您必须使用TabLayout和ViewPager来创建如上所述的用户界面。请参考： https://developer.android.com/training/implementing-navigation/lateral.html

还有一些开源github项目。

实施例： https://github.com/ogaclejapan/SmartTabLayout

Answer 3

正如我在屏幕上看到的通常操作NavigationDrawer的导航按钮一样，我假设您将来可能需要它。

要实现您所谓的 ＆＃34;最佳方法＆＃34; ，您首先应该通过展示一些内容来描述至少您正在使用的架构代码等。

让我们假设你会去常常＆＃34;持有人Activity和少量Fragment s页面的方式。然后，基本上，您需要的是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>

然后去Kotlin部分。这里我展示了连接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
        }
    }
}

我不会解释您构建此代码所需的每一步，因为那里有很多解释整个概念的tutos，但是直接鼓励你去谷歌，以避免未来片段堆栈或标准android组件可能存在的一些问题。

创建顶部导航菜单

3 个答案: