天天看點

android中使用PopupWindow實作彈出視窗菜單

結合上篇android中使用ViewPager實作圖檔拖動,我們實作了點選“幫助”按鈕的功能,這一篇則是接着上一篇,讓我們一起來完成“我的”按鈕的功能,這一功能,則是使用PopupWindow來實作彈出菜單。

老習慣,先上效果圖:

android中使用PopupWindow實作彈出視窗菜單

  圖一

android中使用PopupWindow實作彈出視窗菜單

  圖二

再上項目結構圖,如圖:

android中使用PopupWindow實作彈出視窗菜單

從項目結構圖可見,我們這裡并沒有建立新的Activity,因為“我的”按鈕和“幫助”是在一個頁面的,是以,我們隻需建立一個效果圖中的,彈出菜單的布局檔案即可,即popup_menu.xml,代碼如下:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:background="@drawable/popu_menu"
    android:paddingLeft="1dip"
    android:paddingRight="1dip"
    android:paddingTop="1dip"
    android:paddingBottom="14dip">
    <Button  
            android:id="@+id/btn_my_favorites"  
            android:layout_width="fill_parent"  
            android:layout_height="wrap_content"  
            android:gravity="center"  
            android:text="我的喜愛"  
            android:layout_weight="1"  
            
            android:textSize="15sp"  
            android:textColor="@android:color/white"
            android:background="@drawable/button4"
            android:textStyle="bold" />  
        
        <View   
            android:layout_width="fill_parent"  
            android:layout_height="0.5dip"  
            android:background="#eee" />

        <Button
            android:id="@+id/btn_my_correction"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@drawable/button4"
            android:gravity="center"
           
            android:text="我的收藏"
            android:textColor="@android:color/white"
            android:textSize="15sp"
            android:textStyle="bold" />
  
          <View   
            android:layout_width="fill_parent"  
            android:layout_height="0.5dip"  
            android:background="#eee" />
           <Button  
            android:id="@+id/btn_my_evaluation"  
            android:layout_width="fill_parent"  
            android:layout_height="wrap_content"  
            android:background="@drawable/button4"
            android:gravity="center"  
             
          
            android:layout_weight="1"  
            android:text="我的評價"  
            android:textSize="15sp"  
            android:textColor="@android:color/white"
            android:textStyle="bold" 
            android:focusable="true"/>  
 </LinearLayout>      

上面标記為綠色的代碼,即是我對彈出菜單的一些背景和按鈕的修飾,否則原始的效果很難受。

@drawable/popu_menu,popu_menu是一張圖檔,也就是彈出菜單的一張棕色的背景圖,這個我就不上傳附件了,大家随意換一張就行。

@drawable/button4,button4則是一個修飾原生button的xml檔案,放置在drawable-hdpi這個檔案夾,跟圖檔一起,代碼如下:(顔色大家就自己配置吧,也就是我這裡的android:drawable="XXXX",我就偷下懶了....)

button4.xml:

<?xml version="1.0" encoding="utf-8" ?>  
<selector xmlns:android="http://schemas.android.com/apk/res/android">  
<!-- 沒有焦點時的背景顔色 -->  
<item android:state_window_focused="false"  android:drawable="@color/buttonBg"/>  
<!-- 非觸摸模式下獲得焦點并單擊時的背景顔色 -->  
<item android:state_focused="true" android:state_pressed="true"  
android:drawable="@color/main_color" />  
<!--觸摸模式下單擊時的背景顔色  -->  
<item android:state_focused="false" android:state_pressed="true"  
android:drawable="@color/main2_color" /> 
<!--獲得焦點時的背景  顔色-->  
<item android:state_focused="true" android:drawable="@color/main2_color" />  
</selector>        

最後,圖檔和布局都準備好了之後,就是在MainActivity.java中去編寫代碼了,具體流程則是先找到這個按鈕,然後綁定事件,最後運作就可以了。代碼如下:

Mainactivity.java:

package com.test.citylist;

import android.app.Activity;
import android.app.AlertDialog;
import android.content.Context;
import android.content.DialogInterface;
import android.content.Intent;
import android.graphics.drawable.BitmapDrawable;
import android.net.Uri;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.PopupWindow;

public class MainActivity extends Activity implements OnClickListener{

	private Button btn_help,btn_menu;
	private PopupWindow popupMenu;
	
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        //注冊控件并綁定事件
        btn_help=(Button)findViewById(R.id.btn_help);//這個是上篇文章中的幫助按鈕
        btn_menu=(Button)findViewById(R.id.btn_my_menu);//這個是本篇的菜單按鈕
        btn_help.setOnClickListener(this);
        btn_menu.setOnClickListener(this);
    }
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.activity_main, menu);
        return true;
    }

	@Override
	public void onClick(View v) {
		// TODO Auto-generated method stub
		switch (v.getId()) {
		case R.id.btn_help:
			Intent intent=new Intent();
			intent.setClass(MainActivity.this, HelpActivity.class);
			startActivity(intent);
			break;
		
		case R.id.btn_my_menu:
			initPopupMenu();//調用彈出菜單
			break;
		default:
			break;
		}
	}

	
	//點選我的菜單
	private void initPopupMenu(){
		if(popupMenu==null){
			 LayoutInflater lay = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);    
	         View v = lay.inflate(R.layout.popup_menu, null);    
	         //點選我的喜愛
	         ((Button)v.findViewById(R.id.btn_my_favorites)).setOnClickListener(new OnClickListener(){
				@Override
				public void onClick(View view) {
					popupMenu.dismiss();
					Intent intent=new Intent(MainActivity.this,MainActivity.class);
					startActivity(intent);
				}
			});
	         //點選我的收藏
	         ((Button)v.findViewById(R.id.btn_my_correction)).setOnClickListener(new OnClickListener(){
	 			@Override
	 			public void onClick(View view) {
	 				popupMenu.dismiss();
	 				Intent intent=new Intent(MainActivity.this,MainActivity.class);
					startActivity(intent);
	 			}
	 		});
	         //點選我的評價
	         ((Button)v.findViewById(R.id.btn_my_evaluation)).setOnClickListener(new OnClickListener(){
	 			@Override
	 			public void onClick(View view) {
	 				popupMenu.dismiss();
	 				Intent intent=new Intent(MainActivity.this,MainActivity.class);
					startActivity(intent);
	 			}
	 		});
	
	         popupMenu = new PopupWindow(v, getApplicationContext().getResources().getDisplayMetrics().widthPixels/3,
	        		                        getApplicationContext().getResources().getDisplayMetrics().heightPixels/4 , true);
		}
         //設定整個popupwindow的樣式。    
         popupMenu.setBackgroundDrawable(new BitmapDrawable());    
         //使視窗裡面的空間顯示其相應的效果,比較點選button時背景顔色改變。    
         //如果為false點選相關的空間表面上沒有反應,但事件是可以監聽到的。    
         //listview的話就沒有了作用。    
         popupMenu.setFocusable(true);    
         popupMenu.setOutsideTouchable(true);
         popupMenu.update();   

         popupMenu.showAsDropDown(btn_menu);
	}
}
           

到這裡,運作代碼,就可以看到效果圖所示效果了,說做事要有始有終,既然我的這個頁面上的兩個按鈕的功能已經分别實作了,那麼最後一個“分享”按鈕,我也不願把它落下,那麼點選“分享”後,是什麼效果,用什麼實作,請大家關注我的下一篇文章。