Android中PopupWindow的基本使用

PopupWindow在界面彈出一窗口,效果相信大家常常看到,不廢話,下面代碼,有簡單的先來。

分三種使用方式:

1.直接相對某個控件彈出


實現代碼:

佈局:popu_bg.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="100dp"
    android:layout_height="wrap_content"
    android:background="@drawable/aa" >
    <LinearLayout
        android:id="@+id/show"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        android:orientation="vertical" >
        <TextView
            android:id="@+id/menu_start_chart"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="item1"
            android:textColor="@android:color/white"
            android:textSize="15sp" />
        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="#999999" />
        <TextView
            android:id="@+id/menu_scan"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="item2"
            android:textColor="@android:color/white"
            android:textSize="15sp" />

        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="#999999" />

        <TextView
            android:id="@+id/menu_scan"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="item3"
            android:textColor="@android:color/white"
            android:textSize="15sp" />
    </LinearLayout>

</LinearLayout>
java代碼

btn2=(Button)findViewById(R.id.btn2);
		btn2.setOnClickListener(new OnClickListener() {
			@Override
			public void onClick(View v) {
				showPopuwindown(v);
			}
		});
protected void showPopuwindown(View v) {
		// TODO Auto-generated method stub
		if(popupWindow==null){
			infate=LayoutInflater.from(MainActivity.this);
			view=infate.inflate(R.layout.popu_bg,null);
			//創建PopupWindow構造函數,同時必須設置寬高參數,否則不顯示
			popupWindow = new PopupWindow(view, LayoutParams.WRAP_CONTENT,
					LayoutParams.WRAP_CONTENT);
			//初始化PopupWindow的View
			popupWindow.setContentView(view);
		}
		//setFocusable設置PopupWindow的焦點
		//如果PopupWindow中有Editor的話,focusable要爲true
		popupWindow.setFocusable(true);
		popupWindow.setOutsideTouchable(true);
		//想要讓點擊PopupWindow之外的地方PopupWindow消失你需要
		//調用setBackgroundDrawable(new BitmapDrawable());
		popupWindow.setBackgroundDrawable(new BitmapDrawable());
		//在btn2下面顯示
		popupWindow.showAsDropDown(btn2);
		popupWindow.update();
	}

2.在彈出的PopupWindow裏添加listview進行滑動效果


此效果點擊按鈕是彈出Popuwindow,內嵌一個listview,可以進行滑動,像微信右上角+一樣,點擊其中的item,Popuwindow消失,執行相應發操作,在這裏一個toast提示。

佈局代碼:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="100dp"
    android:layout_height="140dp"
    android:background="@drawable/aa" >
    <ListView
        android:id="@+id/listview_bg"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:divider="@android:color/white"
        android:dividerHeight="1dp"
         >
    </ListView>
</LinearLayout>
item就不寫了,會上傳源碼的。

protected void showPopuwindownListview(View v) {
		// TODO Auto-generated method stub
		if(popupWindow1==null){
			LayoutInflater infate1=(LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
			listView=infate1.inflate(R.layout.listview_popu_bg,null);
			lv=(ListView)listView.findViewById(R.id.listview_bg);
			adapter=new MyAdater(MainActivity.this, getData());
			lv.setAdapter(adapter);
			popupWindow1 = new PopupWindow(listView);
			popupWindow1.setWidth(LayoutParams.WRAP_CONTENT);           
			popupWindow1.setHeight(LayoutParams.WRAP_CONTENT);
			
			popupWindow1.setContentView(listView);
		}
		popupWindow1.setFocusable(true);
		popupWindow1.setOutsideTouchable(true);
		popupWindow1.setBackgroundDrawable(new BitmapDrawable());
		popupWindow1.showAsDropDown(btn3);
		popupWindow1.update();
		lv.setOnItemClickListener(new OnItemClickListener() {

			@Override
			public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
				// TODO Auto-generated method stub
				Toast.makeText(MainActivity.this, adapter.getItem(position), Toast.LENGTH_SHORT).show();
				popupWindow1.dismiss();
			}
		});
	}
	
	 private List<String> getData(){
         
		  List<String> data = new ArrayList<String>();
         data.add("測試數據1");
         data.add("測試數據2");
         data.add("測試數據3");
         data.add("測試數據4");
         data.add("測試數據5");
         data.add("測試數據6");
         return data;
     }
class MyAdater extends BaseAdapter{
	List<String> list=new ArrayList<String>();
	public Context context;
	private LayoutInflater infate;
	public MyAdater(Context context,List<String> list) {
		// TODO Auto-generated constructor stub
		this.context=context;
		this.list=list;
		infate=LayoutInflater.from(context);
	}

