Android Studio入门之图像显示解析及实战（附源码 超详细必看）（包括图像视图、图像按钮、同时展示文本与图像）

爱被打了一巴掌 2023-09-30 16:27 37阅读 0赞

图像视图ImageView

显示文本用到了文本视图TextView，显示图像则用到图像视图ImageView，由于图像通常保存为单独的图片文件，因此需要把图片放到res/drawable目录，然后再去引用该图片的资源名称。并且ImageView本身默认图片居中显示，不管图片有多大抑或有多小，图像视图都会自动缩放图片，使之刚好够到ImageView的边界。通过属性android:scaleType定义，未定义即默认其值为fitCenter多种缩放类型如下

f6605ead3bf5490fba80b122c86850bd.png

效果图如下 点击图中的按钮可以将苹果置于不同的位置

9ca80de9a2e14ba398c9ab34d1e96319.png

dd3b7bc647dc4c3fbf60394c5cc3930c.png

134b91cc6f354718a969381147e57b6f.png

ImageScaleActivity类代码如下

  1. package com.example.chapter03;
  3. import android.os.Bundle;
  4. import android.view.View;
  5. import android.widget.ImageView;
  7. import androidx.appcompat.app.AppCompatActivity;
  9. // 活动类直接实现点击监听器的接口View.OnClickListener
  10. public class ImageScaleActivity extends AppCompatActivity implements View.OnClickListener {
  11.     private ImageView iv_scale; // 声明一个图像视图的对象
  13.     @Override
  14.     protected void onCreate(Bundle savedInstanceState) {
  15.         super.onCreate(savedInstanceState);
  16.         setContentView(R.layout.activity_image_scale);
  17.         // 从布局文件中获取名叫iv_scale的图像视图
  18.         iv_scale = findViewById(R.id.iv_scale);
  19.         // 下面通过七个按钮，分别演示不同缩放类型的图片缩放效果
  20.         findViewById(R.id.btn_center).setOnClickListener(this);
  21.         findViewById(R.id.btn_fitCenter).setOnClickListener(this);
  22.         findViewById(R.id.btn_centerCrop).setOnClickListener(this);
  23.         findViewById(R.id.btn_centerInside).setOnClickListener(this);
  24.         findViewById(R.id.btn_fitXY).setOnClickListener(this);
  25.         findViewById(R.id.btn_fitStart).setOnClickListener(this);
  26.         findViewById(R.id.btn_fitEnd).setOnClickListener(this);
  27.     }
  29.     @Override
  30.     public void onClick(View v) { // 点击事件的处理方法
  31.         iv_scale.setImageResource(R.drawable.apple); // 设置图像视图的图片资源
  32.         if (v.getId() == R.id.btn_center) {
  33.             // 将缩放类型设置为“按照原尺寸居中显示”
  34.             iv_scale.setScaleType(ImageView.ScaleType.CENTER);
  35.         } else if (v.getId() == R.id.btn_fitCenter) {
  36.             // 将缩放类型设置为“保持宽高比例，缩放图片使其位于视图中间”
  37.             iv_scale.setScaleType(ImageView.ScaleType.FIT_CENTER);
  38.         } else if (v.getId() == R.id.btn_centerCrop) {
  39.             // 将缩放类型设置为“缩放图片使其充满视图，并位于视图中间”
  40.             iv_scale.setScaleType(ImageView.ScaleType.CENTER_CROP);
  41.         } else if (v.getId() == R.id.btn_centerInside) {
  42.             // 将缩放类型设置为“保持宽高比例，缩小图片使之位于视图中间（只缩小不放大）”
  43.             iv_scale.setScaleType(ImageView.ScaleType.CENTER_INSIDE);
  44.         } else if (v.getId() == R.id.btn_fitXY) {
  45.             // 将缩放类型设置为“缩放图片使其正好填满视图（图片可能被缩放变形）”
  46.             iv_scale.setScaleType(ImageView.ScaleType.FIT_XY);
  47.         } else if (v.getId() == R.id.btn_fitStart) {
  48.             // 将缩放类型设置为“保持宽高比例，缩放图片使其位于视图上方或左侧”
  49.             iv_scale.setScaleType(ImageView.ScaleType.FIT_START);
  50.         } else if (v.getId() == R.id.btn_fitEnd) {
  51.             // 将缩放类型设置为“保持宽高比例，缩放图片使其位于视图下方或右侧”
  52.             iv_scale.setScaleType(ImageView.ScaleType.FIT_END);
  53.         }
  54.     }
  55. }

