PopupWindow 使用及延伸

PopupWindow

 

[功能]

PopupWindow 作為一種使用者提醒 而且其開銷也比Activity要小

 

 

[代碼 步驟]

1. 定義布局 供PopupWindow使用 如：hello.xml

 

Java代碼  

1. <?xml version=
   "1.0"
    encoding=
   "utf-8"
   ?>  
   
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     
   
3.     android:orientation="horizontal"
     
   
4.     android:layout_width="fill_parent"
     
   
5.     android:layout_height="fill_parent"
     
   
6.     android:padding="10dp"
     
   
7.     >  
8. <ImageView    
9.     android:id="@+id/image"
     
   
10.     android:layout_width="wrap_content"
       
    
11.     android:layout_height="wrap_content"
       
    
12.     android:src="@drawable/robot"
     />  
    
13. <LinearLayout   
14.     android:orientation="vertical"
      
    
15.     android:layout_width="wrap_content"
      
    
16.     android:layout_height="wrap_content"
      
    
17.     android:paddingLeft="20dip"
      
    
18.     >  
19. <TextView    
20.     android:layout_width="wrap_content"
       
    
21.     android:layout_height="wrap_content"
       
    
22.     android:text="HelloPop!"
      
    
23.     />  
24. <Button    
25.     android:id="@+id/helloButton"
      
    
26.     android:layout_width="100dip"
       
    
27.     android:layout_height="wrap_content"
       
    
28.     android:text="OK"
      
    
29.     />  
30.  </LinearLayout>  
31. </LinearLayout>  

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="horizontal"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    android:padding="10dp"    ><ImageView  android:id="@+id/image"    android:layout_width="wrap_content"     android:layout_height="wrap_content"     android:src="@drawable/robot" /><LinearLayout     android:orientation="vertical"    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:paddingLeft="20dip"    ><TextView      android:layout_width="wrap_content"     android:layout_height="wrap_content"     android:text="HelloPop!"    /><Button  android:id="@+id/helloButton"    android:layout_width="100dip"     android:layout_height="wrap_content"     android:text="OK"    /> </LinearLayout></LinearLayout>

 

 

2. 通過LayoutInflater 得到hello.xml 的 View view

Java代碼  

1. view = 
   this
   .getLayoutInflater().inflate(R.layout.hello, 
   null
   );  
   

view = this.getLayoutInflater().inflate(R.layout.hello, null);

 

3. 建立PopupWindow pop 使用上面布局檔案view

Java代碼  

1. pop = 
   new
    PopupWindow(view,
   500
   ,
   200
   );  
   

pop = new PopupWindow(view,500,200);

 

4. 彈出PopupWindow

* 定義布局檔案:main.xml 包括一個Button

Java代碼  

1. <?xml version=
   "1.0"
    encoding=
   "utf-8"
   ?>  
   
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     
   
3.     android:orientation="vertical"
     
   
4.     android:id="@+id/main"
     
   
5.     android:layout_width="fill_parent"
     
   
6.     android:layout_height="fill_parent"
     
   
7.     >  
8. <TextView    
9.     android:layout_width="fill_parent"
      
   
10.     android:layout_height="wrap_content"
       
    
11.     android:text="pop demo!"
      
    
12.     />  
13. <Button    
14.     android:id="@+id/button"
      
    
15.     android:layout_width="fill_parent"
       
    
16.     android:layout_height="wrap_content"
       
    
17.     android:text="to pop!"
      
    
18.     />  
19. </LinearLayout>  

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="vertical"    android:id="@+id/main"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    ><TextView      android:layout_width="fill_parent"     android:layout_height="wrap_content"     android:text="pop demo!"    /><Button  android:id="@+id/button"    android:layout_width="fill_parent"     android:layout_height="wrap_content"     android:text="to pop!"    /></LinearLayout>

 

 

* 彈出：有2種方式：一個是下拉方式 一個是指定位置

- 下拉：

Java代碼  

1. findViewById(R.id.button).setOnClickListener(
   new
    View.OnClickListener() {  
   
2.               
3.             public
    
   void
    onClick(View v) {  
   
4.                     // TODO Auto-generated method stub
     
   
5.                 pop.showAsDropDown(v);  
6.             }  
7.     
8.     });  