	@Override
	public int getCount() {
		// TODO Auto-generated method stub
		return list.size();
	}

	@Override
	public String getItem(int position) {
		// TODO Auto-generated method stub
		return list.get(position);
	}

	@Override
	public long getItemId(int position) {
		// TODO Auto-generated method stub
		return 0;
	}

	@Override
	public View getView(int position, View convertView, ViewGroup parent) {
		// TODO Auto-generated method stub
		ViewHold hold=null;
		if(convertView==null){
			hold=new ViewHold();
			convertView = infate.inflate(R.layout.item,null);
			hold.tv=(TextView)convertView.findViewById(R.id.tv_name);
			convertView.setTag(hold);
		}
		hold=(ViewHold) convertView.getTag();
		hold.tv.setText(list.get(position));
		return convertView;
	}
	class ViewHold{
		ImageView iv;
		TextView tv;

	}
}

3.在listview的點擊每個item,在相應的item處彈出PopupWindow


QQ消息有這效果,長按消息列表中的每條信息,就會在此條消息上方彈出-置頂|刪除

佈局就是和2一樣,listview+item,然後就是PopupWindow的佈局

list_tip_menu.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
   >
    <LinearLayout
        android:id="@+id/w"
        android:layout_width="180dp"
        android:layout_height="60dp"
        android:gravity="center"
        android:orientation="vertical"
        android:background="#6d6d6d" >

        <TextView
            android:id="@+id/tip_show"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:gravity="center"
            android:paddingLeft="5dp"
            android:paddingRight="5dp"
            android:text="測試數據w"
            android:textColor="@android:color/holo_orange_light"
            android:textSize="18sp" />
    </LinearLayout>

</LinearLayout>
protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_popuwindow);
		
		lv=(ListView)findViewById(R.id.listview);
		adapter=new MyAdater(this, getData());
		lv.setAdapter(adapter);
		lv.setOnItemLongClickListener(new OnItemLongClickListener() {
			@Override
			public boolean onItemLongClick(AdapterView<?> parent, View view, int position, long id) {
				// TODO Auto-generated method stub
				if(popupWindow==null){
					infate=PopuwindowActivity.this.getLayoutInflater();
					tipView =infate.inflate(R.layout.list_tip_menu, null);
					tv=(TextView)tipView.findViewById(R.id.tip_show);
					//PopupWindow(View contentView, int width, int height)
					//contentView爲要顯示的view,
					//width和height爲寬和高,值爲像素值,也可以是MATCHT_PARENT和WRAP_CONTENT
					popupWindow=new PopupWindow(tipView, 200, 60);
				}
				
				tv.setText(adapter.getItem(position));
				
				popupWindow.setFocusable(true);
				popupWindow.setOutsideTouchable(true);
				popupWindow.setBackgroundDrawable(new BitmapDrawable());

				//相對view下方的位置,可以設置負值向相反方向移動,默認左上角爲(0,0)
//				popupWindow.showAsDropDown(view, view.getWidth()/2,0-(3*view.getHeight())/2 );
				 int[] location = new int[2];  
				 view.getLocationOnScreen(location); 
				 //在點擊的item上方中間 view爲item,根據view,popuWindown計算的他們的寬長,從而確定位置
				  popupWindow.showAtLocation(view, Gravity.NO_GRAVITY, 
						 location[0]+view.getWidth()/2-popupWindow.getWidth()/2,
						 location[1]-popupWindow.getHeight()); 
				//左方
//				 popupWindow.showAtLocation(view, Gravity.NO_GRAVITY, location[0]-popupWindow.getWidth(), location[1]);

				  //右邊
				  //popupWindow.showAtLocation(view, Gravity.NO_GRAVITY, location[0]+v.getWidth(), location[1]);
				popupWindow.update();
				return true;
			}
		});
	}

	private List<String> getData() {
		// TODO Auto-generated method stub
		  List<String> datas = new ArrayList<String>();
		for (int i = 0; i < 100; i++) {
			datas.add("test數據"+i);
		}
		return datas;
	}
涉及知識總結:

