Android copy of today's headline app to implement Drop-down navigation selection menu effect _android

This article for you to share in the Android how to achieve the Drop-down navigation menu effect of the whole process, for your reference, the specific contents are as follows
About the Drop-down navigation selection menu effect in the News client more, of course, can also be used in other projects, so that you can easily select more menus. We can use the top of our app to have a navigation menu that slides around or switch, or you can add such a Drop-down navigation menu effect to the application to enhance the user experience.
The principle of its implementation , in fact, is quite simple, is to use Popupwindow to show, in the display control its height and configure the corresponding animation effect. In Popupwindow I use the GridView to control the menu items, each corresponding to the picture and text. Of course, there are other ways to achieve this. For everyone to understand clearly, let's take a look at the effect map, as follows:

The above is my implementation of the example diagram, you have seen, is to click on the application of the top of the middle of the text displayed, when we click on one of the menu to hide and load the contents of the corresponding menu, and the menu is selected. OK, let's start our implementation process, or look at the program structure Chart first:
In the program structure diagram, Pulldownmenuview is the encapsulation class for Popupwindow, Pulldownmenuitem is the menu item class, which is two important classes. When we click on the top of the text in the middle, to show, show the same time, to implement the menu initialization work, first of all, initialization data, the main code is as follows:

　 /** * Initializes the data and loads the data into the corresponding View/private void InitData () {Pulldownmenuitem item = new Pulldownmenuitem (context);
 Item.setmenualign (menualign);
 Item.setmenutextcolor (Menutextcolor);
 Item.setmenutextsize (menutextsize);
 int txtlength = Menutexts.length;
 
 int imglength = Menuimageres.length;  if (txtlength!= 0 && imglength!= 0) {for (int i = 0; i < imglength; i++) {Pulldownmenuitem MenuItem = new
  
  Pulldownmenuitem (context, item);
   if (!currentitem.equals (Menutexts[i])) {menuitem.setimageres (menuimageres[i]);
  Menuitem.setmenutext (Menutexts[i]);
   }else{Menuitem.setmenutext (Menutexts[i]);
   Menuitem.setmenutextcolor (Color.parsecolor ("#4FA7F9"));
  Menuitem.setimageres (Constantcategorymenu.newsimagerespress[i]);
  } menumenuitems.add (MenuItem); } else{if (txtlength!= 0) {for (int i = 0; i < txtlength; i++) {Pulldownmenuitem MenuItem = new Pulldownmen
   
   Uitem (context, item); if (!currentitem.equals (Menutexts[i])) {menuitem.seTmenutext (Menutexts[i]);
   }else{Menuitem.setmenutext (Menutexts[i]);
   Menuitem.setmenutextcolor (Color.parsecolor ("#4FA7F9"));
  } menumenuitems.add (MenuItem); }}else if (imglength!= 0) {for (int i = 0; i < imglength; i++) {Pulldownmenuitem MenuItem = new Pulldownmenuit
   EM (context, item);
   Menuitem.setimageres (Menuimageres[i]);
  Menumenuitems.add (MenuItem);
 }
  }
 }
 }

CurrentItem represents the current selection, and in the initialization of the data, you need to detect which menu is selected, and if a menu is selected, the menu picture and text color should be set to the appropriate state when expanded to indicate that the menu is selected. In the initialization process is divided into three cases: the first is the menu items are both pictures and text, the second is the menu item only text, the third is the menu item only picture; So you need to make a corresponding judgment in the code above. The above is the data from the initialization menu, and the following is the contents of the initialization menu:

/** * Initialize Menu Contents * @param context * @param columns Menu columns * @return/private Gridvi
 EW Getmenugirdview (context context, int columns) {if (Menumenuitems.isempty ()) {//Initialize menu data InitData ();
 } if (null!= menugridview) {return menugridview;
 The GridView GridView = new GridView (context); 
  Gridview.setlayoutparams (New Linearlayout.layoutparams (ViewGroup.LayoutParams.MATCH_PARENT,
 ViewGroup.LayoutParams.MATCH_PARENT));
 Set the data adapter Gridview.setadapter (new Pulldownmenuadapter (Menumenuitems));
 Gridview.setverticalspacing (1);
 Gridview.setnumcolumns (columns);
 Gridview.setgravity (Gravity.center);
 
 Gridview.setverticalscrollbarenabled (FALSE);
 if (menubackground!= 0) {gridview.setbackgroundresource (menubackground);
 } if (Menuselector!=-1) {gridview.setselector (menuselector);
 } gridview.sethorizontalscrollbarenabled (FALSE);
 
 Setmenulistener (GridView);
 return gridView; }

After initializing the menu, you need the corresponding data in our menu, it is easy to set the data, only need three array: The first array represents the menu item text, the second array represents the menu item picture resource, and the third array represents the picture resource that the menu item is selected for. The following code:

 /** * News menu item Picture Resource * * Public final static int[] Newsimageres = {R.DRAWABLE.IC_MENU_TOUTIAO,R.DRAWABLE.IC_MENU_GN, R.D Rawable.ic_menu_gj,r.drawable.ic_menu_sh, R.drawable.ic_menu_sport,r.drawable.ic_menu_nba, R.drawable.ic_menu_ Blog,r.drawable.ic_menu_book, R.drawable.ic_menu_yule,r.drawable.ic_menu_mil, R.DRAWABLE.IC_MENU_CJ, R.drawable.ic_menu_tech, R.drawable.ic_menu_mobile,r.drawable.ic_menu_women, R.drawable.ic_menu_car,
 
 R.drawable.ic_menu_house}; /** * News menu item Select Picture Resource/public final static int[] newsimagerespress = {R.drawable.ic_menu_toutiao_press,r.drawable.ic_me Nu_gn_press, R.drawable.ic_menu_gj_press,r.drawable.ic_menu_sh_press, R.drawable.ic_menu_sport_press, R.drawable.ic_menu_nba_press, R.drawable.ic_menu_blog_press,r.drawable.ic_menu_book_press, R.drawable.ic_menu_
 Yule_press,r.drawable.ic_menu_mil_press, R.drawable.ic_menu_cj_press,r.drawable.ic_menu_tech_press, R.drawable.ic_menu_mobile_press,r.drawable.ic_menu_women_press, R.drawable.ic_menu_car_preSs,r.drawable.ic_menu_house_press}; /** * News menu item text/public final static string[] newsmenutexts = {"Today's headline", "Domestic", "international", "society", "Sports", "NBA", "blog", "reading", "entertainment", "military"
 , "Finance", "Technology", "mobile", "female", "car", "Real Estate"};

Menu items are implemented using the GridView, we also need to set the Listener event for each menu item, after selecting one of the menus or click the Return key or click the menu key to implement the hidden, the code is as follows:

 /**
 * Set menu item Listener event
 * @param gridview
 /private void Setmenulistener (GridView GridView) {
 if (null = = Gridview.getonitemclicklistener ()) {
  Gridview.setonitemclicklistener (new Onitemclicklistener ()) {
  @ Override public
  void Onitemclick (
   adapterview<?> Parent, 
   view view,
   int position, 
   long ID) {
   if (null!= menuitemlistener) {
   Menuitemlistener.onmenuitemclick (parent, view, position);
   }
   
   Hide ();}}
  );
 
 Press the Return key or the menu key to hide the menu
 gridview.setonkeylistener (new Onkeylistener () {
  @Override public
  boolean OnKey (View V , int keycode, keyevent event) {
  if (event.getaction () = = Keyevent.action_down) {
   switch (keycode) {case
   Keyevent.keycode_back: Case
   Keyevent.keycode_menu:
   hide ();
   break;
   }
  }
  
  return false;}}
 );
 

The

Show () and Hide () methods in the Pulldownmenuview class are primarily implemented to display and hide menus. In the show () method, you calculate the number of menus that are stored in each row, set the appropriate height, the overall background of the menu, the animation effect, and the location of the menu display. Specifically no longer detailed.
We also need to configure the menu's corresponding parameters before displaying the Drop-down navigation menu, such as display position, background picture, height, and so on. This is what you want to implement in the Menuutility class, the code is as follows:

Package com.navigation.utility;
Import COM.NAVIGATION.ACITVITY.R;

Import Com.navigation.control.PulldownMenuView;
Import Android.content.Context;

Import Android.view.View; /** * Pulldownmenuview Basic operation type * @Description: Pulldownmenuview basic Operation class * @File: Pulldownmenuutility.java * @Package COM.N avigation.utility * @Author Hanyonglu * @Date 2012-7-30 a.m. 11:41:04 * @Version V1.0/public class Menuutility {p
 Rivate context = null;
 Pulldownmenuview Object Private Pulldownmenuview menu = null;
 Picture Resources Private int[] imageres = null;
 Text content Private string[] texts = NULL;
 Menu height private int height = 0;
 
 Private View Anchorview = null; /** * Default constructor/public menuutility () {//TODO auto-generated constructor stub}/** * with Context builder * @param con
 Text */Public menuutility (context context) {//TODO auto-generated constructor stub this (context,null,null,0,null); /** * constructor with multiple parameters * @param context * @param imageres * @param texts/public MenuuTility (context context,int[] imageres,string[] texts,int height,view anchorview) {this.context = context;
 This.imageres = Imageres;
 this.texts = texts;
 This.height = height;
 This.anchorview = Anchorview;
 /** * Set Picture resource * @param imageres/public void Setimageres (int[) imageres) {this.imageres = Imageres;
 /** * Set Text content * @param texts/public void settexts (string[) texts) {this.texts = texts;
 /** * Set Altitude * @param height/public void setheight (int height) {this.height = height;
 /** * Settings Display position * @param anchor */public void Setanchorview (View anchor) {Anchorview = anchor; /** * Get Pulldownmenuview Object * Below pull form Show Menu * @return */public Pulldownmenuview Getpulldownmenuview (String curren
 TItem) {Pulldownmenuview menu = new Pulldownmenuview (context);
 Menu.setimageres (Imageres);
 Menu.setmenutext (texts);
 Menu.setheight (height);
 Menu.setanchorview (Anchorview);
 Menu.setcurrentitem (CurrentItem); Menu.setbackground (r.drawable.navigation_BG);
 return menu; /** * Get Pulldownmenuview Object * to pop up in the way the menu * @return * * * public Pulldownmenuview Getpopupmenuview () {Pulldownme
 Nuview menu = new Pulldownmenuview (context);
 Menu.setimageres (Imageres);
 Menu.setmenutext (texts); Menu.setlocation (Gravity.bottom |
 Gravity.center);
 Menu.setanimstyle (r.style.pulldown_in_out);
 
 Menu.setbackground (R.DRAWABLE.NAVIGATION_BG);
 return menu;

 }
}

Since it is the use of Popupwindow to achieve our results, of course, it can also be shown up in a way that pops up. In my example, the position that needs to be shown is shown below the top horizontal bar, so set:
Menu.setanchorview (anchorview);
In addition, in the mainactivity need to set its display height, where the height needs between the top bar and bottom radiogroup, which requires us to get the height of the phone screen minus the height of the top bar, and then subtract the height of the bottom radiogroup, Finally minus the height of the phone's menu bar. After clicking on a menu, you also need to change the top middle text and the right triangle picture. The code looks like this:

Package com.navigation.acitvity;
Import Com.navigation.constant.ConstantCategoryMenu;
Import Com.navigation.control.PulldownMenuView;
Import Com.navigation.control.PulldownMenuView.OnMenuItemClickListener;
Import com.navigation.utility.DeviceUtility;

Import com.navigation.utility.MenuUtility;
Import android.app.Activity;
Import Android.os.Bundle;
Import Android.view.View;
Import Android.view.View.OnClickListener;
Import Android.widget.AdapterView;
Import Android.widget.FrameLayout;
Import Android.widget.ImageView;
Import Android.widget.LinearLayout;
Import Android.widget.RelativeLayout;

Import Android.widget.TextView; /** * Android Implementation dropdown navigation Select Menu Effect * @Description: Android Implementation dropdown navigation menu effect * @File: Mainactivity.java * @Package Com.navigation.a citvity * @Author Hanyonglu * @Date 2012-7-28 pm 06:08:27 * @Version V1.0 * * public class Mainactivity extends Activ
 ity {//Today's headline linearlayout private linearlayout linearlayouttopic = null; Interface layout private Relativelayout Layoutheader = nulL
 Private LinearLayout layoutbottom = null;
 Private framelayout layoutbody = null;
 Pulldownmenuview basic Operation class private menuutility menuutility = null;
 Pulldownmenuview Object Private Pulldownmenuview pulldownmenu = null;
 Private TextView tvtopic = null;
 
 Private ImageView ivtopic = null;
 
 private int height = 0; /** called the activity is a.
 * * @Override public void onCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate);
 
 Setcontentview (R.layout.main);
 Initialization of Initviews ();
 }/** * Initialize/protected void Initviews () {ivtopic = (ImageView) Findviewbyid (r.id.imageviewtopic);
 
 Tvtopic = (TextView) Findviewbyid (r.id.textviewtopic);
 Linearlayouttopic = (linearlayout) Findviewbyid (r.id.linearlayouttopic);
 Linearlayouttopic.setonclicklistener (Topiconclicklistener);
 Layoutheader = (relativelayout) Findviewbyid (R.id.layout_top_header);
 Layoutbottom = (linearlayout) Findviewbyid (R.id.layout_bottom); Layoutbody = (framelayout) findviewByid (R.id.layout_body); Height = deviceutility.getscreensize (this) [1]-layoutheader.getlayoutparams (). Height-layoutbottom.getlayoutpara
 
 MS (). Height-deviceutility.getstatusbarheight (this); menuutility = new Menuutility (Mainactivity.this, Constantcategorymenu.newsimageres, Constantcategorymenu.newsmenut
 Exts, Height,layoutheader); /** * shows Pulldownmenuview/protected void Showpulldownmenu () {pulldownmenu = Menuutility.getpulldownmenuview (St
 Ring) Tvtopic.gettext ());
 Ivtopic.setimageresource (R.DRAWABLE.IC_MENU_TRANGLE_UP);
 /** * Hide Pulldownmenuview * * protected void Hidepulldownmenu () {Pulldownmenu.releasepopupmenuview ();
 Ivtopic.setimageresource (R.drawable.ic_menu_trangle_down); //Top today's headline event listener private Onclicklistener Topiconclicklistener = new Onclicklistener () {@Override public void onclic
  
  K (View v) {//Start Display Drop-down menu Showpulldownmenu (); TODO auto-generated Method Stub Pulldownmenu.setonmenuitemclicklistener (new OnMenuItemclicklistener () {@Override public void Onmenuitemclick (adapterview<?> parent, view view, int position) {
   TODO auto-generated Method Stub Tvtopic.settext (Constantcategorymenu.newsmenutexts[position]);
  Layoutbody.setbackgroundresource (Constantcategorymenu.newsbodyres[position]);
  @Override public void Hidemenu () {//TODO auto-generated Method Stub hidepulldownmenu ();
  
  }
  });
 Pulldownmenu.show ();
}
 };

 }

We need to be aware of setting the corresponding layout_height in the layout file when we get the height of the top bar and bottom radiogroup in the mainactivity, otherwise we are not getting its height. The main part of the program is the interception of several pictures, which can be set according to their own data format. It's OK to know this.
The above is the realization of the implementation of the Pull-down navigation menu effect in Android, is embedded in the Popupwindow, of course, can also be embedded in the Popupwindow ListView and other controls to achieve the corresponding effect, can also be popupwindow to achieve a variety of changes and kind of effect, the specific process here is no longer detailed, interested friends we can discuss together.
SOURCE Download: Dropdown Navigation Selection Menu

Original address: http://www.cnblogs.com/hanyonglu/archive/2012/07/31/2617488.html

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.