Пользовательская форма в Android с использованием xml

#android #xml #android-layout #android-custom-drawable

#Android #xml #android-макет #android-настраиваемый для рисования

Вопрос:

Я пытаюсь нарисовать пользовательскую форму, которую я могу использовать в качестве фона для своего макета. Но я не могу этого сделать. Можно ли нарисовать фигуру, как показано ниже, используя xml в Android. Я не понимаю, как вырезать форму полукруга из вертикальных центров прямоугольника.

введите описание изображения здесь

Комментарии:

1. пожалуйста, уточните форму. закругленные углы, цвета etx

2. сделайте вид изображения и установите возможность рисования фона и src в макете.

3. нет, это невозможно сделать, вместо этого используйте nine patch drawable

Ответ №1:

Используется layer-list для создания этой пользовательской формы drawable .

/res/drawable/custom_shape.xml:

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

    <!-- Transparent Rectangle -->
    <item>
        <shape android:shape="rectangle">
            <corners
                android:topLeftRadius="8dp"
                android:topRightRadius="8dp"
                android:bottomLeftRadius="4dp"
                android:bottomRightRadius="4dp" />

            <size
                android:width="300dp"
                android:height="100dp" />
            <solid android:color="#FFFFFF" />
        </shape>
    </item>

    <!-- Left Half-Circle -->
    <item
        android:left="-10dp"
        android:right="290dp"
        android:top="40dp"
        android:bottom="40dp">
        <shape android:shape="oval">
            <solid android:color="#000000" />
        </shape>
    </item>

    <!-- Right Half-Circle -->
    <item
        android:left="290dp"
        android:right="-10dp"
        android:top="40dp"
        android:bottom="40dp">
        <shape android:shape="oval">
            <solid android:color="#000000" />
        </shape>
    </item>

    <!-- Middle Dotted Line -->
    <item
        android:left="10dp"
        android:right="10dp">
        <shape android:shape="line">
            <stroke
                android:width="1dp"
                android:dashWidth="10px"
                android:dashGap="10px"
                android:color="#ff00"/>

        </shape>
    </item>

</layer-list>
  

ИСПОЛЬЗОВАНИЕ:

 <LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/custom_shape"/>
  

ВЫВОД:

введите описание изображения здесь

Надеюсь, это поможет ~

Ответ №2:

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

Ответ №3:

попробуйте использовать приведенный ниже xml. сохраните его в drawable.

 <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<corners
android:topLeftRadius="15dp"
android:topRightRadius="15dp"
android:bottomLeftRadius="5dp"
android:bottomRightRadius="5dp"
/>
<solid
android:color="#ffffff"
/>
<padding
android:left="0dp"
android:top="0dp"
android:right="0dp"
android:bottom="0dp"
/>

<stroke
android:width="1dp"
android:color="#000000"
/>
</shape>
  

Комментарии:

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

2. нет необходимости писать две формы. Тег <corner> позволяет нам использовать разные радиусы в углах

3. @PrashantJajal Это создаст простой прямоугольник со скругленными углами. Как вырезать два круга, которые присутствуют в центре левой и правой сторон прямоугольника?

4. @DhirajDevkar это невозможно сделать, вместо этого используйте nine patch drawable

5. поэтому лучше использовать nine patch. @DhirajDevkar

Ответ №4:

Лучше использовать изображения с 9 патчами. Если вы можете создать изображение, подобное приведенному выше, вы можете использовать https://romannurik.github.io/AndroidAssetStudio/nine-patches.html для создания изображения с 9 участками (определите расширяемую область).

Ответ №5:

Попробуйте этот XML-файл в drawable :

 <?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape= "rectangle">
<solid android:color="@color/primary" />
<corners android:radius="50dp"/>
</shape>
  

Ответ №6:

Пожалуйста, обратитесь к приведенному ниже 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="@android:color/black" />
        </shape>
    </item>
    <item
        android:bottom="10dp"
        android:left="10dp"
        android:right="10dp"
        android:top="10dp">
        <shape android:shape="rectangle">
            <size
                android:width="200dp"
                android:height="200dp" />
            <solid android:color="@color/colorAccent" />
            <corners android:radius="5dp" />
        </shape>
    </item>
    <item>
        <shape android:shape="line">
            <solid android:color="@android:color/black" />
            <stroke android:width="1dp"
                android:dashWidth="10px"
                android:dashGap="10px"/>
        </shape>
    </item>
    <item
        android:bottom="103dp"
        android:left="-10dp"
        android:right="205dp"
        android:top="103dp">
        <shape android:shape="oval">
            <size
                android:width="3dp"
                android:height="3dp" />
            <solid android:color="@android:color/black" />
            <stroke android:width="1dp" />
        </shape>
    </item>

    <item
        android:bottom="103dp"
        android:left="205dp"
        android:right="-10dp"
        android:top="103dp">
        <shape android:shape="oval">
            <size
                android:width="3dp"
                android:height="3dp" />
            <solid android:color="@android:color/black" />
            <stroke android:width="1dp" />
        </shape>
    </item>
</layer-list>
  

Комментарии:

1. Этот xml выглядит идеально, именно так, как я хочу. Но, когда я устанавливаю тот же xml в качестве фона для своего линейного макета, круги в центре слева и справа не видны.

Ответ №7:

Попробуйте приведенный ниже код

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

        <solid android:color="#FFFFFF" />
        <corners android:radius="3dip" />
        <stroke
            android:width="1dp"
            android:color="#ED2A3C" /> 
    </shape>