Android仿美团下拉菜单(商品选购)实例代码

美团电商应用平台大家使用非常频繁,下面小编通过本文给大家介绍电商应用平台中常用的选择类别下拉列表的实现。先给大家展示下效果图:

一、下拉列表的实现

其实实现方法有很多,这时实现的也没有什么技术含量,只是总结下自己在项目中的做法,也提供一个思路。

首先是列表的数据,一般数据都是从后台读过来,这里因为没有后台,所以写死在客户端:

private void initMenuData() {
menuData = new ArrayList<map<string, string="">>();
String[] menuStr = new String[] { "全部", "粮油", "衣服", "图书", "电子产品",
"酒水饮料", "水果" };
Map<string, string=""> map;
for (int i = , len = menuStr.length; i < len; ++i) {
map = new HashMap<string, string="">();
map.put("name", menuStr[i]);
menuData.add(map);
}
menuData = new ArrayList<map<string, string="">>();
String[] menuStr = new String[] { "综合排序", "配送费最低" };
Map<string, string=""> map;
for (int i = , len = menuStr.length; i < len; ++i) {
map = new HashMap<string, string="">();
map.put("name", menuStr[i]);
menuData.add(map);
}
menuData = new ArrayList<map<string, string="">>();
String[] menuStr = new String[] { "优惠活动", "特价活动", "免配送费",
"可在线支付" };
Map<string, string=""> map3;
for (int i = 0, len = menuStr3.length; i < len; ++i) {
map3 = new HashMap<string, string="">();
map3.put("name", menuStr3[i]);
menuData3.add(map3);
}
}</string,></string,></map<string,></string,></string,></map<string,></string,></string,></map<string,>

就是做了简单的封装。弹出列表的实现考虑使用Popwindow。

popMenu = new PopupWindow(contentView,
LinearLayout.LayoutParams.MATCH_PARENT,
LinearLayout.LayoutParams.MATCH_PARENT);
popMenu.setOutsideTouchable(true);
popMenu.setBackgroundDrawable(new BitmapDrawable());
popMenu.setFocusable(true);
popMenu.setAnimationStyle(R.style.popwin_anim_style);
popMenu.setOnDismissListener(new OnDismissListener() {
public void onDismiss() {
productTv.setTextColor(Color.parseColor("#5a5959"));
sortTv.setTextColor(Color.parseColor("#5a5959"));
activityTv.setTextColor(Color.parseColor("#5a5959"));
}
});

接着将数据封装到adapter中:

menuAdapter1 = new SimpleAdapter(this, menuData1,
R.layout.item_listview_popwin, new String[] { "name" },
new int[] { R.id.listview_popwind_tv });
menuAdapter2 = new SimpleAdapter(this, menuData2,
R.layout.item_listview_popwin, new String[] { "name" },
new int[] { R.id.listview_popwind_tv });
menuAdapter3 = new SimpleAdapter(this, menuData3,
R.layout.item_listview_popwin, new String[] { "name" },
new int[] { R.id.listview_popwind_tv });

设置点击标题头弹出列表,并改变标题头的颜色

public void onClick(View v) {
// TODO Auto-generated method stub
switch (v.getId()) {
case R.id.supplier_list_product:
productTv.setTextColor(Color.parseColor("#ac"));
popListView.setAdapter(menuAdapter);
popMenu.showAsDropDown(product, , );
menuIndex = ;
break;
case R.id.supplier_list_sort:
sortTv.setTextColor(Color.parseColor("#ac"));
popListView.setAdapter(menuAdapter);
popMenu.showAsDropDown(product, , );
menuIndex = ;
break;
case R.id.supplier_list_activity:
activityTv.setTextColor(Color.parseColor("#ac"));
popListView.setAdapter(menuAdapter);
popMenu.showAsDropDown(product, , );
menuIndex = ;
break;
}
}

showAsDropDown是为了让popwindow定位在Product这个选择标题的正下方。从而实现上面那种方式。

最后完整的贴出代码,还是蛮简单的。最后也会提供代码下载链接。