findViewById(R.id.button).setOnClickListener(new View.OnClickListener() {                        public void onClick(View v) {                    // TODO Auto-generated method stub            pop.showAsDropDown(v);            }      });

 

 

- 指定位置：

Java代碼  

1. findViewById(R.id.button).setOnClickListener(
   new
    View.OnClickListener() {  
   
2.               
3.             public
    
   void
    onClick(View v) {  
   
4.                     // TODO Auto-generated method stub
     
   
5.                 pop.showAtLocation(findViewById(R.id.main), Gravity.CENTER, 20
   , 
   20
   );  
   
6.                   
7.             }  
8.     
9.     });  

findViewById(R.id.button).setOnClickListener(new View.OnClickListener() {                        public void onClick(View v) {                    // TODO Auto-generated method stub            pop.showAtLocation(findViewById(R.id.main), Gravity.CENTER, 20, 20);                        }      });

 

 

5. 取消

Java代碼  

1. view.findViewById(R.id.helloButton).setOnClickListener(
   new
    View.OnClickListener() {  
   
2.               
3.             public
    
   void
    onClick(View v) {  
   
4.                     // TODO Auto-generated method stub
     
   
5.                 pop.dismiss();  
6.                   
7.             }  
8.     
9.     });  

view.findViewById(R.id.helloButton).setOnClickListener(new View.OnClickListener() {                        public void onClick(View v) {                    // TODO Auto-generated method stub            pop.dismiss();                        }      });

 

6. 其他問題：

* 發現很多人對PopupWindow 裡麵包含ListView後 對具體哪個item被點擊的擷取有疑問 所以就順便測試一下 發現和普通用法一樣啊 沒什麼特別之處啊 現在把用法和大家分享分享

 

寫道因為ListView是展開顯示的 會導致不美觀 所以以Spinner為例

 

 

6.1. 定義包含Spinner 的布局檔案 hello.xml

Java代碼  

1. <?xml version=
   "1.0"
    encoding=
   "utf-8"
   ?>  
   
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     
   
3.     android:orientation="vertical"
     
   
4.     android:layout_width="fill_parent"
     
   
5.     android:layout_height="fill_parent"
     
   
6.     >  
7. <LinearLayout   
8.     android:orientation="horizontal"
     
   
9.     android:layout_width="fill_parent"
     
   
10.     android:layout_height="wrap_content"
      
    
11.     >  
12. <ImageView    
13.     android:id="@+id/image"
      
    
14.     android:layout_width="wrap_content"
       
    
15.     android:layout_height="wrap_content"
       
    
16.     android:src="@drawable/robot"
     />  
    
17. <TextView    
18.     android:layout_width="wrap_content"
       
    
19.     android:layout_height="wrap_content"
       
    
20.     android:text="HelloPop!"
      
    
21.     />  
22. </LinearLayout>  
23. <Spinner   
24.         android:id="@+id/spinner"
       
    
25.         android:layout_width="wrap_content"
       
    
26.         android:layout_height="40dip"
    />  
    
27. </LinearLayout>  

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="vertical"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    ><LinearLayout     android:orientation="horizontal"    android:layout_width="fill_parent"    android:layout_height="wrap_content"    ><ImageView  android:id="@+id/image"    android:layout_width="wrap_content"     android:layout_height="wrap_content"     android:src="@drawable/robot" /><TextView      android:layout_width="wrap_content"     android:layout_height="wrap_content"     android:text="HelloPop!"    /></LinearLayout><Spinner         android:id="@+id/spinner"         android:layout_width="wrap_content"         android:layout_height="40dip"/></LinearLayout>

 

6.2. 得到Spinner的執行個體：spinner

Java代碼  

1. spinner = (Spinner)view.findViewById(R.id.spinner);  
   

spinner = (Spinner)view.findViewById(R.id.spinner);

 

6.3. 綁定Spinner與具體資料 本例以連絡人為例

Java代碼  

1. public
    
   void
    specifySpinner(){  
   
2.         Cursor c = getContentResolver().query(People.CONTENT_URI,   
3.                 null
   , 
   null
   , 
   null
   , 
   null
   );  
   
4.         SimpleCursorAdapter adapter = new
    SimpleCursorAdapter(
   this
   ,  
   
5.                 android.R.layout.simple_list_item_1,c,   
6.                 new
    String[] {People.NAME},   
   
7.                 new
    
   int
   [] {android.R.id.text1});  
   
8.         adapter.setDropDownViewResource(  
9.                 android.R.layout.simple_spinner_dropdown_item);  
10.           
11.           
12.         spinner.setAdapter(adapter);  
13.     }  

public void specifySpinner(){    Cursor c = getContentResolver().query(People.CONTENT_URI,                 null, null, null, null);        SimpleCursorAdapter adapter = new SimpleCursorAdapter(this,                android.R.layout.simple_list_item_1,c,                 new String[] {People.NAME},                 new int[] {android.R.id.text1});        adapter.setDropDownViewResource(                android.R.layout.simple_spinner_dropdown_item);                        spinner.setAdapter(adapter);    }

 

寫道別忘了連絡人存取權限：

<uses-permission android:name="android.permission.READ_CONTACTS" />

 

6.4. 具體item的擷取：

Java代碼  

1. spinner.setOnItemSelectedListener(
   new
    OnItemSelectedListener(){  
   
2.   
3.             public
    
   void
    onItemSelected(AdapterView<?> adapter,View v,  
   
4.                     int
    pos, 
   long
    id) {  
   
5.                 updateTitle(pos);  
6.             }  
7.   
8.             public
    
   void
    onNothingSelected(AdapterView<?> arg0) {  
   
9.                 // TODO Auto-generated method stub
     
   
10.                   
11.             }  
12.   
13.         });  

spinner.setOnItemSelectedListener(new OnItemSelectedListener(){            public void onItemSelected(AdapterView<?> adapter,View v,                    int pos, long id) {            updateTitle(pos);            }public void onNothingSelected(AdapterView<?> arg0) {// TODO Auto-generated method stub}        });

 

寫道updateTitle(int) 用來把位置在標題中顯示

public void updateTitle(int i){
this.setTitle("HelloPop:"+i);
}

 

 

6.5. emulator 運行：

 

 http://www.iteye.com/topic/604462