Android Material Design 之 基础知识

关于屏幕尺寸和像素
  1. dp, px 和 dpi等
    • px 是单词 pixel的缩略,像素是分辨率的尺寸单位。
    • resolution 分辨率,指的是屏幕纵,横方向的像素数量,比如一个分辨率为320*240的屏幕。
    • dpi 是英语( dots per inch)的缩略,即每英寸有多少个点,一个点相当于就是一个像素。比如有一个分辨率为320*240的屏幕,该屏幕的尺寸是(2英寸 * 2.5英寸) ,那么这个块屏幕的dpi就是160dpi。
      dpi的大小不仅和分辨率有关还和屏幕物理尺寸有关。
    • 屏幕尺寸,通常我们说屏幕的物理大小都不是说屏幕的长宽多少寸,而是用屏幕对角线的物理尺寸来代替。
      比如一块长3英寸,宽4英寸的屏幕,我们知道它的对角线长势5英寸,通常就说这块屏幕是5英寸的屏幕。
      在看看我们dpi的定义,我们就不难得出dpi是如何计算来的了,我们就有一块分辨率为320*240的2.5英寸的屏幕,其对角线的像素数量是:
      (3202+2402)=400
      所以我们的dpi约为: 4002.5=160
    • density 屏幕密度: density=
    • dp(dip)是英语(Density-independent pixel)的缩略,即与密度无关的像素,这是android 定义的一种虚拟的尺寸单位,方便我们各种不同尺寸的屏幕对UI进行布局。
      那么dp对应多少像素呢?看公式:
      pxdp=dpi160
      比如,我们有一块320*240的2.5英寸的屏幕,有上例可知该屏幕的dpi为160,所以我们知道: 1dp=160160px
      在设计的时候,利用dp可以很好的解决android 设备碎片化的问题,而且我们应当优先设计适用于小屏幕的尺寸和布局。
    • sp 是英语(Scale-independent pixel)的缩写,缩放独立像素,主要用于字体大小的尺寸,Android 允许用户自定义其字体的大小,在“设置”–“辅助功能”中,我们可以找到这项字体大小的设置,那么这个设置会对字体的显示进行改变,通常normal (100%)字体大小,我们app设置的16sp大小的字体就和16dp大小的字体一样大,但若设置为大好字体,即125%后,16sp = 16dp * 125% = 20dp。 当然如果我们不想我们设置的字体大小会随着这个设计进行改变,那么我们可以直接将字体的大小设置为其他的单位,如dp,px甚至mm。
android 设计时常用的资源文件夹与对应的dpi和dp关系如下:
资源文件夹dpipx
LDPI120dpi.75x
MDPI160dpi1x
HDPI240dpi1.75x
XHDPI320dpi2x
XXHDPI480dpi3x
XXXHDPI640dpi4x

并不是所有屏幕的dpi都是在上列表中的一项,实际中会匹配最接近的那一项,比如三块屏幕dpi分别为270,311,580,这个时候分别对应的资源文件夹应该为HDPI,XHDPI, XXXHDPI
资源文件夹规则
我们的android 资源文件夹,我们应主要关注 MDPI,HDPI,XHDPI,XXDPI
这几个文件夹有上表可知分别对应1x,1.75x, 2x, 3x
系统在会根据实际的dpi先寻找到最接近的图片资源文件,在其中去寻找,如果没有的话就会向下继续寻找。但这个寻找的过程实际上多多少少会影响性能,特别是在运行时。
所以我们最好在这四个文件夹里面都存放相应的资源icon。
这里介绍一个在线对资源icon进行处理的工具:Android Asset Studio

