สไตล์บรรทัดล่างใน Android

ฉันต้องการสร้างรูปร่างของหุ่นยนต์เพื่อให้เฉพาะด้านล่างเท่านั้นที่มีเส้นขีด (เส้นประ) เมื่อฉันลองทำสิ่งต่อไปนี้เส้นโครงร่างจะแบ่งครึ่งรูปร่างผ่านจุดศูนย์กลาง มีใครรู้วิธีทำให้ถูกต้องไหม? เส้นขีดต้องเป็นบรรทัดล่าง / เส้นขอบ ฉันใช้รูปร่างเป็นพื้นหลังของ 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>

มันเป็นการแฮ็ก แต่ฉันคิดว่านี่น่าจะเป็นวิธีที่ดีที่สุด เส้นประจะอยู่ด้านล่างเสมอโดยไม่คำนึงถึงความสูง

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

คำอธิบาย:

รูปร่างที่สองคือสี่เหลี่ยมผืนผ้าโปร่งใสโดยมีเส้นประ กุญแจสำคัญในการทำให้เส้นขอบปรากฏเฉพาะที่ด้านล่างอยู่ในระยะขอบลบที่กำหนดอีกด้านหนึ่ง ระยะขอบเชิงลบเหล่านี้จะ "ดัน" เส้นประนอกพื้นที่ที่วาดไว้ในด้านเหล่านั้นเหลือเพียงเส้นที่อยู่ด้านล่าง ผลข้างเคียงที่เป็นไปได้อย่างหนึ่ง (ซึ่งฉันยังไม่ได้ลอง) ก็คือสำหรับมุมมองที่อยู่นอกขอบเขตของตัวเองขอบของขอบลบอาจมองเห็นได้

นี่คือเคล็ดลับ ...

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

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

คำตอบนี้มีไว้สำหรับผู้ค้นหา Google ที่ต้องการแสดงเส้นประด้านล่างของEditTextlike ที่นี่

สร้างโฟลเดอร์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" />

ฉันรู้สึกว่ามันตรงไปตรงมาโดยไม่ต้องพายเรือหรือนกกระสาเชิงลบทั้งหมดนี้

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

ลองใช้โค้ดที่วาดได้ 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>

ฉันคิดว่าคุณไม่จำเป็นต้องใช้รูปร่างถ้าฉันเข้าใจคุณ

หากคุณกำลังมองหาดังที่แสดงในภาพต่อไปนี้ให้ใช้เค้าโครงต่อไปนี้

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

แก้ไข

เล่นกับคุณสมบัติเหล่านี้คุณจะได้รับผล

    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>

วิธีง่ายๆ:

สร้างไฟล์ที่วาดได้เป็น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>

ในไฟล์เลย์เอาต์ให้เพิ่ม drawable ใน edittext เป็น

หุ่นยนต์: 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"
      />

โดยปกติสำหรับงานที่คล้ายกัน - ฉันสร้างรายการเลเยอร์ที่วาดได้เช่นนี้:

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

แนวคิดคือก่อนอื่นให้คุณวาดรูปสี่เหลี่ยมผืนผ้าด้วย underlineColor จากนั้นด้านบนของอันนี้คุณวาดอีกรูปสี่เหลี่ยมผืนผ้าด้วยปุ่มสีจริง แต่ใช้ bottomPadding มันใช้ได้เสมอ

แต่เมื่อฉันต้องการให้ buttonColor โปร่งใสฉันไม่สามารถใช้สิ่งที่วาดได้ด้านบน ฉันพบอีกหนึ่งวิธีแก้ปัญหา

<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 เป็นเพียงสี่เหลี่ยมผืนผ้าธรรมดาที่วาดได้ด้วย Solid สีขาว)

ใช้ 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);

สิ่งนี้ได้ผลดีที่สุดสำหรับฉัน:

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

แสดงเส้นที่ด้านล่างเท่านั้น คุณสามารถเปลี่ยนความกว้างของเส้นขีดเป็นขนาดที่คุณต้องการได้อย่างง่ายดายและยังอัปเดตด้านบนซ้ายและขวาตาม

วิธีที่ง่ายที่สุดคือวางไว้หลังมุมมองนั้นที่คุณต้องการให้เส้นขอบล่าง

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

มันเป็น 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>

วิธีง่ายๆ :

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

และในที่สุดเราก็มีบางอย่างเช่นนั้น :)