Android中的 Material Design

1. 为什么有 Material Design?

     安卓标准的界面设计风格没有IOS美观,而且Android平台界面风格不统一。Material Design在2014年推出,解决美观与Android界面风格不统一问题。

2.Toolbar代替ActionBar,更加灵活

     更改application的主题:

Android中的 Material Design

     res-->values-->styles

Android中的 Material Design

      修改activity_main.xml中代码,加入Toolbar:

Android中的 Material Design

     修改MainActivity中代码:

Android中的 Material Design

 

 3. 滑动菜单DrawerLayout(里面有两部分,一部分为主屏幕,一部分为隐藏的菜单)

Android中的 Material Design

 4. 导航视图NavigationView(美化滑动菜单DrawerLayout)

     加入build闭包:

Android中的 Material Design     准备一:创建nav_menu.xml:

Android中的 Material Design

     准备二:创建nav_header.xml:

Android中的 Material Design

     修改主布局文件:

Android中的 Material Design

 修改MainActivity文件:

public class MainActivity extends AppCompatActivity {
    private DrawerLayout mDrawerLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar=findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);//设置标题栏
        mDrawerLayout=findViewById(R.id.drawer_layout);
        NavigationView navigationView=findViewById(R.id.nav_view);
        ActionBar actionBar=getSupportActionBar();//获取标题栏
        if (actionBar!=null){
            actionBar.setDisplayHomeAsUpEnabled(true);//显示导航按钮
            actionBar.setHomeAsUpIndicator(R.mipmap.ic_launcher);//设置导航按钮图标(Indicator指示器)
        }

        navigationView.setCheckedItem(R.id.inform);//默认选中
        navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {//监听
                mDrawerLayout.closeDrawers();//关闭导航抽屉
                return true;
            }
        });
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {//创建选项菜单,在右上角
        getMenuInflater().inflate(R.menu.toolbar,menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()){
            case android.R.id.home:
                mDrawerLayout.openDrawer(GravityCompat.START);//将滑动菜单展示出来
                break;
            case R.id.duty:
                Toast.makeText(this,"you clicked duty",Toast.LENGTH_SHORT).show();
                break;
            case R.id.more:
                Toast.makeText(this,"you clicked more",Toast.LENGTH_SHORT).show();
                break;
            case R.id.settings:
                Toast.makeText(this,"you clicked settings",Toast.LENGTH_SHORT).show();
                break;
            default:
        }
        return true;
    }
}

5. 结果大致界面:

Android中的 Material Design

 Android中的 Material Design