安卓应用的界面编程(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>
为了能动态改变图片的透明度，要为按钮编写事件监听器，当用户单击按钮时动态改变图片的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 }
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>
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 }
点击图片会谈到联系人界面，如果不存在这个号码会询问是否添加联系人，睡觉，晚安
下一篇：第四组UI组件：AdapterView及其子类
