首页 > 其他 > 详细

ImageView及其子类

时间:2015-04-06 11:25:02      阅读:278      评论:0      收藏:0      [点我收藏+]

ImageView及其子类

(1)ImageView继承自View组件,任何Drawable对象都可以用ImageView来显示,ImageView派生出来了ImageButton、ZoomButton等组件。

(2)ImageView支持的xml属性

  android:adjustViewBounds     ------->设置ImageView是否调整自己的边界来保持所显示图片的长宽比

  android:cropToPadding          -------->如果该属性设为true,该组件将会被裁剪到保留该ImageView的padding

  android:maxHeight       -------->设置ImageView的最大高度

  android:maxWidth       -------->设置ImageView的最大宽度

  android:scaleType       -------->设置所显示的图片是如何缩放或移动以适应ImageView的大小

  android:src                    -------->设置ImageView所显示的Drawable对象的ID

---------------------》android:scaleType属性的设定值有:

          matriX:使用matriX方式进行缩放

          fitXY:对图片横向、纵向独立缩放,使得该图片完全适应该ImageView,图片的纵横比可能会改变

          fitStart:保持纵横比缩放图片,直到图片能完全显示在ImageView中(图片较长的边长与ImageView相应的边长想等),缩放后将图片放在ImageView的左上角

          fitCenter:保持纵横比缩放图片,直到图片能完全显示在ImageView中(图片较长的边长与ImageView相应的边长想等),缩放后将图片放在ImageView的中央

          fitEnd:保持纵横比缩放图片,直到图片能完全显示在ImageView中(图片较长的边长与ImageView相应的边长想等),缩放后将图片放在ImageView的右下角

          center:将图片放在ImageView的中间,不进行任何的缩放

          centerCrop:保持纵横比来缩放图片,使得图片能完全覆盖ImageView,只要图片最短的边能显示出来即可

          centerInside:保持纵横比来缩放图片,使得图片能完全显示在ImageView中

------实例一:图片浏览器

(1)main.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:orientation="vertical" >
    <LinearLayout 
        android:id="@+id/test"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:gravity="center">
        
        <!-- 增大透明度 -->
        <Button
            android:id="@+id/high"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="增大透明度"/>
         <!-- 降低透明度 -->
        <Button
            android:id="@+id/low"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="降低透明度"/>
         <!--下一张 -->
        <Button
            android:id="@+id/next"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="下一张"/>
    </LinearLayout>
    
    <!-- 定义显示整体图片的ImageView -->
    <!-- android:scaleType="fitCenter" 
          图片保持纵横比缩放,直到图片能完全显示imageview中,最后将图片放在imageview的中间 -->
    <ImageView
        android:id="@+id/image1"
        android:layout_width="fill_parent"
        android:layout_height="240dp"
        android:src="@drawable/dw1"            
        android:scaleType="fitCenter" 
        />
    
    <!-- 定义显示局部图片的ImageView -->
    <ImageView
        android:id="@+id/image2"
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:background="#00f"
        android:layout_marginTop="10dp"
        />

</LinearLayout>

(2)MainActivity.java文件

package com.yby.imageview;

import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.drawable.BitmapDrawable;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.View.OnTouchListener;
import android.widget.Button;
import android.widget.ImageView;
/**
 * ImageView及其子类
 * @author yby
 *
 */
public class MainActivity extends Activity{

    /**
     * 实例:图片浏览器
     * (1)可以通过增大透明度和降低透明度来查看图片的透明度
     * (2)通过点击大图片上面的一个点,将点击触发点周围的图片截取出来显示在一个小区域中,可以查看图片的局部细节
     */
    //定义一个图片数组
    private int[] images = new int[]{
            R.drawable.dw1,
            R.drawable.dw2,
            R.drawable.dw3,
            R.drawable.dw4,
            R.drawable.dw5,
            R.drawable.dw6
        };
    //定义默认显示的图片
    int currentImg = 2;
    //定义图片的初始透明度
    private int alpha = 255;
    private Button high,low,next;
    private ImageView image1,image2;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        high = (Button) findViewById(R.id.high);
        low = (Button) findViewById(R.id.low);
        next = (Button) findViewById(R.id.next);
        image1 = (ImageView) findViewById(R.id.image1);
        image2 = (ImageView) findViewById(R.id.image2);
        //为点击next添加监听事件
        next.setOnClickListener(new OnClickListener() {
            
            @Override
            public void onClick(View v) {
                // TODO Auto-generated method stub
                //控制imageview显示下一张图片
                image1.setImageResource(images[++currentImg%images.length]);
            }
        });
        
        //定义改变图片透明度的方法
        OnClickListener listener = new OnClickListener() {
            
            @Override
            public void onClick(View v) {
                // TODO Auto-generated method stub
                if(v == high){
                    alpha +=20;
                }
                if(v == low){
                    alpha -=20;
                }
                if(alpha >= 255){
                    alpha = 255;
                }
                if(alpha <= 0){
                    alpha = 0;
                }
                //改变图片的透明度
                image1.setAlpha(alpha);
            }
        };
        //为两个按钮添加监听器
        high.setOnClickListener(listener);
        low.setOnClickListener(listener);
        
