Android: Custom HorizontalScrollView to implement qq slide menu

Android: Custom HorizontalScrollView to implement qq slide menu

Today, I saw the QQ slide menu on the MOOC website. I have learned a lot of knowledge and I also admire the clear thinking of Hongyang.

After reading the tutorial, I realized it myself. Code is almost identical .. No way o (too many) o alas

If pixels are not good, you cannot find the software for creating gif images.

For the moment, we call menu on the left boundary and content on the right.

First, the menu Layout

<! -- {Cke_protected} {C} % 3C! % 2D % 2D % 3 Fxml % 20 version % 3D % 221.0% 20 encoding % 3D % 22utf-8% 22% 3F % 2D % 2D % 3E --> <relativelayout xmlns: android = "http://schemas.android.com/apk/res/android" android: layout_width = "fill_parent" android: layout_height = "fill_parent" android: background = "@ drawable/img_frame_background"> <linearlayout android: layout_width = "fill_parent" android: layout_height = "wrap_content" android: Layout = "true" android: orientation = "vertical"> <relativelayout android: layout_width = "fill_parent" android: layout_height = "wrap_content"> <imageview android: id = "@ + id/image1" android: layout_width = "50dp" android: layout_height = "50dp" android: layout_marginleft = "20dp" android: src = "@ drawable/img_1"> <textview android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: layout_centerinparent = "true" android: layout_torightof = "@ id/image1" android: textcolor = "# ffffff" android: layout_marginleft = "20dp" android: text = "the first Item" android: textsize = "20sp"> </textview> </imageview> </relativelayout> <relativelayout android: layout_width = "wrap_content" android: layout_height = "wrap_content"> <imageview android: id = "@ + id/image2" android: layout_width = "50dp" android: layout_height = "50dp" android: layout_marginleft = "20dp" android: src = "@ drawable/img_2"> <textview android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: layout_centerinparent = "true" android: layout_torightof = "@ id/image2" android: textcolor = "# ffffff" android: layout_marginleft = "20dp" android: text = "the second Item" android: textsize = "20sp"> </textview> </imageview> </relativelayout> <relativelayout android: layout_width = "wrap_content" android: layout_height = "wrap_content"> <imageview android: id = "@ + id/image3" android: layout_width = "50dp" android: layout_height = "50dp" android: layout_marginleft = "20dp" android: src = "@ drawable/img_3"> <textview android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: layout_centerinparent = "true" android: layout_torightof = "@ id/image3" android: textcolor = "# ffffff" android: layout_marginleft = "20dp" android: text = "third Item" android: textsize = "20sp"> </textview> </imageview> </relativelayout> <relativelayout android: layout_width = "wrap_content" android: layout_height = "wrap_content"> <imageview android: id = "@ + id/image4" android: layout_width = "50dp" android: layout_height = "50dp" android: layout_marginleft = "20dp" android: src = "@ drawable/img_4"> <textview android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: layout_centerinparent = "true" android: layout_torightof = "@ id/image4" android: textcolor = "# ffffff" android: layout_marginleft = "20dp" android: text = "fourth Item" android: textsize = "20sp"> </textview> </imageview> </relativelayout> <relativelayout android: layout_width = "wrap_content" android: layout_height = "wrap_content"> <imageview android: id = "@ + id/image5" android: layout_width = "50dp" android: layout_height = "50dp" android: layout_marginleft = "20dp" android: src = "@ drawable/img_5"> <textview android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: layout_centerinparent = "true" android: layout_torightof = "@ id/image5" android: textcolor = "# ffffff" android: layout_marginleft = "20dp" android: text = "fifth Item" android: textsize = "20sp"> </textview> </imageview> </relativelayout> </linearlayout> </relativelayout>

Then there is the main layout, a horizontal scroll bar, put the menu. xml, then there is a linear vertical layout, the background is qq Image

<!--{cke_protected}{C}%3C!%2D%2D%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%2D%2D%3E--><relativelayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent">    <com.example.myhorizontalscrollview.myhorizontalscrollview android:layout_width="fill_parent" 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/menu">            <linearlayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="@drawable/qq">        </linearlayout>    </include></linearlayout></com.example.myhorizontalscrollview.myhorizontalscrollview></relativelayout>

