1. 程式人生 > >用PopupWindow實現下拉選單

用PopupWindow實現下拉選單

首先附上效果圖


首先寫好佈局檔案,一共四個分別為:activity_main.xml 主介面佈局,header.xml 裡面其實也就一個選單Button  待會要放到主佈局中,list.xml放置lisetView的佈局檔案,list_item.xml  ListView的每個Item的佈局樣式,Ok佈局介紹完了,附上程式碼

activity_main.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:orientation="vertical">

    <include layout="@layout/header"/>
    
   
    
</LinearLayout>

header.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <Button
        android:id="@+id/id_bt1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:text="選單"
        android:textSize="20dp" />

</RelativeLayout>

list.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="100dp"
    android:layout_height="wrap_content"
    android:orientation="vertical" 
    android:background="#7B7B7B">
    
   <ListView
       android:id="@+id/id_lv"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:divider="#FFFFFF"
       android:dividerHeight="1px"/>

   
    
</LinearLayout>

list_item.xml 
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="40dp"
    android:orientation="vertical" 
    android:gravity="center_vertical">
    
    <TextView
        android:id="@+id/id_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="18dp"
        android:layout_marginLeft="20dp"
        android:textColor="#FFFFFF"/>
    

</LinearLayout>


佈局完成進入第二步,設計我們的ListView,這裡我們使用自定義的Adater,MyAdaper程式碼如下,如果不會懂自定義Adapter的童鞋去找找這方面資料。。。

public class MyAdapter extends BaseAdapter {
	Context mContext;
	List<String> mDatas;
	LayoutInflater mInflater;
	
	public MyAdapter(Context context,List<String> datas){
		mContext=context;
		mDatas=datas;
		mInflater=LayoutInflater.from(mContext);
	}

	@Override
	public int getCount() {
		return mDatas.size();
	}

	@Override
	public Object getItem(int position) {
		return mDatas.get(position);
	}

	@Override
	public long getItemId(int position) {
		return position;
	}
	
	private class viewHolder{
		TextView text;
	}

	@Override
	public View getView(int position, View convertView, ViewGroup parent) {
		viewHolder holder;
		if (convertView==null) {
			convertView=mInflater.inflate(R.layout.list_item, parent, false);
			holder=new viewHolder();
			holder.text=(TextView) convertView.findViewById(R.id.id_tv);
			convertView.setTag(holder);
		}else {
			holder=(viewHolder) convertView.getTag();
		}
		holder.text.setText(mDatas.get(position));
		return convertView;
	}

}

好了Adapter有了,我們就可以到MianActivity中去實現我們ListView並把ListView和Popupwindow相關聯,程式碼如下

ublic class MainActivity extends Activity implements OnClickListener {

	ListView mListView;
	Button mButton;
	PopupWindow mPopupWindow;
	MyAdapter mAdapter;
	List<String> mDatas=new ArrayList<String>();
	View mview;
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
		initView();//初始化view
		initDatas();//新增資料來源
		
		mButton.setOnClickListener(this);
		
		LayoutInflater mInflater=LayoutInflater.from(this);
		mview=mInflater.inflate(R.layout.list, null);
		initPopupWindow();//該方法中新建了Popupwindow物件,並設定了PopupWindow的一些屬性,詳情請往下看
		
		mListView=(ListView) mview.findViewById(R.id.id_lv);
		mAdapter=new MyAdapter(this, mDatas);
		mListView.setAdapter(mAdapter);
		
		
		//給ListView中的每個Item新增點選事件
		mListView.setOnItemClickListener(new OnItemClickListener() {

			@Override
			public void onItemClick(AdapterView<?> parent, View view,int position, long id) {
				Toast.makeText(MainActivity.this, mDatas.get(position), Toast.LENGTH_SHORT).show();
				mPopupWindow.dismiss();//隱藏下拉列表
			}
			
		});
		
	}
	
	private void initView() {
		mButton=(Button) findViewById(R.id.id_bt1);
	}

	@Override
	public void onClick(View v) {
		//若下拉別列表的顯示超出了螢幕邊界,會自動的調整偏移量,使其顯示在螢幕內
		mPopupWindow.showAsDropDown(v,0,5);
	}
	
	public void initDatas(){
		mDatas.add("北京");
		mDatas.add("上海");
		mDatas.add("廣州");
		mDatas.add("深圳");
		mDatas.add("杭州");
		
	}
	
	public void initPopupWindow(){
		//mview表示PopupWindow顯現的內容,其餘兩個引數為下拉列表的寬和高
		mPopupWindow=new PopupWindow(mview,250,LayoutParams.WRAP_CONTENT);
		//使得mPopupWindow在點選螢幕以外的地方是會隱藏
		mPopupWindow.setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
		//使得PopupWindow是可以點選的
		mPopupWindow.setFocusable(true);
        mPopupWindow.setOutsideTouchable(true);
        mPopupWindow.update();
	}
	
	
}


