美文网首页
Material Design 笔记

Material Design 笔记

作者: allever | 来源:发表于2018-02-04 10:48 被阅读6次

1.Toolbar的使用

1.1设置应用的主题为NoActionBar

android:theme="@style/AppTheme"

这个主题在sytle文件中定义

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorGreen_300</item>
    <item name="colorPrimaryDark">@color/colorGreen700</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

1.2在布局文件中使用Toolbar控件

<android.support.v7.widget.Toolbar
android:id="@+id/id_material_design_activity_toolbar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:background="@color/colorGreen700"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

1.3在Activity中这样用

Toolbar toolbar = (Toolbar)findViewById(R.id.id_material_design_activity_toolbar);
setSupportActionBar(toolbar);
        ```
## 1.4设置toolbar的home图标并设置监听
```java
ActionBar actionBar = getSupportActionBar();
if (actionBar != null){
actionBar.setDisplayHomeAsUpEnabled(true);
actionBar.setHomeAsUpIndicator(R.mipmap.ic_arrow_back_white_36dp);
}

在onOptionsItemSelected()方法中设置监听

case android.R.id.home:
drawerLayout.openDrawer(GravityCompat.START);
break;

1.5设置toolbar菜单

<?xml version="1.0" encoding="utf-8"?>
        <menu
            xmlns:app="http://schemas.android.com/apk/res-auto"
            xmlns:android="http://schemas.android.com/apk/res/android">
            <item
                android:id="@+id/id_menu_notification"
                android:title="Notification"
                android:icon="@mipmap/ic_notifications_active_white_24dp"
                app:showAsAction="never"/>
            <item
                android:id="@+id/id_menu_sms"
                android:title="Notification"
                android:icon="@mipmap/ic_sms_white_24dp"
                app:showAsAction="never"/>
            <item
                android:id="@+id/id_menu_person"
                android:title="Notification"
                android:icon="@mipmap/ic_person_outline_white_24dp"
                app:showAsAction="never"/>
        </menu>
        ```
        然后在Activity中加载这个菜单
        ```
        @Override
        public boolean onCreateOptionsMenu(Menu menu) {
                getMenuInflater().inflate(R.menu.toolbar_menu,menu);
                return true;
        }
        
        @Override
        public boolean onOptionsItemSelected(MenuItem item) {
                int id = item.getItemId();
                switch (id){
                    case R.id.id_menu_notification:
                        Toast.makeText(this,"Notification",Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.id_menu_sms:
                        Toast.makeText(this,"SMS",Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.id_menu_person:
                        Toast.makeText(this,"Contacts",Toast.LENGTH_SHORT).show();
                        break;
                    case android.R.id.home:
                        drawerLayout.openDrawer(GravityCompat.START);
                        break;
        
                }
                return true;
        }

2.DrawerLayout与NavigationView的爱恨情仇

2.1在布局中使用DrawerLayout和NavigationView

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/id_material_design_activity_drawer_layout">
        
<android.support.design.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">
<android.support.v7.widget.Toolbar
    android:id="@+id/id_material_design_activity_toolbar"
    android:layout_width="match_parent"
    android:layout_height="?actionBarSize"
    android:background="@color/colorGreen700"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
        
<android.support.design.widget.FloatingActionButton
    android:id="@+id/id_material_design_activity_fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|right"
    android:layout_margin="16dp"
    android:src="@mipmap/ic_notifications_active_white_24dp"
    app:elevation="8dp"/>
        
</android.support.design.widget.CoordinatorLayout>
        
<android.support.design.widget.NavigationView
    android:id="@+id/id_material_design_navigation_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    app:menu="@menu/nav_menu"
    app:headerLayout="@layout/nav_header_layout"/>
                
</android.support.v4.widget.DrawerLayout>

其中NavigationVIew包含一个menu菜单和头布局nav_menu.xml

<?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">
        
    <group android:checkableBehavior="single">
    <item
    android:id="@+id/id_nav_menu_item_like"
    android:icon="@mipmap/ic_favorite_black_24dp"
    android:title="Like"/>
    <item
    android:id="@+id/id_nav_menu_item_alarm"
    android:icon="@mipmap/ic_alarm_black_24dp"
    android:title="Alarm"/>
    <item
    android:id="@+id/id_nav_menu_item_account"
    android:icon="@mipmap/ic_account_circle_black_24dp"
    android:title="Account"/>
    <item
    android:id="@+id/id_nav_menu_item_setting"
    android:icon="@mipmap/ic_build_black_24dp"
    android:title="Setting"/>
            
    </group>
    </menu>

nav_header_layout

<?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="180dp"
    android:padding="10dp"
    android:background="@color/colorGreen700">
            
    <de.hdodenhof.circleimageview.CircleImageView
    android:id="@+id/id_nav_header_iv_head"
    android:layout_width="70dp"
    android:layout_height="70dp"
    android:src="@mipmap/h_01"
    android:layout_centerInParent="true"/>
        
<TextView
    android:id="@+id/id_nav_header_tv_email"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="devallever@163.com"
    android:textColor="@color/white"
    android:layout_alignParentBottom="true"/>
            
<TextView
    android:id="@+id/id_nav_header_tv_username"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="5dp"
    android:text="Devallever"
    android:textColor="@color/white"
    android:layout_above="@id/id_nav_header_tv_email"/>
            
</RelativeLayout>

2.2设置NavigationView的菜单监听

navigationView = (NavigationView)findViewById(R.id.id_material_design_navigation_view);
navigationView.setCheckedItem(R.id.id_nav_menu_item_like);
navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
    int id = item.getItemId();
    switch (id){
        case R.id.id_nav_menu_item_like:
            Toast.makeText(MaterialDesignActivity.this, "Like",Toast.LENGTH_SHORT).show();
            break;
        case R.id.id_nav_menu_item_account:
            Toast.makeText(MaterialDesignActivity.this, "Account",Toast.LENGTH_SHORT).show();
            break;
        case R.id.id_nav_menu_item_alarm:
            Toast.makeText(MaterialDesignActivity.this, "Alarm",Toast.LENGTH_SHORT).show();
            break;
        case R.id.id_nav_menu_item_setting:
            Toast.makeText(MaterialDesignActivity.this, "Setting",Toast.LENGTH_SHORT).show();
            break;
    }
    return true;
    }
});

