Нижній рядок стилю в Android


120

Мені потрібно створити форму андроїда, щоб тільки внизу була штрих (пунктирна лінія). Коли я спробую наступне, обведення розводить форму прямо через центр. Хтось знає, як це правильно зробити? штрих повинен бути нижньою лінією / межею. Я використовую фігуру як фон для TextView. Будь ласка, неважливо, навіщо мені це потрібно.

<?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="#1bd4f6" />
        </shape>
    </item>

    <item>
        <shape android:shape="line" >
            <padding android:bottom="1dp" />

            <stroke
                android:dashGap="10px"
                android:dashWidth="10px"
                android:width="1dp"
                android:color="#ababb2" />
        </shape>
    </item>

</layer-list>

2
Чому я хотів би побачити ваш git-проект для чогось такого простого? Шукаєте хіти для цього проекту?
Cote Mounyo

просто з цікавості, чому ви використовуєте px для визначення розмірів тире?
Jose_GD

Відповіді:


313

Це свого роду хак, але я думаю, що це, мабуть, найкращий спосіб зробити це. Пунктирна лінія завжди буде на дні, незалежно від висоти.

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item>
        <shape android:shape="rectangle" >
            <solid android:color="#1bd4f6" />
        </shape>
    </item>

    <item android:top="-2dp" android:right="-2dp" android:left="-2dp">
        <shape>
            <solid android:color="@android:color/transparent" />
            <stroke
                android:dashGap="10px"
                android:dashWidth="10px"
                android:width="1dp"
                android:color="#ababb2" />
        </shape>
    </item>

</layer-list>

Пояснення:

Друга форма - прозорий прямокутник з пунктирним контуром. Ключ у тому, щоб кордони відображалися лише внизу, лежать у від'ємних полях, встановлених іншими сторонами. Ці негативні поля "висувають" пунктирну лінію за межею намальованої області з цих боків, залишаючи лише лінію вздовж низу. Один з потенційних побічних ефектів (який я ще не пробував) полягає в тому, що для поглядів, які виводяться за межі їх власних меж, межі негативної границі можуть стати видимими.


5
Розумний справді. Мені знадобилось певний час, щоб зрозуміти, що для цієї роботи є різниця в 1 дп (в абсолютній величині) між верхньою, правою та лівою
стороною

5
Це прекрасно, але хтось може, будь ласка, доповнити відповідь поясненням математики в цьому (для бідних душ, як я, і всіх, хто приїде сюди в наступні дні) :)
source.rar

Чудово працює. І ви навіть можете використовувати селектор, який вказує на xmls-список шарів залежно від стану. Мені довелося зрозуміти, що це теж працює.
Дакер

Не вводьте зайве перевищення. Я думаю, що рішення @Anonan краще. Спробуйте змінити його відповідно до ваших потреб.
Влад

44

Це робить трюк ...

<item >
    <shape android:shape="rectangle">
        <solid android:color="#YOUR_BOTTOM_LINE_COLOR"/>
    </shape>
</item>

<item android:bottom="1.5dp">
    <shape android:shape="rectangle">
        <solid android:color="#YOUR_BG_COLOR"/>
    </shape>
</item>

Два прямокутника перекриваються один з одним і додають простір внизу, щоб відобразити інший колір у вигляді лінії. таким чином, ви можете застосувати це, щоб зробити інший спосіб
Jongz Puangput

3
Хороша відповідь, але із надмірним перевитратою
Лестер

і також не працюватимуть, коли у вас кольори з альфа
Dirk

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

        <shape android:shape="rectangle">
            <solid android:color="#88FFFF00"/>
            <stroke
                android:width="5dp"
                android:color="#FF000000"/>
        </shape>
    </item>
</layer-list>

Для мене прекрасно працювали! Дякую.
Хетсганді

19

Ця відповідь призначена для тих шукачів Google, які хочуть показати пунктирну нижню межу, EditTextяк тут

зразок

Створіть dotted.xmlвсередині drawableпапки та вставте їх

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:bottom="1dp"
        android:left="-2dp"
        android:right="-2dp"
        android:top="-2dp">
        <shape android:shape="rectangle">
            <stroke
                android:width="0.5dp"
                android:color="@android:color/black" />    
            <solid android:color="#ffffff" />
            <stroke
                android:width="1dp"
                android:color="#030310"
                android:dashGap="5dp"
                android:dashWidth="5dp" />
            <padding
                android:bottom="5dp"
                android:left="5dp"
                android:right="5dp"
                android:top="5dp" />
        </shape>
    </item>
</layer-list>

Потім просто встановіть android:backgroundатрибут, який dotted.xmlми тільки що створили. Твій EditTextвиглядає так.

<EditText
    android:id="@+id/editText"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Some Text"
    android:background="@drawable/dotted" />

13

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

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@color/main_bg_color"/>
    <item android:gravity="bottom">
        <shape android:shape="rectangle">
            <size android:height="5dp"/>
            <solid android:color="@color/bottom_bar_color"/>
        </shape>
    </item>
</layer-list>

2
Якщо вам не потрібен спеціальний фон, ви можете видалити<item android:drawable="@color/main_bg_color"/>
Overclover

1
Працює з Android 27, не працює з Android 19 ... не тестував інші версії.
Ridcully

10

Спробуйте наступний драйвовий код xml:

    <layer-list>
        <item android:top="-2dp" android:right="-2dp" android:left="-2dp">
            <shape>
                <solid android:color="@android:color/transparent" />
                <stroke
                    android:width="1dp"
                    android:color="#fff" />
            </shape>
        </item>
    </layer-list>

