Material Design Components for iOS之button篇

writer

2021-01-08

1116个字

464 ℃

官方说明和指导文档：[文档](https://www.material.io/components/buttons) ，基本上都能看懂，具体的就不在这里一一细说了，这里着重讲解下如何在官方文档的基础上，进行进一步的实际运用

先来看下整体效果：

好了，接下来开始动手干

## 安装依赖库

在项目的Podfile中添加：

```ruby
pod 'MaterialComponents/Buttons'
pod 'MaterialComponents/Buttons+Theming'
```

然后执行

```ruby
pod install
```

## 开始绘制

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

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

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

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

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

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

![MDCButton类型](https://oss.littlelanmoe.com/typecho/2021/01/mdcbutton.png)

图中的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的代码修改为如下：

```objc
#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的颜色配置。代码如下：

```objc
#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类中的定义

#如无特别声明，该文章均为 writer 原创，转载请遵循署名-非商业性使用 4.0 国际（CC BY-NC 4.0）协议，即转载请注明文章来源。
#最后编辑时间为: 2021 年 01 月 27 日