activity_image_scaleXML代码如下

  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:orientation="vertical">
  7.     <ImageView
  8.         android:id="@+id/iv_scale"
  9.         android:layout_width="match_parent"
  10.         android:layout_height="220dp"
  11.         android:layout_marginTop="5dp"
  12.         android:src="@drawable/apple" />
  14.     <LinearLayout
  15.         android:layout_width="match_parent"
  16.         android:layout_height="wrap_content"
  17.         android:orientation="horizontal">
  19.         <Button
  20.             android:id="@+id/btn_fitCenter"
  21.             android:layout_width="0dp"
  22.             android:layout_height="wrap_content"
  23.             android:layout_weight="1"
  24.             android:text="fitCenter"
  25.             android:textColor="#000000"
  26.             android:textSize="14sp" />
  28.         <Button
  29.             android:id="@+id/btn_centerCrop"
  30.             android:layout_width="0dp"
  31.             android:layout_height="wrap_content"
  32.             android:layout_weight="1"
  33.             android:text="centerCrop"
  34.             android:textColor="#000000"
  35.             android:textSize="14sp" />
  37.         <Button
  38.             android:id="@+id/btn_centerInside"
  39.             android:layout_width="0dp"
  40.             android:layout_height="wrap_content"
  41.             android:layout_weight="1"
  42.             android:text="centerInside"
  43.             android:textColor="#000000"
  44.             android:textSize="14sp" />
  46.     </LinearLayout>
  48.     <LinearLayout
  49.         android:layout_width="match_parent"
  50.         android:layout_height="wrap_content"
  51.         android:layout_marginTop="10dp"
  52.         android:orientation="horizontal">
  54.         <Button
  55.             android:id="@+id/btn_center"
  56.             android:layout_width="0dp"
  57.             android:layout_height="wrap_content"
  58.             android:layout_weight="1"
  59.             android:text="center"
  60.             android:textColor="#000000"
  61.             android:textSize="14sp" />
  63.         <Button
  64.             android:id="@+id/btn_fitXY"
  65.             android:layout_width="0dp"
  66.             android:layout_height="wrap_content"
  67.             android:layout_weight="1"
  68.             android:text="fitXY"
  69.             android:textColor="#000000"
  70.             android:textSize="14sp" />
  72.         <Button
  73.             android:id="@+id/btn_fitStart"
  74.             android:layout_width="0dp"
  75.             android:layout_height="wrap_content"
  76.             android:layout_weight="1"
  77.             android:text="fitStart"
  78.             android:textColor="#000000"
  79.             android:textSize="14sp" />
  81.         <Button
  82.             android:id="@+id/btn_fitEnd"
  83.             android:layout_width="0dp"
  84.             android:layout_height="wrap_content"
  85.             android:layout_weight="1"
  86.             android:text="fitEnd"
  87.             android:textColor="#000000"
  88.             android:textSize="14sp" />
  90.     </LinearLayout>
  92. </LinearLayout>

图像按钮ImageButton

常见的按钮控制是Button，其实是文本按钮，因为按钮上面只能显示文字，不能显示图片，ImageButton才是显示图片的图像按钮。ImageButton与Button的差异如下

1：Button既可显示文本也可以显示图片，而ImageButton只能显示图片不能显示文本

2：ImageButton上的图像可按比例缩放，而Button通过背景设置的图像会拉伸变形，因为背景图采取fitXY方式，无法按比例缩放

3：Button只能靠背景显示一张图片，而ImageButton可分别在前景和背景显示图片，从而实现两张图片的叠加的效果