1> LayoutInflater 實例的三種方式
    1.LayoutInflater inflater = getLayoutInflater();  //調用Activity的getLayoutInflater()
    2.LayoutInflater localinflater =(LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    3. LayoutInflater inflater = LayoutInflater.from(context); 

 /**
     * Obtains the LayoutInflater from the given context.
     */
    public static LayoutInflater from(Context context) {
        LayoutInflater LayoutInflater =
                (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        if (LayoutInflater == null) {
            throw new AssertionError("LayoutInflater not found.");
        }
        return LayoutInflater;
    }



Activity 的 getLayoutInflater() 方法是調用 PhoneWindow 的getLayoutInflater()方法,源碼:

public PhoneWindow(Context context) {         
		   super(context);         
		   mLayoutInflater = LayoutInflater.from(context); 

		 }

所以最終本質都是調用的是 (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

2>popupWindow = new PopupWindow(view, LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT);
          這裏的WRAP_CONTENT也可以換成MATCH_PARENT,或是具體數值,它指的是popuwindow的大小,也就是contentview的大小,注意popupwindow根據這個大小顯示你的View,如果你的View本身是從xml得到的,那麼xml的第一層view的大小屬性將被忽略。所以這相當於popupWindow的width和height屬性直接和第一層View相對應。

要設置具體數值,得額外在添加一層,如上佈局LinearLayout中又加了LinearLayout進行寬高屬性設置。

4.在3情況下,改下代碼,在adapter中設置監聽,添加一些方法:

在adapter中:

	@Override
	public View getView(int position, View convertView, ViewGroup parent) {
		// TODO Auto-generated method stub
		ViewHold hold=null;
		if(convertView==null){
			hold=new ViewHold();
			convertView = infate.inflate(R.layout.item,null);
			hold.tv=(TextView)convertView.findViewById(R.id.tv_name);
			convertView.setTag(hold);
		}
		hold=(ViewHold) convertView.getTag();
		hold.tv.setText(list.get(position));
		final String content = list.get(position);
		hold.tv.setOnLongClickListener(new OnLongClickListener() {
			@Override
			public boolean onLongClick(View v) {
				// TODO Auto-generated method stub
				if(onPressLongItemClik!=null){
					onPressLongItemClik.longPress(v,content);
					return true;
				}
				return false;
			}
		});
		return convertView;
	}
	public void setOnPressLongItemClik(OnPressLongItemClik onPressLongItemClik){
		this.onPressLongItemClik=onPressLongItemClik;
	}
	interface OnPressLongItemClik{
		void longPress(View view,String conttent);
	}
使用類中:實現接口OnPressLongItemClik,設置監聽,重寫抽象方法longPress(View view,String content)即可

public class PopuwindowActivity1 extends Activity implements OnPressLongItemClik {

	private Button btn11;
	private ListView lv;
	private MyAdater1 adapter;
	private LayoutInflater infate;
	private View tipView;
	private PopupWindow popupWindow;
	private TextView tv;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_popuwindow);
		
		lv=(ListView)findViewById(R.id.listview);
		adapter=new MyAdater1(this, getData());
		//設置監聽
		adapter.setOnPressLongItemClik(this);
		lv.setAdapter(adapter);
	}
	//實現接口
	@Override
	public void longPress(View view,String content) {
		// TODO Auto-generated method stub
		if(popupWindow==null){
			infate=PopuwindowActivity1.this.getLayoutInflater();
			tipView =infate.inflate(R.layout.list_tip_menu, null);
			tv=(TextView)tipView.findViewById(R.id.tip_show);
			//PopupWindow(View contentView, int width, int height)
			//contentView爲要顯示的view,
			//width和height爲寬和高,值爲像素值,也可以是MATCHT_PARENT和WRAP_CONTENT
			popupWindow=new PopupWindow(tipView, 200, 60);
		}
		
		tv.setText(content);
		
		popupWindow.setFocusable(true);
		popupWindow.setOutsideTouchable(true);
		popupWindow.setBackgroundDrawable(new BitmapDrawable());

		//相對view下方的位置,可以設置負值向相反方向移動,默認左上角爲(0,0)
//		popupWindow.showAsDropDown(view, view.getWidth()/2,0-(3*view.getHeight())/2 );
		 int[] location = new int[2];  
		 view.getLocationOnScreen(location); 
		 //在點擊的item上方中間 view爲item,根據view,popuWindown計算的他們的寬長,從而確定位置
		  popupWindow.showAtLocation(view, Gravity.NO_GRAVITY, 
				 location[0]+view.getWidth()/2-popupWindow.getWidth()/2,
				 location[1]-popupWindow.getHeight()); 
		//左方
//		 popupWindow.showAtLocation(view, Gravity.NO_GRAVITY, location[0]-popupWindow.getWidth(), location[1]);

		  //右邊
		  //popupWindow.showAtLocation(view, Gravity.NO_GRAVITY, location[0]+v.getWidth(), location[1]);
		popupWindow.update();
	}
	private List<String> getData() {
		// TODO Auto-generated method stub
		  List<String> datas = new ArrayList<String>();
		for (int i = 0; i < 100; i++) {
			datas.add("test數據"+i);
		}
		return datas;
	}

源碼下載


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章