天天看點
傳回

ImageView控件設定及特性集合示範

目前ImageView控件僅支援png,jpg,gif,bmp這四種格式的圖檔顯示。

分兩個部份記錄:

      一。代碼設定ImageView圖檔

      二。集中展示ImageView控件各屬性顯示效果的例子

一。代碼設定ImageView圖檔：

方法一:直接從res中取出圖檔

ImageView imgView = (ImageView)findViewById(R.id.ImageView01);

imgView.setImageResource(R.drawable.img00);

方法二:利用BitmapFactory得到位圖，并顯示

BitmapFactory 有好幾個方法生成圖檔，包括InputStream 或從Web伺服器讀取後生成圖檔.

做一些特效什麼的，主要就依賴于這個。

a. 從res中取

imgView.setImageBitmap(BitmapFactory.decodeResource(

this.getResources(),R.drawable.img01));

b. 從網上取圖檔

URL picUrl = new URL("http://www.google.com.hk/images/xxxxxx.jpg");

Bitmap pngBM = BitmapFactory.decodeStream(picUrl.openStream()); 

imageView.setImageBitmap(pngBM);

c.把res轉成流，再轉為BitmapDrawable進行設定

Resources res = getResources();

Bitmap bmp=BitmapFactory.decodeResource(res, R.drawable.img02);

BitmapDrawable bmpDraw=new BitmapDrawable(bmp);

ImageView imgView = (ImageView)findViewById(R.id.ImageView02);

imgView.setImageDrawable(bmpDraw);

BitmapFactory的作用是從不同的資源,包括檔案,流,和位元組數組中建立一個Bitmap對象.

decodeByteArray()用于從一個位元組數組轉成一個bitmap圖檔。函數原型如下:

public static Bitmap decodeByteArray (byte[] data, int offset, int length, BitmapFactory.Options opts)

// In addtion,the BitmapFactory has several methods of creating a Bitmap,including from a byte

// array and an InputStream. You could use the InputStream method to read an image 

// from a web server,create the Bitmap image,and then set the ImageView from there.

方法三:從指定目錄上取圖檔

imgView.setImageDrawable(

Drawable.createFromPath("/mnt/sdcard/img01.jpg"));

方法四: 用Uri方式從指定目錄上取圖檔

imgView.setImageURI(Uri.parse("file://mnt/sdcard/img01.jpg"));

還有一個注意的小細節是:

setImageResource(id) 能依據裝置分辨率自動把圖檔進行大小縮放适配

setImageBitmap(BitmapFactory.decodeResource(res,id)) 不能自動适配,隻能寫代碼需要手工調。

二。集中展示ImageView控件各屬性顯示效果的例子

ImageView控件設定及特性集合示範

         可在這個例子中，單擊不同選項展示出相應的效果。

布局檔案:

<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="center" 
    android:columnCount="3"
    android:orientation="horizontal" >
	
    <!-- 顯示風格 -->
	<RadioGroup android:id="@+id/rBtnGrp" 
			android:orientation="vertical" 		
			android:layout_row="0"
	        android:layout_column="0"        	 
	        android:layout_rowSpan="3" >        
		<RadioButton android:id="@+id/RBtnfitXY" android:text="fitXY" />
		<RadioButton android:id="@+id/RBtnfitStart"	 android:text="fitStart"/>
		<RadioButton android:id="@+id/RBtnfitCenter" android:text="fitCenter"/>	
		<RadioButton android:id="@+id/RBtnfitEnd" android:text="fitEnd"	/>		
		<RadioButton android:id="@+id/RBtncenter" android:text="center"
		  			 android:checked="true"/>			
		<RadioButton android:id="@+id/RBtncenterCrop" android:text="centerCrop"	/>	
		<RadioButton android:id="@+id/RBtncenterInside" android:text="centerInside"	/>	
	</RadioGroup>
	
     <TextView android:id="@+id/styleID"
         	android:text="center"                   
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"				        
            android:layout_row="0"
        	android:layout_column="1"
        	android:layout_columnSpan="2"
        />           	  
    	<ImageView android:id="@+id/xcldemo"
	        android:background="#FFE4C4"         
	       	android:layout_column="1"
	       	android:layout_columnSpan="2"
	        android:layout_gravity="fill"	
		    android:scaleType="center"
		    android:src="@drawable/emoji_112"/>	
     	<TextView android:id="@+id/styleDesc"
         	android:text="原圖大小顯示,超過外部大小時,\n隻顯示中間部份"                   
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"				        
       		android:layout_row="1"
       	 	android:layout_rowSpan="2"
       	 	android:layout_columnSpan="2"
        />  
   
      <!--  渲染 Tint -->
      <TextView android:id="@+id/styleTint"
          	android:layout_column="0"
       		android:layout_columnSpan="4"  
         	android:text="Tint:将圖檔渲染成指定的顔色" />     
      <ImageView
       	android:layout_column="0"
       	android:layout_columnSpan="1"     
	    android:background="@android:color/white" 	 
	    android:src="@drawable/emoji_112"/>        
       <TextView 
          	android:layout_column="1"    
         	android:text="前面是原圖,後面是渲染\n成指定的黃色後的效果。" />         
       <ImageView 
	        android:layout_column="2"
	        android:layout_columnSpan="1"     
		    android:background="@android:color/white" 
		    android:tint="#ffff00" 
		    android:src="@drawable/emoji_112"/>
       
       <!--  定制大小不失真-->     	       
       <TextView android:id="@+id/styleNormal"
             android:layout_column="0"
      		 android:layout_columnSpan="4"  
        	 android:text="定制大小不失真:\n
						1 設定setAdjustViewBounds為true;\n
						2 設定maxWidth,MaxHeight;\n
						3 layout_width和layout_height為wrap_content;" />
         <ImageView 
	    	android:layout_rowSpan="1"
	     	android:layout_column="1"
	     	android:layout_columnSpan="1"      
	        android:adjustViewBounds="true"
	        android:maxWidth="136dip"
			android:maxHeight="136dip"
			android:layout_width="wrap_content"
	        android:layout_height="wrap_content"	
			android:background="#FFE4C4" 		
	    	android:src="@drawable/emoji_112"/>
