安卓日记——玩转Material Design(Navigati

作者: 饥渴计科极客杰铿 | 来源:发表于2016-06-17 19:07 被阅读436次

    最近突然对Material Design感兴趣,然后想看看怎么玩。
    首先要说的是NavigationView,就是我们经常要用到的侧边导航栏
    在没有NavigationView之前我们用的是普通的LinearLayout+ListView+头部layout
    NavitonView帮我们整合了这三部分,用起来也很方便

    1.导入material design的包

    compile 'com.android.support:design:23.4.0'
    

    2.修改layout文件

    <?xml version="1.0" encoding="utf-8"?>
    <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/drawerLayout"
        tools:context="com.jkgeekjack.mymd.MainActivity">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <include layout="@layout/custom_toolbar"></include>
        </LinearLayout>
    
        <!--导航栏,头部是nav_header这个layout,菜单内容是drawer_actions这个menu-->
        <!--把layout_gravity设为start就是隐藏在屏幕左边-->
        <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/nav_header"
            app:menu="@menu/drawer_actions" >
        </android.support.design.widget.NavigationView>
    
    
    </android.support.v4.widget.DrawerLayout>
    
    

    主layout就是那么简单

    3.设置NavigationView头部

    新建一个layout,我这取名为nav_header

    <?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:background="@color/colorPrimary"
        android:padding="16dp"
        android:layout_height="100dp">
    
        <!--头像-->
        <ImageView
            android:layout_alignParentLeft="true"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:id="@+id/ivProtrait"
            android:src="@drawable/user"/>
    
        <!--名字-->
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="16sp"
            android:textColor="#fff"
            android:text="jack"/>
    </LinearLayout>
    

    记得要设置父布局的高度,我这设为100dp

    4.设置菜单内容

    新建一个menu,我取名为drawer_actions

    <?xml version="1.0" encoding="utf-8"?>
    <menu xmlns:android="http://schemas.android.com/apk/res/android">
        <!--只能单选-->
        <group android:checkableBehavior="single">
            <item
                android:id="@+id/navigation_item_home"
                android:icon="@drawable/iconfont_home"
                android:title="首页" />
            <item
                android:id="@+id/navigation_item_discovery"
                android:checked="true"
                android:icon="@drawable/iconfont_source"
                android:title="发现" />
            <item
                android:id="@+id/navigation_item_focus"
                android:icon="@drawable/iconfont_blog"
                android:title="关注" />
            <item
                android:id="@+id/navigation_item_collect"
                android:icon="@drawable/iconfont_custom_view"
                android:title="收藏" />
            <item
                android:id="@+id/navigation_item_round"
                android:icon="@drawable/iconfont_custom_view"
                android:title="圆桌" />
            <item
                android:id="@+id/navigation_item_message"
                android:icon="@drawable/iconfont_custom_view"
                android:title="私信" />
        </group>
        <!--其他item-->
        <item android:title="其他">
            <menu>
                <item
                    android:id="@+id/navigation_item_switch_theme"
                    android:checkable="true"
                    android:title="切换主题" />
    
                <item
                    android:id="@+id/navigation_item_about"
                    android:checkable="true"
                    android:title="设置" />
            </menu>
        </item>
        
    </menu>
    

    5.写界面的逻辑代码

    NavigationView当然要配合Toobar和DrawerLayout来用啦
    我在之前的安卓日记——设计简洁好看的UI已经说过Drawerlayout和ToolBar怎么用法,这里就不想细说了

    public class MainActivity extends AppCompatActivity {
    
        
        private Toolbar toolbar;
        private DrawerLayout mDrawerLayout;
    //     左上角的标志
        private ActionBarDrawerToggle mDrawerToggle;
    //     菜单列表
        private NavigationView navigationView;
    
    
    //    之前选中NavigationVIew的Item
        private MenuItem preMenuItem;
    
    //    NavigationView头部的头像
        private ImageView ivProtrait;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            initView();
        }
    
        private void initView() {
    
            toolbar= (Toolbar) findViewById(R.id.toolbar);
            setSupportActionBar(toolbar);
            mDrawerLayout= (DrawerLayout) findViewById(R.id.drawerLayout);
            navigationView= (NavigationView) findViewById(R.id.nav_view);
            //设置NavigationView的选项监听
            navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
                @Override
                public boolean onNavigationItemSelected(MenuItem item) {
                    //如果之前有选项就把它设为没有选中
                    if (preMenuItem!=null){
                        preMenuItem.setChecked(false);
                    }
                    switch (item.getItemId()){
                        case R.id.navigation_item_home:setTitle("首页");break;
                        case R.id.navigation_item_discovery:setTitle("发现");break;
                        case R.id.navigation_item_focus:setTitle("关注");break;
                        case R.id.navigation_item_collect:setTitle("收藏");break;
                        case R.id.navigation_item_round:setTitle("圆桌");break;
                        case R.id.navigation_item_message:setTitle("私信");break;
                    }
                    preMenuItem=item;
                    //将当前选项设为选中
                    item.setChecked(true);
                    return false;
                }
            });
            //后面的R.string.close,R.string.open好像没什么用,但一定要设
            mDrawerToggle=new ActionBarDrawerToggle(this,mDrawerLayout,toolbar,R.string.close,R.string.open);
            mDrawerToggle.syncState();
            mDrawerLayout.setDrawerListener(mDrawerToggle);
            //获得NavigationView的头部view,从而绑定里面的控件
            View view=navigationView.getHeaderView(0);
             ivProtrait= (ImageView)view.findViewById(R.id.ivProtrait);
            ivProtrait.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                 Toast.makeText(MainActivity.this,"click",Toast.LENGTH_SHORT).show();
                }
            });
        }
    

    效果如图所示

    效果图

    接下来还会有关于更多好看的Materail Design控件的用法敬请关注

    相关文章

      网友评论

      • 乘风破浪的程序员:楼主,请问打开Navigationview后按手机返回键怎么不是Navigationview 滑回啊?
        饥渴计科极客杰铿:@hante 可以设置监听返回按钮,调用Navigationview的close方法就好
      • 李欣阳:请问一下有源码吗?我想学习一下
        饥渴计科极客杰铿:@李欣阳 谢谢你哦,我会坚持创作更多优秀易懂的文章的
        李欣阳:多谢!小小的支持了一下,希望有更多更好的博文
        饥渴计科极客杰铿:@李欣阳 已上传https://github.com/jkgeekJack/MaterialDesignTest.git,里面包括我写这几篇关于material design的源码

      本文标题:安卓日记——玩转Material Design(Navigati

      本文链接:https://www.haomeiwen.com/subject/empvdttx.html