相關推薦

PopupWindow實現選單

首先附上效果圖 首先寫好佈局檔案,一共四個分別為:activity_main.xml 主介面佈局,header.xml 裡面其實也就一個選單Button  待會要放到主佈局中,list.xml放置lisetView的佈局檔案,list_item.xml  ListVie

CSS實現選單功能(過於冗餘,此方法不建議)

<style> .dropdown{ position:relative; display:inline-block; } .dropbtn{ background-color:#4CAF50; color:white; padding:16

JS實現選單的聯動

需求:用JS實現一個下拉選單,要求在選中“地區”選單中相應的地區時,自動在“國家”選單中 出現相應的國家。 <!DOCTYPE html> <html> <head&g

bootstrap做選單,並使用jQuery實現從伺服器載入選單的item。

用bootstrap做下拉選單,並使用jQuery實現從伺服器非同步載入下拉選單的item。 前臺程式碼: <div class="form-group">

h5,css實現列表

gin clas isp pla mar ack 實現 寬高 doc <!DOCTYPE html><html><head><meta charset="utf-8"><style> ul li{ list-st

實現選單多選框效果

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <li>工作意願地: <%-- <c:forEach items="${list}" var="lis

css實現選單

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> ul{ list-style: none

純CSS、原生JS、jQuery實現選單功能

一、純CSS實現 實現下拉選單需要用display,即改變display的block或none值。 先構建基本的HTML框架, <div id="nav"> <ul> <li><a href="#">

學習“javaScript+CSS+DIV實現選單實現表格變色”內容的筆記

實現下拉選單 <!DOCTYPE html> <html>   <head>     <title>下拉選單示例</title>     <script language="javaScript">  

bootstrap實現選單需要的連結引入

我理解的bootstrap框架就是定義了一些常用HTML元素的樣式,把bootstrap包匯入到HTML後,不必自己定義樣式,可以直接引用定義好的樣式。      我理解bootstrap框架就是定義了一些常用HTML元素的樣式,把bootstrap包匯入到HTML後,不必自

微信小程式實現選單

點選對應上面的tab選中 <view class='nav-wrapper'> <view class='nav-container'> <view class="scroll_box"> <scroll-view cla

js實現選單提交表單後停留在選中option

<!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html

css實現選單以及箭頭旋轉效果

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>下拉選單動畫製作</title><style>*{margin:0;pa

Android使用控制元件Spinner實現選單列表

實現效果如下: 1.實現程式碼 package com.example.testspanner; import java.util.ArrayList; import java.util.Li

純CSS實現選單導航

        前言:本題是網易雲課堂的前端微專業《頁面製作》課程的作業題,當時對題意理解錯誤沒有實現題目要求,成了心中永遠的痛,所謂念念不忘必有迴響,在學校圖書館花了幾個小時做出來並對相關知識點進行了總結,寫了這篇博文。好,進入正題。 ----------------

詳解Bootstrap中JS外掛實現選單效果

在編寫網站過程中,導航條中下拉選單功能十分常見。那麼,今天就分享一下關於如何通過Bootstrap中JS外掛來實現下拉選單功能。 在官方文件中是這麼形容下拉選單外掛的 翻譯過來就是: 通過此外掛您可以為幾乎所有東西新增下拉選單

IOS使用UItableView實現選單元件(UITableView的使用方法)

一. 基礎版本 在登陸介面有時需要儲存已經登陸的賬號資訊,可以點開一個下拉選單選擇儲存的賬號,這裡是用UIKit的表格元件編寫一個下拉選單元件demo,實現思路如下: 1.首先在一個UIViewController裡放一個按鈕或者標籤框,用來顯示當

js實現選單

效果:平時在網頁上經常會看到導航欄在滑鼠經過時,字型顏色和背景會改變,然後會顯示下拉選單。 原理:js實現在滑鼠經過時,改變字型的顏色和背景,然後下拉選單顯示。一般情況下,下拉選單處於隱藏的狀態。

JQ實現選單

js: <script type="text/javascript"> $(function() { var _this1 = null; $('.nav>li').hover(function() { _this1 = $(this);

十一、select2實現選單

html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <s