官方说明和指导文档：文档 ，基本上都能看懂，具体的就不在这里一一细说了，这里着重讲解下如何在官方文档的基础上，进行进一步的实际运用
先来看下整体效果：
总体效果
好了，接下来开始动手干
安装依赖库
在项目的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类型分别代表：
- Text button
- Outlined Button
- Contained button
- Toggle button
其中第4种button在iOS系统上不受支持。前3种button样式的设置方法为：
- applyTextThemeWithScheme
- applyOutlinedThemeWithScheme
- 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，则本属性设置将不起作用 |
网友评论