关于资源文件夹以及限定符
  1. Android 工程资源文件夹目录结构如下所示:
    • –app
      • –res
        • –anim
        • –animator
        • –drawable
        • –raw
        • –color
        • –layout
        • –menu
        • –drawable-ldpi(mdpi\hdpi\xhdpi\xxhdpi\xxxhdpi
        • –mipmap-hdpi(mdpi\xhdpi\xxhdpi\xxxhdpi)
        • –xml
        • –values
      • –assets
  2. 各资源目录所存储的文件如下表所示:
目录资源类型
anim存储Tween 动画的XML文件,即渐变动画或者叫做补间动画.
animator存储属性动画的XML文件,属性动画也可以存在anim目录中,但为了区分这两种动画,属性动画首选animator目录
drawable存放一些能编译为位图文件,九宫(可调整大小的位图),状态列表,形状,动画drawable等其他可编译的drawable的XML文件
raw原生数据文件,以原始值就行保存的问,这些文件的访问需要用inputstream来打开这些资源,使用其资源ID(即R.raw.filename)调用Resources.openRawResource(R.raw.filename)
color存放用户定义颜色状态列表的XML文件
layout存放各种布局的XML文件
menu存放toolbar等应用的菜单(如选项,上下文或者子菜单)的XML文件。
drawable-hdpi(…)存放用于不同屏幕密度的位图文件(.png, .9.png, .jpg, .gif)
mipmap-hdpi(…)存放用于不同启动器图标密度Drawable文件
xml一些可以在运行时通过Resources.getXML()读取的任意XML文件,也包括各种配置文件,以及一些原生数据的声明的XML的文件,比如account-authenticator, pref-general, widget-info 等的声明文件。
values存放各种颜色,文字,尺寸,样式,简单数组,整型数等。
assets存储可以访问原始文件名和文件层次结构的文件,这些文件没有资源ID,因此需要使用AssetManager来读取这些文件

3. 资源限定符介绍:

几乎每个应用都应该提供备用资源以支持特定的设备配置。比如我们的布局,应提供仅适用于tablet的布局,或者提供手机landscape视图的布局资源;这对于解决Android 屏幕碎片化等问题有很大帮助;另外是在关于某些特定api才能使用的功能的资源的使用,比如material design定义的一些过场动画,在低于21的设备中是无法应用这些过场动画的,这个时候就需要指定只能在v21下才能使用的资源。

  • 命名形式为< resources_name >-< config_qualifier>
    • resources_name 为相应默认资源文件目录名称,如上表定义。
    • qualifier 是指定要使用这些资源的各个配置的名称,后面会列在表里。
      • 注意可以追加多个qualifier, 并使用断线进行分开。在追加多个限定符时,也必须按照后表中列出的相同顺序放置它们。如果限定符的顺序是错误的,那么这个资源将被忽略。
  • 将相应的资源放到新的目录后,该资源文件的名称必须与默认资源文件完全一样。

资源限定符按优先级顺序排列见下表:

配置限定符值描述
MCC和MNC示例:
mcc310
mcc310-mnc004
mcc460-mnc002
等等
移动国家代码(mcc),后可选跟SIM卡中的移动网络代码(MNC)。例如
mcc460-mnc001指的是中国联通的GSM系统,使用无线电连接,
则mcc和mnc的值来自SIM卡。也可以单独使用MCC,只根据指定,
则改用”语言和区域”限定符
语言和区域示例:
en
fr
en-rUS
fr-rFR
CN
常用的就是在字符串的翻译上,当然也可以将这个资源限定符用于layout
,anim等其他的资源目录中。语言通过两个字母组成的语言代码定义,后跟两个字母
组成的区域码,区域码之前带’r’,用r来区分语言和区域,区域码是可选的。这些代码
都是不区分大小写的,不能单独制定区域代码。
布局方向ldrtl
ldltr
应用的布局方向,ldrtl是指“布局从右到左”,ldltr是指“布局从左到右”这是默认的值,
例如:
/res
  layout/
    main.xml     (默认的布局文件)
  layout-ar/
    main.xml     (针对阿拉伯语的布局文件)
  layout-ldrtl/
    main.xml     (针对任何从右到左的语言的布局文件,此处会排除阿拉伯语,因为“ar”
这个语言限定符优先级比布局更高,而此处我们已经指定了阿拉伯语的布局文件),
使用从右到左的布局功能,必须将supportRtl设置为true,并将
targetSdkVersion设置为17或更高。
smallestWidthsw< n>dp

示例:
sw320dp
sw600dp
sw720dp
等等
屏幕的基本尺寸,有屏幕的最小尺寸指定。也就是说smallestWidth是屏幕可用高度和
宽度的最小尺寸和屏幕的方向并没有关系。使用这个限定符确保应用UI的可用宽度至少
dp。
例如:
如果布局要求可用屏幕的最小尺寸始终至少为600dp,则可以使用layout-sw600dp这个
资源限定符。这样仅当可用屏幕的最小尺寸至少为600dp时,系统才会使用这些资源,
而不考虑600dp是代表屏幕的高度还是宽度。以下是一些可用于普通屏幕尺寸的值:
. 320,适用于屏幕配置如下的设备:
    。240x320ldpi(QVGA手机)
    。320x480mdpi(手机)
    。480x800hdpi(高密度手机)
. 480,适用于480x800mdpi之类的屏幕(平板电脑/手机)。
. 600,适用于600x1024mdpi之类的屏幕(7英寸平板电脑)。
. 720,适用于720x1024mdpi之类的屏幕(10英寸平板电脑)。
系统会使用最接近但未超出设备smallestWidth的值。
可用宽度w< N>dp

示例:
w720dp
w1024dp
指定资源应该使用的最小可用屏幕宽度,以dp为单位,由< n>值决定,注意在
横向和纵向进行切换时,为了匹配当前实际的宽度,此配置也会随之发生变化
(不像smallestWidth那样,当屏幕方向发生变化该值不会变)。
可用高度h< N>dp

示例:
h720dp
h1024dp
指定资源应该使用的最小可用屏幕高度,以dp为单位,有< n>值决定,注意在
横向和纵向进行切换时,为了匹配当前的实际宽度,此配置也会随之发生变化
屏幕尺寸small
normal
large
xlarge
small: 尺寸类似于低密度QVGA屏幕的屏幕。小屏幕的最小屏幕尺寸约为320x427dp。
例如,QVGA低密度屏幕和VGA高密度屏幕
normal: 尺寸类似于中等密度的HVGA屏幕的屏幕。标准屏幕的最小布局尺寸约
为320x476dp。例如:WQVGA低密度屏幕,HVGA中等密度屏幕,WVGA高等密度
屏幕。
large: 尺寸类似于中等密度的VGA屏幕,大屏幕的最小布局尺寸约为480x640dp,
例如VGA和WVGA中等密度屏幕
xlarge: 明显大于传统中等密度HVGA屏幕的屏幕,超大屏幕的最小布局尺寸约为
720x960dp.在大多数情况下,屏幕超大的设备体积过大,不能放进口袋,最常见的是平板设备
屏幕纵横比long
notlong
long:宽屏,如WQVGA,WVGA,FWVGA
notlong: 非宽屏,如QVGA,HVGA和VGA
它完全基于屏幕的纵横比(宽屏较宽)而与屏幕方向无关
屏幕方向port
land
port: 设备处于纵向
land:设备处于横向
UI模式car
desk
television
appliance
watch
car:设备正在车载手机上显示
desk: 设备正在桌面上显示
television: 设备正在电视上显示
appliance: 设备用作不带显示屏的设备
watch:设备用在手表上显示
可以使用UiModeManager来启用或者禁用某些模式
夜间模式night
notnight
night: 夜间
notnight: 白天
可以使用UiModeManager来启用或者禁用夜间模式
屏幕像素密度ldpi
mdpi
hdpi
xhdpi
xxhdpi
xxxhdpi
nodpi
tvdpi
ldpi:低密度屏幕,约为120dp
mdpi: 中等密度屏幕,约为160dp
hdpi: 高密度屏幕,约为240dpi
xhdpi: 超高密度屏幕,约为320dpi
超超高密度屏幕,约为480dpi
超超超高密度屏幕,约为640dpi
nodip:它可用于不像进行缩放以匹配设备密度的位图资源
tvdpi: 密度介于mdpi和hdpi之间的屏幕,约为213dpi,主要用于电视
触摸屏类型notouch
finger
notouch: 设备没有触摸屏
finger:设备有一个专供用户利用手指进行交互的触摸屏
键盘可用性keysexposed
keyshidden
keyssoft
keysexposed: 设备具有可用键盘,无论是硬键盘还是软键盘,只有二者有可用的,
这个限制符都会起作用
keyshidden: 设备具有可用的硬键盘,但它处于隐藏状态,其没有启用软键盘
设备已经启用了软键盘
主要文本输入法nokeys
qwerty
12key
nokeys: 设备没有用于文本输入的硬键盘
qwerty: 设备具有标准硬键盘
12key: 设备具有12键硬键盘
导航可用性navexposed
navhidden
navexposed: 导航可供用户使用
navhidden: 导航不可用
主要非触摸导航方法nonav
dpad
trackball
wheel
nonav: 除了使用触摸屏外,设备没有其他导航设施
dpad: 设备具有导航的方向键
trackball: 具有导航的轨迹球
wheel: 设备具有用于当行的方向盘(不常见)
平台版本
(API级别)
示例:
v3
v4
v7
v21
等等
设备支持的Api级别,例如v21对应于Api级别21(带有Android21.0或更高版本系统的设备)

限定符命名规则

  • 可以为单组资源指定多个限定符,并使用短划线分隔。例如,drawable-en-rUS-land适用于横板美国英语设备
  • 限定符必须遵循上表的顺序
  • 不能嵌套备用资源目录。例如: res/drawable/drawable-en/
  • 值不区分大小写
  • 对于每一种限定符只支持一个值。
    创建别名资源

    • Drawable 别名
      要创建指向drawable的别名,使用< bitmap>元素。例如:

      <?xml version="1.0" encoding="utf-8"?>
      <bitmap xmlns:android="http://schemas.android.com/apk/res/android"
          android:src="@drawable/icon_ca"/>
    • 布局
      要创建指向现有布局的别名,在< merge>中使用< include>元素:

      <?xml version="1.0" encoding="utf-8"?>
      <merge>
         <include layout="@layout/main_ltr"/>
      </merge>   
    • 字符串和其他简单值

      <?xml version="1.0" encoding="utf-8"?>
      <resources>
          <string name ="hello"> 你好</string>
          <string name ="helo">@string/hello</string>
      </resources>
常用的UI设计模式
  1. Toolbar
  2. App bar
    一种特殊的toolbar
  3. Tabs
    一般是位于屏幕的顶部,也有应用用于底部
  4. Navigation Drawer
    点击Appbar左上角图标(hamburger icon)或者手势向右划,唤出这个Drawer
  5. List to Detail
  6. Multi Pane
    手机两个页面在平板中一个页面就显示完
主题和样式
    <?xml version="1.0" encoding="utf-8" ?>
    <resources>
        <style name="SimpleStyle">
            <item name="android:textColor">#ff252525</item>
        </style>
    </resources>    
Material Design 的四个主要概念
  1. Tangible surfaces
    有形的平面,我们可以在这个平面上进行触摸和交互。
  2. Bold graphic design
    醒目的图形设计, 向伟大的排版和印刷布局致敬。
  3. Meaningful motion
    更有意义的动作,用于引导和鼓励用户。
  4. Adaptive design
    自适应设计,无论屏幕大小如何,我们App的界面看起来都很好。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值