如何用Material Design Android实现这个自定义popup菜单?

我想实现一个自定义的popup式菜单,如Android中的Twitter ,例如项目和图片,但是我不知道用什么组件。

在Material Design网站上,google提供这个解决scheme 。 所以我认为,有一个本地解决scheme来实现这一点。

在这里输入图像说明

我尝试了popup式菜单 ,但我找不到如何自定义这个视图的布局。

您可以使用ListPopupWindow ,提交您的自定义适配器,通过它您可以控制ListPopupWindow的每一行的ListPopupWindow 。 对于一个普通的PopupWindow你必须提供一个锚视图,另外你必须调用ListPopupWindow实例的setContentWidth ,这个实例通过其内容的大小来设置popup窗口的宽度。 这是一个小的价格,你必须支付,但对于一个小的数据集不是什么大不了的。 我有这个实用工具方法来检索行的最大宽度:

 public int measureContentWidth(ListAdapter adapter) { int maxWidth = 0; int count = adapter.getCount(); final int widthMeasureSpec = MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED); final int heightMeasureSpec = MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED); View itemView = null; for (int i = 0; i < count; i++) { itemView = adapter.getView(i, itemView, this); itemView.measure(widthMeasureSpec, heightMeasureSpec); maxWidth = Math.max(maxWidth, itemView.getMeasuredWidth()); } return maxWidth; } 

有一个名为PopupMenu的小部件,它基本上是一个锚定到特定视图的菜单。 一个缺点是它默认不显示图标。

