我们怎么可能创造这个 ui 概念？

Question

我偶然发现了这个UI概念，我不禁赞叹它的美。

我想知道是否可以创建一个 Button 来制作（屏蔽）它们下方的控件，使它们在该区域看起来透明。（在本例中 UITextField）

请看下面这张图

不知道这是否可以通过代码完成？请查看按钮如何使 UITextField 变得透明并带有边距。

Answer 1

你会完全按照你刚才说的方式去做——带着面具。附加到层（或视图）的蒙版可以在该视图及其子视图中打孔。在这种情况下，那个洞是一个圆。

这是一个示例：两个 UITextField，在其掩码在其末端切出一个圆孔的视图中：

我没有添加复选标记图像，但那更像是一样。

Answer 2

这里有一个快速简单的示例，说明如何使用 CSS3 创建这样的 UI 概念：

.inputfield {
 width: 300px;
 height: 50px;
 line-height: 40px;
 padding: 8px;
 font-size: 20px;
 margin-top: 5px;
 border-collapse: collapse;
 border: 6px solid #000;
}
span.okcircle {
 display: inline-block;
 border: 6px solid #fff;
 background: #DF01A5;
 border-radius: 50%;
 width: 70px;
 height: 70px;
 margin-top: 24px;
 margin-left: 270px;
 z-index: 9;
 position: absolute; 

}

<span class="okcircle"> </span>
<div><input type="text" placeholder="username" class="inputfield"></div>
<div><input type="password" placeholder="password" class="inputfield"></div>

这是输出：

我们怎么可能创造这个 ui 概念？

How could we possibly create this ui concept?

user-interface

calayer

uikit

ios

uibezierpath