Loading...
墨滴

帅次

2021/07/14  阅读:55  主题:自定义主题1

Android基础到进阶UI ImageView 介绍+实例

ImageView

一、ImageView的继承关系

从上图可以看出 ImageView继承自View组件,它的主要功能用于显示任何Drawable对象。除此之外ImageView还派生了三个ImageButton、QuickContactBadge、ZoomButton组件。

二、ImageView支持的常用XML属性

三、ImageView.ScaleType所支持的常量

四、ImageView加载图片

为了控制ImageView显示的图片,ImageView提供了如下方法:

  • setlmageBitmap(Bitmap bm):使用Bitmap位图设置该ImageView显示的图片。
  • setlmageDrawable(Drawable drawable):使用Drawable对象设置该ImageView显示的图片。
  • setlmageResource(int resld):使用图片资源ID设置该ImageView显示的图片。
  • setlmageURI(Uri uri):使用图片的Uri设置该ImageView显示的图片。

五、实例:用ImageView做一个图片查看器

1、创建布局文件

<?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">

    <Button
        android:id="@+id/btn_next"
        android:layout_gravity="center_horizontal"
        android:layout_width="wrap_content"
        android:layout_marginTop="@dimen/dimen_20"
        android:layout_height="wrap_content"
        android:text="下一张" />

    <ImageView
        android:id="@+id/iv_show"
        android:layout_width="250dp"
        android:layout_height="250dp"
        android:layout_marginTop="@dimen/dimen_10"
        android:layout_gravity="center"
        android:scaleType="fitXY"
        android:src="@mipmap/sc1"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:orientation="horizontal"
        android:layout_marginTop="10dp"
        android:gravity="center_horizontal"
        android:layout_height="wrap_content">

        <Button
            android:id="@+id/btn_uri"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="网络图片" />


        <Button
            android:id="@+id/btn_open_photo_album"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="加载本地图片" />

    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:orientation="horizontal"
        android:layout_marginTop="@dimen/dimen_10"
        android:gravity="center_horizontal"
        android:layout_height="wrap_content">

        <ImageView
            android:id="@+id/iv_http_uri"
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:layout_gravity="center"
            android:layout_marginRight="@dimen/dimen_10"
            android:scaleType="fitXY"
            />

        <ImageView
            android:id="@+id/iv_content_uri"
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:layout_gravity="center"
            android:layout_marginLeft="@dimen/dimen_10"
            android:scaleType="fitXY"
            />

    </LinearLayout>
</LinearLayout>

2、用代码使ImageView显示图片

public class ImageLoadActivity extends ActivityBase implements View.OnClickListener {
    private Button btnUri, btnNext,btnOpenPhotoAlbum;
    private ImageView ivShow,ivHttpUri,ivContentUri;
    int[] images = new int[]{R.mipmap.sc1, R.mipmap.sc2, R.mipmap.sc3};
    private int currentImage = 0;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_imageview_load);
        initData();
    }
    private void initData() {
        ivShow = findViewById(R.id.iv_show);
        ivHttpUri = findViewById(R.id.iv_http_uri);
        ivContentUri = findViewById(R.id.iv_content_uri);
        btnUri = findViewById(R.id.btn_uri);
        btnNext = findViewById(R.id.btn_next);
        btnOpenPhotoAlbum = findViewById(R.id.btn_open_photo_album);
        btnUri.setOnClickListener(this);
        btnNext.setOnClickListener(this);
        btnOpenPhotoAlbum.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
            switch (v.getId()) {
                case R.id.btn_uri:
                    //添加权限<uses-permission android:name="android.permission.INTERNET" />
                    Uri uri = Uri.parse("https://img-blog.csdnimg.cn/20210702150442684.png");
                    //使用图片加载框架(Universal、ImageLoader、Picasso、Fresco、Glide)加载图片
                    //以Picasso为例,这里用到加载网络图片load(Uri),
                    //但是他还可以load(File)、load(String)、load(int)
                    //感兴趣的可以看看源码它是怎么实现的,这里就不说了。毕竟,本文重点是ImageView
                    Picasso.with(this).load(uri).into(ivHttpUri);
                    break;
                case R.id.btn_next:
                    ivShow.setImageBitmap(BitmapFactory.decodeResource(getResources(),
                            images[++currentImage % images.length]));
                    break;
                case R.id.btn_open_photo_album:
                    Intent intent = new Intent(Intent.ACTION_PICK, null);
                    intent.setDataAndType(MediaStore.Images.Media.EXTERNAL_CONTENT_URI, "image/*");
                    startActivityForResult(intent, 2);
                    break;
                default:
                    break;
            }
    }
    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        if (requestCode == 2) {
            // 从相册返回的数据
            Log.e(this.getClass().getName(), "Result:" + data.toString());
            if (data != null) {
                // 得到图片的全路径
                Uri uri = data.getData();
                Log.e(this.getClass().getName(), "Uri:" + uri);
                ivContentUri.setImageURI(uri);
            }
        }
    }
}

