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

先来看下整体效果：

好了，接下来开始动手干

安装依赖库

在项目的Podfile中添加：

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

然后执行

pod install

开始绘制

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

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

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

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

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

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

图中的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

运行下，看效果

现在已经完全变成了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中可以进行的基本设置：

• @property(nonatomic, assign) CGSize minimumSize UI_APPEARANCE_SELECTOR;

  设置按钮最小可见尺寸，如果为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.

• @property(nonatomic, assign) CGSize maximumSize UI_APPEARANCE_SELECTOR;

  设置按钮最大可见尺寸，如果为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.

• @property(nonatomic, assign) BOOL enableRippleBehavior;

  控制点击时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.

  @note Defaults to @c NO.

• @property(nonatomic, strong, null_resettable) UIColor *rippleColor;

  变更ripple颜色。默认为透明黑色。

  ⚠️如果enableRippleBehavior属性为NO，则本属性设置将不起作用。

  The color of the ripple.

  @note Defaults to a transparent black.

• @property(nonatomic, assign) MDCRippleStyle rippleStyle;

  变更ripple效果。MDCRippleStyleBounded：ripple效果在button的内部展现，边界为button的bounds；MDCRippleStyleUnbounded：ripple效果会以圆形状态展示，完全盖住button且会额外向外扩张10像素点。

  ⚠️如果enableRippleBehavior属性为NO，则本属性设置将不起作用

  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.

MDCContainerScheme（主题）可以进行的有效设置

颜色配置 colorScheme

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

• @property(nonnull, readwrite, copy, nonatomic) UIColor *primaryColor;

  这个属性用于控制button的整体配色。当button应用了ContainedTheme时，整体颜色会变成该设定的颜色；其余两种Theme则是设置button上的文本颜色。同时，如果没有单独设置rippleColor的话，该颜色还会影响到rippleColor。

• @property(nonnull, readwrite, copy, nonatomic) UIColor *onPrimaryColor;

  当button应用了ContainedTheme时，这个属性用于控制button上文本的颜色。其余两种Theme设置后似乎没有效果。

  A color that passes accessibility guidelines for text/iconography when drawn on top of @c primaryColor.

• @property(nonnull, readwrite, copy, nonatomic) UIColor *backgroundColor;

  这个属性还没有看到实际设置效果，可能对button无效。

• @property(nonnull, readonly, copy, nonatomic) UIColor *surfaceColor;

  button用不到这个颜色

  The color of surfaces such as cards, sheets, menus.

文字排版配置 typographyScheme

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

• @property(nonatomic, nonnull, readwrite, copy) UIFont *button;

  该属性用于配置按钮上的文本字体样式，可以调整字体大小，字体类型等，对3种类型的button均适用

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

形状配置 shapeScheme

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