Android学习笔记-ImageView(图像视图)

 

本节引言:

本节介绍的UI基础控件是:ImageView(图像视图),见名知意,正是用来展现图像的2个View或然说控件!
官方API:ImageView;本节讲解的始末如下:

  1. ImageView的src属性和blackground的区别;
  2. adjustViewBounds设置图像缩放时是不是按长度宽度比
  3. scaleType设置缩放类型
  4. 最简便的绘图圆形的ImageView

1.src属性和background属性的界别:

在API文档中大家发现ImageView有五个能够安装图片的天性,分别是:src和background

常识:

①background通常指的都是背景,而src指的是内容!!

②当使用src填入图片时,是依据图片大小一直填充,并不会议及展览开拉伸

而利用background填入图片,则是会依照ImageView给定的增加率来拓展拉伸

1)写代码验证不一致:

写个简易的布局测试下:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    xmlns:tools="http://schemas.android.com/tools"  
    android:id="@+id/LinearLayout1"  
    android:layout_width="match_parent"  
    android:layout_height="match_parent"  
    android:orientation="vertical"  
    tools:context="com.jay.example.imageviewdemo.MainActivity" >  

    <ImageView  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:background="@drawable/pen" />  

    <ImageView  
        android:layout_width="200dp"  
        android:layout_height="wrap_content"  
        android:background="@drawable/pen" />  

    <ImageView  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:src="@drawable/pen" />  

    <ImageView  
        android:layout_width="200dp"  
        android:layout_height="wrap_content"  
        android:src="@drawable/pen" />  

</LinearLayout> 

效用图如下:

Java 1

结果分析:

宽高都是wrap_content那就同样,是原图大小,不过,当我们永恒了宽只怕高的话,
差距就通晓了,blackground完全填充了整个ImageView,而src依然是那么大,
而且他居中了哦,那就事关到了ImageView的另叁天性质scaleType了!
此外还有某个,那里大家说了只设置width或许height哦!参预我们还要设置了
width和height的话,blackground依旧填充,不过,src的分寸也许产生改变啊!
比如,大家测试下上面那段代码:

<ImageView  
        android:layout_width="100dp"  
        android:layout_height="50dp"  
        android:src="@drawable/pen" />

运作效果图:

Java 2

PS:scaleType下边会讲~


2)消除blackground拉伸导致图片变形的办法

在前头的功力图中的第②个Imageview中我们能够看到图片已经被拉伸变形了,
长方形变成了长方形,对于和自个儿一样有微小性障碍的人的话,显明是不可承受的,
有没有方法去设置呢?答案自然是一对,作者一时半刻知道的有以下三种办法:

  • 以此适用于动态加载ImageView的,代码也慢慢,只要在添加View的时候,把大小写死就能够了

    LinearLayout.LayoutParams layoutParam = new LinearLayout.LayoutParams(48, 48);

        layout.addView(ibtnPen, layoutParam); 
    
  • 而外动态加载view,越来越多的时候,大家仍然会经过xml布局的点子引入ImageView的
    化解方法也不难,便是通过drawable的Bitmap财富文件来成功,然后blackground属性设置为该文件即可!
    那么些xml文件在drawable文件夹下成立,那些文件夹是要协调成立的哦!!

pen_bg.xml:

<bitmap  
    xmlns:android="http://schemas.android.com/apk/res/android"  
    android:id="@id/pen_bg"  
    android:gravity="top"  
    android:src="@drawable/pen"  
    android:tileMode="disabled" >  
</bitmap>

上述代码并简单驾驭,估计我们最迷惑的是titleMode属性吧,那些性子是平铺,正是我们windows设置
背景时候的平铺,三个小图标铺满全部荧屏捏!记得了呢!不记得本人能够试行!disabled就是把他给禁止了!

哪怕地点那串简单的代码,至于调用方法如下:

动态: ibtnPen.setBacklgroundResource(R.drawable.penbg);

静态: android:background = “@drawable/penbg”


3)设置反射率的难题

说完前边七个差别,接着再说下setAlpha属性咯!那个一点也不细略,那天个性,惟有src时才是有效益的!!


Java,4)两者结合妙用:

网上的一张图:

Java 3

一看去是贰个粗略的GridView,每一种item都以1个ImageView,可是仔细的你也许发现了,
下面的ICON都不是平整的,而是圆形,圆角矩形等等,于是乎那里运用了src +
background了! 要促成上述的效果,你只须求多个操作: 找一张透明的png图片
+
设置三个雪白的背景
 (当然你也得以安装png的光滑度来落到实处,可是结果只怕和预期的有出入哦!)
我们写个简单例子:

Java 4

如图,呆萌呆萌的小猪就那样展现到ImageView上了,哈哈,blackground设置了水泥灰背景!

落到实处代码:

<ImageView  
    android:layout_width="150dp"  
    android:layout_height="wrap_content"  
    android:src="@drawable/pig"  
    android:background="#6699FF" /> 

PS:
当然你也得以用selctor完毕点击效果,设置分裂的状态设置不相同的图样,以贯彻点击大概触摸功效!


5)Java代码中设置blackground和src属性:

