Material Design Components For i

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

先来看下整体效果：

总体效果

好了，接下来开始动手干

安装依赖库

在项目的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应用不同的样式风格。

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

[站外图片上传中...(image-5ae4d5-1610075685022)]

图中的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文档上真的是含糊其辞，列出的设置属性实在是太少了。我现在将我能想到的常用属性设置列举出来，希望能帮助到更多人少走些弯路

需求描述	属性或方法名称	类型	属性/方法	说明	英文原文描述	注意要点
按钮最小尺寸	minimumSize	CGSize	property	设置按钮最小可见尺寸，如果为0则忽略该设置。默认为0	The minimum size of the button’s alignment rect. If either the height or width are non-positive(negative or zero), they will be ignored and that axis will adjust to its content size.Defaults to CGSizeZero.
按钮最大尺寸	maximumSize	CGSize	property	最大可见尺寸，如果为0则忽略该设置。该设置可能会导致图片显示不全或者文本被截断。默认为0	The maximum size of the button’s alignment rect. If either the height or width are non-positive(negative or zero), they will be ignored and that axis will adjust to its content size. Setting a maximum size may result in image clipping or text truncation.Defaults to CGSizeZero.
点击效果	enableRippleBehavior	BOOL	property	控制点击时ripple效果。默认为legacy样式MDCInkView，通过修改为YES可以使用MDCStatefulRippleView提供的效果。	This property determines if an @c MDCButton should use the @c MDCInkView behavior or not.By setting this property to @c YES, @c MDCStatefulRippleView is used to provide the user visual touch feedback, instead of the legacy @c MDCInkView.Defaults to @c NO.
点击效果颜色	rippleColor	UIColor	property	变更ripple颜色。默认为透明黑色	The color of the ripple.Defaults to a transparent black.	如果enableRippleBehavior属性为NO，则本属性设置将不起作用
点击效果样式	rippleStyle	MDCRippleStyle	property	变更ripple效果。MDCRippleStyleBounded：ripple效果在button的内部展现，边界为button的bounds；MDCRippleStyleUnbounded：ripple效果会以圆形状态展示，完全盖住button且会额外向外扩张10像素点	The different possible ripple styles. The ripple can either be bound to the view or not. MDCRippleStyleBounded: The ripple is bound to the view.MDCRippleStyleUnbounded: The ripple is unbounded and ripples to the size of the smallest circle that covers the entire rectangular bounds, plus an additional 10 points.	如果enableRippleBehavior属性为NO，则本属性设置将不起作用