Android to achieve the top navigation menu left and right sliding effect _android

This article describes how to achieve the top navigation menu in Android sliding effect, the specific contents are as follows
First Solution:
The principle of implementation is to use the Viewpager control in the Android-support-v4.jar package, set the flow layout in the Viewpager control, set several TextView in the flow layout, and set the relevant parameters, events, etc. for each textview. About the Viewpager control can set full-screen sliding effect, of course, you can also achieve a local sliding effect, the following describes the navigation menu.
On the navigation menu, I believe you are not unfamiliar with it, such as in the news client often use the left and right sliding menu to display different categories of news. There are some examples of this in the Internet, but many of them are done using tabhost to achieve a smooth animation of the image, but did not achieve the effect of the menu sliding around. Let's take a look at the effect chart for this example:

The above is the effect chart, the following let us look how to achieve, first set up the program structure, the structure is as follows:

In the program, we need to import the Android-support-v4.jar package. Set the navigation menu item label in the Slidemenuutil class as follows:

Package com.slide.util; 

/**
 * Sliding menu option Class
 * @Description: Sliding menu option Class

 * @FileName: Slidemenuutil.java 

 * @Package com.slide.util 

 * @Author Hanyonglu 

 * @Date 2012-4-20 pm 04:51:24 

 * @Version V1.0 * * Public
class Slidemenuutil {
 // menu option public
 static String item_mobile = "Move";
 public static String Item_web = "WEB";
 public static String Item_cloud = "cloud computing";
 public static String item_database = "Database";
 public static String item_embed = "embedded";
 public static String Item_server = "Server";
 public static String item_dotnet = ". NET";
 public static String Item_java = "JAVA";
 public static String Item_safe = "Security";
 public static String Item_domain = "Industry";
 public static String Item_reseasrch = "Research and development";
 public static String item_manage = "admin";
 menu item Counter public
 int count = 0;
}

To implement the left and right pictures on the navigation menu, you need to set the relative layout in the Main.xml layout file.

In this example, the left and right navigation of the picture is displayed above the text, click on the right-hand triangle picture on the next page will display the navigation, you can see the following code.
Main.xml the relative layout code for the left and right pictures:
        

 <relativelayout android:id= "@+id/linearlayout01" android:layout_width= "Match_parent" android:layout_height= "Wrap_content" android:orientation= "horizontal" > <android.support.v4.view.viewpager android:id= "@+id/" Slidemenu "android:layout_width=" fill_parent "android:layout_height=" 35DP "android:background=" @drawable/top_bg " > <relativelayout android:id= "@+id/linearlayout01" android:layout_width= "Match_parent" android:layout_height = "Wrap_content" android:orientation= "horizontal" > <imageview android:id= "@+id/ivpreviousbutton" Android:la Yout_width= "Wrap_content" android:layout_height= "Wrap_content" android:layout_alignparentleft= "true" Android: Layout_alignparenttop= "true" android:paddingtop= "10DP" android:paddingleft= "5DP" android:visibility= "Invisible" an droid:src= "@drawable/previous_button"/> </RelativeLayout> <relativelayout android:id= "@+id/linearlayo ut01 "android:layout_width=" Match_parent "Android:layout_height= "wrap_content" android:orientation= "horizontal" > <imageview android:id= "@+id/ivNextButton"
  Android:layout_width= "Wrap_content" android:layout_height= "Wrap_content" android:layout_alignparentright= "true" Android:layout_alignparenttop= "true" android:paddingtop= "10DP" android:paddingright= "5DP" android:visibility= "
  Invisible "android:src=" @drawable/next_button "/> <!--<imageview android:id=" @+id/ivmenubackgroundcopy " Android:layout_width= "Wrap_content" android:layout_height= "Wrap_content" android:layout_alignparentright= "true" a Ndroid:layout_alignparenttop= "true" android:paddingtop= "2DP" android:src= "@drawable/menu_bg"/>--> </Re lativelayout> <imageview android:id= "@+id/ivmenubackground" android:layout_width= "Wrap_content" Android: layout_height= "Wrap_content" android:layout_centervertical= "true" android:layout_marginleft= "2DP" Android:layout_ torightof= "@+id/ivpreviousbutton" Android:paddingtop= "2DP" android:visibility= "Gone" android:src= "@drawable/menu_bg"/> </RelativeLayout> 

 

The picture with ID ivmenubackground in the code is to set its background picture after clicking on a menu, and the first item "Move" is selected by default in the menu.
The Item_xxx.xml in the program structure diagram is to display the following layout content after selecting a menu. This is just an example, and interested friends can be transformed into other layout content.

To Store navigation menu items using two-dimensional arrays:

 Private string[][] Menus = {{Slidemenuutil.item_mobile,slidemenuutil.item_web, 
  
 Slidemenuutil.item_cloud, Slidemenuutil.item_database},
  {slidemenuutil.item_embed,slidemenuutil.item_server,
   SlideMenuUtil.ITEM_ Dotnet,slidemenuutil.item_java},
  {slidemenuutil.item_safe,slidemenuutil.item_domain,
   Slidemenuutil.item_reseasrch,slidemenuutil.item_manage}};

In the example code: the first dimension of an array is used to display several pages of data, and the second dimension is used to display several menu items in each page.
At the beginning, you need to initialize the navigation menu contents:

 Layoutinflater inflater = Getlayoutinflater (); 
 Menuviews = new arraylist<view> (); 
 Slidemenulayout menu = new Slidemenulayout (this);
 
 for (int i = 0;i < menus.length;i++) {
 menuviews.add (menu.getslidemenulinerlayout (menus[i],screenwidth));
 }
 
 Main = (ViewGroup) inflater.inflate (r.layout.main, NULL);

Where menuviews is used to load page layout controls, there are 3 pages menuviews 3. ScreenWidth is the width of the screen. An instance method of the Slidemenulayout class is also used here: Getslidemenulinerlayout (string[] menutextviews,int layoutwidth)
Menutextviews is a number of menus on each page, Layoutwidth is the screen width. The code in the method is as follows:

 /** * Top sliding Menu Layout * @param menutextviews * @param layoutwidth * * Public View getslidemenulinerlayout (string[) Menutex
 Tviews,int layoutwidth) {//contains textview linearlayout linearlayout menulinerlayout = new LinearLayout (activity);
 
 Menulinerlayout.setorientation (linearlayout.horizontal);
 Parameter settings linearlayout.layoutparams menulinerlayoutparames = new Linearlayout.layoutparams (
 LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT, 1);
 
 menulinerlayoutparames.gravity = Gravity.center_horizontal;
 Add TextView control for (int i = 0;i < Menutextviews.length; i++) {TextView tvmenu = new TextView (activity);
 Set the identity value Tvmenu.settag (Menutextviews[i]); 
 Tvmenu.setlayoutparams (New Layoutparams (layoutwidth/4,30));
 Tvmenu.setpadding (30, 14, 30, 10);
 Tvmenu.settext (Menutextviews[i]);
 Tvmenu.settextcolor (Color.White);
 Tvmenu.setgravity (gravity.center_horizontal);
 
 Tvmenu.setonclicklistener (Slidemenuonclicklistener);

 menu item Count Menuutil.count + +; //Set first menu item background if (Menuutil.count = 1) {Tvmenu.setbackgroundresource (R.DRAWABLE.MENU_BG);
 } menulinerlayout.addview (Tvmenu,menulinerlayoutparames);
 Menulist.add (Tvmenu);
 return menulinerlayout;

 }

The previous example code just initializes the menu effect, I use TextView as each menu, and of course I have to set the event for each menu, the event code is as follows:

 Single Menu Event 
 onclicklistener slidemenuonclicklistener = new Onclicklistener () {
 
 @Override public
 void OnClick (View v) {
 //TODO auto-generated method stub
 String Menutag = V.gettag (). toString ();
 
 if (v.isclickable ()) {
 TextView = (textView) v;
 LOG.I ("Slidemenu", 
  "width:" + textview.getwidth () + 
  "Height:" + textview.getheight ());

 Textview.setbackgroundresource (R.DRAWABLE.MENU_BG);
 
 for (int i = 0;i < Menulist.size (); i++) {
  if (!menutag.equals (Menulist.get (i). GetText ())) {
  Menulist.get (i) ). setbackgrounddrawable (null);
  }
 }
 
 Click the menu to change Content
 Slidemenuonchange (menutag);
 }}
 ;

The For loop in the code above is designed to clear the background of other menu items, and the Slidemenuonchange (Menutag) method is intended to show the content below. The code in the method is as follows:

 Click to change the content private void Slidemenuonchange (String menutag) {Layoutinflater inflater = Activity.getlayoutinflater ();
 ViewGroup LLC = (viewgroup) Activity.findviewbyid (r.id.linearlayoutcontent);

 Llc.removeallviews ();
 if (Menutag.equals (Slidemenuutil.item_mobile)) {Llc.addview (inflater.inflate (r.layout.item_mobile, null));
 }else if (menutag.equals (Slidemenuutil.item_web)) {Llc.addview (inflater.inflate (r.layout.item_web, null));
 }else if (menutag.equals (Slidemenuutil.item_cloud)) {Llc.addview (inflater.inflate (R.layout.item_cloud, null)); }else if (menutag.equals (slidemenuutil.item_database)) {Llc.addview (inflater.inflate (r.layout.item_database, NULL)
 );
 }else if (menutag.equals (slidemenuutil.item_embed)) {Llc.addview (inflater.inflate (r.layout.item_embed, null));
 }else if (menutag.equals (Slidemenuutil.item_server)) {Llc.addview (inflater.inflate (r.layout.item_server, null)); }else if (menutag.equals (slidemenuutil.item_dotnet)) {Llc.addview inflater.inflate (r.layout.item_dotnet, Null));
 }else if (menutag.equals (Slidemenuutil.item_java)) {Llc.addview (inflater.inflate (R.layout.item_java, null));
 }else if (menutag.equals (Slidemenuutil.item_safe)) {Llc.addview (inflater.inflate (R.layout.item_safe, null));
 }else if (menutag.equals (Slidemenuutil.item_domain)) {Llc.addview (inflater.inflate (R.layout.item_domain, null)); }else if (menutag.equals (Slidemenuutil.item_reseasrch)) {Llc.addview inflater.inflate (r.layout.item_research, NULL
 ));
 }else if (menutag.equals (slidemenuutil.item_manage)) {Llc.addview (inflater.inflate (r.layout.item_manage, null));

 }
 }

In addition, to set the picture in the left and right navigation menu, you need to change the state of the picture in the Onpageselected listener event in the Viewpager control:

 @Override public 
 void onpageselected (int arg0) {
 int pagecount = Menuviews.size ()-1;
 Pagerindex = arg0;
 
 Show right navigation picture
 if (arg0 >= 0 && arg0 < PageCount) {
 imagenext.setvisibility (view.visible);
 } else{
 imagenext.setvisibility (view.invisible);
 }
 
 Show left navigation picture
 if (arg0 > 0 && arg0 <= pagecount) {
 imageprevious.setvisibility (view.visible);
 } else{
 imageprevious.setvisibility (view.invisible);
 }
  

Note: If you have more than one page, display the right navigation picture directly:

if (Menuviews.size () > 1) { 
 imagenext.setvisibility (view.visible);
}

If the last page is reached, the right navigation picture is hidden, and the left navigation picture is displayed directly if the current page is not the first page.
In addition, you need to set click events for both navigation pictures, and display the next menu or previous menu directly when you click on the page:

Right navigation Picture button Event 
 class Imagenextonclicklistener implements onclicklistener{
 @Override public
 void OnClick ( View v) {
 //TODO auto-generated Method Stub
 Pagerindex + +;
 Viewpager.setcurrentitem (Pagerindex);
 }
 
 Left navigation Picture button Event
 class Imagepreviousonclicklistener implements onclicklistener{
 @Override public
 Void OnClick (View v) {
 //TODO auto-generated method stub
 Pagerindex-;
 Viewpager.setcurrentitem (Pagerindex);
 }
 

In this case, the first solution and the general idea of the code is over, but my implementation here is a slide directly show the next Page menu, the menu on this page is hidden away. Some friends may notice, want to achieve 1.1 points to the left or slide to the right, not the entire page of the slide, that is, if not slide to the next page will bounce back to the original page, you can not use this method, then need to use Horizontalscrollview, For the horizontalscrollview implementation of the sliding menu use and examples, see the following second solution.
In addition, in this example I do not implement the background picture smooth to the right or left animation effect, interested friends can add such effect, there are some online implementation of such an effect example.

Second Solution:
The second solution I am using the Horizontalscrollview implementation, this layout can achieve horizontal sliding effect, but to note that only a direct child tag. This scheme is much simpler than the first one, and it just needs to be set up well. Let's look at the sample run effect:

The navigation menu implemented in the above diagram allows the menu to slide gradually, and I have no bounce in this example. Okay, let's look at the layout code:

Where the menu items I still use are TextView controls, I'm here to add the TextView using code, as follows:

 private void Setslidemenu () {//contains textview linearlayout linearlayout menulinerlayout =
 (linearlayout) Findviewbyid (R.id.linearlayoutmenu);
 Menulinerlayout.setorientation (linearlayout.horizontal);
 Parameter settings linearlayout.layoutparams menulinerlayoutparames = new Linearlayout.layoutparams (
 LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT, 1);
 
 menulinerlayoutparames.gravity = Gravity.center_horizontal;
 Add TextView control for (int i = 0;i < menus.length;i++) {TextView tvmenu = new TextView (this); 
 Tvmenu.setlayoutparams (New Layoutparams (30,30));
 Tvmenu.setpadding (30, 14, 30, 10);
 Tvmenu.settext (Menus[i]);
 Tvmenu.settextcolor (Color.White);
 Tvmenu.setgravity (gravity.center_horizontal);
 Menulinerlayout.addview (Tvmenu,menulinerlayoutparames); }
 }

How it feels, it's not hard. If you want to set the content above the <HorizontalScrollView> title or below, we can embed <HorizontalScrollView> in other layouts, I believe this can be done, no longer said.
In addition, you can also use Gallery to implement navigation menu sliding, about how gallery implementation, this article is no longer detailed, interested friends can query the help document.
Original address: http://www.cnblogs.com/hanyonglu/archive/2012/04/21/2462311.html
The above is the entire content of this article, I hope to help you learn, We also hope that we can support the cloud-dwelling community.