Android實現(xiàn)QQ側(cè)滑菜單效果

更新時間：2019年01月28日 10:38:11 作者：常利兵

這篇文章主要為大家詳細介紹了Android實現(xiàn)QQ側(cè)滑菜單效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下

QQ側(cè)滑菜單的Android實現(xiàn)代碼，供大家參考，具體內(nèi)容如下

實現(xiàn)邏輯

1.先寫出菜單頁面和主頁面的布局

2.創(chuàng)建一個類,繼承RelativeLayout,實現(xiàn)里面的onLayout

3.在主布局文件中添加子空間

4.在onLayout里面獲取子控件的寬和高,并對子控件的位置進行繪制

5.給子布局設(shè)置滑動事件,分別在手指落下\移動\抬起的時候,獲取手指的位置

6.在手指移動的過程中,對菜單頁面的移動距離進行限制,防止菜單頁面跑出指定的頁面

7.在手指抬起的時候,判定一下手指移動的距離,如果移動的距離大于菜單頁面寬度的一半,那就讓菜單彈出,否則就讓菜單回到默認的位置

8.針對菜單的彈出和收起,實現(xiàn)了一個漸變的過程,防止手指抬起的時候,菜單頁面會突然間到達指定的位置,這個功能的實現(xiàn)需要借助computeScroll方法

9.滑動沖突的處理,分別求出手指移動時,X和Y方向的偏移量,如果x方向的大于Y方向的,那就判定滑動事件是彈出和收起菜單,否則就判定為菜單頁面的內(nèi)部滑動

代碼文件

布局文件

菜單布局文件

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="240dp"
android:background="@mipmap/menu_bg"
android:layout_height="match_parent"
android:orientation="vertical">

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

  <TextView
    style="@style/menu_style"
    android:text="新聞"
    android:drawableLeft="@mipmap/tab_news" />
  <TextView
    style="@style/menu_style"
    android:text="訂閱"
    android:drawableLeft="@mipmap/tab_read" />
  <TextView
    style="@style/menu_style"
    android:text="跟帖"
    android:drawableLeft="@mipmap/tab_ties" />
  <TextView
    style="@style/menu_style"
    android:text="圖片"
    android:drawableLeft="@mipmap/tab_pics" />
  <TextView
    style="@style/menu_style"
    android:text="話題"
    android:drawableLeft="@mipmap/tab_ugc" />
  <TextView
    style="@style/menu_style"
    android:text="投票"
    android:drawableLeft="@mipmap/tab_vote" />
  <TextView
    style="@style/menu_style"
    android:text="本地"
    android:drawableLeft="@mipmap/tab_local" />
  <TextView
    style="@style/menu_style"
    android:text="聚合閱讀"
    android:drawableLeft="@mipmap/tab_focus" />

  <TextView
    style="@style/menu_style"
    android:text="聚合閱讀"
    android:drawableLeft="@mipmap/tab_focus" />

  <TextView
    style="@style/menu_style"
    android:text="聚合閱讀"
    android:drawableLeft="@mipmap/tab_focus" />

  <TextView
    style="@style/menu_style"
    android:text="聚合閱讀"
    android:drawableLeft="@mipmap/tab_focus" />

  <TextView
    style="@style/menu_style"
    android:text="聚合閱讀"
    android:drawableLeft="@mipmap/tab_focus" />

</LinearLayout>
</ScrollView>

主頁面布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<LinearLayout
  android:gravity="center_vertical"
  android:background="@mipmap/top_bar_bg"
  android:orientation="horizontal"
  android:layout_width="match_parent"
  android:layout_height="wrap_content">
  <ImageButton
    android:background="@null"
    android:id="@+id/ib_back"
    android:src="@mipmap/main_back"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />
  <ImageView
    android:src="@mipmap/top_bar_divider"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

  <TextView
    android:layout_weight="1"
    android:gravity="center"
    android:text="黑馬新聞"
    android:textSize="20sp"
    android:textColor="#fff"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

</LinearLayout>
</LinearLayout>

主頁面布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_main"
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="com.example.a1_.MainActivity">

