Android Material Design之TabLayout + NavigationView联合使用

来源：互联网发布：阿里巴巴怎么关联淘宝编辑：程序博客网时间：2024/04/29 05:42

这是写的第二篇关于Android Material Design的文章，第一篇着重讲了CoordinatorLayout （协调容器）和CollapsingToolbarLayout （可折叠式布局）的基本应用。这一篇我们来看一看如何用TabLayout + NavigationView来仿照网易新闻等的导航栏。

先看看实现效果：

这里写图片描述

侧边导航的效果是：

这里写图片描述

嘿嘿，大爱琅琊榜。

项目涉及到的基本知识：

TabLayout的基本使用
NavigationView的基本使用和监听
DrawerLayout抽屉布局
ViewPager+Fragment滑动页面
CircleImageView圆形图片

项目实战分析

项目结构如下：

这里写图片描述

布局文件R.layout.activity_main：

<?xml version="1.0" encoding="utf-8"?><android.support.v4.widget.DrawerLayout   //DrawerLayout是一个DrawerLayout，其中重要的角色有ViewDragHelper，ViewDragCallback，以它作为根布局；  xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:id="@+id/drawer_layout"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:fitsSystemWindows="true"    >    <FrameLayout        android:id="@+id/container"  //填放MainFragment        android:layout_width="match_parent"        android:layout_height="match_parent"        android:fitsSystemWindows="true"        />    <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"//NavigationView  的一个属性，给Menu添加头部布局        android:fitsSystemWindows="true"        app:menu="@menu/drawer"/>//NavigationView  的属性，设置Menu的选项</android.support.v4.widget.DrawerLayout>

重要代码MainActivity.java：

 @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        //initView        this.mDrawerlayout = (DrawerLayout) findViewById(R.id.drawer_layout);        this.mNavigationview = (NavigationView) findViewById(R.id.navigation_view);        rl=(RelativeLayout)(this.mNavigationview).getHeaderView(0);//得先获取ImageView的父布局；        image=(CircleImageView)rl.findViewById(R.id.profile_image);        mNavigationview.setNavigationItemSelectedListener(this); //设置菜单点击监听        //initFragment        //添加MainFragment到MainActivity中        getSupportFragmentManager()                .beginTransaction()                .replace(R.id.container, new MainFragment(), "Main")                .commit();        mCurrentMenuItem = R.id.menu_item_1;        image.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View view) {                mDrawerlayout.closeDrawers(); //关闭侧滑菜单                startActivity(new Intent(MainActivity.this,ImageActivity.class));//查看图片            }        });    }    ....省略部分...     @Override    public boolean onNavigationItemSelected(MenuItem menuItem) {        @IdRes int id = menuItem.getItemId();        if (id == mCurrentMenuItem) {//点击了当前的Tab则直接关闭            mDrawerlayout.closeDrawers();            return false;        }        //切换Tab        switch (id) {            case R.id.menu_item_1:                setTab(0);                break;            case R.id.menu_item_2:                setTab(1);                break;            case R.id.menu_item_3:                setTab(2);                break;            case R.id.menu_item_4:                setTab(3);                break;            case R.id.menu_item_5:                setTab(4);                break;            default:                break;        }        mCurrentMenuItem = id;        menuItem.setChecked(true);        mDrawerlayout.closeDrawers(); //关闭侧滑菜单        return true;    }    /**     * 设置Tab     * @param currentItem 要设置的Tab序号 index 0     */    private void setTab(int currentItem) {        Fragment fragment = getSupportFragmentManager().findFragmentByTag("Main");        if(fragment instanceof MainFragment){           // ((MainFragment)fragment).setPagerItem(currentItem);//这样写会有bug            ((MainFragment)fragment).setTabSelect(currentItem);        }    }    /**     * set menu item check     * @param position index 0     */    public void setMenuItem(int position){        @IdRes int id = 0;        switch (position){            case 0:                id = R.id.menu_item_1;                break;            case 1:                id = R.id.menu_item_2;                break;            case 2:                id = R.id.menu_item_3;                break;            case 3:                id = R.id.menu_item_4;                break;            case 4:                id = R.id.menu_item_5;                break;            default:                break;        }        if(id!=0){            mNavigationview.setCheckedItem(id);            mCurrentMenuItem = id;        }    }    public void setToolBar(Toolbar toolBar){        if (toolBar != null) {            //ActionBarDrawerToggle是一个开关，用于打开/关闭DrawerLayout抽屉            final ActionBarDrawerToggle drawerToggle = new ActionBarDrawerToggle(this,mDrawerlayout,toolBar,R.string.app_name,R.string.app_name2);            mDrawerlayout.setDrawerListener(drawerToggle);//设置Drawerlayout的开关监听            drawerToggle.syncState();//该方法会自动和toolBar关联；        }    }

