Android - малювання із закругленими кутами лише у верхній частині


151

Я мав це малювати, щоб округлий прямокутник є фоном:

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/white" />
    <stroke android:width="1dp" android:color="@color/light_gray" />
    <padding android:left="10dp" android:top="10dp" android:right="10dp" android:bottom="10dp" />
    <corners android:radius="6dp" />
</shape>

Це працює добре, як і очікувалося.

Тепер я хочу змінити це лише для заокруглення верхніх кутів, тому я змінюю це на таке:

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/white" />
    <stroke android:width="1dp" android:color="@color/light_gray" />
    <padding android:left="10dp" android:top="10dp" android:right="10dp" android:bottom="10dp" />
    <corners android:topLeftRadius="6dp" android:topRightRadius="6dp"
             android:bottomLeftRadius="0dp" android:bottomRightRadius="0dp"/>
</shape>

Але тепер жоден з кутів не округлий, і я отримую звичайний прямокутник. Що я тут пропускаю?


Це насправді не є рішенням, але я думаю, у мене колись була подібна проблема. Збільшення точок до 2 пікселів допомогло, але ви знаєте, це не є рішенням.
Код поета

Ось проблема з куточками форми: code.google.com/p/android/isissue/detail?id=939
Knickedi

Відповіді:


303

Спробуйте надати ці значення:

 <corners android:topLeftRadius="6dp" android:topRightRadius="6dp"
         android:bottomLeftRadius="0.1dp" android:bottomRightRadius="0.1dp"/>

Зауважте, що я змінився 0dpна 0.1dp.

EDIT: Дивіться коментар Aleks G нижче для більш чистої версії


131
Досліджуючи це далі, я знайшов ще краще рішення: <corners android:radius="1dp" android:topLeftRadius="6dp" android:topRightRadius="6dp" android:bottomLeftRadius="0dp" android:bottomRightRadius="0dp"/>- це дає ідеально квадратні кути внизу, навіть без натяку на округлення. Однак ваше рішення в значній мірі працює.
Алекс Г

Як це зробити в коді з урахуванням растрової карти? І як додати навколо нього контур (штрих AKA)?
андроїд розробник

@Aleks G Я не бачу, що потрібно вказуватиandroid:radius="1dp"
hmac

@hmac це треба. Прочитайте документацію, це дає зрозуміти.
Aleks G

@AleksG Так, документація невірна, тестуючи Samsung 10, Android 9: "Кожен кут (спочатку) повинен мати радіус кута, більший за 1, інакше жодні кути не закруглені. Якщо ви хочете, щоб певні кути не були закруглені, a обхід - це використовувати android: radius, щоб встановити радіус кута за замовчуванням, більший за 1, але потім переосмислити "- не вірно, я вказую праворуч внизу, вгорі праворуч, вгорі праворуч як нуль і внизу ліворуч + ve і знизу ліворуч правильно вигнуто
hmac

14

Спробуйте зробити щось подібне:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:bottom="-20dp" android:left="-20dp">
        <shape android:shape="rectangle">
            <solid android:color="@color/white" />

            <corners android:radius="20dp" />
        </shape>
    </item>
</layer-list>

Здається, не підходить встановлювати різні кутові радіуси прямокутника. Таким чином, ви можете використовувати цей хак.


Дивіться мою власну відповідь - цілком прийнятно мати різний радіус для різних кутів.
Aleks G

Я спробував такий підхід, він неприйнятний, іде говорить, що це не присвоєно різному rsdius і ігнорує його
busylee

11

У моєму випадку нижче код

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

        <shape android:shape="rectangle">
            <solid android:color="@color/maincolor" />

            <corners
                android:topLeftRadius="10dp"
                android:topRightRadius="10dp"
                android:bottomLeftRadius="0dp"
                android:bottomRightRadius="0dp"
            />
        </shape>

    </item>
    </layer-list>

1
Властивості верхнього і нижнього елемента для цього елемента не потрібні, якщо ви не хочете прошивки у вікні, але в іншому випадку це працює.
RominaV

9

Спираючись на відповідь Busylee , ось як можна зробити такий, drawableщо має лише один не округлий кут (у верхньому лівому куті в цьому прикладі):

<?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="@color/white" />
            <!-- A numeric value is specified in "radius" for demonstrative purposes only,
                  it should be @dimen/val_name -->
            <corners android:radius="10dp" />
        </shape>
    </item>
    <!-- To keep the TOP-LEFT corner UNROUNDED set both OPPOSITE offsets (bottom+right): -->
    <item
        android:bottom="10dp"
        android:right="10dp">
        <shape android:shape="rectangle">
            <solid android:color="@color/white" />
        </shape>
    </item>
</layer-list>

Зверніть увагу , що вище drawableце НЕ правильно відображається в попередньому перегляді Android - студія (2.0.0p7). Щоб переглянути його все одно, створіть інший вигляд і використовуйте це як android:background="@drawable/...".


6
@AleksG - Звичайно. Це сьогодні актуально, як і тоді (як доказ - мені було потрібно щось подібне). Ви повинні знати, що з роками деякі способи ведення справ стають застарілими і, можливо, їх потрібно буде замінити на більш сучасні. Як згадував Busylee , IDE скаржиться при визначенні різних кутових радіусів, що не стосується цього способу. Більше того, оскільки це питання було моїм першим зверненням до Google (iirc), для мене було сенсом оновити його. Так чи інакше, я впевнений, що так не буде проти кількох КБ коду ... :)
Dev-iL

2

Я спробував ваш код і отримав верхню округлу кутову кнопку. Я дав кольори як @ffffffі штрих, який я дав #C0C0C0.

спробуйте

  1. Даючи android: bottomLeftRadius = "0.1dp" замість 0. якщо його не працює
  2. Перевірте, що таке малювання та роздільна здатність емулятора. Я створив доступну папку під res та використовував її. (hdpi, mdpi ldpi) папка, у якій є цей XML. це мій вихід.

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


Яка версія для Android це? Мій додаток повинен працювати на 1.6 - і з емулятором 1.6 виникла проблема.
Алекс Г

1

Можливо, вам буде потрібно прочитати цей https://developer.android.com/guide/topics/resources/dravable-resource.html#Shape

а нижче - Примітка.

Примітка Кожен кут (спочатку) повинен мати радіус кута більший за 1, інакше жодні кути не закруглені. Якщо ви хочете, щоб певні кути не були закруглені, слід обійтися андроїдом: радіусом, щоб встановити радіус кута за замовчуванням, більший за 1, але потім переосмислити кожен кут зі значеннями, які ви дійсно хочете, забезпечивши нуль ("0dp" ) там, де ви не хочете закруглених кутів.


1

Створіть roung_top_corners.xml на малюванні та скопіюйте наведений нижче код

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<corners
    android:topLeftRadius="22dp"
    android:topRightRadius="22dp"
    android:bottomLeftRadius="0dp"
    android:bottomRightRadius="0dp"
    />
<gradient
    android:angle="180"
    android:startColor="#1d2b32"
    android:centerColor="#465059"
    android:endColor="#687079"
    android:type="linear" />
<padding
    android:left="0dp"
    android:top="0dp"
    android:right="0dp"
    android:bottom="0dp"
    />
<size
    android:width="270dp"
    android:height="60dp"
    /></shape>
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.