用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