安卓学习笔记5.3按钮、图像视图与图像按钮

我会带着你远行 2024-04-01 15:55 105阅读 0赞

目录

零、学习目标

一、按钮控件

二、图像视图

三、图像按钮

四、实现步骤

1、创建安卓应用【ZoomImageByButton】

2、将两张图片拷贝到drawable目录

3、主布局资源文件activity_main.xml

4、字符串资源文件strings.xml

5、主界面类MainActivity

6、启动应用,查看效果


零、学习目标

  1. 了解按钮常用属性并能进行事件处理
  2. 了解图像视图常用属性并能进行事件处理
  3. 了解图像按钮常用属性并能进行事件处理

一、按钮控件

  • text:文本内容
  • textSize:文本尺寸
  • textColor:文本颜色
  • onClick:单击事件(用于绑定事件处理方法)

二、图像视图

  • src:源(用于设置图片源)
  • background:背景(用于设置背景图片)
  • scaleType:缩放类型()
  • tint(蒙版)

三、图像按钮

  • src:源(用于设置图片源)
  • background:背景(用于设置背景图片)

四、实现步骤

1、创建安卓应用【ZoomImageByButton】

c519bc56b6584f75940cc28a5246e24a.png

2、将两张图片拷贝到drawable目录

05bb2ff03ba645f7bef6cdd968fcaa17.png

3、主布局资源文件activity_main.xml

18809ba33ed24b48b4dbeec680f87aea.png

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:layout_width="match_parent"
  4. android:layout_height="match_parent"
  5. android:gravity="center_horizontal"
  6. android:padding="10dp"
  7. android:orientation="vertical" >
  8. <LinearLayout
  9. android:layout_width="match_parent"
  10. android:layout_height="wrap_content"
  11. android:gravity="center" >
  12. <Button
  13. android:id="@+id/btnMinus"
  14. android:layout_width="wrap_content"
  15. android:layout_height="wrap_content"
  16. android:onClick="doMinus"
  17. android:text="@string/minus" />
  18. <Button
  19. android:id="@+id/btnPlus"
  20. android:layout_width="wrap_content"
  21. android:layout_height="wrap_content"
  22. android:onClick="doPlus"
  23. android:text="@string/plus" />
  24. <ImageButton
  25. android:id="@+id/btnExit"
  26. android:layout_width="40dp"
  27. android:layout_height="40dp"
  28. android:onClick="doExit"
  29. android:background="@drawable/exit" />
  30. </LinearLayout>
  31. <LinearLayout
  32. android:layout_width="match_parent"
  33. android:layout_height="match_parent"
  34. android:gravity="center" >
  35. <ImageView
  36. android:id="@+id/ivBear"
  37. android:layout_width="200dp"
  38. android:layout_height="300dp"
  39. android:src="@drawable/bear" />
  40. </LinearLayout>
  41. </LinearLayout>

4、字符串资源文件strings.xml

0bb36a3959d74a49b372a731354599b5.png

  1. <resources>
  2. <string name="app_name">通过按钮缩放图片</string>
  3. <string name="minus">缩小图片</string>
  4. <string name="plus">放大图片</string>
  5. </resources>

5、主界面类MainActivity

53631d43ba7a4aec96baa830c78eb9fb.png

  1. package net.hw.zoom_image;
  2. import android.os.Bundle;
  3. import android.view.View;
  4. import android.widget.ImageView;
  5. import android.widget.LinearLayout;
  6. import android.widget.Toast;
  7. import androidx.appcompat.app.AppCompatActivity;
  8. public class MainActivity extends AppCompatActivity {
  9. private ImageView ivBear; // 图像控件
  10. private double imageWidth; // 图像宽度
  11. private double imageHeight; // 图像高度
  12. private double screenWidth; // 屏幕宽度
  13. private double screenHeight; // 屏幕高度
  14. private double zoomScale = 0.95; // 缩放比例
  15. @Override
  16. protected void onCreate(Bundle savedInstanceState) {
  17. super.onCreate(savedInstanceState);
  18. // 利用布局资源文件设置用户界面
  19. setContentView(R.layout.activity_main);
  20. // 通过资源标识符获得控件实例
  21. ivBear = findViewById(R.id.ivBear);
  22. // 获得屏幕尺寸
  23. screenWidth = getWindowManager().getDefaultDisplay().getWidth();
  24. screenHeight = getWindowManager().getDefaultDisplay().getHeight();
  25. // 获得图像尺寸
  26. imageWidth = ivBear.getLayoutParams().width;
  27. imageHeight = ivBear.getLayoutParams().height;
  28. }
  29. /**
  30. * 缩小图片单击事件处理方法
  31. *
  32. * @param view
  33. */
  34. public void doMinus(View view) {
  35. // 获得图像新尺寸
  36. int newWidth = (int) (imageWidth * zoomScale);
  37. int newHeight = (int) (imageHeight * zoomScale);
  38. // 按新尺寸设置图像(不能缩小为零,否则不能再放大)
  39. if (newWidth > 50) {
  40. ivBear.setLayoutParams(new LinearLayout.LayoutParams(newWidth, newHeight));
  41. // 重新获取图像尺寸
  42. imageWidth = ivBear.getLayoutParams().width;
  43. imageHeight = ivBear.getLayoutParams().height;
  44. } else {
  45. Toast.makeText(this, "温馨提示:图片不能再缩小,要不然看不见咯!", Toast.LENGTH_LONG).show();
  46. }
  47. }
  48. /**
  49. * 放大图片单击事件处理方法
  50. *
  51. * @param view
  52. */
  53. public void doPlus(View view) {
  54. // 获得图像新尺寸
  55. int newWidth = (int) (imageWidth / zoomScale);
  56. int newHeight = (int) (imageHeight / zoomScale);
  57. // 按新尺寸设置图像(不能再放大,否则就出界了)
  58. if (ivBear.getLayoutParams().width < screenWidth) {
  59. ivBear.setLayoutParams(new LinearLayout.LayoutParams(newWidth, newHeight));
  60. // 重新获取图像尺寸
  61. imageWidth = ivBear.getLayoutParams().width;
  62. imageHeight = ivBear.getLayoutParams().height;
  63. } else {
  64. Toast.makeText(this, "温馨提示:图片不能再放大,要不然就出界咯!", Toast.LENGTH_LONG).show();
  65. }
  66. }
  67. /**
  68. * 退出应用程序
  69. *
  70. * @param view
  71. */
  72. public void doExit(View view) {
  73. finish();
  74. }
  75. }

6、启动应用,查看效果

5.3素材

发表评论

表情:
评论列表 (有 0 条评论,105人围观)

还没有评论,来说两句吧...

相关阅读