Как мы могли бы создать эту концепцию ui?

Question

Я столкнулся с этой концепцией пользовательского интерфейса, я не мог не полюбоваться ее красотой.

Мне интересно, можно ли создать кнопку, которая делает (маскирует) элемент управления под ними, чтобы сделать их прозрачными в этой области. (В этом случае UITextField)

Пожалуйста, обратите внимание на это изображение ниже

Любая идея, если это возможно сделать с помощью кода? Посмотрите, как кнопка делает UITextField прозрачным с пометкой.

Answer 1

Вы бы сделали это именно так, как вы только что сказали - с помощью маски . Маска, прикрепленная к слою (или представлению), может сделать отверстие через это представление и его подпункты. В этом случае это отверстие представляет собой круг.

Вот пример: два UITextFields, в представлении которого маска вырезает круглое отверстие в конце них:

Я не добавлял галочкой изображение, но это только больше того же самого ,

Answer 2

Вот быстрый и простой пример того, как можно создать такое UI cocept с CSS3:

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

 
}

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

Вот вывод: