The Slidingmenu of Xamarin.android

First, preface

A netizen in the comments hope to be able to make a slidingmenu effect under the xamarin.android of the essay, just yesterday in watching the official website sample project When also see this slidingmenu, but the final effect is not what we expect, At this point the author in the official forum to find, and finally successfully find the answer, the following author will lead you to achieve Slidingmenu.

Ii. preparatory work

To achieve Slidingmenu focus is the need for a third-party class library, the author has put some important methods commented, the following are:

Download from GitHub

Download from Baidu Web disk

Note: Our projects need not only reference this class library but also reference the Mono.Android.Support.v4 class library that comes with it, which can be found in Figure 1.1.

Figure 1.1

Third, the text

New Project The author doesn't say much, then we follow the second step to refer to the required class library, create a new view under resource/layout and name it menu, then drag and drop several button controls in it. And this view will be the interface of our sliding menu, and finally we can open MainActivity.cs and write the following code in it:

1         protected Override voidOnCreate (Bundle bundle)2         {3             Base. OnCreate (bundle);4 Setcontentview (Resource.Layout.Main);5             //instantiation of6             varSM =NewSlidingmenu ( This);7             //Specify a view of a sliding menu8 SM. SetMenu (Resource.Layout.menu);9             //attaching a sliding menu to an activityTenSm. Attachtoactivity ( This, SlidingMenuSharp.SlideStyle.Window); One}

What needs to be explained is the second parameter of the attachtoactivity method, which specifies how Slidingmenu is attached to the activity . The visual effect of the window is specified when the Actionbar will also slide, if the content is Actionbar will not follow the slide , we can see figures 1.2 and 1.3 are the window and content in the case of the effect ( The default is to swipe from the border to be able, not full screen .

Figure 1.2

Figure 1.3

But the above slidingmenu is not the kind of slidingmenu we want, and the official example of Xamarin also has this effect, so let's make the slide menu show only part, and you can call out the menu by swiping any part of the full screen, So we'll rewrite the code as follows:

1         protected Override voidOnCreate (Bundle bundle)2         {3             Base. OnCreate (bundle);4 Setcontentview (Resource.Layout.Main);5             varSM =NewSlidingmenu ( This);6 SM. SetMenu (Resource.Layout.menu);7             //Specify the width of the main interface display8Sm. Behindoffset = -;9Sm. Touchmodeabove =Touchmode.fullscreen;TenSm. Attachtoactivity ( This, SlidingMenuSharp.SlideStyle.Content); One}

What needs to be described is the Behindoffset property, which we can tell by commenting that it is used to specify the width of the visible part of the sliding menu to fully display the rear of the page, or behindoffsetres to specify, Only this property must be assigned a value using the identifier of the resource. In addition to specifying the main interface, we can also specify the width of the sliding menu display, and the corresponding properties are behindwidth and behindwidthres.

Now our slidingmenu has been a little bit, but not completely finished, we will continue to beautify it, so that it more in line with the needs of the actual project.

The first thing we need to explain is the Behindscrollscale property, its effect is to control the sliding menu in the slide when the intensity, the value range is 0~1, we can see in figures 1.4 and 1.5 the value of 0 and 1 when the sliding effect.

Figure 1.4

Figure 1.5

With figure 1.4 and figure 1.5 we can clearly see the effect of this property, you will find that when set to 1 is similar to Viewpager .

Another property is fadedegree and fadeenabled, the first of which is to control the intensity of the gradient effect, and the second determines whether to use a gradient effect, We still use the picture to demonstrate the effect of Fadedegree in 0 and 1, and figure 1.6 and figure 1.7 correspond to the effect of the value 0 and 1 o'clock respectively.

Figure 1.6

Figure 1.7

With figures 1.6 and 1.7 we can see clearly that their colors are different when they are sliding, and gradually fade in the process of sliding, and this property is used to control it. However, there is a more serious problem is that there is no split between the sliding menu and our main interface, but we can not directly use a line, so it is very ugly, then we will be able to set a gradient effect, first we need to resource/drawable Create a new XML file and name it shadow, where the following is written:

1 <?XML version= "1.0" encoding= "Utf-8"?>2 <Shapexmlns:android= "Http://schemas.android.com/apk/res/android">3   <Gradient4     Android:endcolor= "#00000000"5 Android:centercolor= "#11000000"6 Android:startcolor= "#33000000" ></Gradient>7 </Shape>

Through the above we have specified a gradient effect, the rest we need to use this resource:

1 var sm = new Slidingmenu (this);2 SM. SetMenu (Resource.Layout.menu);3 4 SM. Fadeenabled = true;5 SM. Fadedegree = 1f;6 SM. Behindoffset = +;7 SM. Shadowdrawableres = Resource.Drawable.shadow;8 SM. Shadowwidth =;9 SM. Behindscrollscale = 0f;Ten SM. Touchmodeabove = Touchmode.fullscreen; One SM. Attachtoactivity (this, SlidingMenuSharp.SlideStyle.Content); A}

Here we use this resource through the Shadowdrawableres property and control its width through the shadowwidth property, and finally we run the program to see a gradient split line figure 1.8:

Figure 1.8

Above we just put the sliding menu on the left side, we can actually put the sliding menu on the right or both sides , such as the original code to add this code can be rendered on the left.

1             Sm. Mode = menumode.right; 2             Sm. Setsecondarymenu (Resource.Layout.menu);

The first property is used to control the mode of the sliding menu, and the second is to specify the contents of the sliding menu on the right. When it comes to getting people to wonder how to listen to the events in the sliding menu? In fact, the sliding menu is a part of the entire activity, so the controls in it can be obtained through findViewbyid , of course, the author recommends that readers use fragment to separate the code , Slidingmenu The setcontent method can directly change the view of the main interface.

In addition to our own new slidingmenu, we can also let the activity inherit the Slidingfragmentactivity class so that we can directly control the Slidingmenu property without instantiating one, There is no need to call attachtoactivity attached to the activity, for example, we will rewrite the above code as shown below

1         protected Override voidOnCreate (Bundle bundle)2         {3             Base. OnCreate (bundle);4 Setcontentview (Resource.Layout.Main);5 Setbehindcontentview (Resource.Layout.menu);6slidingmenu.fadeenabled =true;7Slidingmenu.fadedegree =1f;8Slidingmenu.behindoffset = -;9Slidingmenu.shadowdrawableres =Resource.Drawable.shadow;TenSlidingmenu.shadowwidth = the; OneSlidingmenu.behindscrollscale =0f; ASlidingmenu.mode =Menumode.right; - Slidingmenu.setsecondarymenu (Resource.Layout.menu); -Slidingmenu.touchmodeabove =Touchmode.fullscreen; the}

We need to pay attention to the Setbehindcontentview method, this method must be called, but its function is actually the same as SetMenu , is used to set the sliding menu interface, By looking at the final results, the reader can discover that Actionbar is moving with the main interface, but we don't have a attachtoactivity method to specify enumerations, which we need to use setslidingactionbarenabled method, and pass in false.

Readers in the use of the actual app will be sure to find Slidingmenu rendered animation will have a lot of, of course, we also have many ways to render, only need to assign values to the Behindcanvastransformer property, the built-in animation has Zoomtransformer,slidetransformer and Scaletransformer, of course, they are all classes that need to be initialized, Let's demonstrate how the different animations work:

Zoomtransformer Animation

Slidetransformer Animation

Scaletransformer Animation

Finally, we can manually control the rendering of Slidingmenu through Toggle,showcontent and showmenu .

The Slidingmenu of Xamarin.android