QQ Side Slide for Technology Sharing

QQ Side Slide for Technology Sharing

QQ side-sliding is implemented through custom containers, which mimics the function of QQ side-sliding.The main principle is that custom containers inherit HorizontalAScrollView or LinearLayout, measure menu and home page, redraw them, and handle events accordingly. They also include some attribute animations, followed by an effect map

First step activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<com.liang.boke.QQSliding.SliddingMenu
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/menu_bg"
    >


    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:orientation="horizontal">


        <include layout="@layout/qq_menu"/>


        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/qq"/>
    </LinearLayout>
</com.liang.boke.QQSliding.SliddingMenu>

Where qq_menu.xml

 <?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">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:gravity="center">

        <RelativeLayout
            android:layout_marginTop="10sp"
             android:layout_width="match_parent"
             android:layout_height="70dp"
             android:background="#11000000">
             <TextView
                 android:paddingLeft="15px"
                 android:drawableLeft="@drawable/img_1"
                 android:textSize="25sp"
                 android:textColor="#fff"
                 android:drawablePadding="20sp"
                 android:gravity="center_vertical"
                 android:layout_width="match_parent"
                 android:text="QQ mailbox"
                 android:layout_height="match_parent" />
         </RelativeLayout>

        <RelativeLayout
            android:layout_marginTop="10sp"
            android:layout_width="match_parent"
            android:layout_height="70dp"
            android:background="#11000000">
            <TextView
                android:paddingLeft="15px"
                android:drawableLeft="@drawable/img_2"
                android:textSize="25sp"
                android:textColor="#fff"
                android:drawablePadding="20sp"
                android:gravity="center_vertical"
                android:layout_width="match_parent"
                android:text="QQ Album"
                android:layout_height="match_parent" />
        </RelativeLayout>
        <RelativeLayout
            android:layout_marginTop="10sp"
            android:layout_width="match_parent"
            android:layout_height="70dp"
            android:background="#11000000">
            <TextView
                android:paddingLeft="15px"
                android:drawableLeft="@drawable/img_3"
                android:textSize="25sp"
                android:textColor="#fff"
                android:drawablePadding="20sp"
                android:gravity="center_vertical"
                android:layout_width="match_parent"
                android:text="QQ space"
                android:layout_height="match_parent" />
        </RelativeLayout>
        <RelativeLayout
            android:layout_marginTop="10sp"
            android:layout_width="match_parent"
            android:layout_height="70dp"
            android:background="#11000000">
            <TextView
                android:paddingLeft="15px"
                android:drawableLeft="@drawable/img_4"
                android:textSize="25sp"
                android:textColor="#fff"
                android:drawablePadding="20sp"
                android:gravity="center_vertical"
                android:layout_width="match_parent"
                android:text="QQ position"
                android:layout_height="match_parent" />
        </RelativeLayout>
    </LinearLayout>
</RelativeLayout> 

Step 2 New SliddingMenu class inherits HorizontaScrollview

package com.liang.boke.QQSliding;

import android.content.Context;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.view.WindowManager;
import android.widget.HorizontalScrollView;
import android.widget.LinearLayout;

/**
 * Created by Liang wants to think about on 2017/12/5.
 */

public class SliddingMenu extends HorizontalScrollView{


    private   int mScreenWidth; //Width of screen
    private int mRightPadding = 150 ;     //Right margin
    private ViewGroup mMenu;
    private ViewGroup mMain;
    private int mMenuWidth;

    public SliddingMenu(Context context) {
        this(context,null);
    }

    public SliddingMenu(Context context, AttributeSet attrs) {
        this(context, attrs,0);
    }

    public SliddingMenu(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        //The first step is to get the width of the screen
       WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);  //Get Windows Manager
        DisplayMetrics outMetrics = new DisplayMetrics();
        wm.getDefaultDisplay().getMetrics(outMetrics);
        mScreenWidth = outMetrics.widthPixels;
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        // Step 2 gets a view of menu and home page
        LinearLayout wrapper = (LinearLayout) getChildAt(0); //Get Subcontainers
        //Get menu
        mMenu = (ViewGroup) wrapper.getChildAt(0);
        //Get the home page
        mMain = (ViewGroup) wrapper.getChildAt(1);

        //The third step is to set the menu and the width of the main page (menu is a certain distance from the right by default)
        mMenuWidth = mScreenWidth - mRightPadding;   //Calculate menu width = screen width-right margin
        mMenu.getLayoutParams().width = mMenuWidth;
        mMain.getLayoutParams().width = mScreenWidth ;  //The width of the home page is the width of the screen

        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        //Step 4 Bounce Action
        if(changed)
        {
            this.scrollTo(mMenuWidth,0);
        }

        super.onLayout(changed, l, t, r, b);
    }

    float downX ;
    @Override
    public boolean onTouchEvent(MotionEvent ev) {

        switch (ev.getAction())
        {
            case MotionEvent.ACTION_DOWN :
                //Record pressed coordinates
               downX =  ev.getX() ;
                break;
            case MotionEvent.ACTION_UP :
                float dx = ev.getX() - downX ; // Calculate Slide Gap
                if( dx < mScreenWidth / 3 )
                {// If the sliding distance is less than a third of the screen bounce back
                    this.smoothScrollTo(mMenuWidth,0);
                }
                else
                {
                    this.smoothScrollTo(0,0);
                }
               return true ;

                default: break;

        }

        return super.onTouchEvent(ev);
    }

    @Override
    protected void onScrollChanged(int l, int t, int oldl, int oldt) {
        //Step 5 Animate
        //Calculate the sliding percentage factor
        float factor = (float) l / mMenuWidth ;
           // 1. Panning
        float leftTranslate = (float) (mMenuWidth * factor * 0.6);
         mMenu.setTranslationX(leftTranslate);

           //2. Zoom Animation
        float leftScale = (float) (1 - factor * 0.4);
        mMenu.setScaleX(leftScale);
        mMenu.setScaleY(leftScale);

        float rightScale = (float) (0.8 + 0.2 * factor);
        mMain.setScaleX(rightScale);
        mMain.setScaleY(rightScale);

             //3. Transparent animation
        float alpha = (float) (1 - 0.2 * factor);
        mMenu.setAlpha(alpha);
        super.onScrollChanged(l, t, oldl, oldt);
    }
}

Source code has been uploaded and downloaded please click QQ Side Slide If you have a problem, add me Q 1915528523, or leave a message directly (slower)

Tags: Android xml encoding Attribute

Posted on Wed, 15 Jul 2020 10:31:38 -0400 by predator12341