show code block

2017年3月1日 星期三

TextView自訂邊框(按鈕美化) ─ 繪圖圖形資源

前言:

這是美化Button的一種做法。
當完成之後你的Button會長這樣。

很不錯吧!




實作:


在drawable內創建一個檔案。 res/drawable/xxxx  
取名為outside



檔案內:

英文補給站 >

solid 固體 (這邊代表代表內部的顏色)
stroke 線 (繪畫等)一筆 (這邊就代表外框) 



Eidt(2017/03/29)
 找到一個很棒的解說。
這個繪圖圖形資源檔案的內容,最外層是「shape」標籤,標籤中的「android:shape」設定決定繪圖的種類,可以設定為下列這些設定值:

●Retangle – 繪製矩形,可以搭配「corners」標籤設定四邊的圓角。

●Oval – 繪製橢圓形。

●Line – 繪製線條。

●Ring – 繪製圓環,在shape標籤中控制繪製的效果。

●你可以使用繪圖圖形資源,為畫面元件設定一個特殊的樣式。


之後再<TextView 內加入background就完成了!





完整程式碼:

MainActivity.java 完全不用做更動

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}



outside.xml (res/drawable/outside.xml)

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@android:color/white" />
    <stroke
        android:width="2dip"
        android:color="#0290D2" />
</shape>


activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.chat.a015865.playedit.MainActivity">

    <TextView
    android:layout_centerInParent="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/outside"
        android:gravity="center"
        android:padding="20dp"
        android:text="Button" />
</RelativeLayout>




沒有留言:

張貼留言

協程(coroutine) - 協程為什麼要學它?

 Coroutine 協程 再強調一次 協程就是由kotlin官方所提供的線程api //Thread Thread { }.start() //Executor val execu...