        //从第一张图片的触碰点开始截取,并将截取后的图片显示在第二个imageview中
        image1.setOnTouchListener(new OnTouchListener() {
            
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                // TODO Auto-generated method stub
                BitmapDrawable bd = (BitmapDrawable) image1.getDrawable();
                //获取第一个图片显示框的位图
                Bitmap bitmap = bd.getBitmap();
                //bitmap图片的实际大小与第一个imageview的缩放比例
                double scale = bitmap.getWidth() / 320.0;
                //获取需要显示的图片的开始点
                int x = (int) (event.getX() * scale);
                int y = (int) (event.getY() * scale);
                if(x + 120 > bitmap.getWidth()){
                    x = bitmap.getWidth() - 120;
                }
                if(y + 120 > bitmap.getHeight()){
                    y = bitmap.getHeight() - 120;
                }
                //显示图片的指定区域
                image2.setImageBitmap(Bitmap.createBitmap(bitmap,x,y,120,120));
                image2.setAlpha(alpha);
                return false;
            }
        });
    }
}

(3)效果图

  技术分享

 

ImageButton按钮和QuickContactBadge关联联系人

(1)ImageView派生出了两个子类:ImageButton图片按钮,QuickContactBadge关联联系人

(2)Button和ImageButton的区别:Button生成的按钮上显示的是文字,而ImageButton上显示的是图片,所以为ImageButton指定text属性没有作用,不会显示出来文字

(3)ImageButton派生出来了一个ZoomButton,ZoomButton可以代表放大、缩小两个按钮,android默认提供了btn_minus/btn_plus两个Drawable资源,只要为ZoomButton的src属性分别指定btn_minus/btn_plus,即可实现放大和缩小按钮。(实际上android还提供了ZoomControls组件,该组件相当于同时组合了放大和缩小的按钮,并允许分别为两个按钮绑定不同的监听器事件)

(4)QuickContactBadge可以通过android:src来指定显示的图片,该图片可以关联到手机中的联系人,当用户点击该图片时,系统会打开相应的联系人信息页面,如果没有该联系人,则会先提示是否要创建一个该联系人

 

---------实例二:ImageButton按钮和QuickContactBadge关联联系人

 (1)zoombutton.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:orientation="vertical" >
   
    <!-- 普通图片按钮 -->
    <ImageButton
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:scaleType="fitCenter"
        android:src="@drawable/switcher"
        />
    <!-- 按下时显示不同的图片 -->
    <ImageButton
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:scaleType="fitCenter"
        android:src="@drawable/btn_selector"
        />
    
    <LinearLayout 
        android:orientation="horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10sp"
        android:layout_gravity="center_horizontal">
        
        <!-- 定义两个ZoomButton,分别为btn_plus和btn_minus -->
        <ZoomButton 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/btn_plus"/>
        
        <ZoomButton 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="20dp"
            android:src="@drawable/btn_minus"/>
        
    </LinearLayout>

    <!-- 定义一个ZoomControls组件 -->
    <ZoomControls 
        android:id="@+id/zoomcontrols"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"/>
    
    <LinearLayout 
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        >
        <!-- QuickContactBadge可以关联联系人 -->
        <QuickContactBadge 
            android:id="@+id/badge"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_launcher"
            />
        <TextView 
            android:id="@+id/tv"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="我的偶像"
            android:layout_gravity="center_vertical"
            android:textSize="16sp"
            />
        
    </LinearLayout>
    
</LinearLayout>

 (2)ZoomButtonActivity.java文件

package com.yby.imageview;

import android.app.Activity;
import android.os.Bundle;
import android.widget.QuickContactBadge;
/**
 * 
 * @author yinbenyang
 *
 */
public class ZoomButtonActivity extends Activity{

    private QuickContactBadge qcb;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);
        setContentView(R.layout.zoombutton);
        //获取QuickContactBadge组件
        qcb = (QuickContactBadge) findViewById(R.id.badge);
        //将QuickContactBadge组件与特定的电话号码对应的联系人建立关联
        qcb.assignContactFromPhone("15901507777", false);
        //将QuickContactBadge组件与指定email地址的联系人建立关联
//        qcb.assignContactFromEmail("", false);
        //将QuickContactBadge组件与特定Uri地址的联系人建立关联
//        qcb.assignContactUri(Uri.parse("XXXXXXXX"));
    }
}

   (3)btn_selector.xml文件【图片按下与松开时分别显示不同的图片】 

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <!-- 指定按钮按下时的图片 -->
    <item android:drawable="@drawable/switcher" android:state_pressed="true"></item>
    <!-- 指定按钮松开时的图片 -->
    <item android:drawable="@drawable/wifi" android:state_pressed="false"></item>
</selector>

(4)效果图:

技术分享技术分享

        

ImageView及其子类

原文:http://www.cnblogs.com/yby-blogs/p/4395620.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!