UI组件-ImageView及其子类

简介: 前言时间有限,追索生命的诚意和真实,比什么都重要。ImageView组件ImageView继承自View组件,它的主要功能是用于显示任何Drawable对象。

前言

时间有限,追索生命的诚意和真实,比什么都重要。

ImageView组件

ImageView继承自View组件,它的主要功能是用于显示任何Drawable对象。
为了控制ImageView显示的图片,ImageView提供了下列方法。
  • setImageBitmap(Bitmap bm):使用Bitmap位图设置该ImageView显示的图片。
  • setImageDrawable(Drawable drawable):使用Drawable对象设置该ImageView显示的图片。
  • setImageResource(int resId):使用图片资源ID设置该ImageView显示的图片。
  • setImageURI(Uri uri):使用图片的URI设置该ImageView显示的图片。

示例代码

本例的图片浏览器不仅可以改变图片的透明度,还可以查看图片指定区域的细节。
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:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        >
        <Button
            android:id="@+id/plus"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="增大透明度"
            />
        <Button
            android:id="@+id/minus"
            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 -->
    <ImageView
        android:id="@+id/image1"
        android:layout_width="wrap_content"
        android:layout_height="360dp"
        android:src="@drawable/baxianhua"
        android:scaleType="fitCenter"
        />
    <!-- 定义显示图片局部细节的ImageView -->
    <ImageView
        android:id="@+id/image2"
        android:layout_width="240dp"
        android:layout_height="240dp"
        android:background="#00f"
        android:layout_margin="10dp"
        />
</LinearLayout>
MainActivity.java
public class MainActivity extends Activity {

    //定义一个访问图片的数组
    int []images = new int[] {
            R.drawable.baxianhua,
            R.drawable.dengta,
            R.drawable.juhua,
            R.drawable.kaola,
            R.drawable.qie,
            R.drawable.shamo,
            R.drawable.shuimo,
            R.drawable.yujinx,
    };
    //定义默认显示的图片
    int currentImg = 2;
    //定义图片的初始透明度
    private int alpha = 255;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        final Button minus = (Button) findViewById(R.id.minus);
        final Button plus = (Button) findViewById(R.id.plus);
        final Button next = (Button) findViewById(R.id.next);
        final ImageView image1 = (ImageView) findViewById(R.id.image1);
        final ImageView image2 = (ImageView) findViewById(R.id.image2);

        //定义查看下一张图片按钮的监听器
        next.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                //控制ImageView显示下一张图片
                image1.setImageResource(images[++currentImg % images.length]);
            }
        });

        //定义改变图片透明度的方法
        View.OnClickListener listener = new OnClickListener() {

            @Override
            public void onClick(View v) {
                if(v == plus)
                {
                    alpha -= 20;
                }
                if(v == minus)
                {
                    alpha += 20;
                }
                if(alpha >= 255)
                {
                    alpha = 255;
                }
                if(alpha <= 0)
                {
                    alpha = 0;
                }
                //改变图片透明度
                image1.setImageAlpha(alpha);
            }
        };
        //为两个按钮添加监听器
        plus.setOnClickListener(listener);
        minus.setOnClickListener(listener);

        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 + 240 > bitmap.getWidth())
                {
                    x = bitmap.getWidth() - 240;
                }
                if(y + 240 > bitmap.getHeight())
                {
                    y = bitmap.getHeight() - 240;
                }
                //显示图片的指定区域
                image2.setImageBitmap(bitmap.createBitmap(bitmap, x, y, 240, 240));
                image2.setImageAlpha(alpha);
                return false;
            }
        });
    }
}

效果

img_642a8542da12a926a282abe5cdfa3351.png
Screenshot_2017-10-18-16-07-20.png

提示

