Android uses custom controls horizontalscrollview to create the simplest sideslip menu in history _android

Sideslip menu in many applications will be seen, the recent QQ5.0 Sideslip also played a bit of tricks ~ ~ for the Sideslip menu, the General people will customize ViewGroup, and then hide the menu bar, when the fingers slide, through the scroller or constantly change leftmargin and so on to achieve How much is a bit complicated, after the completion of the sliding conflicts need to deal with ~ ~ Today to everyone to bring a simple realization, the history of the simplest a bit exaggerated, but it is really I have encountered the simplest kind of realization ~ ~ ~

1. Principle Analysis

Since it is sideslip, but is in the Slap big screen, crammed into about two slap big layout, need to slide can appear another, since so, why don't you consider using Android to provide the Horizontalscrollview it ~

If use Horizontalscrollview, also need in Action_down, action_move inside to listen, judge, constantly change the control position? no!!! Horizontalscrollview itself with the function of sliding ~ ~

Do you still need to handle all kinds of conflicts manually? no!!! Of course, still need to understand the event distribution mechanism ~ ~ ~

2. Effect drawing

Well, the main interface made a picture of QQ, the left to steal a brother's layout file ~ ~ who has good-looking layout, pictures, icons God horse, you can send me a point, grateful ~

3. layout file

<com.example.zhy_slidingmenu. Slidingmenu xmlns:android= "http://schemas.android.com/apk/res/android" 
xmlns:tools= "http:// Schemas.android.com/tools " 
android:layout_width=" wrap_content " 
android:layout_height=" Fill_parent " 
android:scrollbars= "None" > 
<linearlayout 
android:layout_width= "Wrap_content" 
android: layout_height= "Fill_parent" 
android:orientation= "Horizontal" > 
<include layout= "@layout/layout_ Menu "/> 
<linearlayout 
android:layout_width=" fill_parent " 
android:layout_height=" Fill_ Parent " 
android:background=" @drawable/qq "> 
</LinearLayout> 
</LinearLayout> 

The first is our custom view, inside a direction level of linearlayout, and then is a menu layout, one is the main layout of the ~

4, Custom Slidingmenu

The next step is our core code.

