android 定製個性按鈕 控制項

【註：次部落格長期荒置，因此附上這個工程的下載連結：http://pan.baidu.com/share/link?shareid=81046&uk=1158065893  有興趣可以下載看看】

既然是要做app，那麼如果全都用android內建的控制項的話介面就太單調和難看了，所以每個app都有自己的風格和外觀，那麼，現在就來研究一下如何做一個自己中意的控制項吧~

首先，建立一個android工程，我就命名為buttonTest了。

在給activity.java檔案動手腳之間，我比較喜歡先搞定xml檔案，我們這裡測試兩個控制項，一個是自製按鈕，一個是自製textview控制項，道理是一樣的，就是為了告訴大家這個適用於任意的控制項。

首先我們在main.xml檔案(我就懶得換名字了)裡添加三個控制項，每個控制項都可以給它很多屬性，具體查看可以輸入android： 然後後面就自動出現了它的所有屬性：

然後這裡我們只給出需要的。注意第一行那個android:id="@+id/mybutton"，這個意思是，給這個控制項一個名字，這個名字是存在之前提到過的R.java檔案裡的，因為是添加一個名字，所以用了+id，如果是引用string.java檔案裡的string字串的話，就只需要@string/nameofstring 。不需要加好了，具體我們看代碼：

 

main.xml檔案如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/bg"
>
<Button
android:layout_width="55px"
    android:layout_height="55px"
    android:id="@+id/button"
    android:background="@drawable/buttonstyle"
    android:layout_margin="10px"
/>
<TextView
android:layout_width="wrap_content"  
    android:layout_height="wrap_content"
    android:textColor="#000000"
    android:layout_margin="10px"
    android:id="@+id/text"
    android:text="@string/shorttext"
    android:background="@drawable/textview"
/>
<TextView
android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="10px"
    android:id="@+id/text2"
    android:textColor="#000000"
    android:text="@string/longtext"
    android:background="@drawable/textview"
/>

</LinearLayout>

可以看到三個控制項我都給了個ID，是因為我要在activity的java檔案裡給它一個listener，也就是說要對這個控制項進行操作，這是後話了。

裡面的text內容我放在了string.xml檔案裡了。

其中的 android:background="@drawable/xxxxxx" 這一行，就是針對這個控制項定製的類型，xxxx是定義這個類型用的檔案。

那麼這個檔案怎麼來呢~？其實就是右鍵點工程，建立android的xml檔案，然後選擇Drawable，最下面的root element選擇selector，然後在res檔案夾下就會產生一個叫做drawable的檔案夾，裡面就放著你定義的檔案：

然後我們就可以點開這個檔案，給剛才定義的空間覆上屬性了，我就隨意上網找了兩個圖，然後放在了drawable-hdpi裡（真不負責任啊），然後buttonstyle的內容如下：

<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="false" android:drawable="@drawable/button" />
<item android:state_pressed="true" android:drawable="@drawable/b_pressed" />
<item android:state_focused="true" android:drawable="@drawable/b_pressed"/> 
</selector>

其實就是針對不同的狀態給圖就可以了。

然後呢 這個button就完成了。

效果如下：

在按下的狀態下它是藍色的圖，我就不截了。

當然，這個並不能滿足我們，因為很多時候，按鈕上是要定義文字的。

但是如果只用一個圖片做背景，那麼因為長寬的問題，背景圖片經常就會被展開的很難看，所以，這裡就要提到一個android內建的工具，叫做draw9patch。我們找到android的sdk檔案夾，裡面有個叫tool的檔案夾，裡面就放了這個工具，我們點開它（會慢，耐心等下），發現介面很單純：

它雖然長得很單純，但是效果可是華麗麗的哦~

我們找到一個希望放文字的圖片素材進來，然後她會自動給圖片的四周放大一個像素，來讓我們定義展開時候的重複像素。

這裡我用了蘋果簡訊的氣泡：

右邊就是展開的效果，很理想吧~大家看到，圖片的四邊被我點了四個點，就是這4個點起到的作用，原理就是：

在展開的時候，它會複製這四個點範圍內的像素，而不是一味的展開。

換句話說，展開的時候，映像會複製這4個點對應的行列，而不會影響其它的像素。

我稍微把這個圖畫個示意：

被紅線框起來的部分，就是橫向或者縱向展開的時候被不斷複製的地方，而其它地方展開的時候並不影響。

這樣，我們把這個圖用在textview的定製檔案裡，textview.xml的內容如下：

<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="false" android:drawable="@drawable/bubble" />
<item android:state_pressed="true" android:drawable="@drawable/bu_pressed" />
<item android:state_focused="true" android:drawable="@drawable/bu_pressed"/> 

</selector>

OK了，為了能看效果，我在activity檔案裡動了點手腳，檔案完整內容如下：

package android.button;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.View.OnLongClickListener;
import android.widget.Button;
import android.widget.TextView;
import android.widget.Toast;

public class ButtonTestActivity extends Activity {
/** Called when the activity is first created. */
private Button button;
private TextView text;
    @Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        text = (TextView)findViewById(R.id.text);
        button = (Button)findViewById(R.id.button);
        button.setOnClickListener(new OnClickListener() {

            @Override
public void onClick(View v) {
// TODO Auto-generated method stub
                Toast.makeText(getApplicationContext(), "clicked",
                         Toast.LENGTH_SHORT).show();
            }
        });
        text.setOnLongClickListener(new OnLongClickListener() {

            @Override
public boolean onLongClick(View v) {
// TODO Auto-generated method stub
                Toast.makeText(getApplicationContext(), "long clicked",
                         Toast.LENGTH_SHORT).show();
return false;
            }
        });
    }

}

好了，讓我們運行看看吧~

第二個我添加了長按的監聽，長按時顯示藍色，成功~ OK，功成身退。~

這個臨時的工程我會儲存一段時間，如果有誰想看一下做參考（雖然很沒有含金量）的話可以留下郵箱~