美文网首页Android Developer
Android UI——Material Design

Android UI——Material Design

作者: So_ProbuING | 来源:发表于2019-02-18 09:55 被阅读0次

    在Android开发中,Android系统本身就有一套自己的界面标准,但奈何现在的产品经理PM都是果粉。设计师也是果粉一切的交互与设计都是按照IOS的规范来的。最近,我大谷歌在Android8.0后提出了android的图标适配方案,在官方文档中有说明。我们发现官方的图标适配中说明了android的图标应该是圆形的。这让一直推崇扁平化的圆角矩形的ios一众设计师啪啪打脸啊。作为android攻城狮的我真是感到无比的爽快。谷歌在新版本上对于设计提出了 Meterial Design 越来越多的主流App采用这种风格的设计。所以有针对性的系统的学习一下Material Design很有必要。
    经验不足,水平有限。只是整理自己用过的和学习过程中的记录。请大神多多指教。

    关于Meterial Design

    Meterial Design是google在Android在5.0之后采用的新的设计语言。所谓的设计语言就是指的更多的是设计的风格、理念、原则。中文直译为“原材料设计”。
    拟物设计和扁平化设计一种结合体验。还吸取了最新一些科技理念。
    层次感:View Z轴

    1.对于美工:遵循MD的界面设计、图标合集。
    2.对于产品经理:遵循MD界面设计、页面的跳转及动画效果、交互设计。
    3.对于开发人员:参与原型设计、辅助美工原型设计的素材准备。
    开发实现MD的设计----界面、动画、转场动画等等。
    详细介绍请看:
    官方网站: https://developer.android.com/design/index.html
    国内有翻译网站: http://wiki.jikexueyuan.com/project/material-design/material-design-intro/introduction.html

    MD的使用及开发

    使用Meterial Design控制全局样式

    1. 引入appcompat-v7
    2. 写自己的全局样式
        <!--
            Base application theme, dependent on API level. This theme is replaced
            by AppBaseTheme from res/values-vXX/styles.xml on newer devices.
        -->
        <style name="AppBaseTheme" parent="Theme.AppCompat.Light">
            <!--
                Theme customizations available in newer API levels can go in
                res/values-vXX/styles.xml, while customizations related to
                backward-compatibility can go here.
            -->
        </style>
    
        <!-- Application theme. -->
        <style name="AppTheme" parent="AppBaseTheme">
            <!-- All customizations that are NOT specific to a particular API-level can go here. -->
            <item name="android:textColor">@color/mytextcolor</item>
            <item name="colorPrimary">@color/colorPrimary_pink</item>
            <item name="colorPrimaryDark">@color/colorPrimary_pinkDark</item>
            <item name="android:windowBackground">@color/background</item>
        <item name="colorAccent">@color/accent_material_dark</item>
          <item name="navigationBarColor">@color/colorPrimary</item> # 设置底部导航栏的背景颜色
        </style>
    
    • colorPrimary:主色
    • colorPrimaryDark:主色--深色 一般用于状态栏颜色 底部导航栏颜色
    • colorAccent:代表各个空间的基调颜色---CheckBox、RadioButton、ProgressBar等
    • android:textColor:当前所有的文本颜色

    Meterial Design 兼容性控件的使用

    在appcompat-v7 里面有很多为兼容而生的控件

    1. android.support.v7.app.AlertDialog 对话框兼容控件
    2. 进度条样式设置
      style="@style/Widget.AppCompat.ProgressBar.Horizontal"
    3. SwipeRefreshLayout下拉刷新
    4. PopupWindow
      ListPopupWindow
      PopupMenu
    5. android.support.v7.widget.LinearLayoutCompat
      给包裹在里面的所有子控件添加间隔线
            <android.support.v7.widget.LinearLayoutCompat
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:divider="@drawable/abc_list_divider_mtrl_alpha"
                app:showDividers="beginning|middle"
                android:orientation="vertical" >
    

    v7 RecyclerView

    1. RecyclerView是谷歌在高级版本提出的一个替代ListView、GridView的控件
    2. 高度解耦
    3. 自带了性能优化 ViewHolder

    相关文章

      网友评论

        本文标题:Android UI——Material Design

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