Chapter 2 attracting your attention-UI programming (1), chapter 2 ui

Chapter 2 attracting your attention-UI programming (1), chapter 2 ui
Chapter 2 attracting your attention-UI Programming

To learn how to develop Android applications, apart from getting familiar with related tools, you must first learn how to use various UI components. The applications we develop generally contain a set of user-visible interfaces composed of AndroidUI components. In the process of learning the interface development technology, we must first be familiar with these components before they can be effectively organized to form a beautiful and Reasonable interface.

This chapter will explain in detail some common UI components and how to customize them, and then introduce some other commonly used UI programming technologies.

2.1 UI basics-common UI Components

The number of Android components is huge. We need to fully master them as an accumulation of experience. Here, we will first introduce some components commonly used in Android, which are like the cornerstone of Android engineering and will be used more or less in every development design. In the next introduction, we will give some special examples to help you better master them.

2.1.1 text display-text box (TextView)

Text Box is an android component used to display text labels. It is one of our most commonly used android components.

TextView is very simple to use. We will illustrate it with a simple example.

1) create a layout file textview. xml in the res/layout directory. The Code is as follows:

<? 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 the id attribute "my_textview" and center it vertically, define an id for a component to allow other components or code to locate and reference it.

2) create an Activity and use the textview. xml file as the contentview of the Activity. Some 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, as shown in 2-1:

Figure 2-1 Use of textview

 

The above example shows that TextView is very simple to use, and we only use the basic attributes of TextView. But imagine what if the width is not enough and we only want to display it with one line? It doesn't matter. We can make TextView scroll up. We changed the attributes of TextView in the layout file. The Code is as follows:

<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: text = "0123456789" Android: textSize = "16sp" Android: focusable = "true" Android: focusableInTouchMode = "true" Android: singleLine = "true" Android: ellipsize = "marquee" Android: marqueeRepeatLimit = "marquee_forever"/>

Here, we should pay attention to the following attributes: android: focusable setting: whether to obtain the focus; android: singleLine setting: whether to display a single line; android: ellipsize setting: when the text is too long, the following settings are available for how to display the component: "start" -- ellipsis () is displayed at the beginning, "end" -- ellipsis () is displayed at the end, and "middle" -- ellipsis () is displayed in the middle; "marquee" -- display the video as a running horse (horizontal movement of the animation); android: marqueeRepeatLimit: set the number of repetitions; pay special attention to the attribute android: focusableInTouchMode, we can only set it to true to obtain the focus.

Next, let's take a look at the effect, as shown in 2-2:

Figure 2-2 textview

 

As you can see, TextView is rolling up.

 

Experience Sharing: Due to the differences between devices and systems, sometimes we cannot get the desired result if we place the applications we have debugged on another device. The font size is incorrect, either due to location offset or incorrect font size, this involves some size units: Pixel: the point on the screen; In (INCHES): length unit; Mm (mm): the unit of length; Pt (lbs): 1/72 inch; Dp (density-independent pixels): An abstract unit based on screen density. 1dp = 1px on a display at 160 o'clock per inch; Dip: it is the same as dp and is mostly used in android/ophone examples; Sp (pixels irrelevant to the scale): similar to dp, but can be scaled based on the user's font size preferences. To enable normal display of the current and future display types on the user interface, we recommend that you always use sp as the unit of text size and dip as the unit of other elements.

 

2.1.2 Button)

Buttons are also one of our most commonly used components. On the Android platform, buttons are implemented through the Button component. It is also very simple to implement. Let's take a simple example to let everyone know how to use the button.

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) button status

Three buttons are available: normal, focus, and pressed ), when using a Button, we often need to set different response effects for these three states. This implementation is also very simple.

We can define a resource file button in the res/drawable directory. xml, which defines three States. Each State corresponds to an image. Here, we use the same image when the button gets the focus and presses, and use another image when the button is normal, 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>

 

To use this resource file, you only need to reference the resource file in drawable (android: background = "@ drawable/button") to implement three States of the button. The Code is as follows:

<Button Android: id = "@ + id/my_button" Android: layout_width = "wrap_content" Android: layout_height = "wrap_content" Android: background = "@ drawable/button" Android: text = "my buttons"/>

 

3) button click event

Since it is a button, the corresponding event is triggered after the button is clicked, so you need to set the setOnClickListener button for event listening. In this example, let's change the text content of TextView after clicking:

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 ("the button has been clicked "); } });

 

Next, let's take a look at the effect, as shown in 2-3, 2-4, and 2-5:

Figure 2-3 button not clicked

 

Figure 2-4 when the button is clicked

 

Figure 2-5 after the button is clicked

 

Experience Sharing: In this example, we use an image in the. 9 format as the background, so that the button will not be distorted during stretching. When defining a button, an android: padding = "1dp" attribute is added to it. Without this attribute, the text on the button will be overwritten by the background and not displayed, you can try it yourself.