但是,您可以使用reflection并调用setForceShowIcon来显示它们。 你需要的代码是:

  • 由于PopupMenu被锚定到一个特定的视图,你的ActionBar项目有一个actionLayout属性。 该布局( action_item.xml )可以像下面这样简单:

     <Button xmlns:android="http://schemas.android.com/apk/res/android" style="?attr/actionButtonStyle" android:layout_gravity="center" android:text="Show popup" android:textStyle="bold" android:textSize="12sp" android:layout_width="wrap_content" android:layout_height="match_parent"/> 
  • 包含您的项目与上述布局的ActionBar菜单样式

     <menu xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@+id/popup_item" android:title="Show popup" android:showAsAction="always" android:actionLayout="@layout/action_item"/> </menu> 
  • 您的popup_menu.xml ,您将popup_menu.xml PopupMenu的布局

     <menu xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@+id/item1" android:title="Item1" android:icon="@mipmap/ic_launcher"/> </menu> 
  • 最后,单击ActionBar项目时执行通货膨胀的代码

     @Override public boolean onOptionsItemSelected(MenuItem item) { switch (item.getItemId()) { case R.id.action_add_item: PopupMenu popup = new PopupMenu(this, item.getActionView()); MenuInflater inflater = popup.getMenuInflater(); inflater.inflate(R.menu.popup_menu, popup.getMenu()); // Use reflection to invoke setForceShowIcon try { Field[] fields = popup.getClass().getDeclaredFields(); for (Field field : fields) { if ("mPopup".equals(field.getName())) { field.setAccessible(true); Object menuPopupHelper = field.get(popup); Class<?> classPopupHelper = Class .forName(menuPopupHelper.getClass().getName()); Method setForceIcons = classPopupHelper .getMethod("setForceShowIcon", boolean.class); setForceIcons.invoke(menuPopupHelper, true); break; } } } catch (Exception e) { e.printStackTrace(); } popup.show(); return true; } return super.onOptionsItemSelected(item); } 

请注意,要在菜单中获取多行文本,您还需要为popup菜单项使用actionLayout

使用popup列表片段 。 片段的好处是可以轻松地对它们进行animation制作 (如果您不了解片段,我build议先阅读片段介绍 )

如果要完全控制popup内容,请参阅对话框片段

我有同样的问题。但最后我发现在我自己的解决scheme,我分享你我的代码。 希望能帮到你。

 popupWindowDogs = popupWindowDogs(); button.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { // TODO Auto-generated method stub // popupWindowDogs.showAsDropDown(v, -5, 0); popupWindowDogs().showAtLocation(v, Gravity.CENTER, 0, 0); } }); // Detect touched area detector = new SimpleGestureFilter(this, this); 

}

 public PopupWindow popupWindowDogs() { // initialize a pop up window type PopupWindow popupWindow = new PopupWindow(this); // the drop down list is a list view final ListView listView = new ListView(this); // set our adapter and pass our pop up window contents listView.setAdapter(dogsAdapter(popUpContents)); // listView.setBackgroundColor(Color.DKGRAY); listView.setBackgroundResource(R.drawable.ss4); listView.setPadding(0, 0, 0, 10); listView.setDivider(null); try { listView.setOnScrollListener(new OnScrollListener() { @Override public void onScrollStateChanged(AbsListView view, int scrollState) { View c = listView.getChildAt(0); String cc = listView.getChildAt(0).toString(); int scrolly = -c.getTop() + listView.getFirstVisiblePosition() * c.getHeight(); /* * Toast.makeText(getApplicationContext(), scrolly + "", Toast.LENGTH_SHORT) * .show(); */} @Override public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) { } }); } catch (Exception e) { Toast.makeText(getApplicationContext(), e.toString() + "", Toast.LENGTH_SHORT) .show(); } listView.setOnItemClickListener(new OnItemClickListener() { @Override public void onItemClick(AdapterView<?> arg0, View v, int arg2, long arg3) { try { // TODO Auto-generated method stub Context mContext = v.getContext(); Swipetouch mainActivity = ((Swipetouch) mContext); // add some animation when a list item was clicked Animation fadeInAnimation = AnimationUtils.loadAnimation(v.getContext(), android.R.anim.fade_in); fadeInAnimation.setDuration(10); v.startAnimation(fadeInAnimation); // dismiss the pop up mainActivity.popupWindowDogs.dismiss(); // get the text and set it as the button text String val = (String) arg0.getItemAtPosition(arg2); // Toast.makeText(mContext, val, Toast.LENGTH_SHORT).show(); if (val.equals("Signup Now")) { Intent ii = new Intent(getApplicationContext(), Registration.class); startActivity(ii); stopService(new Intent(Swipetouch.this, MyService.class)); stopService(new Intent(Swipetouch.this, MyService.class)); } else if (val.equals("Login")) { Intent ii = new Intent(getApplicationContext(), MyLoginActivity.class); startActivity(ii); stopService(new Intent(Swipetouch.this, MyService.class)); } else if (val.equals("Exit")) { finish(); stopService(new Intent(Swipetouch.this, MyService.class)); } else if (val.equals("Friends")) { Intent ii = new Intent(getApplicationContext(), MyLoginActivity.class); startActivity(ii); } else if (val.equals("Exit")) { stopService(new Intent(Swipetouch.this, MyService.class)); finish(); } } catch (Exception e) { Toast.makeText(Swipetouch.this, e.toString(), Toast.LENGTH_SHORT).show(); } } }); // some other visual settings popupWindow.setFocusable(true); popupWindow.setWidth(250); // popupWindow.setHeight(300); popupWindow.setHeight(WindowManager.LayoutParams.WRAP_CONTENT); // set the list view as pop up window content // SET WALLPAPER IMAGE /* * popupWindow.setBackgroundDrawable(getWallpaper()); popupWindow.setHeight(300); */ // layout.setBackgroundResource(R.drawable.sshadow); // layout.setBackgroundColor(Color.TRANSPARENT); // popupWindow.setContentView(layout); popupWindow.setBackgroundDrawable(new ColorDrawable( android.graphics.Color.TRANSPARENT)); popupWindow.setContentView(listView); return popupWindow; } 

此代码正在我的应用程序中工作。

尝试这个 :-

 <menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" tools:context=".LocationDetailsActivity"> <item xmlns:tools="http://schemas.android.com/tools" android:icon="@android:drawable/ic_menu_mapmode" app:showAsAction="ifRoom" android:title="@string/title_of_menu" tools:context=".LocationDetailsActivity"> //the menu list with icon <menu> <item android:id="@+id/action_map_type_normal" android:orderInCategory="100" android:icon="some_icon" //place your icon here android:title="Vacation spots" /> <item android:id="@+id/action_map_type_satellite" android:orderInCategory="100" android:icon="some_icon" //place your icon here android:title="Friends and family" /> <item android:id="@+id/action_map_type_hybrid" android:orderInCategory="100" android:icon="some_icon" //place your icon here android:title="Restaurants" /> </menu> </item> 

你可以通过这些不同的提供者的教程

http://developer.android.com/guide/topics/ui/actionbar.html

http://www.vogella.com/tutorials/AndroidActionBar/article.html

http://www.androidhive.info/2013/11/android-working-with-action-bar/

他们都有很好的例子和源代码来帮助你

希望这个帮助你:)

  try { java.lang.reflect.Field[] fields = popup.getClass().getDeclaredFields(); for (java.lang.reflect.Field field : fields) { if ("mPopup".equals(field.getName())) { field.setAccessible(true); Object menuPopupHelper = field.get(popup); Class<?> classPopupHelper = Class .forName(menuPopupHelper.getClass().getName()); Method setForceIcons = classPopupHelper .getMethod("setForceShowIcon", boolean.class); setForceIcons.invoke(menuPopupHelper, true); break; } } } catch (Exception e) { e.printStackTrace(); } 

更简单的解决scheme 在.show()方法之前添加。

 try { Field mFieldPopup=popupMenu.getClass().getDeclaredField("mPopup"); mFieldPopup.setAccessible(true); MenuPopupHelper mPopup = (MenuPopupHelper) mFieldPopup.get(popupMenu); mPopup.setForceShowIcon(true); } catch (Exception e) {}