android应用界面编程（四）--ImageView及其子类

最新推荐文章于 2022-10-20 15:59:19 发布

Sinnamm

最新推荐文章于 2022-10-20 15:59:19 发布

阅读量740

点赞数

分类专栏：疯狂Android学习（一）——android界面编程文章标签： android xml ui 界面 android应用

本文链接：https://blog.csdn.net/sinnamm/article/details/51406907

版权

疯狂Android学习（一）——android界面编程专栏收录该内容

5 篇文章 0 订阅

订阅专栏

第三组UI组件：ImageView及其子类

imageView 继承了View组件，它能显示任何drawable对象，除此之外，ImageView还派生出了ImageButton、ZoomButton等组件，ImageView支持的xml属性也适用于ImageButton、ZoomButton。

一、ImageView支持的xml属性

xml属性	方法	说明
android:adjustViewBounds	setAdjustViewBounds(boolean)	设置ImageView是否调整自己的边界来保持显示图片的长宽比
android:cropToPadding	setCropToPadding(boolean)	如果属性值为true，该组件会被裁剪到保留ImageView的padding
android:maxHeight	setMaxHeight(int)	设置ImageView的最大高度
android:maxWidth	setMaxWidth(int)	设置ImageView的最大宽度
android:scaleType	setScaleType(ImageView.ScaleType)	设置所显示的图片如何缩放以使用Imageview的大小
android:src	setImageResource(int)	设置ImageView所显示的drawable对象的ID

android:scaleType属性支持的属性值有

matrix ：使用matrix方式进行缩放
fitXY ：对图片横向纵向独立缩放以适应ImageView，图片的横纵比可能会改变
fitStart：保持横向比缩放，直到图片完全显示在ImageView中，缩放完后图片显示在ImageView的左上角
fitCenter:保持横向比缩放，直到图片完全显示在ImageView中，缩放完后图片显示在ImageView的中央
fitEnd：保持横向比缩放，直到图片完全显示在ImageView中，缩放完后图片显示在ImageView的右下角
center：把图片放在ImageView中央，不进行缩放
centerCrop：保持横向比缩放，使得图片完全覆盖ImageView
centerInside：保持横向比缩放，使得ImageView完全显示该图片

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

setImageBitmap(Bitmap bm)：使用位图设置ImageView显示的图片
setImageDrawable(Drawable drawable)：使用Drawable对象设置ImageView显示的图片
setImageResource(int resld)：使用图片资源ID设置ImageView显示的图片
setImageURI(Uri uri)：使用图片的URI设置ImageView显示的图片

实例：图片浏览器

这里写图片描述
- app/src/main/res/layout/mian_layout.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:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center_horizontal">
     <Button
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:id="@+id/btn1"
       android:background="@drawable/bg_color"
       android:text="模糊"/>
     <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/btn2"
        android:background="@drawable/bg_color"
        android:text="清晰"/>
     <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/btn3"
        android:background="@drawable/bg_color"
        android:text="下一张"/>
    </LinearLayout>

        <!--保持横纵比例缩放图片，并把图片放在中间-->
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="300dp"
            android:id="@+id/img1"
            android:src="@drawable/bike"
            android:scaleType="fitCenter"/>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        android:gravity="center_horizontal">
        <ImageView
            android:layout_width="150dp"
            android:layout_height="120dp"
            android:id="@+id/img2"
            android:background="#00f"
            android:layout_margin="10dp"/>
        <TextView
            android:layout_width="150dp"
            android:layout_height="wrap_content"
            android:text="图片的alpha值为250"
            android:id="@+id/message"/>
    </LinearLayout>
</LinearLayout>

app/java/com/example/MainActivity.java