public class MainActivity extends Activity implements
OnClickListener {
private ListView listView, popListView;
private ProgressBar progressBar;
private List<map<string, string="">> menuData1, menuData2, menuData3;
private PopupWindow popMenu;
private SimpleAdapter menuAdapter1, menuAdapter2, menuAdapter3;
private LinearLayout product, sort, activity;
private ImageView cartIv;
private TextView productTv, sortTv, activityTv, titleTv;
private int green, grey;
private String currentProduct, currentSort, currentActivity;
private int menuIndex = 0;
private Intent intent;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_supplier_list);
findView();
initMenuData();
initPopMenu();
}
private void initMenuData() {
menuData1 = new ArrayList<map<string, string="">>();
String[] menuStr1 = new String[] { "全部", "粮油", "衣服", "图书", "电子产品",
"酒水饮料", "水果" };
Map<string, string=""> map1;
for (int i = 0, len = menuStr1.length; i < len; ++i) {
map1 = new HashMap<string, string="">();
map1.put("name", menuStr1[i]);
menuData1.add(map1);
}
menuData2 = new ArrayList<map<string, string="">>();
String[] menuStr2 = new String[] { "综合排序", "配送费最低" };
Map<string, string=""> map2;
for (int i = 0, len = menuStr2.length; i < len; ++i) {
map2 = new HashMap<string, string="">();
map2.put("name", menuStr2[i]);
menuData2.add(map2);
}
menuData3 = new ArrayList<map<string, string="">>();
String[] menuStr3 = new String[] { "优惠活动", "特价活动", "免配送费",
"可在线支付" };
Map<string, string=""> map3;
for (int i = 0, len = menuStr3.length; i < len; ++i) {
map3 = new HashMap<string, string="">();
map3.put("name", menuStr3[i]);
menuData3.add(map3);
}
}
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
switch (v.getId()) {
case R.id.supplier_list_product:
productTv.setTextColor(Color.parseColor("#39ac69"));
popListView.setAdapter(menuAdapter1);
popMenu.showAsDropDown(product, 0, 2);
menuIndex = 0;
break;
case R.id.supplier_list_sort:
sortTv.setTextColor(Color.parseColor("#39ac69"));
popListView.setAdapter(menuAdapter2);
popMenu.showAsDropDown(product, 0, 2);
menuIndex = 1;
break;
case R.id.supplier_list_activity:
activityTv.setTextColor(Color.parseColor("#39ac69"));
popListView.setAdapter(menuAdapter3);
popMenu.showAsDropDown(product, 0, 2);
menuIndex = 2;
break;
}
}
protected void findView() {
listView = (ListView) findViewById(R.id.supplier_list_lv);
product = (LinearLayout) findViewById(R.id.supplier_list_product);
sort = (LinearLayout) findViewById(R.id.supplier_list_sort);
activity = (LinearLayout) findViewById(R.id.supplier_list_activity);
productTv = (TextView) findViewById(R.id.supplier_list_product_tv);
sortTv = (TextView) findViewById(R.id.supplier_list_sort_tv);
activityTv = (TextView) findViewById(R.id.supplier_list_activity_tv);
titleTv = (TextView) findViewById(R.id.supplier_list_title_tv);
cartIv = (ImageView) findViewById(R.id.supplier_list_cart_iv);
progressBar = (ProgressBar) findViewById(R.id.progress);
product.setOnClickListener(this);
sort.setOnClickListener(this);
activity.setOnClickListener(this);
cartIv.setOnClickListener(this);
}
private void initPopMenu() {
initMenuData();
View contentView = View.inflate(this, R.layout.popwin_supplier_list,
null);
popMenu = new PopupWindow(contentView,
LinearLayout.LayoutParams.MATCH_PARENT,
LinearLayout.LayoutParams.MATCH_PARENT);
popMenu.setOutsideTouchable(true);
popMenu.setBackgroundDrawable(new BitmapDrawable());
popMenu.setFocusable(true);
popMenu.setAnimationStyle(R.style.popwin_anim_style);
popMenu.setOnDismissListener(new OnDismissListener() {
public void onDismiss() {
productTv.setTextColor(Color.parseColor("#5a5959"));
sortTv.setTextColor(Color.parseColor("#5a5959"));
activityTv.setTextColor(Color.parseColor("#5a5959"));
}
});
popListView = (ListView) contentView
.findViewById(R.id.popwin_supplier_list_lv);
contentView.findViewById(R.id.popwin_supplier_list_bottom)
.setOnClickListener(new OnClickListener() {
public void onClick(View arg0) {
popMenu.dismiss();
}
});
menuAdapter1 = new SimpleAdapter(this, menuData1,
R.layout.item_listview_popwin, new String[] { "name" },
new int[] { R.id.listview_popwind_tv });
menuAdapter2 = new SimpleAdapter(this, menuData2,
R.layout.item_listview_popwin, new String[] { "name" },
new int[] { R.id.listview_popwind_tv });
menuAdapter3 = new SimpleAdapter(this, menuData3,
R.layout.item_listview_popwin, new String[] { "name" },
new int[] { R.id.listview_popwind_tv });
popListView.setOnItemClickListener(new OnItemClickListener() {
public void onItemClick(AdapterView arg0, View arg1, int pos,
long arg3) {
popMenu.dismiss();
if (menuIndex == 0) {
currentProduct = menuData1.get(pos).get("name");
titleTv.setText(currentProduct);
productTv.setText(currentProduct);
Toast.makeText(MainActivity.this, currentProduct, Toast.LENGTH_SHORT).show();
} else if (menuIndex == 1) {
currentSort = menuData2.get(pos).get("name");
titleTv.setText(currentSort);
sortTv.setText(currentSort);
Toast.makeText(MainActivity.this, currentSort, Toast.LENGTH_SHORT).show();
} else {
currentActivity = menuData3.get(pos).get("name");
titleTv.setText(currentActivity);
activityTv.setText(currentActivity);
Toast.makeText(MainActivity.this, currentActivity, Toast.LENGTH_SHORT).show();
}
}
});
}
}</string,></string,></map<string,></string,></string,></map<string,></string,></string,></map<string,></map<string,>

