图像视图展示的图片通常位于res/drawable***目录,设置图像视图的显示图片有两种方式:
(1)在XML文件中,通过属性android:src设置图片资源,属性值格式形如“@drawable/不含扩展名的图片名称”。
(2)在Java代码中,调用setImageResource方法设置图片资源,方法参数格式形如“R.drawable.不含扩展名的图片名称”。
添加了src属性的ImageView标签示例如下:
<ImageView
android:id="@+id/iv_scale"
android:layout_width="match_parent"
android:layout_height="220dp"
android:src="@drawable/apple" />
给图像视图设置图片资源的代码例子如下所示:
// 从布局文件中获取名叫iv_scale的图像视图
ImageView iv_scale = findViewById(R.id.iv_scale);
iv_scale.setImageResource(R.drawable.apple); // 设置图像视图的图片资源
ImageView本身默认图片居中显示,若要改变图片的显示方式,可通过scaleType属性设定,该属性的取值说明如下:
布局:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <ImageView android:id="@+id/iv_scale" android:layout_width="match_parent" android:layout_height="220dp" android:layout_marginTop="5dp" android:src="@drawable/apple" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <Button android:id="@+id/btn_fitCenter" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="fitCenter" android:textColor="#000000" android:textSize="14sp" /> <Button android:id="@+id/btn_centerCrop" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="centerCrop" android:textColor="#000000" android:textSize="14sp" /> <Button android:id="@+id/btn_centerInside" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="centerInside" android:textColor="#000000" android:textSize="14sp" /> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="10dp" android:orientation="horizontal"> <Button android:id="@+id/btn_center" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="center" android:textColor="#000000" android:textSize="14sp" /> <Button android:id="@+id/btn_fitXY" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="fitXY" android:textColor="#000000" android:textSize="14sp" /> <Button android:id="@+id/btn_fitStart" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="fitStart" android:textColor="#000000" android:textSize="14sp" /> <Button android:id="@+id/btn_fitEnd" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="fitEnd" android:textColor="#000000" android:textSize="14sp" /> </LinearLayout> </LinearLayout>
代码:
package com.example.myapplication; import androidx.appcompat.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android.widget.ImageView; public class NextActivity extends AppCompatActivity implements View.OnClickListener { private ImageView iv_scale; // 声明一个图像视图的对象 @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_next); // 从布局文件中获取名叫iv_scale的图像视图 iv_scale = findViewById(R.id.iv_scale); // 下面通过七个按钮,分别演示不同缩放类型的图片缩放效果 findViewById(R.id.btn_center).setOnClickListener(this); findViewById(R.id.btn_fitCenter).setOnClickListener(this); findViewById(R.id.btn_centerCrop).setOnClickListener(this); findViewById(R.id.btn_centerInside).setOnClickListener(this); findViewById(R.id.btn_fitXY).setOnClickListener(this); findViewById(R.id.btn_fitStart).setOnClickListener(this); findViewById(R.id.btn_fitEnd).setOnClickListener(this); } @Override public void onClick(View v) // 点击事件的处理方法 { iv_scale.setImageResource(R.drawable.apple); // 设置图像视图的图片资源 if (v.getId() == R.id.btn_center) { // 将缩放类型设置为“按照原尺寸居中显示” iv_scale.setScaleType(ImageView.ScaleType.CENTER); } else if (v.getId() == R.id.btn_fitCenter) { // 将缩放类型设置为“保持宽高比例,缩放图片使其位于视图中间” iv_scale.setScaleType(ImageView.ScaleType.FIT_CENTER); } else if (v.getId() == R.id.btn_centerCrop) { // 将缩放类型设置为“缩放图片使其充满视图,并位于视图中间” iv_scale.setScaleType(ImageView.ScaleType.CENTER_CROP); } else if (v.getId() == R.id.btn_centerInside) { // 将缩放类型设置为“保持宽高比例,缩小图片使之位于视图中间(只缩小不放大)” iv_scale.setScaleType(ImageView.ScaleType.CENTER_INSIDE); } else if (v.getId() == R.id.btn_fitXY) { // 将缩放类型设置为“缩放图片使其正好填满视图(图片可能被缩放变形)” iv_scale.setScaleType(ImageView.ScaleType.FIT_XY); } else if (v.getId() == R.id.btn_fitStart) { // 将缩放类型设置为“保持宽高比例,缩放图片使其位于视图上方或左侧” iv_scale.setScaleType(ImageView.ScaleType.FIT_START); } else if (v.getId() == R.id.btn_fitEnd) { // 将缩放类型设置为“保持宽高比例,缩放图片使其位于视图下方或右侧” iv_scale.setScaleType(ImageView.ScaleType.FIT_END); } } }
=================================================================================
ImageButton是显示图片的图像按钮,但它继承自ImageView,而非继承Button。
ImageButton和Button之间的区别有:
(1)Button既可显示文本也可显示图片,ImageButton只能显示图片不能显示文本。
(2)ImageButton上的图像可按比例缩放,而Button通过背景设置的图像会拉伸变形。
(3)Button只能靠背景显示一张图片,而ImageButton可分别在前景和背景显示图片,从而实现两张图片叠加的效果。
布局:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <ImageButton android:layout_width="match_parent" android:layout_height="80dp" android:src="@drawable/sqrt" android:scaleType="fitCenter" /> </LinearLayout>
在某些场合,有的字符无法由输入法打出来,或者某些文字以特殊字体展示,就适合适合先切图再放到ImageButton。
例如:开平方符号 ,等等。
ImageButton与ImageView之间的区别有:
(1)ImageButton有默认的按钮背景,ImageView默认无背景。
(2)ImageButton默认的缩放类型为center,而ImageView默认的缩放类型为fitCenter。
====================================================================================================
同时展示文本与图像的可能途径包括:
(1)利用LinearLayout对ImageView和TextView组合布局。
(2)通过按钮控件Button的drawable***属性设置文本周围的图标。
drawableTop:指定文字上方的图片。
drawableBottom:指定文字下方的图片。
drawableLeft:指定文字左边的图片。
drawableRight:指定文字右边的图片。
drawablePadding:指定图片与文字的间距。
布局:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="20dp" android:layout_gravity="center" android:drawableLeft="@drawable/ic_about" android:drawablePadding="5dp" android:text="图标在左" android:textColor="#000000" android:textSize="17sp" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="20dp" android:layout_gravity="center" android:drawableRight="@drawable/ic_about" android:drawablePadding="15dp" android:text="图标在右" android:textColor="#000000" android:textSize="17sp" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="10dp" android:layout_gravity="center" android:drawableTop="@drawable/ic_about" android:drawablePadding="5dp" android:text="图标在上" android:textColor="#000000" android:textSize="17sp" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="10dp" android:layout_gravity="center" android:drawableBottom="@drawable/ic_about" android:drawablePadding="5dp" android:text="图标在下" android:textColor="#000000" android:textSize="17sp" /> </LinearLayout>