andriod:scaleType属性,设置所显示的图片如何缩放或移动以适应ImageView的大小。常用属性值如下。
  • matrix:使用matrix方式进行缩放。

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

  • fitStart:保持纵横比缩放图片,直到该图片能完全显示在ImageView中,缩放完成后将该图片放在ImageView的左上角。

  • fitCenter:保持纵横比缩放图片,直到该图片能完全显示在ImageView中,缩放完成后将该图片放在ImageView的中央。

  • fitEnd:保持纵横比缩放图片,直到该图片能完全显示在ImageView中,缩放完成后将该图片放在ImageView的右下角。

  • center:把图片放在ImageView的中间,但不进行任何缩放。


ImageButton组件

ImageButton与Button的区别在于,Button生成的按钮上显示文字,而ImageButton上则显示图片。ImageButton派生了一个ZoomButton,可以代表“放大”、“缩小”两个按钮。

代码示例

<?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" >
    <!-- 定义ZoomControls组件 -->
    <ZoomControls
        android:id="@+id/zoomControls1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        />
</LinearLayout>

效果

img_5a9ac90339ffcb1fe78c79fb91088611.png
Screenshot_1508379554.png

QuickContactBadge组件

QuickContactBadge继承了ImageView,因为它的本质是图片按钮,也可以通过andriod:src属性指定它显示的图片。额外增加的功能是该图片可以关联到手机中指定的联系人,当用户单击该图片时,系统将会打开相应联系人的联系方式界面。为了让QuickContactBadge与特定联系人关联,可以调用如下方法。
  • assignContactFromEmail(String emailAddapp\src\main\ress,boolean lazyLookup):将该图片关联到指定E-mail地址对应的联系人。

  • assignContactFromPhone(String phoneNumber,boolean lazyLookup):将该图片关联到指定电话号码对应的联系人。

  • assignContactUri(Uri contactUri):将该图片关联到特定Uri对应的联系人。

代码示例

contact.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">

    <QuickContactBadge
        android:id="@+id/badge"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:src="@drawable/ic_launcher"
        />
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="16dp"
        android:text="halo"
        />

</LinearLayout>

MainActivity.java
public class MainActivity extends Activity {
    QuickContactBadge badge;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.contact);

        //获取QuickContactBadge组件
        badge = (QuickContactBadge) findViewById(R.id.badge);
        //将QuickContactBadge组件与特定电话号码对应的联系人建立关联
        badge.assignContactFromPhone("010-666666", false);

    }
}

效果

