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
目录
相关文章
|
4月前
|
开发者 容器
44.[HarmonyOS NEXT RelativeContainer案例一] 掌握组件锚点布局:打造灵活精准的UI定位系统
在HarmonyOS NEXT的UI开发中,精确控制组件位置是构建复杂界面的关键。RelativeContainer作为一种强大的布局容器,通过锚点系统提供了精确定位能力,使开发者能够创建出灵活且精准的UI布局。本教程将详细讲解如何使用RelativeContainer的锚点布局功能,帮助你掌握这一核心技术。
137 4
|
4月前
|
设计模式 缓存 容器
06.HarmonyOS Next UI进阶:Text组件与视觉样式完全指南
在HarmonyOS Next应用开发中,Text组件是最基础也是最常用的UI元素之一。它不仅用于显示文本内容,还可以通过丰富的样式属性实现各种视觉效果。掌握Text组件的样式设置,是构建精美UI界面的基础技能。
208 1
|
1月前
|
Linux Go iOS开发
IDA 9.2 发布:Golang 改进、新 UI 组件、类型解析等
IDA Pro 9.2 (macOS, Linux, Windows) - 强大的反汇编程序、反编译器和多功能调试器
379 0
|
3月前
|
Web App开发 前端开发 JavaScript
Element UI框架中自定义input组件的placeholder样式。
确保这些样式在你的应用程序CSS文件中定义,且该文件已正确加载到项目中。通过以上方法,可以控制Element UI组件中input的placeholder样式,使其满足特定的设计要求。这些更改都是基于CSS伪元素进行的,因此并不会对DOM结构产生改变,保持了原有结构的简洁和高效。
329 12
|
4月前
|
移动开发 开发者
仓颉开发语言入门教程:常见UI组件介绍和一些问题踩坑
仓颉开发语言即将发布一周年,虽已有知名App应用,但教程稀缺且官网文档不够完善。幽蓝君推出系列教程,从零开始系统讲解移动开发。本期介绍常用UI组件:按钮、文本、图片、输入框与搜索框的使用方法及注意事项,帮助开发者快速上手仓颉语言。
|
8月前
|
人工智能 自然语言处理 前端开发
Flame:开源AI设计图转代码模型!生成React组件,精准还原UI+动态交互效果
Flame 是一款开源的多模态 AI 模型,能够将 UI 设计图转换为高质量的现代前端代码,支持 React 等主流框架,具备动态交互、组件化开发等功能,显著提升前端开发效率。
930 1
|
7月前
|
安全 API 开发者
深入探索ArkUI中的@LocalBuilder装饰器:构建高效可维护的UI组件
在ArkUI框架中,组件化开发至关重要。@LocalBuilder作为自API version 12引入的装饰器,专注于组件内部私有构建,确保封装性与安全性。本文解析其工作原理、参数传递机制及与@Builder的区别,结合典型场景代码示例,助开发者掌握这一工具。通过状态驱动UI更新、复杂组件组合等实践,优化性能并提升代码可维护性,推动高效UI架构构建。
174 0
|
5月前
|
开发框架 前端开发 JavaScript
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发一
本文介绍了方舟开发框架(ArkUI)及其两种开发范式:基于ArkTS的声明式开发范式和类Web开发范式。ArkUI是用于构建HarmonyOS应用界面的UI框架,提供极简UI语法和基础设施。声明式开发范式使用ArkTS语言,以组件、动画和状态管理为核心,适合复杂团队协作;类Web开发范式采用HML、CSS、JavaScript三段式开发,适用于简单界面应用,贴近Web开发者习惯。文中还概述了两者的架构和基础能力,帮助开发者选择合适的范式进行高效开发。
182 15
|
5月前
|
编解码 前端开发 Java
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发三
本文介绍了基于声明式UI范式的图形绘制与动画效果实现方法,涵盖绘制图形、添加动画效果及常见组件说明三部分内容。在绘制图形部分,详细讲解了如何通过Circle组件为食物成分表添加圆形标签,以及使用Path组件结合SVG命令绘制自定义图形(如应用Logo)。动画效果部分则展示了如何利用animateTo实现闪屏动画,包括渐出、放大效果,并设置页面跳转;同时介绍了页面间共享元素转场动画的实现方式。最后,文章列举了声明式开发范式中的各类组件及其功能,帮助开发者快速上手构建复杂交互页面。
170 11
|
28天前
|
存储 开发者 容器
鸿蒙 HarmonyOS NEXT星河版APP应用开发-ArkTS面向对象及组件化UI开发使用实例
本文介绍了ArkTS语言中的Class类、泛型、接口、模块化、自定义组件及状态管理等核心概念,并结合代码示例讲解了对象属性、构造方法、继承、静态成员、访问修饰符等内容,同时涵盖了路由管理、生命周期和Stage模型等应用开发关键知识点。
173 0
鸿蒙 HarmonyOS NEXT星河版APP应用开发-ArkTS面向对象及组件化UI开发使用实例

热门文章

最新文章