android5.0的drawerLayout,toolBar,FloatingActionButton,NavigationView的实现

最新推荐文章于 2024-11-25 18:47:56 发布

原创最新推荐文章于 2024-11-25 18:47:56 发布 · 611 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#drawerlayo #toolbar #navifation

Android 专栏收录该内容

63 篇文章

订阅专栏

本文详细介绍如何在Android应用中集成侧滑菜单和Toolbar，包括布局设计、代码实现及注意事项等关键步骤。通过实例展示了DrawerLayout、NavigationView和Toolbar的具体用法。

在写这篇文章之前,首先得感谢其他技术大咖,我是站在巨人的肩膀上才完成这篇文章的!
感谢:
http://blog.youkuaiyun.com/u012702547/article/details/51253222
http://blog.youkuaiyun.com/siyemuzi/article/details/53308085
http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2014/1118/2006.html
http://blog.youkuaiyun.com/qq_22393017/article/details/54377603
http://blog.youkuaiyun.com/huachao1001/article/details/51558835
http://www.tuicool.com/articles/u2aauiQ

示意图如下:
这里写图片描述

第一步:主界面布局

<?xml version="1.0" encoding="utf-8"?>
<!--侧滑布局 DrawerLayout-->
<android.support.v4.widget.DrawerLayout
    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">
    <!--主界面视图 CoordinatorLayout实现滚动的效果-->
    <android.support.design.widget.CoordinatorLayout
        android:id="@+id/coordinationLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true">
        <!--垂直的容器-->
        <android.support.design.widget.AppBarLayout

            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <!--必须申明Toolbar执行的动作layout_scrollFlags  app:layout_scrollFlags="scroll|enterAlways",其RecyclerView滚动的时候,才会跟着滚动-->
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
                app:layout_scrollFlags="scroll|enterAlways|snap"/>
        </android.support.design.widget.AppBarLayout>

        <!--填充的内容-->
        <android.support.v4.widget.SwipeRefreshLayout
            android:id="@+id/swipe_refresh_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <!--SwipeRefreshLayout  谷歌自推带刷新功能控件-->

            <!--RecyclerView的约束行为  app:layout_behavior="@string/appbar_scrolling_view_behavior" 必须配合Toolbard的app:layout_scrollFlags使用才会生效-->
            <android.support.v7.widget.RecyclerView
                android:id="@+id/recyclerview"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scrollbars="vertical"
                app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

        </android.support.v4.widget.SwipeRefreshLayout>
        <!--悬浮的点击按钮视图-->
        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|center"
            android:layout_marginBottom="25dp"
            android:src="@drawable/up"/>
    </android.support.design.widget.CoordinatorLayout>

    <!--侧滑界面视图-->
    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/headview"
        app:menu="@menu/activity_main_drawer"/>
</android.support.v4.widget.DrawerLayout>
<!--app:headerLayout 头部布局
    app:menu 视图菜单布局
    android:layout_gravity="start" 定义其滑出状态-->

第二步:界面逻辑实现

public class MainActivity extends AppCompatActivity {

    private DrawerLayout mDrawerLayout;
    private Toolbar mToolbar;
    private FloatingActionButton mFloatingActionButton;
    private NavigationView mNavigationView;
    private CoordinatorLayout mCoordinationLayout;
    private RecyclerView mRecyclerView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        mToolbar = (Toolbar) findViewById(R.id.toolbar);
        mFloatingActionButton = (FloatingActionButton) findViewById(R.id.fab);
        mCoordinationLayout = (CoordinatorLayout) findViewById(R.id.coordinationLayout);
        mNavigationView = (NavigationView) findViewById(R.id.nav_view);
        mRecyclerView = (RecyclerView) findViewById(R.id.recyclerview);
        //设置RecyclerView的显示属性
        LinearLayoutManager linearLayoutManager = new LinearLayoutManager(this);
        linearLayoutManager.setOrientation(LinearLayoutManager.VERTICAL);
        mRecyclerView.setLayoutManager(linearLayoutManager);
        //填充假数据
        List<String> data = new ArrayList<>();
        for (int i = 0; i < 200; i++) {
            data.add("添加假数据"+i);
        }
        RecyclerViewMyAdpter myAdpter = new RecyclerViewMyAdpter(this,data);
        initData();
        mRecyclerView.setAdapter(myAdpter);

        //必须要设置此ActionBarDrawerToggle,才会产生侧滑效果/

