安卓应用的界面编程(4)

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

 

主要功能是显示图片，任何Drawable对象都可使用ImageView来显示。

 

1.图片浏览器

下面的图片浏览器可以改变所查看图片的透明度，可通过调用ImageView的setImageAlpha()方法实现。还可以通过一个小区域查看图片的原始大小。（两个ImageView）

下面是布局文件

 1     <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2         android:orientation="vertical"
 3         android:layout_width="match_parent"
 4         android:layout_height="match_parent">
 5         <TextView
 6             android:layout_width="match_parent"
 7             android:layout_height="wrap_content"
 8             android:layout_marginTop="120px"/>
 9         <LinearLayout
10             android:orientation="horizontal"
11             android:layout_width="match_parent"
12             android:layout_height="wrap_content"
13             android:gravity="center">
14             <Button
15                 android:layout_width="wrap_content"
16                 android:layout_height="wrap_content"
17                 android:text="增大透明度"
18                 android:id="@+id/plus"/>
19             <Button
20                 android:layout_width="wrap_content"
21                 android:layout_height="wrap_content"
22                 android:text="降低透明度"
23                 android:id="@+id/minus"/>
24             <Button
25                 android:layout_width="wrap_content"
26                 android:layout_height="wrap_content"
27                 android:text="下一张"
28                 android:id="@+id/next"/>
29         </LinearLayout>
30         <!-- 定义显示图片整体的ImageView -->
31         <!-- 指定android:scaleType="fitCenter"表明 -->
32         <!-- ImageView显示图片时会保持纵横比缩放，并将缩放后的图片放在该ImageView的中央-->
33         <ImageView
34             android:id="@+id/image1"
35             android:layout_width="wrap_content"
36             android:layout_height="280dp"
37             android:src="@drawable/five"
38             android:scaleType="fitCenter"/>
39         <!-- 定义显示图片局部细节的ImageView -->
40         <ImageView
41             android:id="@+id/image2"
42             android:layout_width="120dp"
43             android:layout_height="120dp"
44             android:background="#00f"
45             android:layout_margin="10dp"/>
46     </LinearLayout>

View Code

为了能动态改变图片的透明度，要为按钮编写事件监听器，当用户单击按钮时动态改变图片的Alpha值。

为了能动态显示图片局部细节，程序为第一个ImageView添加OnTouchListener监听器，

用户在第一个ImageView上发生触摸事件时，程序从原始图片中读取相应部分的图片并显示在第二个ImageView中

下面是java代码及运行截图，但是最后一张图片的时候点击图片会闪退。。原因不明也没有调试信息。。

 1 public class MainActivity extends AppCompatActivity {
 2 
 3     //定义一个访问图片的数组
 4     int[] images = new int[]{
 5             R.drawable.one,
 6             R.drawable.two,
 7             R.drawable.three,
 8             R.drawable.four,
 9             R.drawable.five,
10     };
11     //定义默认显示的图片
12     int currentImg = 4;
13     //定义图片的初始透明度
14     private int alpha = 255;
15     @Override
16     protected void onCreate(Bundle savedInstanceState) {
17         super.onCreate(savedInstanceState);
18         setContentView(R.layout.activity_main);
19         final Button plus=(Button)findViewById(R.id.plus);
20         final Button minus=(Button)findViewById(R.id.minus);
21         final Button next=(Button)findViewById(R.id.next);
22         final ImageView image1=(ImageView)findViewById(R.id.image1);
23         final ImageView image2=(ImageView)findViewById(R.id.image2);
24         //定义查看下一张图片的监听器
25         next.setOnClickListener(new View.OnClickListener()
26         {
27             @Override
28             public void onClick(View v)
29             {
30                 //控制ImageView显示下一张图片
31                 image1.setImageResource(images[++currentImg%images.length]);
32             }
33         });
34         //定义改变图片透明度的方法
35         View.OnClickListener listener=new View.OnClickListener()
36         {
37             @Override
38             public void onClick(View v)
39             {
40                 if(v==plus)
41                 {
42                     alpha+=20;
43                 }
44                 if(v==minus)
45                 {
46                     alpha-=20;
47                 }
48                 if(alpha>=255)
49                 {
50                     alpha=255;
51                 }
52                 if(alpha<=0)
53                 {
54                     alpha=0;
55                 }
56                 //改变图片透明度
57                 image1.setImageAlpha(alpha);
58             }
59         };
60         //为两个按钮添加监听器
61         plus.setOnClickListener(listener);
62         minus.setOnClickListener(listener);
63 
64         image1.setOnTouchListener(new View.OnTouchListener() {
65             @Override
66             public boolean onTouch(View view, MotionEvent event) {
67                 BitmapDrawable bitmapDrawable=(BitmapDrawable)image1.getDrawable();
68                 //获取第一个图片显示框中的位图
69                 Bitmap bitmap=bitmapDrawable.getBitmap();
70                 //bitmap图片实际大小与第一个ImageView的缩放比例
71                 double scale=1.0*bitmap.getHeight()/image1.getHeight();
72                 //获取需要显示的图片的开始点
73                 int x=(int)(event.getX()*scale);
74                 int y=(int)(event.getY()*scale);
75                 if(x+120>bitmap.getWidth())
76                 {
77                     x=bitmap.getWidth()-120;
78                 }
79                 if(y+120>bitmap.getHeight())
80                 {
81                     y=bitmap.getHeight()-120;
82                 }
83                 //显示图片的指定区域
84                 image2.setImageBitmap(Bitmap.createBitmap(bitmap,x,y,120,120));
85                 image2.setImageAlpha(alpha);
86                 return false;
87             }
88         });
89     }
90 }

View Code

 

2.图片按钮，比较简单，不作说明

看了一下ZoomButton,ZoomControls是放大缩小按钮

 

3.使用QuickCantactBadge关联联系人

感觉比较有趣，布局文件如下

 1 <LinearLayout
 2         xmlns:android="http://schemas.android.com/apk/res/android"
 3         android:orientation="vertical"
 4         android:layout_width="match_parent"
 5         android:layout_height="match_parent">
 6         <TextView
 7             android:layout_width="match_parent"
 8             android:layout_height="wrap_content"
 9             android:layout_marginTop="120px"/>
10         <QuickContactBadge
11             android:id="@+id/badge"
12             android:layout_width="wrap_content"
13             android:layout_height="wrap_content"
14             android:src="@drawable/one"/>
15         <TextView
16             android:layout_width="match_parent"
17             android:layout_height="wrap_content"
18             android:textSize="16dp"
19             android:text="萌重"/>
20     </LinearLayout>

View Code

java代码如下

 1 public class quickContactBadge_index extends AppCompatActivity {
 2     QuickContactBadge badge;
 3     @Override
 4     protected void onCreate(Bundle savedInstanceState) {
 5         super.onCreate(savedInstanceState);
 6         setContentView(R.layout.activity_quick_contact_badge_index);
 7 
 8         //获取QuickContactBadge组件
 9         badge=(QuickContactBadge)findViewById(R.id.badge);
10         //将QuickContactBadge组件与特定电话号码对应的联系人建立关联
11         badge.assignContactFromPhone("623208",false);
12     }
13 }

View Code

         

点击图片会谈到联系人界面，如果不存在这个号码会询问是否添加联系人，睡觉，晚安

 

下一篇：第四组UI组件：AdapterView及其子类