图像视图ImageView
显示文本用到了文本视图TextView，显示图像则用到图像视图ImageView，由于图像通常保存为单独的图片文件，因此需要把图片放到res/drawable目录，然后再去引用该图片的资源名称。并且ImageView本身默认图片居中显示，不管图片有多大抑或有多小，图像视图都会自动缩放图片，使之刚好够到ImageView的边界。通过属性android:scaleType定义，未定义即默认其值为fitCenter多种缩放类型如下
效果图如下 点击图中的按钮可以将苹果置于不同的位置
ImageScaleActivity类代码如下
package com.example.chapter03; import android.os.Bundle; import android.view.View; import android.widget.ImageView; import androidx.appcompat.app.AppCompatActivity; // 活动类直接实现点击监听器的接口View.OnClickListener public class ImageScaleActivity extends AppCompatActivity implements View.OnClickListener { private ImageView iv_scale; // 声明一个图像视图的对象 @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_image_scale); // 从布局文件中获取名叫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); } } }
activity_image_scaleXML代码如下
<?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>
图像按钮ImageButton
常见的按钮控制是Button，其实是文本按钮，因为按钮上面只能显示文字，不能显示图片，ImageButton才是显示图片的图像按钮。ImageButton与Button的差异如下
1：Button既可显示文本也可以显示图片，而ImageButton只能显示图片不能显示文本
2：ImageButton上的图像可按比例缩放，而Button通过背景设置的图像会拉伸变形，因为背景图采取fitXY方式，无法按比例缩放
3：Button只能靠背景显示一张图片，而ImageButton可分别在前景和背景显示图片，从而实现两张图片的叠加的效果
因此，对于某些输入法打不出来的字符，以及特殊字体显示的字符串，就适合用ImageButton ，如图中的开根号就很难打出来显示出来。
activity_image_buttonXML代码如下
<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>
ImageButtonActivity类代码如下
package com.example.chapter03; import androidx.appcompat.app.AppCompatActivity; import android.os.Bundle; public class ImageButtonActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_image_button); } }
同时展示文本与 图像
现在有了Button可在按钮上显示文字，又有ImageButton可在按钮上显示图像，通过按钮控件Button就能实现，原来Button悄悄提供了几个与图标有关的属性，通过这些属性即可指定文字旁边的图标。 有关属性如下 效果如下图
drawableTop:指定文字上方的图片
drawableBottom：指定文字下方的图片
drawableLeft 指定文字左边的图片
drawableRight 指定文字右边的图片
drawablePadding 指定图片与文字的间距
activity_image_textXML文件代码如下
<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="10dp" 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="10dp" android:layout_gravity="center" android:drawableRight="@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: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>
ImageTextActivity类代码如下
package com.example.chapter03; import android.os.Bundle; import androidx.appcompat.app.AppCompatActivity; public class ImageTextActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_image_text); } }