<com.example.a1_.SlidingMenu
  android:id="@+id/slidingmenu"
  android:layout_width="match_parent"
  android:layout_height="match_parent">
  <include layout="@layout/menu"/>
  <include layout="@layout/main"/>
</com.example.a1_.SlidingMenu>
</RelativeLayout>

自定義布局

package com.example.a1_;

import android.content.Context;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.widget.RelativeLayout;
import android.widget.Scroller;

/**
 * Created by Administrator on 2017.05.29.0029.
 */

public class SlidingMenu extends RelativeLayout {

private float downX;
private int destance;
private int menuWidth;
private int endx;
private int dx;
private final Scroller scroller;
private float downY;
private int dy;

public SlidingMenu(Context context, AttributeSet attrs) {
  super(context, attrs);
  //創(chuàng)建Scroller對象
  scroller = new Scroller(context);
}

@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
  //獲取子控件
  View menu = getChildAt(0);
  View main = getChildAt(1);
  //獲取菜單布局的寬度
  menuWidth = menu.getMeasuredWidth();
  //把菜單布局布置在屏幕左側(cè)
  menu.layout(-menuWidth,t,0,b);
  //主頁面使用默認的位置就可以
  main.layout(l,t,r,b);
}

//給布局添加一個touch事件

@Override
public boolean onTouchEvent(MotionEvent event) {
  switch (event.getAction()){
    case MotionEvent.ACTION_DOWN:
      //當(dāng)手指按下時,記錄一下手指的位置
      downX = event.getX();
      break;
    case MotionEvent.ACTION_MOVE:
      //當(dāng)手指移動的時候,記錄移動的距離
      destance = (int) (event.getX()- downX+endx);
      //對手指滑動的時候,頁面移動做出限制
      if (destance>menuWidth){
        destance = menuWidth;
      }else if (destance<0){
        destance = 0;
      }
      scrollTo(-destance,0);
      break;
    case MotionEvent.ACTION_UP:
      //當(dāng)手指離開屏幕的時候,記錄菜單的位置,根據(jù)情況進行判定
      if (destance<menuWidth/2){
        endx = 0;
      }else {
        endx = menuWidth;
      }
      int startX = destance;
      //計算偏移量
      dx = endx-destance;
      scroller.startScroll(startX,0,dx,0,Math.abs(dx)*10);
      invalidate();
      break;
  }
  return true;
}

//重寫computeScroll
@Override
public void computeScroll() {
  if (scroller.computeScrollOffset()){
    int currx = scroller.getCurrX();
    scrollTo(-currx,0);
    invalidate();
  }
}

//處理滑動沖突
@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
  switch (ev.getAction()){
    case MotionEvent.ACTION_DOWN:
      //獲取當(dāng)前點擊的位置
      downX = ev.getX();
      downY = ev.getY();
      break;
    case MotionEvent.ACTION_MOVE:
      //獲取x和y方向的偏移量
      dx = (int) (ev.getX()-downX);
      dy = (int) (ev.getY() - downY);
      //判斷是x方向偏移的多還是y方向偏移得多
      if (Math.abs(dx)>Math.abs(dy)){
        //攔截move事件
        return true;
      }
      break;
  }
  return super.onInterceptTouchEvent(ev);
}

//判斷當(dāng)前的菜單狀態(tài)是打開還是關(guān)閉的
public void switchMenu(){
  int startX = 0;
  if (endx == 0){
    endx = menuWidth;
  }else {
    endx = 0;
    startX = menuWidth;
  }
  //設(shè)置偏移量
  int dx = endx-startX;
  scroller.startScroll(startX,0,dx,0,Math.abs(dx)*10);
  invalidate();
}
}

主頁面代碼

package com.example.a1_;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageButton;

public class MainActivity extends AppCompatActivity {
private SlidingMenu slidingMenu;

@Override
protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  //初始化控件
  ImageButton imageButton = (ImageButton) findViewById(R.id.ib_back);
  slidingMenu = (SlidingMenu) findViewById(R.id.slidingmenu);

  //設(shè)置點擊事件
  imageButton.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
      slidingMenu.switchMenu();
    }
  });
}
}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。