UI组件-ImageView及其子类

前言

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

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;
            }
        });
    }
}

效果

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>

效果

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);

    }
}

效果

Screenshot_1508380462.png
使用QuickContactBadge打开的特定联系人
Screenshot_1508380482.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,684评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,143评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,214评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,788评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,796评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,665评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,027评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,679评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,346评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,664评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,766评论 1 331
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,412评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,015评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,974评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,073评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,501评论 2 343

推荐阅读更多精彩内容

  • 临近期末,目前在进行Android课程设计,对于我这个压根不怎么学习的孩子来说,刚开始的完全是懵逼的,后来花两天时...
    站在冰箱上的姑娘阅读 23,861评论 5 41
  • 本人初学Android,最近做了一个实现安卓简单音乐播放功能的播放器,收获不少,于是便记录下来自己的思路与知识总结...
    落日柳风阅读 19,078评论 2 41
  • 写在前面 电视剧《三生三世十里桃花》早已播完,其片尾曲《凉凉》也早已被人所哼唱。艺海君早已想做此条微信,后因前期各...
    艺海君阅读 2,709评论 0 2
  • (一)所过之处 秋,已是这般的深了!我固执的敲下前面那一句。当沿海还在发布着高温警报的时候却发现山西的秋意已让人不...
    南溪蒹葭阅读 351评论 1 1