侧边栏

安卓入门之样式管理

发布于 | 分类于 客户端/Android

前两天还在抱怨为啥安卓中写样式这么麻烦，今天才发现原来安卓中也是有样式表的，并且还十分规范！！像这样蒙着头一通乱学真是刺激啊。废话少说，赶紧理清安卓中样式表的使用方法，接下来整个布局就感觉没啥问题了。

在Android Studio中，所有的资源文件都被整合的res文件夹下面，所以，你懂的。

变量 ​

在一个应用在，样式风格应该统一。在web页面中使用类来达到样式复用的目的，而在Android应用中，是通过将对应的属性先定义在xml资源文件中（比如某个颜色，某个边距尺寸等等），然后引用这些资源文件，减少代码中的硬编码，便于样式维护和风格统一。

是不是很眼熟？没错，这就跟SCSS中的定义变量一样嘛，只是安卓本身就支持这种做法，所以我会在前面提到“ 十分规范 ”这个说法。更规范的是，甚至将变量都进行了分类

colors ​

颜色是UI的第一印象，重要性就不说了。在CSSMagic这个项目中，我专门写了一个_colors的scss文件，用来声明常用的颜色变量，然后定义了对应的背景颗粒类.bg-*和字体颜色颗粒类.text-*。当时还被我的机智折服了，要是早点学安卓这些方法肯定早就知道了吧~擦又跑题了。

打开res/values/colors.xml，就可以看见对应的颜色资源，大概是下面这个样子

xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>
    
    <color name="white">#fff</color>
    <color name="red">#ff0000</color>
</resources>

其中前3个是AS自动生成的，我们也可以使用color标签自定义对应的颜色变量，颜色名可以是任何有效的变量名，对应的色值是十六进制表示法。

xml
<color name="mycolor">#00ff00</color>

定义好颜色变量之后，就可以直接在布局文件或者样式表（后面马上提到）使用了

xml
<TextView
		...
        android:textColor="@color/mycolor"/>

如果设计突然说整个应用的色彩要调换，修改colors配置文件比从layout文件中去挨个修改方面得多。这在web开发中深有体会，安卓既然本身就提供了这些功能，一定要好好把握啊。

strings ​

更神奇的是，就连组件中需要展示的文字，都可以使用strings.xml文件进行配置，相当于建议在layout文件中不出现任何硬编码，而将对应的值单独进行配置。

打开res/values/strings.xml中，可以看见

xml
<resources>
    <string name="app_name">UI</string>
</resources>

额不要吐槽我凑字数了。同理，我们可以使用string标签自定义字符串

<string name="mytext">Txm</string>

引用方式也跟color类似，@string/mytext即可，AS强大的语法提示功能让我们的代码写起来轻松又愉快

样式类 ​

在web开发中，如果一组样式在多个地方出现，我们肯定会使用类进行封装，然后在需要的标签上添加这些类即可（关于CSS样式重用的问题我折腾了非常长一段时间）。同理，就UI布局来说，我认为Android和CSS的思路应该是相同的：减少重复代码，提高开发和维护效率。 尽管安卓中并没有样式类的概念，也必定会存在某种机制，将一组样式封装在一起，然后可以在多个组件上进行调用。千呼万唤使出来，终于轮到了今天的主角：style标签。

style标签 ​

打开res/values/styles.xml文件，可以看见

xml
<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
</resources

这个结构看起来十分清晰（本来XML文件的语义化就比JSON强多了，啊呸又跑题了），一个style标签对应一组样式，一个item标签对应某个组中的单条样式，这里还遇见了前面提到的color变量。没错，把style标签的name属性值看做是类名就可以了，一个style标签就是 一个CSS样式类。

那么，怎么在组件上引用这个样式类呢？在HTML中我们使用的是class属性，在Android中，对应的属性是style，即

xml
<!-- 定义样式 -->
<style name="mytext">
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:textColor">@color/red</item>
</style>
    
<!-- 引用样式 -->   
<TextView style="@style/mytext" android:text="Hello"/>
<TextView style="@style/mytext" android:text="World"/>

可以在多个组件上使用相同的样式，这样整个布局代码看起来清爽多了，之前满屏幕的android:xxx看起来真是眼花缭乱（想想一个HTML文件每个标签上面都用style来指定样式是多么可怕的事情）。伟大的HTML规范告诉我们，样式结构和行为要分离[/掩面]。

文件分离 ​

了解了style标签，可以在很大程度上减少重复的代码。但是随着页面的增加，这个styles.xml文件想必也会很庞大，将样式文件进行拆分是非常有必要的（样式在项目层次上的复用，样式白哦的维护等）。在SCSS中，可以使用@import解决这个问题，在Android中又是怎么解决这个问题的呢？

答案是：完！全！不！用！管！只要喜欢，你可以把样式表拆分成多个文件，只要按照正确的style标签格式书写，反正都会被R文件进行统计并赋予惟一的检索值，因此最后也只需要使用@style/mystyle进行引用就可以了。

我的理解是：样式类并不是在底层并不是按照文件进行管理的（在网页中需要使用link标签引入样式表）拆分文件主要是为了开发人员便于维护。安卓在我心中一下子变得高大上起来。

样式继承 ​

在网页中，一个标签是可以同时具备多个类的，但是在安卓中，一个组件的style属性貌似只能有一个值，这样，就不能使用组合类来更大程度地实现样式重用（哈这个词我是跟它杠上了）。安卓提供了另外一种方式来解决这个问题：样式继承。

