Android中使用shape來實現控件形狀的設置


在android中常使用shape來作爲控件的背景,來實現對控件形狀的設計,例如使用shape來實現圓角按鈕。shape使用的大致過程如下:
1.在drawable文件夾中聲明一個xml文件,(所以,它應該可以等同於一張圖片,對shape的處理可以把它當作一個普通圖片進行)
2.在文件裏設置需要的shape屬性。
3.在佈局文件裏使用。
具體可設置的屬性有solid,padding,corners,stroke,gradient,size。
其中solid設置整個shape的填充顏色,padding設置的是內邊距,corners設置的是四個邊角的半徑,也就決定了邊角的弧度,
stroke就設置shape的邊框的形狀,如邊框線的粗細,顏色,線型(實線還是虛線),gradient設置漸變屬性。
size則是用來設置整個shape對象的大小。這些標籤可根據需要進行設置,並不一定需要全部寫出。
進一步根據實驗分析各個標籤可設置的屬性及效果:

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

    <stroke
       android:dashWidth="10dp"
        android:dashGap="30dp"
        android:width="20dp"
        android:color="#000000" /> 
    <!-- 圓角 -->
    <corners
        android:bottomLeftRadius="10dp"
        android:bottomRightRadius="10dp"
        android:topLeftRadius="10dp"
        android:topRightRadius="10dp" />

    <!-- 內邊距-->
    <padding
        android:bottom="10dp"
        android:left="10dp"
        android:right="10dp"
        android:top="10dp" /> 
  <gradient
      android:type="linear"
      android:endColor="#0000ff"
      android:startColor="#ff0000"
    />

</shape>


由效果圖和源碼對比可清楚地看出各屬性的效果。

使用示例:

a.實現圓角按鍵的test.xml文件

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <solid android:color="#0044ff"  /> 
    <stroke
        android:width="2dp"
        android:color="#0044ff" />
    <corners
        android:bottomLeftRadius="20dp"
        android:bottomRightRadius="20dp"
        android:topLeftRadius="20dp"
        android:topRightRadius="20dp" /> 
    <padding
        android:bottom="10dp"
        android:left="10dp"
        android:right="10dp"
        android:top="10dp" />
</shape>

b.實現一個近似圓形的圖片效果,這裏並不是標準的圓的img_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<solid android:color="#ff9d77" />
<stroke
    android:width="1dp"
    android:color="#000000" /> 
<corners
    android:bottomLeftRadius="85dp"
    android:bottomRightRadius="85dp"
    android:topLeftRadius="85dp"
    android:topRightRadius="85dp" /> 
<padding
    android:bottom="10dp"
    android:left="10dp"
    android:right="10dp"
    android:top="10dp" /> 
</shape>
xml佈局:

<LinearLayout 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"
    tools:context=".MainActivity"
    android:orientation="vertical">


    <ImageView
        android:layout_marginTop="30dp"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:src="@drawable/qq"
        android:background="@drawable/img_bg"
        android:layout_gravity="center"/>


    <EditText
       android:id="@+id/userName"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:layout_marginTop="20dp"
       android:layout_marginLeft="20dp"
       android:layout_marginRight="20dp"
       android:layout_marginBottom="10dp"
        android:hint="用戶名"
       />

    <EditText
        android:id="@+id/password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:layout_marginBottom="10dp"
        android:inputType="textPassword"
        android:hint="密碼"/>
    <Button
        android:id="@+id/login"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:layout_marginBottom="10dp"
        android:background="@drawable/test"
        android:text="登 錄"
        android:onClick="login"
        android:textColor="#ffffff"
        android:textSize="20sp"
        android:textStyle="bold"
        />
效果圖:


根據需要修改各個屬性的具體值可實現不同的效果。





發佈了35 篇原創文章 · 獲贊 2 · 訪問量 3萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章