Как оформить вырез фонового изображения? - PullRequest
1 голос
/ 21 мая 2019

Я хочу добиться следующего результата в моем макете:

enter image description here

Мой подход состоит в том, чтобы создать собственный чертеж, как показано ниже, но, очевидно, я не могу использовать отрицательные размеры:

<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="@color/blue"/>
<corners android:topLeftRadius="-25dp"/>

Как мне добиться такой формы вставки?

1 Ответ

0 голосов
/ 22 мая 2019

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

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="6dp"
    android:viewportWidth="24.0"
    android:viewportHeight="6.0">

    <path
        android:fillColor="#1e319e"
        android:pathData="M2,0 h20 q0,2 2,2 v4 h-24 v-4 q2,0 2,-2"/>
</vector>

image

Вы можете игнорировать фон и синюю линию вокруг закругленных углов, потому что они из предварительного просмотра макета. Тем не менее, этот фон может не соответствовать вашим потребностям (может быть, вам нужны большие углы или более овальная форма), поэтому здесь дано подробное описание того, что означает pathData (я также добавлю координаты точки, в которой мы находимся после каждой команды чтобы лучше это представить - также имейте в виду, что верхний левый угол равен (0,0), а нижний правый - (N, N)):

  • M2,0 переместить начальную точку в координату 2,0, чтобы мы могли начать рисовать оттуда - местоположение (2,0)
  • h20 нарисуйте прямую линию длиной 20 вправо - местоположение (22, 0)
  • q0,2 2,2 нарисовать кривую из текущей точки; Эта команда может быть труднее понять, потому что она немного странная, но вот документы и краткое объяснение этого. Как видите, я использовал нижний регистр q, потому что хотел нарисовать кривую относительно того, что у меня уже есть, а не абсолютное значение (обязательно прочитайте документы об абсолютном и относительном). Команда принимает два набора значений, q xc,yc xd,yd со следующим значением: xd,yd необходимо добавить к текущей точке (22,0), чтобы получить точку назначения (22 + 2 = 24 и 0 + 2 = 2 - > (24,2) - это точка назначения кривой), а xc,yc - это значения, которые мы должны добавить к текущей точке (в данном случае 22,0, а не к точке назначения), чтобы получить «контрольную точку». «(22, 2), который будет определять способ построения кривой (в основном, линии, начинающиеся с контрольной точки и заканчивающиеся в начальной / конечной точке кривой, должны пересекать кривую только в этих точках ( Касательные ) - текущее местоположение указателя (24, 2)
  • v4 нарисуйте прямую линию длиной 4 вниз - местоположение (24, 6)
  • h-24 нарисуйте прямую линию длиной 24 влево (обратите внимание, что с помощью минуса мы меняем направление) - местоположение (0, 6)
  • h-4 нарисуйте прямую линию длиной 4 вверх (тот же трюк с минусом, что и выше) - местоположение (0, 2)
  • q2,0 -2,2 точно так же, как другой, и мы в конечном итоге, где мы начали в (2,0)
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...