The horizontal scroll bar is our custom view.

Two methods to be rewritten

@Overrideprotected void onLayout(boolean changed, int l, int t, int r, int b) {// TODO Auto-generated method stubsuper.onLayout(changed, l, t, r, b);}

Adjust the initial layout by setting the offset so that all menus are hidden and the right menu is displayed.

@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {// TODO Auto-generated method stubsuper.onMeasure(widthMeasureSpec, heightMeasureSpec);}

Set the width of the sub-view

* Because HorizontalScrollView controls the move and down events
* So we also need to use onTouchEvent to determine up. If the current x offset is greater than half of the menu width
* Hide the menu. Otherwise, the smoothScrollTo (x, y) method is used to display the menu to achieve the animation effect.

The following are all custom horizontalscrollviews.

Package com. example. myhorizontalscrollview; import android. annotation. suppressLint; import android. content. context; import android. text. getChars; import android. util. attributeSet; import android. util. displayMetrics; import android. util. typedValue; import android. view. motionEvent; import android. view. viewGroup; import android. view. windowManager; import android. widget. horizontalScrollView; import android. widget. LinearLayout; public class MyHorizontalScrollView extends HorizontalScrollView {// horizontal first layout in the scroll bar private LinearLayout mWrpper; // left menu menuprivate ViewGroup mMenu of horizontal linear layout; // private ViewGroup mContent on the right of the horizontal first layout; // private int mScreenWidth on the screen; // The private int mMenuRightPadding from the width of menu to the right of the screen = 50; // menu width private int mMenuWidth; private boolean once;/*** call when custom attribute is not used **/public MyHorizontalScrollView (Context co Ntext, AttributeSet attrs) {super (context, attrs);/** get screen width * Get windowManager through context, get Metrics through windowManager, use DisplayMetrics to receive **/WindowManager wm = (WindowManager) context. getSystemService (Context. WINDOW_SERVICE); DisplayMetrics outMetrics = new DisplayMetrics (); wm. getdefadisplay display (). getMetrics (outMetrics); mScreenWidth = outMetrics. widthPixels; // converts dp to pxmMenuRightPadding = (int) TypedValue. a PplyDimension (TypedValue. COMPLEX_UNIT_DIP, 50, context. getResources (). getDisplayMetrics ();}/** set the width and height of the sub-view **/@ Overrideprotected void onMeasure (int widthMeasureSpec, int heightMeasureSpec) {// TODO Auto-generated method stubif (! Once) {mWrpper = (LinearLayout) getChildAt (0); mMenu = (ViewGroup) mWrpper. getChildAt (0); mContent = (ViewGroup) mWrpper. getChildAt (1); // The width of the menu is equal to the screen width minus the margin mMenuWidth = mMenu from the right of the screen. getLayoutParams (). width = mScreenWidth-mMenuRightPadding; // The width of the first layout on the right is directly equal to the width of the screen mContent. getLayoutParams (). width = mScreenWidth; once = true;} super. onMeasure (widthMeasureSpec, heightMeasureSpec);}/** hide menu by setting the offset **/@ Overrideprotected void onLayout (boolean changed, int l, int t, int r, int B) {// TODO Auto-generated method stubsuper. onLayout (changed, l, t, r, B);/** set the screen offset using the scrollTo (x, y) method, x is positive * the content is moved to the left **/if (changed) {this. scrollTo (mMenuWidth, 0) ;}}/** because the HorizontalScrollView controls the move and down events, we need to judge up. if the current x offset is greater than half of the menu width * Hide the menu, otherwise the menu **/@ Overridepublic boolean onTouchEvent (MotionEvent ev) is displayed) {// TODO Auto-generated method stubint action = ev. getAction (); switch (action) {case MotionEvent. ACTION_UP: int scrollX = getScrollX (); if (scrollX> = mMenuWidth/2) {this. smoothScrollTo (mMenuWidth, 0);} else {this. smoothScrollTo (0, 0);} return true;} return super. onTouchEvent (ev );}}

Then the MainActivity can load the layout.

package com.example.slipping;import com.example.helloworld.R;import android.os.Bundle;import android.app.Activity;import android.view.Menu;public class MainActivity extends Activity {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);}}