</GridLayout>

代碼部份：

package com.xcl.imageviewdemo;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.MultiAutoCompleteTextView;
import android.widget.RadioGroup;
import android.widget.TextView;

public class MainActivity extends Activity {
	
	TextView sid ;
	TextView sdesc;
	ImageView ivdemo;
	TextView ScaleType;
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
			
		this.setTitle("ImageView Demo");
		
		sid = (TextView)findViewById(R.id.styleID);
		sdesc = (TextView)findViewById(R.id.styleDesc);
		ivdemo = (ImageView)findViewById(R.id.xcldemo);
		
		RadioGroup radGrp = (RadioGroup)findViewById(R.id.rBtnGrp);		
		radGrp.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
			
			@Override
			public void onCheckedChanged(RadioGroup arg0, int arg1) {
				// TODO Auto-generated method stub
				switch(arg1){
				case -1:
					break;
				case R.id.RBtnfitXY:
					sid.setText("fitXY");
					sdesc.setText("不按比例拉伸圖檔,\n直接拉伸原圖直到與外部相同");	
					ivdemo.setScaleType(ImageView.ScaleType.FIT_XY);
					break;
				case R.id.RBtnfitStart:
					sid.setText("fitStart");
					sdesc.setText("按比例拉伸圖檔,\n并靠左顯示，高度與外部相同");		
					ivdemo.setScaleType(ImageView.ScaleType.FIT_START);
					break;
				case R.id.RBtnfitCenter:
					sid.setText("fitCenter");
					sdesc.setText("按比例拉伸圖檔,并居中顯示\n，高度與外部相同");	
					ivdemo.setScaleType(ImageView.ScaleType.FIT_CENTER);
					break;
				case R.id.RBtnfitEnd:
					sid.setText("fitEnd");
					sdesc.setText("按比例拉伸圖檔,并靠右顯示,\n高度與外部相同");	
					ivdemo.setScaleType(ImageView.ScaleType.FIT_END);
					break;
				case R.id.RBtncenter:
					sid.setText("center");
					sdesc.setText("原圖大小顯示,超過外部大小時,\n隻顯示中間部份");															
					ivdemo.setScaleType(ImageView.ScaleType.CENTER);
					break;
				case R.id.RBtncenterCrop:
					sid.setText("fitEnd");
					sdesc.setText("按比例擴大圖檔的size\n居中顯示,使得圖檔長 (寬)\n等于或大于View的長(寬)");	
					ivdemo.setScaleType(ImageView.ScaleType.CENTER_CROP);
					break;
				case R.id.RBtncenterInside:
					sid.setText("center");
					sdesc.setText("将圖檔的内容完整居\n中顯示,通過按比例縮小或\n原來的size使得\n圖檔長/寬等于\n或小于View的長/寬");															
					ivdemo.setScaleType(ImageView.ScaleType.CENTER_INSIDE);
					break;	
					
				default:
					break;		
				}
			}
		});

	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}

}
ImageView控件設定及特性集合示範

官網位址： http://developer.android.com/reference/android/widget/ImageView.html

MAIL: [email protected]

BLOG:http://blog.csdn.net/xcl168

android imageview scaleType
上一篇: docker desktop url protocl 技術以及使用
下一篇: Android中ImageView的縮放（scaleType）類型

繼續閱讀