因此，对于某些输入法打不出来的字符，以及特殊字体显示的字符串，就适合用ImageButton ，如图中的开根号就很难打出来显示出来。

b9029c7b0d9d45588aac3d1b07c67797.png

activity_image_buttonXML代码如下

  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2.     android:layout_width="match_parent"
  3.     android:layout_height="match_parent"
  4.     android:orientation="vertical">
  6.     <ImageButton
  7.         android:layout_width="match_parent"
  8.         android:layout_height="80dp"
  9.         android:src="@drawable/sqrt"
  10.         android:scaleType="fitCenter" />
  12. </LinearLayout>

ImageButtonActivity类代码如下

  1. package com.example.chapter03;
  3. import androidx.appcompat.app.AppCompatActivity;
  5. import android.os.Bundle;
  7. public class ImageButtonActivity extends AppCompatActivity {
  9.     @Override
  10.     protected void onCreate(Bundle savedInstanceState) {
  11.         super.onCreate(savedInstanceState);
  12.         setContentView(R.layout.activity_image_button);
  13.     }
  14. }

同时展示文本与 图像

现在有了Button可在按钮上显示文字，又有ImageButton可在按钮上显示图像，通过按钮控件Button就能实现，原来Button悄悄提供了几个与图标有关的属性，通过这些属性即可指定文字旁边的图标。 有关属性如下 效果如下图

drawableTop:指定文字上方的图片

drawableBottom：指定文字下方的图片

drawableLeft 指定文字左边的图片

drawableRight 指定文字右边的图片

drawablePadding 指定图片与文字的间距

771ca30508304aea83fec82766681a15.png

activity_image_textXML文件代码如下

  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2.     android:layout_width="match_parent"
  3.     android:layout_height="match_parent"
  4.     android:orientation="vertical">
  6.     <Button
  7.         android:layout_width="wrap_content"
  8.         android:layout_height="wrap_content"
  9.         android:layout_marginTop="10dp"
  10.         android:layout_gravity="center"
  11.         android:drawableLeft="@drawable/ic_about"
  12.         android:drawablePadding="5dp"
  13.         android:text="图标在左"
  14.         android:textColor="#000000"
  15.         android:textSize="17sp" />
  17.     <Button
  18.         android:layout_width="wrap_content"
  19.         android:layout_height="wrap_content"
  20.         android:layout_marginTop="10dp"
  21.         android:layout_gravity="center"
  22.         android:drawableRight="@drawable/ic_about"
  23.         android:drawablePadding="5dp"
  24.         android:text="图标在右"
  25.         android:textColor="#000000"
  26.         android:textSize="17sp" />
  28.     <Button
  29.         android:layout_width="wrap_content"
  30.         android:layout_height="wrap_content"
  31.         android:layout_marginTop="10dp"
  32.         android:layout_gravity="center"
  33.         android:drawableTop="@drawable/ic_about"
  34.         android:drawablePadding="5dp"
  35.         android:text="图标在上"
  36.         android:textColor="#000000"
  37.         android:textSize="17sp" />
  39.     <Button
  40.         android:layout_width="wrap_content"
  41.         android:layout_height="wrap_content"
  42.         android:layout_marginTop="10dp"
  43.         android:layout_gravity="center"
  44.         android:drawableBottom="@drawable/ic_about"
  45.         android:drawablePadding="5dp"
  46.         android:text="图标在下"
  47.         android:textColor="#000000"
  48.         android:textSize="17sp" />
  50. </LinearLayout>

ImageTextActivity类代码如下

  1. package com.example.chapter03;
  3. import android.os.Bundle;
  5. import androidx.appcompat.app.AppCompatActivity;
  7. public class ImageTextActivity extends AppCompatActivity {
  9.     @Override
  10.     protected void onCreate(Bundle savedInstanceState) {
  11.         super.onCreate(savedInstanceState);
  12.         setContentView(R.layout.activity_image_text);
  13.     }
  15. }

发表评论

表情：
评论列表 （有 0 条评论，37人围观）

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

相关阅读