Chapter 2 attracting your attention-UI programming (3), chapter 2 ui
2.1.4 image display-Image view)
If an interface is composed of text, it must be boring. Therefore, placing some suitable images at the right position not only can greatly increase the appearance of the interface, but also make your applications more attractive. In Android, there are many ways to display images on the interface. Here, we will introduce the most commonly used image view component (ImageView ). ImageView is used to display any image. we can define the size and color of the image by ourselves. Let's take an example to see how ImageView is used.
First, define the ImageView component in the layout file:
<? Xml version = "1.0" encoding = "UTF-8"?> <RelativeLayout Xmlns: android = "http://schemas.android.com/apk/res/android" Android: layout_width = "match_parent" Android: layout_height = "match_parent"> <ImageView Android: id = "@ + id/my_imageview" Android: layout_centerInParent = "true" Android: layout_width = "200dp" Android: layout_height = "200dp" Android: src = "@ drawable/p06"/> </RelativeLayout> |
Here, an ImageView component with the ID of my_imageview is defined in the layout file. Let the hacker display a p06.jpeg image on the interface. This image is stored in the res/drawable directory.
If we do not set images in the layout file, we can also implement them in the Code:
ImageView image = (ImageView) findViewById (R. id. my_imageview ); Mage. setImageResource (R. drawable. p06 ); |
You can also use android: background = "@ drawable/p06" to set images. However, there is a difference between the two: the background will be stretched Based on the length and width of the ImageView, while the src will store the size of the source image and will not be stretched. Of course, they can also be used at the same time.
Next, let's take a look at the src and background effects, as shown in 2-9 and 2-10:
Figure 2-9 src Effect
Figure 2-10 background Effect
In addition, some attributes in ImageView also need our attention:
Android: whether adjustViewBounds maintains the aspect ratio. It must be used with maxWidth and MaxHeight. It is ineffective to use it independently;
Android: whether cropToPadding intercepts a specified area and replaces it with a blank area. The setting is ineffective and must be used with scrollY;
Android: maxHeight defines the maximum height of a View. It must be used with AdjustViewBounds. If you want to set a fixed image size and keep the image aspect ratio, you need to set it as follows:
1) set AdjustViewBounds to true;
2) Set maxWidth and MaxHeight;
3) set layout_width and layout_height to wrap_content.
Android: maxWidth sets the maximum width of a View.
Android: scaleType sets the filling mode of the image.
Android: src sets the image or color of the View.
Android: tint renders the image into a specified color.
Experience Sharing: Most of the time, we often need to set transparency for images. Different from background, src has slightly different ways to set the image transparency. When we use src to set images, we can directly use Set myImageView. setAlpha (int alpha; If the image is set through background, we need to first obtain its background and then set: myImageView. getBackground (). setAlpha (int alpha ). |
2.1.5 multiple choices-CheckBox and single choice-single choice (RadioBox)
1) Multi-choice box (CheckBox)
The Android platform provides CheckBox for multiple options. We need to note that, since there are multiple options, in order to determine whether a user has selected one, we need to listen to each option in the multiple selection box. Here, we also use a simple example to see how multiple selection boxes are implemented.
First, create a layout file for checkbox. xml:
<? 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: layout_width = "wrap_content" Android: layout_height = "wrap_content" Android: text = "select the sports you are interested in" Android: textColor = "@ android: color/white" Android: textSize = "20sp"/> <CheckBox Android: id = "@ + id/my_checkbox1" Android: layout_width = "wrap_content" Android: layout_height = "wrap_content" Android: text = "swimming"/> <CheckBox Android: id = "@ + id/my_checkbox2" Android: layout_width = "wrap_content" Android: layout_height = "wrap_content" Android: text = "running"/> <CheckBox Android: id = "@ + id/my_checkbox3" Android: layout_width = "wrap_content" Android: layout_height = "wrap_content" Android: text = "playing"/> </LinearLayout> |
In this layout file, we define a TextView component and three CheckBox components. Then, we use the layout file as the content view of the Activity, as shown in Figure 2-11:
Figure 2-11 use of CheckBox
In the code, we can listen to each CheckBox separately:
CheckBox checkBox1 = (CheckBox) findViewById (R. id. my_checkbox1 ); CheckBox checkBox2 = (CheckBox) findViewById (R. id. my_checkbox2 ); CheckBox checkBox3 = (CheckBox) findViewById (R. id. my_checkbox3 ); CheckBox1.setOnCheckedChangeListener (new OnCheckedChangeListener (){ @ Override Public void onCheckedChanged (CompoundButton buttonView, Boolean isChecked ){ If (isChecked ){ Log. d ("test", "checkbox1 is isChecked "); } } }); CheckBox2.setOnCheckedChangeListener (new OnCheckedChangeListener (){ @ Override Public void onCheckedChanged (CompoundButton buttonView, Boolean isChecked ){ If (isChecked ){ Log. d ("test", "checkbox2 is isChecked "); } } }); CheckBox3.setOnCheckedChangeListener (new OnCheckedChangeListener (){ @ Override Public void onCheckedChanged (CompoundButton buttonView, Boolean isChecked ){ If (isChecked ){ Log. d ("test", "checkbox3 is isChecked ");} } }); |
In this way, after listening for each item in the multiple selection box, we can process each corresponding operation.
2) single Queue (RadioGroup, RadioButton)
The single-choice and multi-choice boxes are different. Only one option can be selected at a time. The Android platform provides single-choice components that can be combined with RadioGroup and RadioButton to achieve single-choice results.
We also give a simple example.
First, create a new radio. xml 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: layout_width = "wrap_content" Android: layout_height = "wrap_content" Android: text = "select your gender" Android: textColor = "@ android: color/white" Android: textSize = "20sp"/> <RadioGroup Android: id = "@ + id/my_rediogroup" Android: orientation = "vertical" Android: layout_width = "wrap_content" Android: layout_height = "wrap_content"> <RadioButton Android: id = "@ + id/radio_man" Android: layout_width = "wrap_content" Android: text = "male" Android: layout_height = "wrap_content" Android: checked = "true"/> <RadioButton Android: id = "@ + id/radio_woman" Android: layout_width = "wrap_content" Android: text = "female" Android: layout_height = "wrap_content"/> </RadioGroup> </LinearLayout> |
In this layout file, we define a TextView component and a RadioGroup group with two RadioButton components. Then, we use the layout file as the content view of the Activity, as shown in Figure 2-12:
Figure 2-12 use of RadioButton
You can see that only one RadioButton in a group of radiogroups is selected.
In addition to listening like CheckBox, RadioButton can also separately listen to RadioGroup:
RadioGroup myRadioGroup = (RadioGroup) findViewById (R. id. my_rediogroup ); MyRadioGroup. setOnCheckedChangeListener ( New RadioGroup. OnCheckedChangeListener (){ @ Override Public void onCheckedChanged (RadioGroup group, int checkedId ){ Switch (checkedId ){ Case R. id. radio_man: Log. d ("test", "man is isChecked "); Break; Case R. id. radio_woman: Log. d ("test", "woman is isChecked "); Break; } MHandler. sendMessage (mHandler. obtainMessage (REFLASH )); } }); |
Experience Sharing: We need to set the size of the Multi-choice box. We cannot simply set the android: layout_width and android: layout_height attributes of the CheckBox. (if this is the only setting, try it, you can only display a part of the shape of a Multi-choice box, instead of scaling the proportional ratio of the entire multi-choice box. Instead, you need to set a style for it and set an image for it in the style, for example: <Style name = "gl_task_checkbox" Parent = "@ android: style/Widget. CompoundButton. CheckBox"> <Item name = "android: button"> @ drawable/image name </item> </Style> In this way, the CheckBox will be displayed according to the size we set. |