Android: добавьте рамку в виде рамки в ImageView с помощью xml drawable и градиента - PullRequest
0 голосов
/ 19 апреля 2019

Я пытаюсь смоделировать рамку рамки для ImageView без использования изображения, но с помощью отрисовываемого XML, но я не могу.

Кадр, который я хотел бы смоделировать, иэто мой "тест" xml:

enter image description here

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
            <gradient
                android:type="linear"
                android:startColor="#86592d"
                android:endColor="#ffffca" />
        </shape>
    </item>
</layer-list>

Мое определение ImageView:

<ImageView
                    android:id="@+id/ivBackground"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:adjustViewBounds="true"
                    android:contentDescription="@string/desc"
                    android:padding="10dp"
                    android:scaleType="centerCrop"
                    android:cropToPadding="true"
                    android:background="@drawable/border_image" />

Что я получаю:

enter image description here

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

Надеюсь, кто-нибудьможет помочь мнеСпасибо.

PS.Это не должно выглядеть точно так же, но как можно ближе.

1 Ответ

0 голосов
/ 20 апреля 2019

Хорошо, я действительно очень упрямый и настойчивый, и мне не нравятся слова "это невозможно" :), поэтому я продолжал пробовать и пытаться и, наконец, получил то, что искал.

Это мой нарисованный xml:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle" >
            <solid android:color="#58452f" />
        </shape>
    </item>
    <item
        android:bottom="1dp"
        android:left="1dp"
        android:right="1dp"
        android:top="1dp">
        <shape android:shape="rectangle" >
            <solid android:color="#624D35" />
        </shape>
    </item>
    <item
        android:bottom="2dp"
        android:left="2dp"
        android:right="2dp"
        android:top="2dp">
        <shape android:shape="rectangle" >
            <solid android:color="#795f41" />
        </shape>
    </item>
    <item
        android:bottom="3dp"
        android:left="3dp"
        android:right="3dp"
        android:top="3dp">
        <shape android:shape="rectangle" >
            <solid android:color="#8e6f4c" />
        </shape>
    </item>
    <item
        android:bottom="4dp"
        android:left="4dp"
        android:right="4dp"
        android:top="4dp">
        <shape android:shape="rectangle" >
            <solid android:color="#a17d56" />
        </shape>
    </item>

    <item
        android:bottom="5dp"
        android:left="5dp"
        android:right="5dp"
        android:top="5dp">
        <shape android:shape="rectangle" >
            <solid android:color="#ffffd9" />
        </shape>
    </item>

    <item
        android:bottom="7dp"
        android:left="7dp"
        android:right="7dp"
        android:top="7dp">
        <shape android:shape="rectangle" >
            <solid android:color="#a17d56" />
        </shape>
    </item>
    <item
        android:bottom="8dp"
        android:left="8dp"
        android:right="8dp"
        android:top="8dp">
        <shape android:shape="rectangle" >
            <solid android:color="#8e6f4c" />
        </shape>
    </item>
    <item
        android:bottom="9dp"
        android:left="9dp"
        android:right="9dp"
        android:top="9dp">
        <shape android:shape="rectangle" >
            <solid android:color="#795f41" />
        </shape>
    </item>
    <item
        android:bottom="10dp"
        android:left="10dp"
        android:right="10dp"
        android:top="10dp">
        <shape android:shape="rectangle" >
            <solid android:color="#624D35" />
        </shape>
    </item>
    <item
        android:bottom="11dp"
        android:left="11dp"
        android:right="11dp"
        android:top="11dp">
        <shape android:shape="rectangle" >
            <solid android:color="#58452f" />
        </shape>
    </item>
</layer-list>

И вот мой результат:

enter image description here

Конечно, вы можете заметить, что это не такреальный кадр, но на самом деле он очень и очень близок.

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

Редактировать: Моя последняя попытка.

Продолжать улучшаться!

Новый xml:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle" >
            <solid android:color="#58452f" />
        </shape>
    </item>
    <item
        android:bottom="1dp"
        android:left="1dp"
        android:right="1dp"
        android:top="1dp">
        <shape android:shape="rectangle" >
            <gradient
                android:angle="45"
                android:startColor="#624D35"
                android:centerColor="#4e3d2a"
                android:endColor="#624D35"
                android:type="linear" />
        </shape>
    </item>
    <item
        android:bottom="2dp"
        android:left="2dp"
        android:right="2dp"
        android:top="2dp">
        <shape android:shape="rectangle" >
            <gradient
                android:angle="45"
                android:startColor="#795f41"
                android:centerColor="#604c34"
                android:endColor="#795f41"
                android:type="linear" />
        </shape>
    </item>
    <item
        android:bottom="3dp"
        android:left="3dp"
        android:right="3dp"
        android:top="3dp">
        <shape android:shape="rectangle" >
            <gradient
                android:angle="45"
                android:startColor="#8e6f4c"
                android:centerColor="#71583c"
                android:endColor="#8e6f4c"
                android:type="linear" />
        </shape>
    </item>
    <item
        android:bottom="4dp"
        android:left="4dp"
        android:right="4dp"
        android:top="4dp">
        <shape android:shape="rectangle" >
            <gradient
                android:angle="45"
                android:startColor="#a17d56"
                android:centerColor="#806444"
                android:endColor="#a17d56"
                android:type="linear" />
        </shape>
    </item>

    <item
        android:bottom="5dp"
        android:left="5dp"
        android:right="5dp"
        android:top="5dp">
        <shape android:shape="rectangle" >
            <gradient
                android:angle="45"
                android:startColor="#ffffd9"
                android:centerColor="#707047"
                android:endColor="#ffffd9"
                android:type="linear" />
        </shape>
    </item>

    <item
        android:bottom="7dp"
        android:left="7dp"
        android:right="7dp"
        android:top="7dp">
        <shape android:shape="rectangle" >
            <gradient
                android:angle="45"
                android:startColor="#a17d56"
                android:centerColor="#806444"
                android:endColor="#a17d56"
                android:type="linear" />
        </shape>
    </item>
    <item
        android:bottom="8dp"
        android:left="8dp"
        android:right="8dp"
        android:top="8dp">
        <shape android:shape="rectangle" >
            <gradient
                android:angle="45"
                android:startColor="#8e6f4c"
                android:centerColor="#71583c"
                android:endColor="#8e6f4c"
                android:type="linear" />
        </shape>
    </item>
    <item
        android:bottom="9dp"
        android:left="9dp"
        android:right="9dp"
        android:top="9dp">
        <shape android:shape="rectangle" >
            <gradient
                android:angle="45"
                android:startColor="#795f41"
                android:centerColor="#604c34"
                android:endColor="#795f41"
                android:type="linear" />
        </shape>
    </item>
    <item
        android:bottom="10dp"
        android:left="10dp"
        android:right="10dp"
        android:top="10dp">
        <shape android:shape="rectangle" >
            <gradient
                android:angle="45"
                android:startColor="#624D35"
                android:centerColor="#4e3d2a"
                android:endColor="#624D35"
                android:type="linear" />
        </shape>
    </item>
    <item
        android:bottom="11dp"
        android:left="11dp"
        android:right="11dp"
        android:top="11dp">
        <shape android:shape="rectangle" >
            <gradient
                android:angle="45"
                android:startColor="#58452f"
                android:centerColor="#463725"
                android:endColor="#58452f"
                android:type="linear" />
        </shape>
    </item>
</layer-list>

И новый (и намного лучше) результат:

enter image description here

...