         /*ActionBarDrawerToggle  是 DrawerLayout.DrawerListener实现。
         *和 NavigationDrawer 搭配使用，推荐用这个方法，符合Android design规范。
         *作用：
         *1.改变android.R.id.home返回图标。
         *2.Drawer拉出、隐藏，带有android.R.id.home动画效果。
         *3.监听Drawer拉出、隐藏；
         */
        ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(this,mDrawerLayout,mToolbar,R.string.open,R.string.close);
        mDrawerLayout.setDrawerListener(toggle);
        mFloatingActionButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //回到最顶部
                mRecyclerView.smoothScrollToPosition(0);
            }
        });

        //设置侧滑菜单栏上部分选中点击事件
        View headerView = mNavigationView.getHeaderView(0);
        //头像点击
        headerView.findViewById(R.id.imageView).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this,"点击了头像",Toast.LENGTH_SHORT).show();
            }
        });
        //点击了文本
        headerView.findViewById(R.id.textView).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this,"点击了头像的第二个文本",Toast.LENGTH_SHORT).show();
            }
        });
        //设置侧滑菜单栏下部份选中监听
        mNavigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                int itemId = item.getItemId();
                switch (itemId) {
                    case R.id.nav_girls :
                        //点击了女孩
                        Toast.makeText(MainActivity.this,"点击了女孩",Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.nav_php :
                        //点击了php
                        Toast.makeText(MainActivity.this,"点击了php",Toast.LENGTH_SHORT).show();
                        break;
                }
                //当点击了上面的item,如果开启了一个新的Activity的时候,是需要关闭DrawerLayout的
                mDrawerLayout.closeDrawer(GravityCompat.START);
                return false;
            }
        });
    }

    private void initData() {
        mToolbar.setTitle("designDemo");
        mToolbar.setSubtitle("小的标题");
        mToolbar.setLogo(R.mipmap.ic_launcher_round);
        //设置支持ToolBar
        setSupportActionBar(mToolbar);
        //切换左边默认的三条杠的图片
        mToolbar.setNavigationIcon(R.mipmap.ic_launcher);
    }

    //toolsbar右边的视图
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu,menu);
        return true;
    }

    //响应点击menu的每个item的点击事件
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        int itemId = item.getItemId();
        switch (itemId) {
            case  R.id.action_about:
                //点击事件,用snackBar代替toast
                //传进去的一个view的参数是父控件Views  mCoordinationLayout
                Snackbar.make(mDrawerLayout,"点击了扫一扫",Snackbar.LENGTH_SHORT).show();
                break;
            case  R.id.action_clear_cache:
                //点击事件,用snackBar代替toast
                Snackbar.make(mDrawerLayout,"点击了二维码",Snackbar.LENGTH_SHORT).show();
                break;
            case  R.id.action_search:
                //点击事件,用snackBar代替toast
                Snackbar.make(mDrawerLayout,"点击了搜索框",Snackbar.LENGTH_SHORT).show();
                break;
        }
        return super.onOptionsItemSelected(item);
    }

    //监听响应返回键,如果drawerLayout是打开的状态,当点击返回的时候,关闭DrawerLayout,,反之,直接退出
    @Override
    public void onBackPressed() {
        //如果是打开的状态
        if(mDrawerLayout.isDrawerOpen(GravityCompat.START)) {
            mDrawerLayout.closeDrawers();
        }else {
            super.onBackPressed();
        }
    }
}

第三步:toolbar视图

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto">
    <!--设置优先级,值越大,优先级越低-->
    <item
        android:id="@+id/action_about"
        android:orderInCategory="1"
        android:title="扫一扫"
        app:showAsAction="never" />
    <item
        android:id="@+id/action_clear_cache"
        android:orderInCategory="1"
        android:title="二维码付款"
        app:showAsAction="never" />
    <item
        android:id="@+id/action_search"
        android:icon="@drawable/ic_action_search"
        android:title="搜索"
        app:showAsAction="collapseActionView|ifRoom" />
</menu>

第四步:侧滑界面头部视图

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="100dp">
    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingLeft="4dp"
        android:paddingTop="8dp"
        android:text="@string/app_name"
        android:textAppearance="@style/TextAppearance.AppCompat.Body1"
        android:textSize="18sp" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingLeft="4dp"
        android:text="头部视图" />

</LinearLayout>

第五步:侧滑菜单底部视图

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <!--只需要在menu中将相应的item放到一个group中，并给该group取一个id即可,即可实现每个item中间添加一条分割线-->
    <group
        android:id="@+id/idfive">
        <item android:id="@+id/nav_girls"
              android:icon="@drawable/girls"
              android:title="Grils"/>
        </group>
    <group android:id="@+id/idone">
        <item android:id="@+id/nav_android"
              android:title="android"
              android:icon="@drawable/android"/>
        </group>
    <group android:id="@+id/idtwo">
        <item android:id="@+id/nav_man"
              android:icon="@drawable/girls"
              android:title="man"/>
        </group>
    <group android:id="@+id/three">
        <item android:id="@+id/nav_ios"
              android:title="ios"
              android:icon="@drawable/android"/>
        </group>
    <group android:id="@+id/four">
        <item android:id="@+id/nav_woman"
              android:icon="@drawable/girls"
              android:title="woman"/>
        </group>
    <group
        android:id="@+id/g2">
        <item android:id="@+id/nav_php"
              android:title="php"
              android:icon="@drawable/android"/>
    </group>
</menu>

以上即可实现效果,但是还有有几点需要注意

1,使用toolBar是首先必须去掉项目中的ActionBar,否则会报异常,修改android:theme=”@style/AppTheme.NoActionBar”

<style name="AppTheme.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
        <item name="windowActionModeOverlay">true</item>
    </style>

2,toolBar使用的时候,默认左边的视图是显示三条横杠
toggle.syncState();去实现
修改左边三条横杠图片,需调用
mToolbar.setNavigationIcon(R.drawable.android);并且此方法必须在setSupportActionBar(mToolbar)后

3,toolBar显示右边视图时,其app:showAsAction的属性

showAsAction属性共有五个值：ifRoom、never、always、withText、collapseActionView，可以混合使用。
 1,always:无论是否溢出,这个值会使菜单项一直显示在Action Bar上.
  2,ifRoom 如果有足够的空间,这个值会使菜单项显示在Action Bar上
  3,never 这个值使菜单项永远都不会出现在Action Bar上,只会在溢出列表中显示，而且只显示标题，所以在定义item的时候，最好把标题都带上。
  4,withText:这个值使菜单项和他的图标,菜单文本一起显示,Action bar会尽可能的显示这个标题，但是，如果图标有效并且受到Action bar空间的限制，文本标题有可能显示不全
  5,collapseActionView      声明了这个操作视窗应该被折叠到一个按钮中，当用户选择这个按钮时，这个操作视窗展开。否则，这个操作视窗在默认的情况下是可见的，并且即便在用于不适用的时候，也要占据操作栏的有效空间。
一般要配合ifRoom一起使用才会有效果

以上,就是需要补充的!