基础复习——图像视图ImageView——图像按钮ImageButton——同时展示文本与图像...

绝地灬酷狼 2023-09-28 17:40 62阅读 0赞

8e65a2ffa12faffbef848b45efabc7a7.png

图像视图展示的图片通常位于res/drawable***目录，设置图像视图的显示图片有两种方式：

(1)在XML文件中，通过属性android:src设置图片资源，属性值格式形如“@drawable/不含扩展名的图片名称”。

(2)在Java代码中，调用setImageResource方法设置图片资源，方法参数格式形如“R.drawable.不含扩展名的图片名称”。

28ade21b9b94b96cfbb780b4bf7f98f6.png

添加了src属性的ImageView标签示例如下：

给图像视图设置图片资源的代码例子如下所示：

// 从布局文件中获取名叫iv_scale的图像视图

ImageView iv_scale = findViewById(R.id.iv_scale); iv_scale.setImageResource(R.drawable.apple); // 设置图像视图的图片资源

f46c06dff69caff8057371a8f02e12b9.png

ImageView本身默认图片居中显示，若要改变图片的显示方式，可通过scaleType属性设定，该属性的取值说明如下：

c39ba3639c30c780cd2e0ed0249741b7.png

1db02ed868603f49b478d57b8eb23a92.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: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>

a80729258c4a0a2252a6d21699f9afca.png

6c5532d7e1c3e4565e34c4f0c03f264c.png

代码：

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

cbfb62f8d0d188d06cc4f32b73ce0b24.png

4e8c9550498546ef28333a0eec0d8deb.png

=================================================================================

0d8edfce8b237939659fa7bb5bcc3f6d.png

ImageButton是显示图片的图像按钮，但它继承自ImageView，而非继承Button。

ImageButton和Button之间的区别有：

(1)Button既可显示文本也可显示图片，ImageButton只能显示图片不能显示文本。

(2)ImageButton上的图像可按比例缩放，而Button通过背景设置的图像会拉伸变形。

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

布局：

  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>

d2bff183797f405410417cd40857e0c9.png

a8f8eb5acde0783251955d86001d7ba0.png

在某些场合，有的字符无法由输入法打出来，或者某些文字以特殊字体展示，就适合适合先切图再放到ImageButton。

例如：开平方符号　

39e5e679d7d21d8a44017ebe4e16f439.png，等等。

ImageButton与ImageView之间的区别有：

(1)ImageButton有默认的按钮背景，ImageView默认无背景。

(2)ImageButton默认的缩放类型为center，而ImageView默认的缩放类型为fitCenter。

====================================================================================================

947226ec046fb5d0528b778572f49ecb.png

同时展示文本与图像的可能途径包括：

(1)利用LinearLayout对ImageView和TextView组合布局。

(2)通过按钮控件Button的drawable***属性设置文本周围的图标。

drawableTop：指定文字上方的图片。

drawableBottom：指定文字下方的图片。

drawableLeft：指定文字左边的图片。

drawableRight：指定文字右边的图片。

drawablePadding：指定图片与文字的间距。

12e9003fd5ef97ca871f3148f003bc7a.png

布局：

  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="20dp"
  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="20dp"
  21.         android:layout_gravity="center"
  22.         android:drawableRight="@drawable/ic_about"
  23.         android:drawablePadding="15dp"
  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>

733473136512267e16cbc19cc1315a32.png

666f64114ed9ee5848c24cc756972655.png

发表评论

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

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

相关阅读