Gaya garis bawah di Android


120

Saya perlu membuat bentuk android sehingga hanya bagian bawah yang memiliki goresan (garis putus-putus). Ketika saya mencoba yang berikut ini, goresan itu membagi dua bentuk tepat melalui tengah. Adakah yang tahu bagaimana melakukannya dengan benar? goresan harus menjadi garis bawah / perbatasan. Saya menggunakan bentuk sebagai latar belakang TextView. Tolong, lupakan mengapa saya membutuhkannya.

<?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
Mengapa saya melihat proyek git Anda untuk sesuatu yang sangat sederhana? Apakah Anda mencari hit untuk proyek ini?
Cote Mounyo

hanya ingin tahu, mengapa Anda menggunakan px untuk menentukan ukuran tanda hubung?
Jose_GD

Jawaban:


313

Ini semacam peretasan, tetapi saya pikir ini mungkin cara terbaik untuk melakukannya. Garis putus-putus akan selalu berada di bawah, berapa pun tingginya.

<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>

Penjelasan:

Bentuk kedua adalah persegi panjang transparan dengan garis putus-putus. Kunci untuk membuat batas hanya muncul di sepanjang bagian bawah terletak di margin negatif mengatur sisi lainnya. Margin negatif ini "mendorong" garis putus-putus di luar area yang digambar di sisi tersebut, hanya menyisakan garis di sepanjang bagian bawah. Satu potensi efek samping (yang belum saya coba) adalah, untuk tampilan yang menggambar di luar batasnya sendiri, batas margin negatif mungkin menjadi terlihat.


5
Pintar memang. Butuh beberapa waktu bagi saya untuk mengetahui bahwa yang membuat ini berhasil adalah perbedaan dalam 1 dp (dalam nilai absolut) antara atas, kanan, dan kiri, serta lebar guratan :)
Jose_GD

5
Ini bekerja dengan sempurna, tetapi bisakah seseorang melengkapi jawabannya dengan penjelasan matematika dalam hal ini (untuk jiwa-jiwa yang malang seperti saya dan siapa pun yang datang ke sini di masa yang akan datang) :)
source.rar

Bekerja dengan baik. Dan Anda bahkan dapat menggunakan selektor yang menunjuk ke daftar-lapisan xmls bergantung pada status. Saya harus memikirkan yang satu itu dan itu berhasil juga.
Dacker

Jangan masukkan overdraw yang tidak perlu. Saya pikir solusi @Anonan lebih baik. Coba ubah yang itu sesuai kebutuhan Anda.
Vlad

44

Ini triknya ...

<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>

Ada dua persegi panjang yang saling tumpang tindih dan menambahkan ruang bawah untuk menunjukkan warna lain sebagai garis. jadi, Anda dapat menerapkan ini untuk melakukan cara lain
Jongz Puangput

3
Jawaban bagus tetapi dengan overdraw yang berlebihan
Lester

dan juga tidak akan berfungsi jika Anda memiliki warna dengan alfa
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>

Bekerja dengan sempurna untuk saya! Terima kasih.
hetsgandhi

19

Jawaban ini untuk pencari google yang ingin menunjukkan batas bawah bertitik EditTextseperti di sini

Sampel

Buat folder dotted.xmldi dalam drawabledan tempel ini

<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>

Kemudian cukup atur android:backgroundatribut yang dotted.xmlbaru saja kita buat. Anda EditTextterlihat seperti ini.

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

13

Saya merasa ini mudah, tanpa semua bantalan atau bangau negatif ini.

<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
Jika Anda tidak membutuhkan latar belakang khusus, Anda dapat menghapus<item android:drawable="@color/main_bg_color"/>
Overclover

1
Bekerja dengan Android 27, tidak bekerja dengan Android 19 ... tidak menguji versi lain.
Konyol

10

Coba kode drawable xml berikutnya:

    <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

Saya pikir Anda tidak perlu menggunakan bentuk jika saya mengerti Anda.

Jika Anda melihat seperti yang ditunjukkan pada gambar berikut, gunakan tata letak berikut.

masukkan deskripsi gambar di sini

<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

bermain dengan properti ini, Anda akan mendapatkan hasil

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

coba seperti ini

<?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>

pukulan saya adalah garis putus-putus
Cote Mounyo

Ini berfungsi, satu-satunya peringatan adalah ketika ukuran tampilan diubah terlalu kecil, bentuknya tidak terlihat
Jose_GD

Anda harus selalu berhati-hati untuk tidak memasukkan overdraw yang tidak perlu.
Vlad

5

Solusi sederhana:

Buat file drawable sebagai edittext_stroke.xml di folder drawable . Tambahkan kode di bawah ini:

<?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>

Di file tata letak, tambahkan drawable ke edittext sebagai

android: drawableBottom = "@ drawable / edittext_stroke"

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

Dalam hal ini baris Anda akan berada di tengah, bukan di bawah
Sviatoslav Zaitsev

4

Biasanya untuk tugas serupa - Saya membuat daftar lapisan yang dapat digambar seperti ini:

<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>

Idenya adalah pertama-tama Anda menggambar persegi panjang dengan underlineColor dan di atasnya Anda menggambar persegi panjang lain dengan buttonColor sebenarnya tetapi menerapkan bottomPadding. Itu selalu berhasil.

Tetapi ketika saya perlu memiliki buttonColor agar transparan, saya tidak dapat menggunakan drawable di atas. Saya menemukan satu solusi lagi

<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>

(seperti yang Anda lihat di sini mainButtonColor transparan dan white_box hanyalah persegi panjang sederhana yang dapat digambar dengan Solid putih)


2

gunakan xml ini ubah warnanya dengan pilihan Anda.

<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>

Dalam Kasus jika Anda ingin secara terprogram

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;
}

sebut metode ini seperti

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

2

Ini bekerja paling baik untuk saya:

<?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>

Menunjukkan garis di bagian bawah saja. Anda dapat dengan mudah mengubah dengan lebar guratan ke ukuran yang Anda suka dan juga memperbarui bagian atas, kiri, kanan yang sesuai.


2

Cara termudah untuk melakukannya adalah meletakkan setelah tampilan di mana Anda ingin batas bawah

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

0

itu benar-benar Edittext transparan dengan latar belakang transparan.

<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

Solusi sederhana :

<?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>

Dan akhirnya kami memiliki sesuatu seperti itu :)

masukkan deskripsi gambar di sini

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.