注意这里的样式继承就跟CSS中的继承不太一样了：

  • CSS中的继承是子元素在不用指定对应样式的情况下，继承父元素的某些样式属性，比如字体颜色，大小等
  • Android中的继承是针对两个style标签而言的，通过继承可以让另外一个标签具有与父元素相同的样式，然后可以在style标签内部指定额外的样式

是不是很熟悉？没错，这不就是跟SCSS中的混合器和继承差不多的东西嘛~在style标签上使用parent属性指定继承的样式类。

<style name="header">
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:textColor">#ff0000</item>
</style>

<style name="footer" parent="header">
	<item name="android:textSize">30sp</item>
</style>

此外，也可以通过另外一种形式使用继承

<style name="header.another">
	<item name="android:textSize">30sp</item>
</style>

具体采用哪种形式由具体情况决定了

利用继承，我们可以进一步减少我们的代码量，比如整理一些基础布局的基类，然后再派生出不同的样式类...打住，我感觉我又要开始折腾了！

动态样式 ​

安卓中提供了许多操作样式的接口，比如setText，setTextColor啥的，但是这些接口都是针对单条样式的。在逻辑代码操作单条样式并不是一个明智的做法，用JavaScript修改样式的时候，一般的做法是先定义好对应的类，然后通过切换样式类的做法来达到动态设置样式的效果，这样可以保证行为和样式分离。还是那个问题：安卓中怎么实现动态设置样式类呢？

// todo: 这个问题貌似还没有查到，貌似有setTextAppearance之类的接口

图片 ​

在App应用中，图片是UI的重要组成部分。这跟Web中或多或少有些区别：在Web中处于网络性能的影响，图片更多的是作为内容进行展示，而大部分UI布局都是通过样式属性实现的；而在App中，更多的是考虑实现更完美的UI布局，因此很多地方需要使用图片资源来实现特定的效果。

适配图片 ​

安卓分辨率在数量上远超IOS，因此屏幕适配是一个很大的问题。根据分辨率的大小，可以将其划分为hdpi，mdpi，xhdpi，xxhdpi，xxxhdpi等（是不是又很熟悉，栅格系统啊~）

在布局上可以采用伸缩式的布局，而针对图片，安卓提供了drawable-*的方式进行处理，其中的*对应的就是上面的分辨率区域，在不同的分辨率区域下使用一张图片的不同形式（这特么就是多张图片好不~）。另外，图片的命名跟变量名命名规则相同，不能使用数字开头哦。

在AS中，文件树被简化了，我们打开项目的实际位置，可以发现实际上都有对应的文件夹，用于存放不同分辨率下的图片。系统是如何自动加载对应的图片呢？这里参考玩转Android drawable图片适配:

  • 先查找和屏幕密度最匹配的文件夹
  • 如果在最匹配的目录没有找到对应图片，就会向更高密度的目录查找，直到没有更高密度的目录
  • 如果一直往高密度目录均没有查找，Android就会查找drawable-nodpi目录，该目录表示包含的资源所有密度的设备，可能需要自己新建
  • 最后，如果在drawable-nodpi目录也没有查找到，系统就会向比最匹配目录密度低的目录依次查找，直到没有更低密度的目录

上面是不是意味着需要针对分辨率出多套设计图~感觉不靠谱啊，设计肯定只给一套图~这倒是个问题。

另外，你可能还发现了res/mipmap文件夹，这里面存放的是APP的图标，也需要针对屏幕分辨率进行处理。总之，安卓的分辨率貌似是个坑啊。

Nine-Patch ​

安卓里面有个叫做Nine-Patch图片格式，即__指定图片特定位置拉伸和填充内容的一种特殊的png图片格式__，这是一个多么神奇的东西啊，之前网页上各种屏幕适配的背景图问题这里可以完美解决，相关的知识暂时没有深入，附个传送门。（想想之前在网页上实现一个由内容撑开的聊天对话框，要达到设计师的花式需求，可不是一份轻松的活）

在Android Studio中实现Nine-Patch图片十分简单，将*.png格式的图片重命名为*.9.png，然后将图片资源放在drawable文件下就可以了，不过要注意的是仍旧需要手动去设置拉伸参照的"黑实线"。

xml图形绘制 ​

drawable直译为“可拉的，可画的。在res/drawable文件夹中，除了保存不同分辨的图片之外，我们还可以自己绘制相关的图形，并将其视作常规的图片使用，这是多么强大的功能啊。

xml图形绘制看起来跟svg的语法十分相似，这里参考Android 图像绘制之 Drawable。由于也是刚接触，先练练手再回来总结xml图形绘制的问题。讲道理，搞明白了这个，大部分样式布局几乎都可以实现了。

自定义属性 ​

HTML5规范了标签上的自定义属性，即使用data-*声明自定义属性，然后在DOM中就可以使用datset获取该节点上的自定义属性集合。在安卓中同样可以使用自定义属性，不过用法有很大的不同。

自定义属性大多用在自定义view里面（我之前以为自定义view是基础知识，后来发现原来是进阶门槛[/掩面]）。

小结 ​

一个人从打环境开始摸索安卓开发，到现在为止走了很多弯路（跟学前端的时候一模一样啊）。走弯路也没啥大不了的，只要能在摸索中把握好前进的方向就好了。安卓跟web前端，实际上真的挺像的：搭界面，接数据，处理交互，添加动画啥的。

现在差不多弄了两周，再来一个月应该就能达到自己的初期目标了，加油。

#Android

你要请我喝一杯奶茶？

版权声明：自由转载-非商用-保持署名和原文链接。

本站文章均为本人原创，参考文章我都会在文中进行声明，也请您转载时附上署名。