QQ sliding display on the left, QQ sliding display

QQ sliding display on the left, QQ sliding display

For the new version of the QQ interface, a sliding effect is added on the left side. I believe that my friends have long been excited. How can this effect be achieved? We will discuss this article together. Since it is a sliding effect, the HorizontalScrollView class should be used here, a horizontal sliding effect.

For this effect, we can divide it into an Item Menu and Layout. By setting the padding value for the Item Menu, we can hide and display the Menu on the left.

Our Menu design code:

<? Xml version = "1.0" encoding = "UTF-8"?> <RelativeLayout xmlns: android = "http://schemas.android.com/apk/res/android" android: layout_width = "match_parent" android: layout_height = "match_parent" android: background = "@ drawable/img_frame_background"> <LinearLayout android: layout_width = "match_parent" android: layout_height = "wrap_content" android: feature = "true" android: orientation = "vertical"> <RelativeLayout android: layout_width = "match_parent" android: layout_height = "match_parent"> <ImageView android: id = "@ + id/img1" android: layout_width = "50dp" android: layout_height = "50dp" android: src = "@ drawable/img_1" android: layout_marginLeft = "20dp" android: layout_marginTop = "20dp" android: layout_centerVertical = "true"/> <TextView android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: layout_marginLeft = "20dp" android: textColor = "# fff" android: text = "first item" android: layout_toRightOf = "@ id/img1" android: layout_centerVertical = "true"/> </RelativeLayout> <RelativeLayout android: layout_width = "match_parent" android: layout_height = "match_parent"> <ImageView android: id = "@ + id/img2" android: layout_width = "50dp" android: layout_height = "50dp" android: src = "@ drawable/img_2" android: layout_marginLeft = "20dp" android: layout_marginTop = "20dp" android: layout_centerVertical = "true"/> <TextView android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: layout_marginLeft = "20dp" android: textColor = "# fff" android: text = "second item" android: layout_toRightOf = "@ id/img2" android: layout_centerVertical = "true"/> </RelativeLayout> </LinearLayout> </RelativeLayout>

The Layout code of our main Activity:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:paddingBottom="@dimen/activity_vertical_margin"    android:paddingLeft="@dimen/activity_horizontal_margin"    android:paddingRight="@dimen/activity_horizontal_margin"    android:paddingTop="@dimen/activity_vertical_margin"    tools:context=".MainActivity" >    <com.example.menu.SlidingMenu         android:layout_width="match_parent"        android:layout_height="match_parent">        <LinearLayout             android:layout_width="wrap_content"            android:layout_height="match_parent"            android:orientation="horizontal"            >                        <include layout="@layout/left_menu"/>                        <LinearLayout                 android:layout_width="match_parent"                android:layout_height="match_parent"                android:background="@drawable/qq"                />                    </LinearLayout>    </com.example.menu.SlidingMenu>    </RelativeLayout>

Our custom SlidingMenu:

Package com. example. menu; import android. content. context; 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 SlidingMenu extends HorizontalScrollView {private LinearLa Yout mWapper; private ViewGroup mMenu; private ViewGroup mContent; private int mScreenWidth; // screen width private int mMenuWidth; // set Menu width // dp private int mMenuRightPadding; private boolean once = false;/*** this method is called when custom attributes are not used * @ param context * @ param attrs */public SlidingMenu (Context context, AttributeSet attrs) {super (context, attrs); WindowManager wm = (WindowManager) context. getSystemService (co Ntext. WINDOW_SERVICE); DisplayMetrics outMetrics = new DisplayMetrics (); wm. getdefadisplay display (). getMetrics (outMetrics); mScreenWidth = outMetrics. widthPixels; // convert dp to px mMenuRightPadding = (int) TypedValue. applyDimension (TypedValue. COMPLEX_UNIT_DIP, 50, context. getResources (). getDisplayMetrics ();}/*** set the internal View width and height, as well as its own width and height */@ Override protected void onMeasure (int widthMeasureSpec, int heigh TMeasureSpec) {super. onMeasure (widthMeasureSpec, heightMeasureSpec); if (! Once) {mWapper = (LinearLayout) getChildAt (0); mMenu = (ViewGroup) mWapper. getChildAt (0); mContent = (ViewGroup) mWapper. getChildAt (1); mMenuWidth = mMenu. getLayoutParams (). width = mScreenWidth-mMenuRightPadding; mContent. getLayoutParams (). width = mScreenWidth; once = true;}/*** set the position of the sub-View * Hide Menu */@ Override protected void onLayout (boolean changed, int l, int t, int r, int B) {super. onLayout (changed, l, t, r, B); if (changed) {this. scrollTo (mMenuWidth, 0) ;}}/*** controls the sliding effect of the finger */@ Override public boolean onTouchEvent (MotionEvent ev) {int action = ev. getAction (); switch (action) {case MotionEvent. ACTION_UP: int scrollx = getScrollX (); // The hidden area width on the left of the Menu if (scrollx> = mMenuWidth/2) {this. smoothScrollTo (mMenuWidth, 0);} else {this. smoothScrollTo (0, 0);} return true;} return super. onTouchEvent (ev );}}

Our main Activity:

Public class MainActivity extends Activity {@ Override protected void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState); requestWindowFeature (Window. FEATURE_NO_TITLE); // remove the title setContentView (R. layout. activity_main );}}

: