iT邦幫忙

2024 iThome 鐵人賽

DAY 14
0

框線、底線、虛線這三種是在自定義中不少見到的,只要熟悉如何使用shape元素就可以設計出不同類型的邊框
接下來我會將框線、底線、虛線的自定義程式碼分別解釋一下

框線

框線的實現很簡單,只要上一篇有看過其實就差不多了
這是基本的程式碼

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

只要背景不填色並利用stroke添加框線就好了
這裡是將框線設成了1dp且沒有其他的設定,如果有需要的話也可以自行增加其他需要的部分
接著再到xml裡找到要套用的TextView並套入裡面的background屬性就好了
https://ithelp.ithome.com.tw/upload/images/20240922/20168456Ax5bYyqSsb.png
這是完成套用的樣子

底線

底線與框線的實線方法較不一樣,但沒有差很多
下面是試作的程式碼

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

itemshape外的leftrighttop是為了讓圖層分別各向外擴展2dp,但由於超出顯示範圍了所以我們只會看到一條底線,這樣就可以簡單的達成我們要的效果了
stroke這邊設定了邊框為1dp,雖然這樣設定的話它會是一個完整的邊框,但因為我們有在前面的itemshape外設定過了,所以最終我們只會看到一條水平的底線而已
接著再到xml裡找到要套用TextView並套入裡面的background就好了
https://ithelp.ithome.com.tw/upload/images/20240922/20168456KsVcq5nkLN.png
這是完成套用的樣子

虛線

虛線與底線類似
只要稍作修改就可以完成了

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:left="-2dp"
        android:right="-2dp"
        android:top="-2dp">
        <shape>
            <stroke
                android:width="1dp"
                android:dashWidth="3dp"
                android:dashGap="3dp" />
        </shape>
    </item>
</layer-list>

itemshape外的leftrighttop和上面的底線那幾行是一樣的,都只是為了讓除了底部的線以外的線都不顯示而已
接下來就是要將底線改成虛線了
我們需要用到shape裡的stroke來處理底線
先將線的寬度設置成1dp
接著用dashWidthdashGap分別指定虛線中的每段線條寬度和間隙為皆為3dp
接著再到xml裡找到要套用TextView並套入裡面的background就好了
https://ithelp.ithome.com.tw/upload/images/20240922/20168456JPsHgOOGld.png
這是完成套用的樣子

今天就教到這裡
下篇會介紹Toast


上一篇
[Day 13] 元件自定義
下一篇
[Day 15] 利用Toast來顯示短暫訊息
系列文
深入Android Java程式語言 - 打造我的行動應用30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言