Android下拉菜单效果

一、效果图

二、主要技术点:

  1.PopupWindow的使用

  2.ListView的使用

三、示例代码

  1.布局文件:activity_main.xml

<RelativeLayout 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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <EditText
        android:id="@+id/et"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:inputType="text" />

    <ImageView
        android:id="@+id/iv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignRight="@id/et"
        android:src="@drawable/down_arrow" />

</RelativeLayout>

  2.ListView的布局文件: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="wrap_content"
    android:gravity="center_vertical"
    android:orientation="horizontal" >

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/user" />

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:text="内容"
        android:id="@+id/tv_listitem_content"/>

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/delete"
        android:id="@+id/iv_listitem_delete"/>

</LinearLayout>

  3.主界面MainActivity.java

package com.gnnuit.dropdownlist;

import java.util.ArrayList;
import java.util.List;

import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.EditText;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.PopupWindow;
import android.widget.TextView;
import android.app.Activity;

public class MainActivity extends Activity {
    private ImageView iv;
    private PopupWindow popupWindow;
    private ListView lv;
    private EditText et;

    private List<String> strs = new ArrayList<String>();
    private MyAdapter adapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initListView();// 初始化ListView

        et = (EditText) findViewById(R.id.et);
        iv = (ImageView) findViewById(R.id.iv);
        iv.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                if (popupWindow == null) {
                    popupWindow = new PopupWindow(MainActivity.this);
                    popupWindow.setContentView(lv);
                    // PopupWindow必须设置高度和宽度
                    popupWindow.setWidth(et.getWidth()); // 设置宽度
                    popupWindow.setHeight(200); // 设置popWin 高度
                    popupWindow.showAsDropDown(et, 0, 0);
                    popupWindow.setOutsideTouchable(true);// 设置后点击其他位置PopupWindow将消失
                } else if (popupWindow != null && popupWindow.isShowing()) {
                    popupWindow.dismiss();
                } else {
                    popupWindow.showAsDropDown(et);
                }
            }
        });
    }

    /**
     * 初始化ListView
     */
    private void initListView() {
        for (int i = 0; i < 10; i++) {
            strs.add("第" + i + "条记录");
        }
        lv = new ListView(this);
        if (adapter == null) {
            adapter = new MyAdapter();
            lv.setAdapter(adapter);
        } else {
            adapter.notifyDataSetChanged();
        }
        lv.setBackgroundResource(R.drawable.listview_background);
        lv.setDividerHeight(2);
        lv.setVerticalScrollBarEnabled(false);
    }

    private class MyAdapter extends BaseAdapter {

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

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

        @Override
        public long getItemId(int position) {
            return position;
        }

        @Override
        public View getView(final int position, View convertView, ViewGroup parent) {
            View view;
            ViewHolder holder;
            if (convertView == null) {
                view = View.inflate(MainActivity.this, R.layout.list_item, null);
                holder = new ViewHolder();
                holder.iv = (ImageView) view.findViewById(R.id.iv_listitem_delete);
                holder.tv = (TextView) view.findViewById(R.id.tv_listitem_content);
                view.setTag(holder);
            } else {
                view = convertView;
                holder = (ViewHolder) view.getTag();
            }
            holder.tv.setText(strs.get(position));
            holder.tv.setOnClickListener(new OnClickListener() {

                @Override
                public void onClick(View v) {
                    et.setText(strs.get(position));
                    popupWindow.dismiss();
                }
            });
            holder.iv.setOnClickListener(new OnClickListener() {

                @Override
                public void onClick(View v) {
                    // 从List中移除
                    strs.remove(position);
                    // 更新ListView
                    adapter.notifyDataSetChanged();
                }
            });
            return view;
        }

    }

    private class ViewHolder {
        private TextView tv;
        private ImageView iv;
    }
}
时间: 2024-10-13 20:32:24

Android下拉菜单效果的相关文章

纯CSS实现的二级下拉菜单效果代码实例

纯CSS实现的二级下拉菜单效果代码实例:二级下拉是最为常用的效果之一,当前的此效果一般哟结合js实现,本章节介绍一个使用纯CSS实现的二级下拉菜单效果,希望能够给需要的朋友带来一定的帮助,不过此代码也有一点浏览器兼容问题,那就是在IE6中不兼容.代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" conten

点击弹出弹性下拉菜单效果

<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta name="keywords" content="站长,网页特效,js特效,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效 网" /><meta name="

三种方式实现下拉菜单效果

使用3种方式实现下拉菜单效果: html/css .js方法实现下拉菜单显示隐藏.jquery方法实现下拉菜单显示隐藏 先看效果图 第一种:html/css方式实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>下拉菜单的实现</title> <style type="text/css"> *{margin

下拉菜单效果

之前为大家介绍过有关HTML中的一些比较炫的效果,本篇为大家介绍一些,大家在网站中经常可以见到的一种下拉菜单效果,这种菜单效果一般分为两层,当我们的鼠标经过一级菜单时,隐藏的二级菜单就会显示出来,这样即保证了页面的美观,同时又不会使页面的模块减少,甚至可以增加模块数目. 一.废话不多说,下面我们来通过HTML+CSS为大家实现一下上面的效果,首先请大家先欣赏一下效果图: 1.界面布局代码: <body> <div id="var"> <ul> <

iOS下拉菜单效果实现

原文链接: iOS下拉菜单效果实现 简书主页:http://www.jianshu.com/users/37f2920f6848 Github主页:https://github.com/MajorLMJ iOS开发者公会-技术1群 QQ群号:87440292 iOS开发者公会-技术2群 QQ群号:232702419 iOS开发者公会-议事区   QQ群号:413102158

用JS控制下拉菜单效果

今天,突然想复习下之前学习做导航菜单的一些知识.之后觉得下拉菜单非常好玩儿,于是自己试着用JS调出了效果.网上有众多方法,但是感觉不是很对我的胃口,我喜欢HTML/CSS/JavaScript分离着写,用户体验重要,码农审美也很重要啊,O(∩_∩)O~ 在做下拉菜单的过程中,有以下心得: 1.this是个好东西,比如在鼠标事件中,它代表此时的鼠标事件对象本身,免去去用其他方式代表改对象的麻烦: 2.getElementsByTagName或者getElementById方法获得的是一个数组,需要

div模拟select下拉菜单效果

有些时候select下拉菜单直接用css调整样式,可能会有兼容性的问题,尤其是右侧的下拉三角,很难用css控制,那怎么办呢?可以采用div模拟select下拉菜单的效果.先直接上代码了: HTML的结构如下: <!doctype html> <html> <head> <meta charset="utf-8" /> <title>div模拟下拉菜单特效</title> <style type="t

android下拉菜单spinner的使用方法

Spinner控件也是一种列表类型的控件,它的继承关系如下: java.lang.Object    ? android.view.View      ? android.view.ViewGroup        ? android.widget.AdapterView<Textends android.widget.Adapter>          ? android.widget.AbsSpinner           ? android.widget.Spinner android

JS实现下拉菜单效果

1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>下拉菜单</title> 6 <style type="text/css"> 7 body,ul,li{ 8 margin:0; 9 padding:0; 10 font-size:13px; 11 } 1