安卓應用的介面編程(4)，安卓介面編程

安卓應用的介面編程(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 <LinearLayout10 android:orientation="horizontal"11 android:layout_width="match_parent"12 android:layout_height="wrap_content"13 android:gravity="center">14 <Button15 android:layout_width="wrap_content"16 android:layout_height="wrap_content"17 android:text="增大透明度"18 android:id="@+id/plus"/>19 <Button20 android:layout_width="wrap_content"21 android:layout_height="wrap_content"22 android:text="降低透明度"23 android:id="@+id/minus"/>24 <Button25 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 <ImageView34 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 <ImageView41 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 @Override16 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 @Override28 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 @Override38 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 @Override66 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 <QuickContactBadge11 android:id="@+id/badge"12 android:layout_width="wrap_content"13 android:layout_height="wrap_content"14 android:src="@drawable/one"/>15 <TextView16 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及其子類