Android custom personalized button controls

[Note: The blog for a long time, so attached to the download link of this project: http://pan.baidu.com/share/link? Consumer id = 81046 & uk = 1158065893 if you are interested, please download it]

Since the app is used, the interface is too monotonous and ugly if all the controls that come with android are used. Therefore, every app has its own style and appearance, now let's take a look at how to make a favorite widget ~

First, create an android project and name it "buttonTest.

In the activity. I prefer to deal with xml files first when using java files. Here we test two controls: Self-made buttons and self-made textview controls. The principle is the same, this is to tell everyone that this applies to any control.

First, in main. add three controls to the xml file (I am too lazy to change the name). Each control can give it many attributes. For details, enter android: then all its attributes are automatically displayed:

Here we only provide what we need. Pay attention toAndroid: Id = "@ + ID/mybutton"This means to give the control a name, which exists in the previously mentioned R. java file, because it is to add a name, so the + id is used, if it is to reference string. for the string in the java file, you only need @ string/nameofstring. You do not need to add it. For details, refer to the Code:

 

The main. xml file is as follows:

<?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>

You can see that I have given an ID for all the three controls, because I want to give it a listener in the java file of the activity, that is, to operate on the control.

I put the text content in the string. xml file.

TheAndroid: Background = "@ drawable/xxxxxx"This line is the type customized for this control. xxxx is the file used to define this type.

How can this file come from ~? In fact, right-click the project, create an xml file for android, select Drawable, select selector for the bottom root element, and a folder named drawable will be generated under the res folder, the file you defined is in it:

Then we can open this file and overwrite the attributes of the space we just defined. Then I randomly went online to find two images, put it in drawable-hdpi (really irresponsible), and then the content of buttonstyle is as follows:

<?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>

In fact, you can give the graph to different States.

Then the button is complete.

The effect is as follows:

In the pressed state, it is a blue graph and I will not cut it down.

Of course, this does not satisfy us, because in many cases, the buttons need to define text.

However, if only one image is used as the background, the background image is often stretched out because of the length and width. Therefore, we need to mention a tool that comes with android, called draw9patch. We found the android sdk folder, which contains a folder named tool. This tool is put in it. We clicked it (it will be slow, wait patiently) and found that the interface is very simple:

Although it looks simple, the effect is gorgeous ~

We found an image clip that we wanted to put the text in, And then she automatically zoomed a pixel around the image to let us define the repeated pixels during stretching.

Here I used the bubble of the Apple Text message:

The stretch effect is displayed on the right side, which is ideal ~ As you can see, I clicked four points on the four sides of the image, which is the role of these four points,The principle is:

During stretching, it copies the pixels in the four vertex ranges, instead of stretching them blindly.

In other words, when stretching, the image copies the rows and columns corresponding to the four points without affecting other pixels.

I will give a picture of this:

The part framed by the red line is the area that is continuously replicated during horizontal or vertical stretching, but it is not affected when it is stretched elsewhere.

In this way, we use this graph in the Custom textview file. The content of textview. xml is as follows:

<?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. To see the effect, I moved my hands and feet in the activity file. The complete content of the file is as follows:

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;
            }
        });
    }

}

Okay. Let's run it ~

Second, I added a long-pressed listener. The long-pressed listener is displayed in blue ~ OK .~

I will save this temporary project for a period of time. If anyone wants to take a look at it for reference (although there is no gold content), they can leave a mailbox ~