7

Я думаю, вам не потрібно використовувати форму, якби я вас зрозумів.

Якщо ви шукаєте, як показано на наступному зображенні, тоді використовуйте наступний макет

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

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" >

<RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:background="#1bd4f6"
    android:paddingBottom="4dp" >

    <TextView
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:background="#ababb2"
        android:padding="5dp"
        android:text="Hello Android" />
 </RelativeLayout>

 </RelativeLayout>

EDIT

граючи з цими властивостями, ви отримаєте результат

    android:top="dimension"
    android:right="dimension"
    android:bottom="dimension"
    android:left="dimension"

спробуйте так

<?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="#1bd4f6" />
    </shape>
</item>

<item android:top="20px"
    android:left="0px">
    <shape android:shape="line"  >
        <padding android:bottom="1dp" />

        <stroke
            android:dashGap="10px"
            android:dashWidth="10px"
            android:width="1dp"
            android:color="#ababb2" />
    </shape>
</item>

</layer-list>

мій штрих - пунктирна лінія
Кот-Майо,

Це працює, єдиний застереження - коли вигляд стає занадто малим, форма стає непомітною
Jose_GD

Ви завжди повинні бути обережними, щоб не вводити зайве перевитрату.
Влад

5

Просте рішення:

Створіть файл, що малюється, як edittext_stroke.xml у папці, що витягується . Додайте код нижче:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="line"
   >
    <stroke
        android:width="1dp"
        android:color="@android:color/white" >
    </stroke>
</shape>

У файлі макета додайте рисунок до edittext як

android: dravableBottom = "@ dravable / edittext_stroke"

<EditText
      android:textColor="@android:color/white"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:drawableBottom="@drawable/edittext_stroke"
      />

У цьому випадку ваша лінія буде знаходитися в центрі, а не внизу
Святослав Зайцев

4

Зазвичай для подібних завдань - я створив список шарів, який можна зробити так:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
        <solid android:color="@color/underlineColor"/>
        </shape>
    </item>
<item android:bottom="3dp">
    <shape android:shape="rectangle">
        <solid android:color="@color/buttonColor"/>
    </shape>
</item>

Ідея полягає в тому, що спочатку ви намалюєте прямокутник за допомогою підкресленняColor, а потім поверх цього ви намалюєте ще один прямокутник за допомогою фактичної кнопки Cololor, але застосувавши bottomPadding. Це завжди працює.

Але коли мені потрібно було мати кнопку Colour щоб бути прозорою, я не міг використати вищесказане. Я знайшов ще одне рішення

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape android:shape="rectangle">
        <solid android:color="@android:color/transparent"/>
    </shape>
</item>

<item android:drawable="@drawable/white_box" android:gravity="bottom"     android:height="2dp"/>
</layer-list>

(як ви бачите тут mainButtonColor прозорий, а white_box - це просто простий прямокутник, який можна намалювати білим твердим)


2

використовуйте цей xml змініть колір за своїм вибором.

<item>
    <layer-list>
        <item>
            <shape>
                <solid android:color="@color/gray_500" />

            </shape>
        </item>
        <!-- CONTENT LAYER -->
        <item android:bottom="2dp" >
            <shape>
                <solid android:color="#ffffff" />
            </shape>
        </item>
    </layer-list>
</item>

У випадку, якщо ви хочете програмно

public static Drawable getStorkLineDrawable(@ColorInt int colorStrok, int    iSize, int left, int top, int right, int bottom)

{
    GradientDrawable gradientDrawable = new GradientDrawable();
    gradientDrawable.setShape(GradientDrawable.RECTANGLE);
    gradientDrawable.setStroke(iSize, colorStrok);
    LayerDrawable layerDrawable = new LayerDrawable(new Drawable[]{gradientDrawable});
    layerDrawable.setLayerInset(0, left, top, right, bottom);
    return layerDrawable;
}

назвати такий метод, як

  Drawable yourLineDrawable=  getStorkLineDrawable(yourColor, iSize, -iSize, -iSize, -iSize, 0);

2

Це найкраще працювало для мене:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:top="-5dp" android:left="-5dp" android:right="-5dp" android:bottom="0dp">
        <shape android:shape="rectangle">
            <stroke android:width="4dp" android:color="#ff0000"/>
        </shape>
    </item>
</layer-list>

Показує лінію лише внизу. Ви можете легко змінити шириною обведення на потрібний вам розмір, а також відповідно оновити верхній, лівий, правий.


2

Найпростіший спосіб зробити це - після цього виду, де ви хочете нижню межу

    <?xml version="1.0" encoding="utf-8"?>
    <View
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:background="@color/colorPrimary" />

0

це повністю прозорий Edittext з прозорим фоном.

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

<item android:top="-3dp" android:right="-3dp" android:left="-3dp">
    <shape>
        <solid android:color="@android:color/transparent" />
        <stroke

            android:width="2dp"
            android:color="@color/bottomline" />
    </shape>
</item>


0

Просте рішення :

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

        <shape android:shape="rectangle">

            <solid android:color="#AARRGGBB" />

            <stroke
                android:width="5dp"
                android:color="@android:color/red"
                android:dashWidth="10dp"
                android:dashGap="12dp" />

        </shape>
    </item>
</layer-list>

І нарешті у нас щось подібне :)

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

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.