布局文件R.layout.fragment_main：

<?xml version="1.0" encoding="utf-8"?><android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:id="@+id/coordinator_layout"    android:layout_width="match_parent"    android:layout_height="match_parent">    <android.support.design.widget.AppBarLayout        android:id="@+id/app_bar_layout"        android:layout_width="match_parent"        android:layout_height="wrap_content">        <android.support.v7.widget.Toolbar            android:id="@+id/toolbar_tabbar"            android:layout_width="match_parent"            android:layout_height="?attr/actionBarSize"            android:background="?attr/colorPrimary"            android:minHeight="?attr/actionBarSize"            app:layout_scrollFlags="scroll|enterAlways"//设置滑动到顶部时，Toolbar会消失；            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"            android:title="琅琊榜"            app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />        <android.support.design.widget.TabLayout//TabLayout今天的主角；            android:id="@+id/tab_layout"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:layout_below="@+id/toolbar_tabbar"            android:background="?attr/colorPrimary"//设置TabLayout的背景            android:scrollbars="horizontal"            app:tabTextColor="@android:color/black"//设置TabLayout的tab的字体颜色            app:tabSelectedTextColor="?attr/colorAccent"//设置TabLayout的tab被选中后的字体的颜色            app:tabBackground="@android:color/white"//设置TabLayout的tab的背景色            app:tabIndicatorColor="?attr/colorAccent"//设置TabLayout的指示器的颜色            app:tabPaddingStart="12dp"            app:tabPaddingEnd="12dp"//设置TabLayout的tab的内间距            app:tabMode="scrollable"//设置TabLayout是固定还是可以滚动            app:tabGravity="center"//设置TabLayout的tab在中心            />    </android.support.design.widget.AppBarLayout>    <android.support.v4.view.ViewPager        android:id="@+id/view_pager"        android:layout_width="match_parent"        android:layout_height="match_parent"        app:layout_behavior="@string/appbar_scrolling_view_behavior" /></android.support.design.widget.CoordinatorLayout>

重要的代码MainFragment.java:

public class MainFragment extends Fragment {    private TabLayout mTabLayout;    private ViewPager mViewPager;    private Toolbar mToolbar;    private PagerAdapter pagerAdapter;    private List<String> titles=new ArrayList<>();    public MainFragment(){    }    @Override    public View onCreateView(LayoutInflater inflater,ViewGroup container, Bundle savedInstanceState) {        // Inflate the layout for this fragment        View view = inflater.inflate(R.layout.fragment_main, container, false);        this.mTabLayout = (TabLayout) view.findViewById(R.id.tab_layout);        this.mViewPager = (ViewPager) view.findViewById(R.id.view_pager);        mToolbar = (Toolbar) view.findViewById(R.id.toolbar_tabbar);        mToolbar.setTitle("琅琊榜");        ((MainActivity)getActivity()).setToolBar(mToolbar);//将ToolBar的点击事件和DrawLayout关联起来        setupViewPager();        return view;    }    private void setupViewPager() {        titles.add(getResources().getString(R.string.item1));        titles.add(getResources().getString(R.string.item2));        titles.add(getResources().getString(R.string.item3));        titles.add(getResources().getString(R.string.item4));        titles.add(getResources().getString(R.string.item5));        pagerAdapter = new PagerAdapter(getChildFragmentManager(), getActivity(),titles);        mViewPager.setAdapter(pagerAdapter);        mTabLayout.setupWithViewPager(mViewPager);//这一行代码很重要，将tablayout与viewpager关联起来，调用TabLayoutOnPageChangeListener。        //设置ViewPager滚动监听        mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {            @Override            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {            }            @Override            public void onPageSelected(int position) {                //更改页面后，通知Activity更改菜单选中项                ((MainActivity)getActivity()).setMenuItem(position);                //mTabLayout.getTabAt(position).select();            }            @Override            public void onPageScrollStateChanged(int state) {            }        });    }    public void setPagerItem(int item){        mViewPager.setCurrentItem(item);    }    public  void setTabSelect(int position){//选中侧滑菜单的item后，修改Fragment中tab和页面；        mTabLayout.getTabAt(position).select();    }}

DEMO下载

0 0