二、加载圆形ProgressBar的显示

就是效果图中的那种加载ProgressBar,圆形ProgresBar可以用原生的Bar来实现,但样式单一,之前我做这种效果第一时间总是考虑到帧动画,但用这种方式需要有很多图片来链接起来,这样一来实现麻烦,二来图片多了占内存。下面用改变原生ProgressBar的动画来实现这种效果,非常简单:

<progressbar android:id="@+id/progress" android:indeterminatedrawable="@drawable/shape_progress" android:indeterminateduration="1000" android:layout_centerinparent="true" android:layout_height="wrap_content" android:layout_width="wrap_content"></progressbar>

indeterminateDrawable是加载背景图片,indeterminateDuration是旋转的速度。这里的思路是用xml来画一张图,它是环形的,且环形圈中有渐变颜色。如下:

<rotate android:fromdegrees="" android:pivotx="%" android:pivoty="%" android:todegrees="" xmlns:android="http://schemas.android.com/apk/res/android">
<shape android:innerradiusratio="" android:shape="ring" android:thicknessratio="" android:uselevel="false">
<gradient android:centercolor="#cdaa" android:centery="." android:endcolor="#ffffff" android:startcolor="#ac" android:type="sweep" android:uselevel="false">
</gradient></shape>
</rotate>

rotate设置旋转动画,360度旋转。shape="ring"设置背景为圆。android:innerRadiusRatio="3"设置内环半径,android:thicknessRatio="10"设置外环半径。最后为了让环中颜色有渐变效果,使用gradient来设置。gradient可以有三种渐变方式,线性,辐射,扫描。这里type要设置成扫描。然后设置中心点,开始颜色和结束颜色,就能实现上面的那种效果了。

以上内容是小编给大家介绍的Android仿美团下拉菜单(商品选购)实例代码,希望对大家有所帮助!

时间: 2016-03-08

Android仿美团淘宝实现多级下拉列表菜单功能

我们在常用的电商或者旅游APP中,例如美团,手机淘宝等等,都能够看的到有那种下拉式的二级列表菜单.具体如图所示: 上面两张图就是美团的一个二级列表菜单的一个展示.我相信很多人都想开发一个跟它一样的功能放到自己的APP中.好,接下来我们就开始动手,解决它. 1.结构分析 首先,我们给出这个下拉菜单需要的组建.我们用线框图来分析. 1)如上图所示,最外围的是一个Activity,顶部包含了一个View的容器,这个容器主要是装载ToggleButton来实现诸如美团里面的"美食,全城,理我最近,刷选&

Android仿美团分类下拉菜单实例代码