2.3把toolbar与NavigationView关联起来,并实现home的动画效果

ActionBarDrawerToggle actionBarDrawerToggle = 
new ActionBarDrawerToggle(this,drawerLayout,toolbar,R.string.app_name, R.string.app_name);
actionBarDrawerToggle.syncState();

3FloatActionButton

3.1在布局中使用FloatActionButton控件

<android.support.design.widget.FloatingActionButton
    android:id="@+id/id_material_design_activity_fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"    
    android:layout_gravity="bottom|right"
    android:layout_margin="16dp"
    android:src="@mipmap/ic_notifications_active_white_24dp"
    app:elevation="8dp"/>

3.2设置监听,和一般的按钮设置监听是一样的

fab.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
    
    }
});

4Snackbar

当点击按钮时候弹出Snackbar

fab.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        Snackbar.make(v, "Remind!", Snackbar.LENGTH_INDEFINITE)
            .setAction("I know.", new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    Toast.makeText(MaterialDesignActivity.this,"OK", Toast.LENGTH_SHORT).show();
                }
            })
            .show();
    }
});

5CoordinatorLayout

加强版的FrameLayout

<android.support.design.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">
<android.support.v7.widget.Toolbar
    android:id="@+id/id_material_design_activity_toolbar"
    android:layout_width="match_parent"
    android:layout_height="?actionBarSize"
    android:background="@color/colorGreen700"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
    
<android.support.design.widget.FloatingActionButton
    android:id="@+id/id_material_design_activity_fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|right"
    android:layout_margin="16dp"
    android:src="@mipmap/ic_notifications_active_white_24dp"
    app:elevation="8dp"/>
    
</android.support.design.widget.CoordinatorLayout

相关文章

网友评论

      本文标题:Material Design 笔记

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