Package com.example.zhy_slidingmenu; 
Import Android.content.Context; 
Import Android.util.AttributeSet; 
Import Android.util.TypedValue; 
Import android.view.MotionEvent; 
Import Android.view.ViewGroup; 
Import Android.widget.HorizontalScrollView; 
Import Android.widget.LinearLayout; 
Import Com.zhy.utils.ScreenUtils; 
public class Slidingmenu extends Horizontalscrollview {/** * screen width */private int mscreenwidth; 
/** * DP/private int mmenurightpadding = 50; 
/** * Menu Width * * private int mmenuwidth; 
private int mhalfmenuwidth; 
Private Boolean once; 
Public Slidingmenu (context, AttributeSet attrs) {Super (context, attrs); 
Mscreenwidth = screenutils.getscreenwidth (context); 
@Override protected void onmeasure (int widthmeasurespec, int heightmeasurespec) {/** * Display the setting of a width */if (!once) 
{LinearLayout wrapper = (linearlayout) getchildat (0); 
ViewGroup menu = (viewgroup) wrapper.getchildat (0); 
ViewGroup content = (viewgroup) wrapper.getchildat (1); //DP to PX mmenurightpadding = (int) typedvalue.applydimension (Typedvalue.complex_unit_dip, mmenurightpadding, content. 
Getresources (). Getdisplaymetrics ()); 
Mmenuwidth = mscreenwidth-mmenurightpadding; 
Mhalfmenuwidth = MMENUWIDTH/2; 
Menu.getlayoutparams (). width = mmenuwidth; 
Content.getlayoutparams (). width = mscreenwidth; 
} super.onmeasure (Widthmeasurespec, Heightmeasurespec); @Override protected void OnLayout (Boolean changed, int l, int t, int r, int b) {super.onlayout (changed, L, T, R, B) 
; 
if (changed) {//Hide menu This.scrollto (mmenuwidth, 0); 
once = true; 
@Override public boolean ontouchevent (motionevent ev) {int action = ev.getaction (); 
Switch (action) {//up, to determine if the display area is greater than half the menu width is fully displayed, otherwise hidden case MotionEvent.ACTION_UP:int scrollx = Getscrollx (); 
if (Scrollx > Mhalfmenuwidth) this.smoothscrollto (mmenuwidth, 0); 
else This.smoothscrollto (0, 0); 
return true; 
return super.ontouchevent (EV); } 
}

Haha, finished ~ above the demo diagram, the use of so little code ~ ~

Code, short and short ~ In addition to setting the width of these assorted code ~ is processing the sliding code but 10 lines ~ ~ I said the history of the simplest can not be

Well, because the code is too short, do not explain, we look at the comments ~

5, extended

Well, on the down, we perfected the next program, I'm going to first change the menu layout into ListView to prove that we are not conflicted; then add a property to let the user configure the value of the menu distance to the right margin; and then publish a method, click the automatic Open menu for users to click a button, the menu slowly slide out ~

1. Add Custom properties

A, first create a new attr.xml under the Values folder, and write the following:

<?xml version= "1.0" encoding= "Utf-8"?> 
<resources> <attr name= "rightpadding" format= " 
Dimension "/> 
<declare-styleable name=" Slidingmenu "> 
<attr name=" rightpadding "/> 
</ Declare-styleable> 

b, declaring namespaces and using attributes in the layout

The definition is finished, it must be used.

<com.example.zhy_slidingmenu. Slidingmenu xmlns:android= "http://schemas.android.com/apk/res/android" 
xmlns:tools= "http:// Schemas.android.com/tools " 
xmlns:zhy=" Http://schemas.android.com/apk/res/com.example.zhy_slidingmenu 
" Android:layout_width= "Wrap_content" 
android:layout_height= "fill_parent" 
android:scrollbars= "None" 

We can see our namespaces: xmlns:zhy= "Http://schemas.android.com/apk/res/com.example.zhy_slidingmenu" is http:// Schemas.android.com/apk/res/plus the name of our package;

Our properties: zhy:rightpadding= "100DP" Here I set the 100DP;
Note: Many people ask me, no hint to do so, you clean under the project, if you are lucky, there are hints, well, good luck ~

C, Get properties in our custom class

Public Slidingmenu (context, AttributeSet attrs, int defstyle) 
{ 
Super (context, attrs, defstyle); 
Mscreenwidth = screenutils.getscreenwidth (context); 
TypedArray a = Context.gettheme (). Obtainstyledattributes (Attrs, 
r.styleable.slidingmenu, Defstyle, 0); 
int n = a.getindexcount (); 
for (int i = 0; i < n; i++) 
{ 
int attr = A.getindex (i); 
Switch (attr) 
{case 
r.styleable.slidingmenu_rightpadding: 
//default 
mmenurightpadding = A.getdimensionpixelsize (attr, 
(int) typedvalue.applydimension ( 
Typedvalue.complex_unit_dip, 50f, 
Getresources (). Getdisplaymetrics ()));//default 10DP break 
; 
} 
A.recycle (); 
}

In the three-parameter construction method, we can get it by Typearray.

All right, that's it. If you have many custom attributes, follow the steps above.

2. Publish a way to open a menu

First define a Boolean isopen variable to identify the status of our current menu ~ ~ and then remember to change the state when action_up:

Case MOTIONEVENT.ACTION_UP: 
int scrollx = GETSCROLLX (); 
if (Scrollx > Mhalfmenuwidth) 
{ 
This.smoothscrollto (mmenuwidth, 0); 
IsOpen = false; 
} else 
{ 
this.smoothscrollto (0, 0); 
IsOpen = true; 
} 
return true; 
}

Add the method below:

/** 
* Open Menu */public 
void Openmenu () 
{ 
if (isOpen) return 
; 
This.smoothscrollto (0, 0); 
IsOpen = true; 
} 
/** 
* Close Menu */public 
void Closemenu () 
{ 
if (IsOpen) 
{ 
This.smoothscrollto ( Mmenuwidth, 0); 
IsOpen = false; 
} 
} 
/** 
* Toggle Menu State */public 
void Toggle () 
{ 
if (IsOpen) 
{ 
closemenu (); 
} else 
{ 
openmenu (); 
} 
}

Conveniently added two more ...

Next, we pick one to test:

The main layout adds one More button to trigger the Togglemenu () method

Main activity

public class Mainactivity extends activity 
{ 
private slidingmenu mmenu; 
@Override 
protected void onCreate (Bundle savedinstancestate) 
{ 
super.oncreate (savedinstancestate); 
Requestwindowfeature (window.feature_no_title); 
Setcontentview (r.layout.activity_main); 
Mmenu = (slidingmenu) Findviewbyid (R.id.id_menu); 
} 
public void Togglemenu (view view) 
{ 
mmenu.toggle (); 
} 
}

All right, look at the picture now:

We changed padding to 100dp~.

Then click on our button, see Ha Effect ~ ~

3. Add ListView Test

Well, ~~listview also finished testing ~ ~ Everyone can according to their own needs of various modifications ~ ~

Yes, the purpose of the test QQ today is to, the next time I want to take the above code, Transformation and QQ5.0 The same effect, we are interested can try in advance, QQ menu seems to be hidden in the main interface below, giving a feeling is not drawn out, we this example can make that effect, wait and see; the rest is a variety of zoom, transparency animation ~ ~ ~

The above content is small to share the android with the custom control Horizontalscrollview to create the history of the simplest sideslip menu, hope to help.