美文网首页
记:实用的Material Design

记:实用的Material Design

作者: 爱吃板栗的小女孩 | 来源:发表于2017-03-01 15:48 被阅读167次

    Material Design:

    Google 推出的一个Design Support库,包含了很多具有代表性的控件及效果

    以下内容为边学边学系列

    1.Toolbar

    (1)在xml文件中:
     <android.support.v7.widget.Toolbar
            android:id="@+id/toolBar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
    

    app:popupTheme为了兼容5.0以下,使用浅色部分文字
    android:theme为了让菜单变成深色

    (2)在activity文件中(必写):

    setSupportActionBar(toolBar);

    这样,一个普普通通的ToolBar就写成了

    (3)在toolbar上加上按钮:

    在res-menu中建立一个名字为toolbar.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">
    
        <item
            android:id="@+id/backUp"
            android:icon="@drawable/ic_back"
            android:showAsAction="always"
            android:title="Back" />
    
        <item
            android:id="@+id/rain"
            android:icon="@drawable/ic_big_rain"
            android:showAsAction="ifRoom"
            android:title="Rain" />
    
        <item
            android:id="@+id/sun"
            android:icon="@drawable/ic_fan"
            android:showAsAction="never"
            android:title="sun" />
    </menu>
    
    (4)在activity中分别重写onCreateOptionsMenu()方法和onOptionsItemSelected方法:
        @Override
        public boolean onCreateOptionsMenu(Menu menu) {
            getMenuInflater().inflate(R.menu.toolbar, menu);
            return true;
        }
    
        @Override
        public boolean onOptionsItemSelected(MenuItem item) {
            switch (item.getItemId()) {
                case R.id.backUp:
                    make("后退");
                    break;
                case R.id.rain:
                    make("下雨");
                    break;
                case R.id.sun:
                    make("晴天");
                    break;
            }
            return true;
        }
    

    这样就好了。

    重点部分说明,看郭霖大神的书,觉得总结的最好,各位吃瓜群众拿小本本记好:

    android:showAsAction有如下几种值可选:always表示永远显示在Toolbar中,如果屏幕空间不够则不显示;ifRoom表示屏幕空间足够的情况下显示在Toolbar中,否则不显示;never则表示永远显示在菜单栏中。注意,Toolbar中的action按钮只会显示图标,菜单栏中的action按钮只会显示文字!!!

    2.FloatingActionBar

    虽然只是一个悬浮的按钮,我们平时也许会拿button直接用,但这个有阴影,效果我觉得还不错。

    (1)在build.gradle中引用design(这里我用的是 compile 'com.android.support:design:25.2.0')

    (2)在xml文件中写布局

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/btFloatingAction"
            android:src="@drawable/ic_fan"
            android:elevation="10dp"
            android:background="#FFFFFF"
            android:layout_width="wrap_content"
            android:layout_margin="20dp"
            android:layout_gravity="bottom|end"
            android:layout_height="wrap_content" />
    

    就这样,毫无难度,对吧?

    有一个知识点 android:elevation=“10dp”用来设置阴影高度,数值从小到大,阴影也是从小到大

    相关文章

      网友评论

          本文标题:记:实用的Material Design

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