3、运行效果

六、ImageView设置图片

示例:

   <ImageView
        android:id="@+id/iv_round"
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:layout_gravity="center"
        android:background="@color/color_ff0000"
        android:src="@mipmap/sc1"/>

ImageView有两个可以设置图片的属性(src和background)

  • src:是图像内容(前景,如上蓝色猪图)。当使用src填入图片时,是按照图片大小直接填充,并不会进行拉伸;需要配合android:scaleType使用。src仅ImageView可使用。
  • background:background是填充背景的属性(如上图红色)。background就等于src+scaleType(fitXY)。background所有View都可用。

七、设置圆角、圆形

1、通过RoundedBitmapDrawable设置圆角、圆形

//设置圆形
private void roundBitmap(ImageView iv){
    Bitmap image = BitmapFactory.decodeResource(getResources(), R.mipmap.sc1);
    int cornerRadius = 0;
    //取最长边为圆角值,值越大越是圆。
    if (image.getWidth()<image.getHeight()) {
        cornerRadius = image.getHeight();
    } else {
        cornerRadius = image.getWidth();
    }
    RoundedBitmapDrawable roundedBitmapDrawable = RoundedBitmapDrawableFactory.create(getResources(), image);
    //抗锯齿
    roundedBitmapDrawable.setAntiAlias(true);
    //设置圆角半径(值小为圆角,值大为圆形)
    //如:roundImg.setCornerRadius(30)为圆角
    roundedBitmapDrawable.setCornerRadius(cornerRadius);
    iv.setImageDrawable(roundedBitmapDrawable);
}

2、使用图片加载框架进行设置,以Picasso为例

  • 2.1重写Transformation接口
public class CircleCornerForm implements Transformation {

    @Override
    public Bitmap transform(Bitmap source) {
        int widthLight = source.getWidth();
        int heightLight = source.getHeight();
        Bitmap output = Bitmap.createBitmap(source.getWidth(), source.getHeight(), Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(output);
        Paint paintColor = new Paint();
        paintColor.setFlags(Paint.ANTI_ALIAS_FLAG);
        RectF rectF = new RectF(new Rect(00, widthLight, heightLight));
        canvas.drawRoundRect(rectF, widthLight / 8, heightLight / 8, paintColor);//这里除的数越大角度越小
        Paint paintImage = new Paint();
        paintImage.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_ATOP));
        canvas.drawBitmap(source, 00, paintImage);
        source.recycle();
        return output;
    }
    //返回转换的唯一键,用于缓存目的。
    @Override
    public String key() {
        return "CircleCornerForm";
    }
}
  • 2.2使用CircleCornerForm
Uri uri = Uri.parse("https://img-blog.csdnimg.cn/20210702150442684.png");
Picasso.with(this).load(uri).transform(new CircleCornerForm()).into(ivRound);

八、Canvas: trying to use a recycled bitmap android.graphics.Bitmap@81c6fa

原理:在ImageView第一次加载图片的时候系统对Bitmap资源进行缓存,以供ImageView在下一次进行再利用。

产生原因:第一次加载图片后调用BitmapDrawable.getBitmap().recycle()方法,再次使用这个图片就会报上面错误。

九、BitmapDrawable.getBitmap().recycle()

释放资源,清理图片缓存,强制回收。 这不会同步释放像素数据;如果没有其他引用,它只是允许它被垃圾收集。位图被标记为“死”,这意味着如果调用 getPixels() 或 setPixels() 它将抛出异常,并且不会绘制任何内容。此操作无法撤消,因此只有在您确定位图没有其他用途时才应调用它。这是一个高级调用,通常不需要调用,因为当没有更多对此位图的引用时,正常的 GC 过程将释放此内存。

ImageButton

一、什么是ImageButton

ImageButton是一个图片按钮,ImageButton继承自ImageView,也就是说ImageView的所有XML属性和方法ImageButton都可以用,就不再重复了。

