Interface Programming for Android applications (4) and Android Interface Programming

Interface Programming for Android applications (4) and Android Interface Programming

Third group of UI components: ImageView and its subclass

 

The main function is to display images. Any Drawable object can be displayed using ImageView.

 

1. image browser

The image browser below can change the transparency of the image to be viewed by calling the setImageAlpha () method of ImageView. You can also view the original image size in a small area. (Two imageviews)

Below is the layout File

1 <LinearLayout xmlns: android = "http://schemas.android.com/apk/res/android" 2 android: orientation = "vertical" 3 android: layout_width = "match_parent" 4 android: layout_height = "match_parent"> 5 <TextView 6 android: layout_width = "match_parent" 7 android: layout_height = "wrap_content" 8 android: Layout = "120px"/> 9 <LinearLayout10 android: orientation = "horizontal" 11 android: layout_width = "match_parent" 1 2 android: layout_height = "wrap_content" 13 android: gravity = "center"> 14 <Button15 android: layout_width = "wrap_content" 16 android: layout_height = "wrap_content" 17 android: text = "Increase transparency" 18 android: id = "@ + id/plus"/> 19 <Button20 android: layout_width = "wrap_content" 21 android: layout_height = "wrap_content" 22 android: text = "Transparency reduction" 23 android: id = "@ + id/minus"/> 24 <Button25 android: layout_width = "wrap_content" 26 android: Layout_height = "wrap_content" 27 android: text = "next" 28 android: id = "@ + id/next"/> 29 </LinearLayout> 30 <! -- Define the overall ImageView of the displayed image --> 31 <! -- Android: scaleType = "fitCenter" indicates --> 32 <! -- The aspect ratio of the image is scaled when the image is displayed, and the scaled image is placed in the center of the Image view --> 33 <ImageView34 android: id = "@ + id/image1" 35 android: layout_width = "wrap_content" 36 android: layout_height = "280dp" 37 android: src = "@ drawable/five" 38 android: scaleType = "fitCenter"/> 39 <! -- Define ImageView for displaying partial image details --> 40 <ImageView41 android: id = "@ + id/image2" 42 android: layout_width = "120dp" 43 android: layout_height = "120dp" 44 android: background = "# 00f" 45 android: layout_margin = "10dp"/> 46 </LinearLayout>View Code

To dynamically change the transparency of an image, you need to write an event listener for the button to dynamically change the Alpha value of the image when you click the button.

To dynamically display partial image details, the program adds the OnTouchListener listener for the first ImageView,

When a touch event occurs on the first ImageView, the program reads the corresponding part of the image from the original image and displays it in the second ImageView.

The following is the java code and running, but clicking the image on the last image will flash back .. The cause is unknown and there is no debugging information ..

1 public class MainActivity extends AppCompatActivity {2 3 // defines an array of 4 int [] images = new int [] {5 R. drawable. one, 6 R. drawable. two, 7 R. drawable. three, 8 R. drawable. four, 9 R. drawable. five, 10}; 11 // define the default image 12 int currentImg = 4; 13 // define the initial transparency of the image 14 private int alpha = 255; 15 @ Override16 protected void onCreate (Bundle savedInstanceState) {17 super. onCreate (savedInstanceState); 18 setContentView (R. layout. activity_main); 19 final Button plus = (Button) findViewById (R. id. plus); 20 final Button minus = (Button) findViewById (R. id. minus); 21 final Button next = (Button) findViewById (R. id. next); 22 final ImageView image1 = (ImageView) findViewById (R. id. image1); 23 final ImageView image2 = (ImageView) findViewById (R. id. image2); 24 // define the listener for viewing the next image 25 next. setOnClickListener (new View. onClickListener () 26 {27 @ Override28 public void onClick (View v) 29 {30 // controls ImageView to display the next image 31 image1.setImageResource (images [++ currentImg % images. length]); 32} 33}); 34 // defines the method for changing the image transparency 35 View. onClickListener listener = new View. onClickListener () 36 {37 @ Override38 public void onClick (View v) 39 {40 if (v = plus) 41 {42 alpha + = 20; 43} 44 if (v = minus) 45 {46 alpha-= 20; 47} 48 if (alpha> = 255) 49 {50 alpha = 255; 51} 52 if (alpha <= 0) 53 {54 alpha = 0; 55} 56 // change image transparency 57 image1.setImageAlpha (alpha); 58} 59 }; 60 // Add the listener 61 plus for the two buttons. setOnClickListener (listener); 62 minus. setOnClickListener (listener); 63 64 image1.setOnTouchListener (new View. onTouchListener () {65 @ Override66 public boolean onTouch (View view, MotionEvent event) {67 BitmapDrawable bitmapDrawable = (BitmapDrawable) image1.getDrawable (); 68 // obtain the Bitmap 69 bitmap Bitmap = bitmapDrawable In the first image display box. getBitmap (); 70 // the actual size of the bitmap image and the scaling ratio of the first ImageView 71 double scale = 1.0 * bitmap. getHeight ()/image1.getHeight (); 72 // get the start point of the image to be displayed 73 int x = (int) (event. getX () * scale); 74 int y = (int) (event. getY () * scale); 75 if (x + 120> bitmap. getWidth () 76 {77 x = bitmap. getWidth ()-120; 78} 79 if (y + 120> bitmap. getHeight () 80 {81 y = bitmap. getHeight ()-120; 82} 83 // display the image in the specified region 84 image2.setImageBitmap (Bitmap. createBitmap (bitmap, x, y, 120,120); 85 image2.setImageAlpha (alpha); 86 return false; 87} 88}); 89} 90}View Code

 

2. The image button is relatively simple and not described.

After reading ZoomButton, ZoomControls is the zoom-in button.

 

3. associate a contact with QuickCantactBadge

The layout file is as follows:

1 <LinearLayout 2 xmlns: android = "http://schemas.android.com/apk/res/android" 3 android: orientation = "vertical" 4 android: layout_width = "match_parent" 5 android: layout_height = "match_parent"> 6 <TextView 7 android: layout_width = "match_parent" 8 android: layout_height = "wrap_content" 9 android: layout_marginTop = "120px"/> 10 The java code is as follows:

1 public class quickContactBadge_index extends AppCompatActivity {2 QuickContactBadge badge; 3 @ Override 4 protected void onCreate (Bundle savedInstanceState) {5 super. onCreate (savedInstanceState); 6 setContentView (R. layout. activity_quick_contact_badge_index); 7 8 // obtain the QuickContactBadge component 9 badge = (QuickContactBadge) findViewById (R. id. badge); 10 // associate the QuickContactBadge component with the contact corresponding to the specified phone number 11 badge. assignContactFromPhone ("623208", false); 12} 13}View Code

Click the picture to go to the contact page. If this number does not exist, you will be asked if you want to add a contact and go to bed. Good night.

 

Next: Group 4 UI components: AdapterView and its subclass