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月前
|
JavaScript 前端开发
如何优雅的只在当前页面中覆盖ui库中组件的样式(vue的问题)
如何优雅的只在当前页面中覆盖ui库中组件的样式(vue的问题)
18 0
如何优雅的只在当前页面中覆盖ui库中组件的样式(vue的问题)
|
1月前
|
JavaScript 前端开发 小程序
Vue 3的高颜值UI组件库
Vue 3的高颜值UI组件库
56 1
|
2月前
|
搜索推荐 BI 开发者
sap.ui.comp.smarttable.SmartTable 组件 beforeRebindTable 事件的用法
sap.ui.comp.smarttable.SmartTable 组件 beforeRebindTable 事件的用法
24 0
|
3月前
|
资源调度 JavaScript
Vue + Element-ui组件上传图片报错问题解决方案
Vue + Element-ui组件上传图片报错问题解决方案
|
14天前
|
前端开发 搜索推荐 UED
【Flutter前端技术开发专栏】Flutter中的高级UI组件应用
【4月更文挑战第30天】探索Flutter的高级UI组件,如`TabBar`、`Drawer`、`BottomSheet`,提升应用体验和美观度。使用高级组件能节省开发时间,提供内置交互逻辑和优秀视觉效果。示例代码展示了如何实现底部导航栏、侧边导航和底部弹出菜单。同时,自定义组件允许个性化设计和功能扩展,但也带来性能优化和维护挑战。参考Flutter官方文档和教程,深入学习并有效利用这些组件。
【Flutter前端技术开发专栏】Flutter中的高级UI组件应用
|
1月前
【实用】一个移动端简单的UI弹窗组件,虽算不上高大上,但至少耐看
【实用】一个移动端简单的UI弹窗组件,虽算不上高大上,但至少耐看
|
4月前
|
前端开发
element-ui组件DatePicker日期选择器移动端兼容
element-ui组件DatePicker日期选择器移动端兼容
element-ui组件DatePicker日期选择器移动端兼容
|
2月前
|
前端开发 搜索推荐 开发者
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
33 0
|
2月前
|
JavaScript 前端开发 开发者
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
18 0
|
2月前
|
前端开发 JavaScript API
SAP UI5 sap.ui.require.toUrl 的作用介绍
SAP UI5 sap.ui.require.toUrl 的作用介绍
35 0

热门文章

最新文章