二、通过实例了解ImageButton

1、创建布局文件

<?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:gravity="center"
    android:orientation="vertical">

    <ImageButton
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_gravity="center"
        android:scaleType="fitXY"
        android:src="@mipmap/ibtn_bg1"/>

    <ImageButton
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_gravity="center"
        android:adjustViewBounds="true"
        android:scaleType="fitXY"
        android:src="@drawable/bg_ibtn_selector_bg"/>

</LinearLayout>

2、运行效果如下:

  • 第一个ImageButton:android:src="@mipmap/ibtn_bg1"指定了一张静态图片,无论用户怎么点击,ImageButton总显示这张静态图片。
  • 第二个ImageButton:android:src="@drawable/bg_ibtn_selector_bg",这个drawable里面设置了两张图片,可以确保用户点击时切换图片。

drawable/bg_ibtn_selector_bg如下:

<?xml version ="1.0" encoding ="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!--未点击显示图片-->
    <item android:state_pressed="false"
        android:drawable="@mipmap/ibtn_bg2"/>

    <!--点击显示图片-->
    <item android:state_pressed="true"
        android:drawable="@mipmap/ibtn_bg1"/>

</selector>

三、ImageButton灰色边框的产生原因和解决方案

看上面图,功能实现了,但是图片周围有灰色边框,是真的丑。

产生原因:ImageButton默认就是有边框的。或者可以说会预留出一部分背景。这样用户点击的时候,背景就会有颜色变化(从浅灰变深灰可参考上图)。

解决方案:

  • 1、android:background="@null"
  • 2、android:background="@mipmap/ibtn_bg1",直接将图片设置为背景。
  • 3、android:background="#00000000",边框透明。#000000为黑色,前面加00是设置透明度。

对上面的xml文件进行修改:

<?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:gravity="center"
    android:orientation="vertical">

    <ImageButton
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_gravity="center"
        android:background="@mipmap/ibtn_bg1"/>

    <ImageButton
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_marginTop="@dimen/dimen_10"
        android:layout_gravity="center"
        android:scaleType="fitXY"
        android:background="#00000000"
        android:src="@drawable/bg_ibtn_selector_bg"/>

</LinearLayout>

运行效果如下:

ZoomButton被废弃,这里就不做描述了。

QuickContactBadge

一、什么是QuickContactBadge

QuickContactBadge继承自ImageView,因此它的本质也是图片按钮,也可以通过android:src属性指定它的显示图片。QuickContactBadge额外增加的功能是:该图片可以关联到手机中指定联系人,当用户单击该图片时,系统将会打开相应联系人的联系方式界面。

二、QuickContactBadge的调用方法

为了让 QuickContactBadge与特定联系人关联,可以调用如下方法。

  • assignContactFromEmail(String emailAddapplsrclmainlress, boolean lazyLookup):将该图片关联到指定E-mail 地址对应的联系人。
  • assignContactFromPhone(String phoneNumber, boolean lazyLookup):将该图片关联到指定电话号码对应的联系人。
  • assignContactUri(Uri contactUri):将该图片关联到特定Uri对应的联系人。

三、通过实例了解QuickContactBadge

1、创建布局文件

<?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:gravity="center"
    android:orientation="vertical">

    <QuickContactBadge
        android:id="@+id/qcb_email"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_gravity="center"
        android:background="@null"
        android:src="@mipmap/ibtn_bg1"/>

    <QuickContactBadge
        android:id="@+id/qcb_phone"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_marginTop="@dimen/dimen_10"
        android:layout_gravity="center"
        android:scaleType="fitXY"
        android:background="@null"
        android:src="@drawable/bg_ibtn_selector_bg"/>

</LinearLayout>

2、让QuickContactBadge与特定联系人建立联系

        //关联控件
        qcbEmail = findViewById(R.id.qcb_email);
        qcbPhone = findViewById(R.id.qcb_phone);
        //联系人中必须有你填写的对应联系人
        //将该图片关联到指定E-mail地址对应的联系人。
        qcbEmail.assignContactFromEmail("shuaici@qq.com",false);
        //将该图片关联到指定电话号码对应的联系人。
        qcbPhone.assignContactFromPhone("021-20210714",false);

3、运行效果

看到这里ImageView及其子类的内容基本写完了,希望能对你有所帮助,么么哒。哈哈

帅次

2021/07/14  阅读:55  主题:自定义主题1

作者介绍

帅次

公众号:帅次