Chapter two attracts your eyeballs.-ui Programming (1)

Chapter two attracts your eyeballs-ui programming

The most straightforward way to learn about the development techniques of Android applications is to learn how to use various UI components, in addition to being familiar with the tools first. The applications we develop typically contain a set of user-visible interfaces that are made up of ANDROIDUI components. In the process of learning interface development technology, we must first familiarize ourselves with these components before we can organize them effectively and form an attractive and reasonable interface.

This chapter will explain some of the common UI components in detail, and how to customize the components, and then explain some of the other common UI programming techniques.

2.1 UI Basics-Common UI components

Android has a large number of components, we have to fully grasp them is a process of accumulation of experience. Here, we introduce some of the components commonly used in Android, they are like the cornerstone of Android engineering, and in every development design more or less always use them. In the following introduction, we will give some examples that are more characteristic to help you to master them better.

2.1.1 Text Display-text box (TextView)

Text boxes are the Android components used to display text labels and are one of our most commonly used Android components.

TextView is very simple to use, and we illustrate it in a simple example.

1) Create a new layout file Textview.xml in the Res/layout directory with the following code:

<?xml version= "1.0" encoding= "Utf-8"?> <linearlayout Xmlns:android= "Http://schemas.android.com/apk/res/android" android:orientation= "Horizontal" Android:layout_width= "Match_parent" android:layout_height= "Match_parent" > <textview Android:id= "@+id/my_textview" Android:layout_gravity= "Center_vertical" Android:layout_width= "Wrap_content" android:layout_height= "Wrap_content" Android:textcolor= "@android: Color/white" android:text= "0123456789" Android:textsize= "16sp"/> </LinearLayout>

In this layout file, we define a textview with an id attribute of "My_textview" and let it be vertically centered, giving the component the function to define the ID so that other components or code can find and reference it.

2) Create a new activity and use the Textview.xml file as the activity's contentview, some of the code is as follows:

@Override protected void OnCreate (Bundle savedinstancestate) { Super.oncreate (savedinstancestate); Setcontentview (R.layout.textview); }

Let's take a look at the effect, 2-1 shows:

Use of Figure 2-1textview

As can be seen from the above example, the use of TextView is very simple and we use only the basic properties of TextView. But imagine, if the width is not enough, we just want to use one line to display, how to do? No matter, we can let TextView roll up. We change the properties of the TextView in the layout file, with the following code:

<textview     android:id= "@+id /my_textview "     android:layout_width=" 50DP "      android:layout_height= "wrap_content"     android:layout_gravity= "center _vertical "     android:textcolor=" @android: Color/white "     android:textsize= "16sp"     android:focusable= "true"     android: Focusableintouchmode= "true"     android:singleline= "true"     android:ellipsize= "marquee"     android:marqueerepeatlimit= "Marquee_forever"/>

Here, we have to pay attention to the following properties: android:focusable setting whether to get focus, android:singleline setting whether one-line display, android:ellipsize setting when the text is too long, How the component is displayed, with the following values set: "Start"-the ellipsis is displayed at the beginning; "End"-the ellipsis is displayed at the end; "Middle"-the ellipsis is displayed in the middle; "Marquee"--displayed in the way of a marquee (animated lateral movement); Android: Marqueerepeatlimit set the number of repetitions, especially the Android:focusableintouchmode attribute, we only have to set it to true for the focus to take effect.

Below, let's look at the effect, 2-2 shows:

Figure 2-2textview Marquee Effect

As you can see, the TextView rolled up.

Experience Sharing: Due to the different devices or systems, sometimes we debug the application put on another device often do not get the desired results, not the position offset is the size of the font is not correct, here is related to some size units of the problem: PX (pixels): dots on the screen; In (inches): unit of length; MM (mm): unit of length; PT (lb): 1/72 inches; DP (density-independent pixels): An abstract unit based on screen density. 1DP = 1px on the monitor at 160 dots per inch; Dip: Same as DP, more used in android/ophone example; SP (scale independent pixels): Similar to DP, but can be scaled based on the user's font size preference. In order for the user interface to display properly on the current and future display types, we recommend that you always use the SP as the unit of text size and dip as the unit of other elements.

2.1.2 Buttons (button)

button is also one of our most commonly used components. In the Android platform, buttons are implemented by the button component. It is also very simple to implement, we have a simple example to let you master the use of buttons.

1) Define Button

Define a button and a textview in the layout file:

<?xml version= "1.0" encoding= "Utf-8"?> <linearlayout Xmlns:android= "Http://schemas.android.com/apk/res/android" android:orientation= "Vertical" Android:layout_width= "Match_parent" android:layout_height= "Match_parent" > <textview Android:id= "@+id/my_textview" android:gravity= "Center" Android:layout_width= "Fill_parent" android:layout_height= "100DP" android:text= "button not clicked" Android:textcolor= "@android: Color/white"/> <button Android:id= "@+id/my_button" Android:layout_width= "Fill_parent" android:layout_height= "37DP" android:background= "@drawable/button" Android:padding= "1DP" android:text= "OK"/> </LinearLayout>

2) State of the button

There are three states of the button: normal (healthy), focus (State of focus), pressed (pressed), we often need to set different responses to these three states when using button, which is very simple to implement.

We can define a resource file in the Res/drawable directory Button.xml, in which three states are defined, each state corresponds to a picture, here, we use the same picture when the button gets focus and press, normal state when using another picture, the code is as follows:

<?xml version= "1.0" encoding= "Utf-8"?> <selector xmlns:android= "Http://schemas.android.com/apk/res/android" > <item Android:state_pressed= "true" android:drawable= "@drawable/press"/> <item Android:state_focused= "true" android:drawable= "@drawable/press"/> <item android:drawable= "@drawable/normal"/> </selector>

The use of this resource file only requires referencing the resource file in drawable (android:background= "@drawable/button") to implement the three states of the button. The code looks like this:

<button Android:id= "@+id/my_button" Android:layout_width= "Wrap_content" android:layout_height= "Wrap_content" android:background= "@drawable/button" android:text= "my button"/>

3) button click event

Since it is a button, it is natural to trigger the corresponding event after being clicked, so we need to listen to the button setting Setonclicklistener, in this example, we let it change the text content of TextView after the click:

Button button = (button) Findviewbyid (R.id.my_button); TextView TextView = (TextView) Findviewbyid (R.id.my_textview); Button.setonclicklistener (New View.onclicklistener () { @Override public void OnClick (View v) { Textview.settext ("button has been clicked"); } });

Let's take a look at the results, 2-3, 2-4, 2-5:

Figure 2-3 button not clicked

Figure 2-4 When the button is clicked

Figure 2-5 button click After

Experience Sharing: In this example, we use the. 9 format as the background, so that the button does not distort when stretched. And when the button is defined to add a android:padding= "1DP" property, if there is no such attribute, the text on the button will be covered by the background and will not display, you can try it yourself.

Chapter two attracts your eyeballs.-ui Programming (1)