官方说明和指导文档:文档 ,基本上都能看懂,具体的就不在这里一一细说了,这里着重讲解下如何在官方文档的基础上,进行进一步的实际运用
先来看下整体效果:
好了,接下来开始动手干
安装依赖库
在项目的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类型分别代表:
- 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
运行下,看效果
现在已经完全变成了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类中的定义