img_37215a3feaec3cbfc0ac08a0db26f20d.png
Screenshot_1508380462.png
使用QuickContactBadge打开的特定联系人
img_9ea26ecb7fc2d3d38110ce95393e1918.png
Screenshot_1508380482.png
目录
相关文章
|
1月前
|
缓存 搜索推荐 索引
「Mac畅玩鸿蒙与硬件12」鸿蒙UI组件篇2 - Image组件的使用
在鸿蒙应用开发中,Image 组件用于加载和显示图片资源,并提供多种属性来控制图片的显示效果和适配方式。本篇将带你学习如何在鸿蒙应用中加载本地和远程图片、设置图片样式以及实现简单的图片轮播功能。
98 7
「Mac畅玩鸿蒙与硬件12」鸿蒙UI组件篇2 - Image组件的使用
|
23天前
|
搜索推荐 Android开发 开发者
探索安卓开发中的自定义视图:打造个性化UI组件
【10月更文挑战第39天】在安卓开发的世界中,自定义视图是实现独特界面设计的关键。本文将引导你理解自定义视图的概念、创建流程,以及如何通过它们增强应用的用户体验。我们将从基础出发,逐步深入,最终让你能够自信地设计和实现专属的UI组件。
|
18天前
|
搜索推荐 前端开发 开发者
「Mac畅玩鸿蒙与硬件19」鸿蒙UI组件篇9 - 自定义动画实现
自定义动画让开发者可以设计更加个性化和复杂的动画效果,适合表现独特的界面元素。鸿蒙提供了丰富的工具,支持通过自定义路径和时间控制来创建复杂的动画运动。本篇将带你学习如何通过自定义动画实现更多样化的效果。
68 11
「Mac畅玩鸿蒙与硬件19」鸿蒙UI组件篇9 - 自定义动画实现
|
18天前
|
UED
「Mac畅玩鸿蒙与硬件17」鸿蒙UI组件篇7 - Animation 组件基础
在应用开发中,动画效果可以增强用户体验。鸿蒙框架提供了 translate、scale 和 rotate 等动画功能,允许对组件进行平移、缩放和旋转等操作。本篇将介绍 Animation 组件的基础知识和示例代码。
70 10
「Mac畅玩鸿蒙与硬件17」鸿蒙UI组件篇7 - Animation 组件基础
|
16天前
|
前端开发 开发者
「Mac畅玩鸿蒙与硬件22」鸿蒙UI组件篇12 - Canvas 组件的动态进阶应用
在鸿蒙应用中,Canvas 组件可以实现丰富的动态效果,适合用于动画和实时更新的场景。本篇将介绍如何在 Canvas 中实现动画循环、动态进度条、旋转和缩放动画,以及性能优化策略。
41 6
「Mac畅玩鸿蒙与硬件22」鸿蒙UI组件篇12 - Canvas 组件的动态进阶应用
|
16天前
|
前端开发 开发者
「Mac畅玩鸿蒙与硬件23」鸿蒙UI组件篇13 - 自定义组件的创建与使用
自定义组件可以帮助开发者实现复用性强、逻辑清晰的界面模块。通过自定义组件,鸿蒙应用能够提高代码的可维护性,并简化复杂布局的构建。本篇将介绍如何创建自定义组件,如何向组件传递数据,以及如何在不同页面间复用这些组件。
33 5
「Mac畅玩鸿蒙与硬件23」鸿蒙UI组件篇13 - 自定义组件的创建与使用
|
19天前
|
存储 数据安全/隐私保护 开发者
「Mac畅玩鸿蒙与硬件13」鸿蒙UI组件篇3 - TextInput 组件获取用户输入
在鸿蒙应用开发中,TextInput 组件用于接收用户输入,适用于文本、密码等多种输入类型。本文详细介绍鸿蒙 TextInput 组件的使用方法,包括输入限制、样式设置、事件监听及搜索框应用,帮助你灵活处理鸿蒙应用中的用户输入。
60 7
「Mac畅玩鸿蒙与硬件13」鸿蒙UI组件篇3 - TextInput 组件获取用户输入
|
2月前
|
开发框架 JavaScript 前端开发
鸿蒙NEXT开发声明式UI是咋回事?
【10月更文挑战第15天】鸿蒙NEXT的声明式UI基于ArkTS,提供高效简洁的开发体验。ArkTS扩展了TypeScript,支持声明式UI描述、自定义组件及状态管理。ArkUI框架则提供了丰富的组件、布局计算和动画能力。开发者仅需关注数据变化,UI将自动更新,简化了开发流程。此外,其前后端分层设计与编译时优化确保了高性能运行,利于生态发展。通过组件创建、状态管理和渲染控制等方式,开发者能快速构建高质量的鸿蒙应用。
129 3
|
1月前
|
开发框架 JavaScript 前端开发
HarmonyOS UI开发:掌握ArkUI(包括Java UI和JS UI)进行界面开发
【10月更文挑战第22天】随着科技发展,操作系统呈现多元化趋势。华为推出的HarmonyOS以其全场景、多设备特性备受关注。本文介绍HarmonyOS的UI开发框架ArkUI,探讨Java UI和JS UI两种开发方式。Java UI适合复杂界面开发,性能较高;JS UI适合快速开发简单界面,跨平台性好。掌握ArkUI可高效打造符合用户需求的界面。
97 8
|
2月前
|
JavaScript API 开发者
掌握ArkTS,打造HarmonyOS应用新视界:从“Hello World”到状态管理,揭秘鸿蒙UI开发的高效秘诀
【10月更文挑战第19天】ArkTS(ArkUI TypeScript)是华为鸿蒙系统中用于开发用户界面的声明式编程语言,结合了TypeScript和HarmonyOS的UI框架。本文介绍ArkTS的基本语法,包括组件结构、模板和脚本部分,并通过“Hello World”和计数器示例展示其使用方法。
75 1