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，功成身退。~

如果博文帮助到你的话,帮忙点个赞吧~谢啦^^