本文实例为大家分享了Android仿美团下拉菜单的实现代码,分类进行选择,供大家参考,具体内容如下 效果图 操作平台 AS2.0 第三方框架:butterknife build.gradle dependencies { compile fileTree(dir: 'libs', include: ['*.jar']) testCompile 'junit:junit:4.12' compile 'com.android.support:appcompat-v7:23.4.0' compile

Android编程实现仿美团或淘宝的多级分类菜单效果示例【附demo源码下载】

本文实例讲述了Android编程实现仿美团或淘宝的多级分类菜单效果.分享给大家供大家参考,具体如下: 这里要实现的是诸如美团/淘宝/百度糯米 多级分类菜单效果.当分类数量非常多时可以考虑采用两级分类,而诸如美团这种表现方式是一个不错的选择. 首先上效果图:   主要代码: 1. PopupWindow初始化过程: popupWindow = new PopupWindow(this); View view = LayoutInflater.from(this).inflate(R.layout.

Android模仿美团顶部的滑动菜单实例代码

前言 本文主要给大家介绍了关于Android模仿美团顶部滑动菜单的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 先来看下效果图: 实现方法 这是通过 ViewPager 和 GridView 相结合做出来的效果,每一个 ViewPager 页面都是一个 GridView,底部的每个滑动指示圆点都是从布局文件中 inflate 出来的 首先需要一个代表每个活动主题的 JavaBean /** * Created by CZY on 2017/6/23. */ publ

Android开发Popwindow仿微信右上角下拉菜单实例代码

先给大家看下效果图: MenuPopwindow: package com.cloudeye.android.cloudeye.view; import android.app.Activity; import android.content.Context; import android.graphics.drawable.ColorDrawable; import android.view.LayoutInflater; import android.view.View; import an

Android 自定义 HorizontalScrollView 打造多图片OOM 的横向滑动效果(实例代码)

自从Gallery被谷歌废弃以后,Google推荐使用ViewPager和HorizontalScrollView来实现Gallery的效果.的确HorizontalScrollView可以实现Gallery的效果,但是HorizontalScrollView存在一个很大的问题,如果你仅是用来展示少量的图片,应该是没问题的,但是如果我希望HorizontalScrollView可以想ViewPager一样,既可以绑定数据集(动态改变图片),还能做到,不管多少图片都不会OOM(ViewPager内

Android 滑动拦截实例代码解析

废话不多说了,直接给大家贴代码了,具体代码如下所示: package demo.hq.com.fby; import android.content.Context; import android.util.AttributeSet; import android.util.Log; import android.view.MotionEvent; import android.widget.LinearLayout; /** * Created by huqing on 2016/12/7.

Android 模拟新闻APP显示界面滑动优化实例代码

内容: 1.滑动优化(滑动时不加载图片,停止才加载) 2.第一次进入时手动加载 代码如下: 1.界面布局 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="horizontal" android:

Android实现随意拖动View效果的实例代码

项目过程中要实现能在页面中随意的拖动,刚开始实现是用悬浮球的形式进行实现,因为之前项目中用过,实现后发现用户每次安装后,都有权限的限制,甚至有些用户关闭悬浮球权限之后,不知道怎么在手机上打开悬浮球的权限,这样的话用户体验很不好,所以自己重新自定义实现在页面中拖动,不需要请求权限. 自定义随意拖动View: package com.dragdemo; import android.annotation.SuppressLint; import android.content.Context; im

js实现鼠标点击左上角滑动菜单效果代码

本文实例讲述了js实现鼠标点击左上角滑动菜单效果代码.分享给大家供大家参考.具体如下: 这里需要鼠标点击激活的网页左上角菜单,不点击不会滑出来,可以改造成二级菜单. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-click-hd-show-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo

JS+CSS实现大气清新的滑动菜单效果代码

本文实例讲述了JS+CSS实现大气清新的滑动菜单效果代码.分享给大家供大家参考,具体如下: 这是一款比较大气清新的滑动导航菜单,CSS和JavaScript配合完成,鼠标放到一级菜单上,会滑出二级的菜单,兼容性也不错,适合大多数网站使用,用到两张背景图片,请拷贝图片地址下载图片. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-dqqx-scroll-menu-demo/ 具体代码如下: <!DOCTYPE html PUBLIC

JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)

本文实例讲述了JS实现滑动菜单效果代码.分享给大家供大家参考.具体如下: 这里实现一个特效将网页中的选项卡滑动门都集中到一个网页中来,有些同志曾经为同一个页面布置两个滑动门而烦恼,参考一下本例子,相信你会找到答案,而且有各种排列方式的选项卡,总有一款会满足你. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-move-tab-nav-menu-demo-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC &qu