public class MainActivity extends Activity {
    //定义图片数组
    int[] images=new int[]{
            R.drawable.bike,
            R.drawable.catong,
            R.drawable.hill,
            R.drawable.house,
            R.drawable.lake
    };
    //定义默认显示的图片
    int currentImag=0;
    //定义初始透明度
    int alpha=225;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        final Button dim=(Button)findViewById(R.id.btn1);
        final Button clear=(Button)findViewById(R.id.btn2);
        final Button next =(Button)findViewById(R.id.btn3);
        final ImageView  image1=(ImageView)findViewById(R.id.img1);
        final ImageView  image2=(ImageView)findViewById(R.id.img2);
        final TextView text = (TextView) findViewById(R.id.message);
        //定义切换图片的监听
        next.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                image1.setImageResource(images[++currentImag%images.length]);
            }
        });

       //定义改变图片透明度的监听
        dim.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                alpha+=20;
                if (alpha<=225){
                    image1.setImageAlpha(alpha);
                    text.setText("此时图片的alpha值为：" + alpha);
                }
            }
        });
        clear.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                alpha-=20;
                if(alpha>=0) {
                    image1.setImageAlpha(alpha);
                    text.setText("此时图片的alpha值为：" + alpha);
                }
            }
        });
        //为image1设置监听事件，当发生触摸事件时，部分图片显示在image2中
        image1.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                BitmapDrawable bitmapDrawable=(BitmapDrawable)image1.getDrawable();
                //获取第一个图片显示框中的位图
                Bitmap bitmap=bitmapDrawable.getBitmap();
                //bitMap图片实际大小与第一个ImageView的缩放比例
                double scale=1.0*bitmap.getHeight()/image1.getHeight();
                //获取需要显示的图片的开始点
                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.getWidth()){
                    y=bitmap.getHeight()-120;
                }
                //显示图片指定的区域
                image2.setImageBitmap(Bitmap.createBitmap(bitmap,x,y,120,120));
                image2.setImageAlpha(alpha);
                return false;
            }
        });

    }
}

二、ImageButton和ZoomButton

ImageButton和Button的区别在于，Button生成的按钮显示文字，而ImageButton显示图片。ImageButton还派生出了ZoomButton，ZoomButton可以代表放大、缩小两个按钮，Android默认提供了btn_minus、btn_plus两个Drawable资源，只要为ZoomButton的android:src属性分别指定btn_minus、btn_plus，即可实现放大缩小按钮。
Android还提供了ZoomControl组件，该组件相当于同时包含了方法缩小按钮，并允许分别为他们设置监听。

实例：可变按钮

这里写图片描述

- app/src/main/res/layout/mian_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="match_parent">
<ImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/menu1"/>
    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/btn_selector"/>
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_gravity="center_horizontal"
        android:layout_margin="10sp">
        <ZoomButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@android:drawable/btn_plus"/>
        <ZoomButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@android:drawable/btn_minus"/>
    </LinearLayout>
    <ZoomControls
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right"/>
</LinearLayout>

app/src/main/res/drawable/btn_select.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true"
          android:drawable="@drawable/menu4"/>
    <item android:state_pressed="false"
          android:drawable="@drawable/menu5"/>
</selector>

三、QuickContactBadge

QuickContactBadge继承了ImageView，也可以通过设置android:src属性指定它显示的图片，该图片可以关联手机中的联系人，当用户单击该图片时，系统会打开相应联系人的联系方式界面。
为了让QuickContactBadge与特定联系人联系，android提供了一下方法：

assignContactFormEmail(String email,boolean lazyLookup)：将该图片关联到指定Email地址对应的联系人
assignContactFormPhone(String phoneNumber,boolean lazyLookup)：将该图片关联到指定电话号码对应的联系人
assignContactUri(Uri contact uri)：将该图片关联到指定Uri对应的联系人

实例：图片与联系人关联

这里写图片描述
- app/src/main/res/layout/mian_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:gravity="top"
                android:background="@color/color1">
<QuickContactBadge
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/badge"
    android:src="@drawable/contanct"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="我的偶像"
        android:textSize="16dp"/>
</LinearLayout>

app/java/com/example/MainActivity.java

public class QuickContactBadgeTest extends Activity{
    QuickContactBadge badge;

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.quickcontactbadge_test);
        badge=(QuickContactBadge)findViewById(R.id.badge);
        badge.assignContactFromPhone("17865166639",false);
    }

Sinnamm

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
android应用界面编程（四）--ImageView及其子类

第三组UI组件：ImageView及其子类imageView 继承了View组件，它能显示任何drawable对象，除此之外，ImageView还派生出了ImageButton、ZoomButton等组件，ImageView支持的xml属性也适用于ImageButton、ZoomButton。一、ImageView支持的xml属性 xml属性方法说明 android:adjustV
复制链接

扫一扫