小萝卜干的技术分享

15 object(s)
 

Material Design Components for iOS之button篇

官方说明和指导文档:文档 ,基本上都能看懂,具体的就不在这里一一细说了,这里着重讲解下如何在官方文档的基础上,进行进一步的实际运用

先来看下整体效果:

总体效果

好了,接下来开始动手干

安装依赖库

在项目的Podfile中添加:

pod 'MaterialComponents/Buttons'
pod 'MaterialComponents/Buttons+Theming'

然后执行

pod install

开始绘制

以storyboard方式举例,拖3个button到view controller的界面上,设定他们的Class为MDCButton,然后画好约束。官方推荐的button最小宽度为64,最小高度为36,这里我设置成宽140,高36

设置Class为MDCButton

这个时候是看不到预览效果的,事实上MDCButton也不支持storyboard预览,所以看不到预览效果不要着急,我们靠脑补就行

接下来在对应的view controller文件中设置属性关联

设置属性关联

如果现在直接运行的话,那么这个样式会变得极其丑陋,如下图所示:

无样式设置的MDCButton

按钮点击的时候有ink效果,而且文本也像系统button一样会变淡,感觉是MD风格和iOS风格的合体版本,太扯淡了,这样式没法看。所以接下来要对button应用不同的样式风格。

在设置样式风格前,先来张官方文档中提及的效果图说明下:

MDCButton类型

图中的button类型分别代表:

  1. Text button
  2. Outlined Button
  3. Contained button
  4. Toggle button

其中第4种button在iOS系统上不受支持。前3种button样式的设置方法为:

  1. applyTextThemeWithScheme
  2. applyOutlinedThemeWithScheme
  3. applyContainedThemeWithScheme

所以,为了能够达到相应的显示效果,需要对button应用对应的样式。将view controller的代码修改为如下:

#import "MDCButtonViewController.h"
#import <MaterialComponents/MDCButton+MaterialTheming.h>

@interface MDCButtonViewController ()

@end

@implementation MDCButtonViewController

- (void) viewDidLoad {
    [super viewDidLoad];
    MDCContainerScheme * scheme = [[MDCContainerScheme alloc] init];
    [self.containedButton applyContainedThemeWithScheme:scheme];
    [self.textButton applyTextThemeWithScheme:scheme];
    [self.outlinedButton applyOutlinedThemeWithScheme:scheme];
}

@end

运行下,看效果

设置MDCButton样式之后

现在已经完全变成了MD风格了。MD在iOS上默认就是这种深蓝偏紫色的颜色,在实际运用中需要自定义颜色。为了能达到开头的那种效果,需要修改MDCContainerScheme的颜色配置。代码如下:

#import "MDCButtonViewController.h"
#import <MaterialComponents/MDCButton+MaterialTheming.h>

@interface MDCButtonViewController ()

@end

@implementation MDCButtonViewController

- (void) viewDidLoad {
    [super viewDidLoad];
    MDCContainerScheme * scheme = [[MDCContainerScheme alloc] init];
    scheme.colorScheme.primaryColor = UIColor.redColor;//把他们都变成红色
    [self.containedButton applyContainedThemeWithScheme:scheme];
    [self.textButton applyTextThemeWithScheme:scheme];
    [self.outlinedButton applyOutlinedThemeWithScheme:scheme];
}

@end

效果就是文章开头的那张效果图,我就不多说了

更多配置

官方着重于介绍这个MDCButton的样式以及设计风格要点,但是在API文档上真的是含糊其辞,列出的设置属性实在是太少了。我现在将我能想到的常用属性设置列举出来,希望能帮助到更多人少走些弯路

MDCButton中可以进行的基本设置:

MDCContainerScheme(主题)可以进行的有效设置

颜色配置 colorScheme

颜色配置类MDCSemanticColorScheme中,定义了一系列颜色,大体上可分为2大类。其一为xxxColor,其二为onxxxColor。以on开头的颜色配置,官方相应的注释中描述为画在对应的颜色之上的颜色。以primaryColor为例,与之对应的属性为onPrimaryColor,那么onPrimaryColor应该是绘制在primaryColor之上的颜色。Contained Button样式中,button的文本颜色配置就是通过onPrimaryColor进行控制的。

文字排版配置 typographyScheme

文字排版配置中,适用于button的为以下属性:

其余的属性设置未经测试,效果不明

形状配置 shapeScheme

一般不使用,有兴趣的可以去查阅MDCShapeScheme类中的定义