本节导言:

本节介绍的UI根底控件是:ImageView(图画视图),见名知意,便是用来显现图画的一个View或许说控件! 官方API:;本节解说的内容如下:

  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> 

作用图如下:

成果剖析:

宽高都是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" />

运转作用图:

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时才是有作用的!!


4)两者结合妙用:

网上的一张图:

一看去是一个简略的GridView,每个item都是一个ImageView,可是仔细的你或许发现了, 上面的ICON都不是规矩的,而是圆形,圆角矩形等等,于是乎这儿用到了src + background了! 要完结上述的作用,你只需求两个操作: 找一张通明的png图片 + 设置一个黑色的布景 (当然你也能够设置png的通明度来完结,不过成果或许和料想的有收支哦!) 咱们写个简略比方:

如图,呆萌呆萌的小猪就这样显现到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>

运转作用图:

成果剖析: 大的那个图片是没有任何处理的图片,尺度是:541374;而下面的那个的话咱们经过maxWidth和maxHeight 约束ImageView最大宽度与高度为200px,便是最多只能显现200200的图片,咱们又设置了一个 adjustViewBounds = "true"调整咱们的鸿沟来坚持图片的长宽比,此刻的ImageView宽高为是128*200~


3.scaleType设置缩放类型

android:scaleType用于设置显现的图片怎样缩放或许移动以习惯ImageView的巨细 Java代码中能够经过imageView.setScaleType(ImageView.ScaleType.CENTER);来设置~ 可选值如下:

  • 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" />

运转作用图:


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

运转作用图:


3)fitXY

不按份额缩放图片,方针是把图片塞满整个View

示例代码:

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

运转作用图:

好吧,显着扁了=-=~


4)matrix

从ImageView的左上角开端制作原图,原图超越ImageView的部分作裁剪处理

示例代码:

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

运转作用图:


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

运转作用图:


4.最简略的制作圆形的ImageView

信任咱们对圆形或许圆角的ImageView不生疏吧,现在许多的APP都很喜爱圆形的头像是吧~

这儿就简略的写个圆形的ImageView吧,当然这仅仅一个示例,再不考虑性能与抗锯齿的状况下!!!

能够说是写来玩玩,实践项目的话能够考虑用Github上牛人写的控件,比方下面这两个:

git怎样玩前面现已教过咱们了~把项目clone下来把相关文件复制到自己的项目即可~

代码示例:

运转作用图:

完结代码:

自定义ImageView:**RoundImageView.java

package com.jay.demo.imageviewdemo;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.PaintFlagsDrawFilter;
import android.graphics.Path;
import android.graphics.Rect;
import android.graphics.Region;
import android.util.AttributeSet;
import android.widget.ImageView;

/**
 * Created by coder-pig on 2015/7/18 0018.
 */
public class RoundImageView extends ImageView {

    private Bitmap mBitmap;
    private Rect mRect = new Rect();
    private PaintFlagsDrawFilter pdf = new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG);
    private Paint mPaint = new Paint();
    private Path mPath=new Path();
    public RoundImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }


    //传入一个Bitmap目标
    public void setBitmap(Bitmap bitmap) {
        this.mBitmap = bitmap;
    }


    private void init() {
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setFlags(Paint.ANTI_ALIAS_FLAG);
        mPaint.setAntiAlias(true);// 抗锯尺
    }


    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if(mBitmap == null)
        {
            return;
        }
        mRect.set(0,0,getWidth(),getHeight());
        canvas.save();
        canvas.setDrawFilter(pdf);
        mPath.addCircle(getWidth() / 2, getWidth() / 2, getHeight() / 2, Path.Direction.CCW);
        canvas.clipPath(mPath, Region.Op.REPLACE);
        canvas.drawBitmap(mBitmap, null, mRect, mPaint);
        canvas.restore();
    }
}

布局代码:activity_main.xml:

<com.jay.demo.imageviewdemo.RoundImageView
        android:id="@+id/img_round"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_margin="5px"/>

MainActivity.java:

package com.jay.demo.imageviewdemo;

import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    private RoundImageView img_round;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        img_round = (RoundImageView) findViewById(R.id.img_round);
        Bitmap bitmap = BitmapFactory.decodeResource(getResources(),R.mipmap.meinv);
        img_round.setBitmap(bitmap);
    }
}

本节小结:

本节解说了ImageView(图画视图),内容看上许多,不过都是一些胪陈性的东西,知道即可~ 最终的自定义圆形ImageView也是,仅仅写来玩玩的,实践项目中仍是主张运用那两个第三方的自定义控件吧~