前景(对应src属性):setImageDrawable( );
背景(对应background属性):setBackgroundDrawable( );


2.adjustViewBounds设置缩放是还是不是保存原图长度宽度比

ImageView为我们提供了adjustViewBounds属性,用于安装缩放时是或不是维持原图长度宽度比!
单独设置不起成效,供给格外maxWidthmaxHeight质量一起行使!而背后那三个属性
也是内需adjustViewBounds为true才会生效的~

  • android:maxHeight:设置ImageView的最大惊人
  • android:maxWidth:设置ImageView的最小幅面

代码示例:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <!-- 正常的图片 -->
    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5px"
        android:src="@mipmap/meinv" />
    <!-- 限制了最大宽度与高度,并且设置了调整边界来保持所显示图像的长宽比-->
    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5px"
        android:adjustViewBounds="true"
        android:maxHeight="200px"
        android:maxWidth="200px"
        android:src="@mipmap/meinv" />

</LinearLayout>

运转作效果果图:

Java 5

结果分析: 大的那一个图片是绝非其余处理的图形,尺寸是:541*374;而上面包车型大巴不得了的话大家由此maxWidth和maxHeight

范围ImageView最大开间与中度为200px,正是最多只可以呈现200*200的图形,大家又设置了3个 **adjustViewBounds

“true”*调整大家的境界来保证图片的长宽比,此时的ImageView宽高为是128\200~


3.scaleType安装缩放类型

android:scaleType用于安装显示的图片怎样缩放或然移动以适应ImageView的大大小小
Java代码中得以通过imageView.setScaleType(ImageView.ScaleType.CENTEEnclave);来安装~
可选值如下:

  • fitXY:对图像的横向与纵向进行单独缩放,使得该图片完全适应ImageView,不过图片的横纵比大概会产生改变
  • fitStart:保持纵横比缩放图片,知道较长的边与Image的编制程序相等,缩放实现后将图片放在ImageView的左上角
  • fitCenter:同上,缩放后放于中间;
  • fitEnd:同上,缩放后放于右下角;
  • center:保持原图的轻重缓急,展现在ImageView的为主。当原图的size大于ImageView的size,超越部分裁剪处理。
  • centerCrop:保持横纵比缩放图片,知道完全覆盖ImageView,也许会油然则生图片的显得不完全
  • centerInside:保持横纵比缩放图片,直到ImageView能够完全地出示图片
  • matrix:暗中同意值,不更改原图的轻重,从ImageView的左上角开头绘制原图,
    原图超过ImageView的一部分作裁剪处理

接下去我们一组组的来比较:


1)1.fitEnd,fitStart,fitCenter

此处以fitEnd为例,其余四个八九不离十:

演示代码:

<!-- 保持图片的横纵比缩放,知道该图片能够显示在ImageView组件上,并将缩放好的图片显示在imageView的右下角 -->
    <ImageView
        android:id="@+id/imageView3"
        android:layout_width="300px"
        android:layout_height="300px"
        android:layout_margin="5px"
        android:scaleType="fitEnd"
        android:src="@mipmap/meinv" />

运行效果图:

Java 6


2)centerCrop与centerInside

  • centerCrop:按横纵比缩放,直接完全覆盖全体ImageView
  • centerInside:按横纵比缩放,使得ImageView能够统统体现这些图形

演示代码:

<ImageView
        android:layout_width="300px"
        android:layout_height="300px"
        android:layout_margin="5px"
        android:scaleType="centerCrop"
        android:src="@mipmap/meinv" />

    <ImageView
        android:layout_width="300px"
        android:layout_height="300px"
        android:layout_margin="5px"
        android:scaleType="centerInside"
        android:src="@mipmap/meinv" />

运转效果图:

Java 7


3)fitXY

不按百分比缩放图片,目的是把图片塞满整个View

演示代码:

<ImageView
        android:layout_width="300px"
        android:layout_height="300px"
        android:layout_margin="5px"
        android:scaleType="fixXY"
        android:src="@mipmap/meinv" />

运营效果图:

Java 8

好啊,显著扁了=-=~


4)matrix

从ImageView的左上角开端绘制原图,原图超过ImageView的有的作裁剪处理

演示代码:

<ImageView
        android:layout_width="300px"
        android:layout_height="300px"
        android:layout_margin="5px"
        android:scaleType="matrix"
        android:src="@mipmap/meinv" />

运维效果图:

Java 9


5)center

保持原图的分寸,展现在ImageView的中坚。当原图的size大于ImageView的size,超过部分裁剪处理。

演示代码:

<ImageView
        android:layout_width="300px"
        android:layout_height="300px"
        android:layout_margin="5px"
        android:scaleType="center"
        android:src="@mipmap/meinv" />

运维效果图:

Java 10


4.绘制圆形的ImageView

信任大家对圆形也许圆角的ImageView不素不相识吧,今后司空眼惯的APP都很喜爱圆形的头像是啊~

实则项目标话能够考虑用Github上牛人写的控件,比如上边那五个:

RoundedImageView

CircleImageView

 

小说参考自:http://www.runoob.com/w3cnote/android-tutorial-imageview.html

相关文章