安卓日记——玩转Material Design(NavigationView篇)

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

1.导入material design的包

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

2.修改layout文件



    
        
    

    
    
    
    




主layout就是那么简单

3.设置NavigationView头部

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




    
    

    
    

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

4.设置菜单内容

新建一个menu,我取名为drawer_actions



    
    
        
        
        
        
        
        
    
    
    
        
            

            
        
    
    

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

效果如图所示

安卓日记——玩转Material Design(NavigationView篇)_第1张图片
效果图

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

你可能感兴趣的:(安卓日记——玩转Material Design(NavigationView篇))