Как установить объединяющую форму с размерами Dynami c и спектром в android Drawable - PullRequest
1 голос
/ 09 марта 2020

Я хочу сделать форму как на картинке ниже. Размер на графике c указан ниже

enter image description here

  • Размер круга / овала составляет 30px
  • Прямоугольник с закругленными углами высота - 20 пикселей, а ширина - 65 пикселей
  • Начало прямоугольника установлено по центру круга, поэтому в целом размер графика c будет равен 80 пикселям.

enter image description here

Однако для рисования мне нужен адаптивный размер, чтобы я мог использовать его для любого размера представления.

Я могу создать форму, накладывая ее дает похожую иллюзию. Я не уверен, возможны ли типы логических (графических) в android или нет.

Drawable XML

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item>
        <shape android:shape="rectangle">
            <size
                android:width="75dp"
                android:height="30dp" />
            <solid android:color="@android:color/transparent" />
        </shape>
    </item>

    <item android:right="60dp">
        <shape android:shape="oval">
            <solid android:color="@color/colorPrimary" />
            <size
                android:width="30dp"
                android:height="30dp" />
        </shape>
    </item>

    <item android:left="15dp" android:top="10dp" android:bottom="10dp">
        <shape android:shape="rectangle">
            <solid android:color="@color/colorPrimary" />
            <size
                android:width="66dp"
                android:height="20dp" />
            <corners
                android:bottomRightRadius="20dp"
                android:topRightRadius="20dp" />
        </shape>
    </item>

</layer-list>

Выше XML, создающий форму, как на скриншоте ниже

enter image description here

Когда я устанавливаю фигуру на View, она выводится как на скриншоте ниже

Макет XML

<View
    android:layout_width="80dp"
    android:layout_height="30dp"
    android:background="@drawable/shape_flask"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

Вывод

enter image description here

Как вы можете видеть, даже определение размера в рисованной форме и форме представления не зависит от соотношения размеров. Я уверен, что это я делаю что-то не так.

Вопрос: Как мне сделать нарисованную фигуру, которая работает при любом размере изображения, с сохранением соотношения сторон? находится в Графическая ссылка . И как добавить к нему Drop Shadow.

EDITED

Я исправил проблему с размером, но у фигуры все еще есть проблема. Для лучшей визуализации я установил разные цвета для обеих фигур.

Рисованные XML

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item>
        <shape android:shape="rectangle">
            <size
                android:width="80dp"
                android:height="30dp" />
            <solid android:color="@android:color/transparent" />
        </shape>
    </item>

    <item android:right="60dp">
        <shape android:shape="oval">
            <solid android:color="@color/colorPrimary" />
            <size
                android:width="30dp"
                android:height="30dp" />
        </shape>
    </item>

    <item android:left="15dp" android:top="5dp" android:bottom="5dp">
        <shape android:shape="rectangle">
            <solid android:color="@color/colorAccent" />
            <size
                android:width="66dp"
                android:height="20dp" />
            <corners
                android:bottomRightRadius="20dp"
                android:topRightRadius="20dp" />
        </shape>
    </item>

</layer-list>

enter image description here

Но как вы можете см. на скриншоте ниже вид не выводит тот же размер и положение. Однако код View такой же.

enter image description here

1 Ответ

0 голосов
/ 09 марта 2020

Как насчет разделения таких элементов?

макет

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <View
        android:id="@+id/oval"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:background="@drawable/shape_oval" />

    <TextView
        android:id="@+id/rec"
        android:layout_width="65dp"
        android:layout_height="20dp"
        android:layout_centerVertical="true"
        android:layout_toEndOf="@+id/oval"
        android:layout_toRightOf="@+id/oval"
        android:background="@drawable/shape_rec"
        android:layout_marginStart="-15dp"
        android:layout_marginLeft="-15dp" />
</RelativeLayout>

shape_oval

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="@color/colorPrimary" />
</shape>

shape_re c

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/colorAccent" />
    <size
        android:width="66dp"
        android:height="20dp" />
    <corners
        android:bottomRightRadius="20dp"
        android:topRightRadius="20dp" />
</shape>

Предварительный просмотр

Preview

...