Android学习笔记(八):ImageView加载图片与ImageButton图形按钮

目录

 一、ImageView显示图片

1、xml文件中添加图片

2、java逻辑中设置图片

二、ImageView图像的缩放 

1、matrix

2、fitXY

3、fitStart/fitCenter/fitEnd 

4、center/centerInside/centerCrop

三、ImageButton图形按钮

四、Button实现图片与文字结合的按钮

五、总结


 一、ImageView显示图片

        当我们想在应用中加载显示图片,就可以使用这个模块。首先我们需要有一张图片,并把它放到 app\src\main\res\drawable\ 文件路径下。需要注意的是:图片名称使用全小写字母。比如我的图片名是android.png。

1、xml文件中添加图片

    <ImageView
        android:id="@+id/image_android"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_marginTop="5dp"
        android:src="@drawable/android" />

        如上代码所示,在xml中,我们添加ImageView模块,设置宽高,以及与上级顶部的间距,然后通过src这个属性添加图片,android就是图片名。效果如下所示

2、java逻辑中设置图片

public class MainActivity extends AppCompatActivity {
    ImageView mImageAndroid;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initUI();
    }

    private void initUI() {
        // 注意:添加的图片名不要包含大写字母;
        mImageAndroid = findViewById(R.id.image_android);
        mImageAndroid.setImageResource(R.drawable.android);
    }
}

        如代码所示,先通过findViewById设置布局,然后利用setImageResource(R.drawable.android)加载图片对应的图片。

二、ImageView图像的缩放 

        我们可以通过scaleType属性设置图像的缩放,缩放类型有:

        我认为通过图像比较的方式能让你更容易理解每个类型的含义。代码如下,我设置了两个ImageView模块,一个高度为200dp,一个match_parent;然后设置不同的scaleType。

    <ImageView
        android:id="@+id/image_android"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_marginTop="5dp"
        android:src="@drawable/android"
        android:scaleType="matrix"/>

    <ImageView
        android:id="@+id/image_android1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="5dp"
        android:src="@drawable/android"
        android:scaleType="matrix"/>

        也可以通过java逻辑实现图片缩放,代码如下

    private void initUI() {
        // 注意:添加的图片名不要包含大写字母;
        mImageAndroid = findViewById(R.id.image_android);
        mImageAndroid.setImageResource(R.drawable.android);
        mImageAndroid.setScaleType(ImageView.ScaleType.MATRIX);
    }

1、matrix

        可以看到,matrix不会改变原图片的尺寸大小,从图片的左上部分开始,只显示ImageView视图大小的内容。

2、fitXY

        从效果来看,fitXY是将图片完整地填充在ImageView视图中,会改变图片的宽高比例。

3、fitStart/fitCenter/fitEnd 

         把这三个属性放在一起比较,会更直观。可以看到,这三种属性以及fitXY都会把图片完整地显示在视图中,只是缩放比例和位置不同。fitXY会根据视图改变图片的宽高比例填充满整个视图;fitStart/fitCenter/fitEnd这三个属性则会根据视图的宽高将图片等比例地缩放,以填充满某个方向,通俗理解就是,在图片不改变宽高比例的前提下,尽可能大的完整地显示在视图中;而后,fitStart会将图片放在视图的左上方;fitCenter会放在视图的中心位置;fitEnd会放在右下方。

4、center/centerInside/centerCrop

         center不会改变图片的大小尺寸,在视图中显示图片居中部分,裁剪掉多余部分,与matrix类似,区别就是显示的部位不同;

        从这里看,centerInside跟fitCenter效果一样,显示完整图像,不改变宽高比,占满某一方向,位置居中;区别就在于,centerInside不可以放大图片,即当图片尺寸小于视图时,就直接将图片位于中心,不进行任何缩放,如下图所示。

        centerCrop可以这样理解,将图片从很大的尺寸等比缩小到某一方向占满视图,其余部分就裁剪掉;

三、ImageButton图形按钮

        这里简单介绍一下ImageButton,它就是一个显示图片的按钮,与Button的区别就是:

1、ImageButton继承与ImageView;

2、Button可以显示图片也可以显示文本,而ImageButton只能显示图片;

3、ImageButton中的图片可以按比例缩放;

4、Button只能设置一张图片,而ImageButton可以设置前景和背景两张图片重叠的效果

    <ImageButton
        android:id="@+id/image_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/android1" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:drawableLeft="@drawable/android1"
        android:text="@string/app_name" />

四、Button实现图片与文字结合的按钮

        如上代码以及图所示,可以看到,可以通过Button实现图和文字结合的按钮;图像在文本内容的位置可以通过drawableLeft(左)/drawableRight(右)/drawableTop(上)/drawableBottom(下)等进行设置相对位置。

五、总结

        通过本章学习,我们掌握ImageView显示图片,以及将图片进行各种缩放显示,也简单了解了一下ImageButton,知道它是一个可以显示图片的按钮,了解其与Button的区别,以及通过Button实现图片与文字结合的按钮。

        对于Button和ImageButton,下一章我将利用一个小项目来加深大家对它们的理解和使用。也回顾一下之前学习的内容。

  • 22
    点赞
  • 27
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值