Android imitiert den seitlichen Gleitschnittstelleneffekt von QQ5.0 basierend auf ViewDragHelper

Es gibt viele Möglichkeiten, den seitlichen Gleiteffekt in QQ5.0 zu implementieren. Heute verwenden wir ViewDragHelper, um ihn zu implementieren.

Zuerst das Rendering:

① Das benutzerdefinierte Steuerelement SlidingMenu erbt FrameLayout, und die über FrameLayout platzierten Layouts werden übereinander geschichtet getChildAt( ) kann problemlos jede Ebene abrufen und dann Änderungen in diesem Layout steuern.

public class SlidingMenu extends FrameLayout {
 
 private ViewDragHelper mViewDragHelper;
 
 private int mHeight;// 当前控件的高度
 private int mWidhth;// 当前控件的宽度
 private int mRange; // 菜单移动的距离
 
 private ViewGroup mMenu;// 菜单内容
 private ViewGroup mContent; // 主页面内容
 
 private boolean isOpen = false;// 判断是否打开菜单
 
 public SlidingMenu(Context context) {
  this(context, null);
 }
 
 public SlidingMenu(Context context, AttributeSet attrs) {
  this(context, attrs, 0);
 }
 
 public SlidingMenu(Context context, AttributeSet attrs, int defStyleAttr) {
  super(context, attrs, defStyleAttr);
 
  // 初始化ViewDragHelper
  mViewDragHelper = ViewDragHelper.create(this, callback);
 }
}

②Als nächstes verwenden wir unser benutzerdefiniertes SlidingMenu in der Layoutdatei. Entsprechend dem Layout implementieren wir SlidingMenu Schritt für Schritt.

<?xml version="1.0" encoding="utf-8"?>
<com.yitong.myslidingmenu2.view.SlidingMenu
 xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 android:id="@+id/main_slidingMenu"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:background="@mipmap/bg"
 android:orientation="horizontal"
 tools:context="com.yitong.myslidingmenu2.MainActivity">
 
 <include layout="@layout/left_menu"/>
 
 <LinearLayout
  android:id="@+id/main_content"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:background="@mipmap/qq"
  android:orientation="horizontal">
 
  <Button
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:onClick="click"
   android:text="切换菜单"/>
 
 </LinearLayout>
</com.yitong.myslidingmenu2.view.SlidingMenu>

③Wenn Sie ein seitliches Gleiten erreichen möchten, passen Sie es an it Das definierte Steuerelement muss zwei Layouts enthalten, die in der onFinishInflate-Methode in unserem SlidingMenu beurteilt werden, und das Menü und die Hauptseite werden abgerufen. Rufen Sie die Breite und Höhe des Menü-Slideouts in onSizeChanged ab.

@Override
protected void onFinishInflate() {
  super.onFinishInflate();
 
  if (getChildCount() < 2) {
   throw new IllegalStateException("使用SlidingMenu中必须包含两个View");
  }
  if (!(getChildAt(0) instanceof ViewGroup && getChildAt(1) instanceof ViewGroup)) {
   throw new IllegalStateException("子View必须是ViewGroup的子类");
  }
 
  mMenu = (ViewGroup) getChildAt(0);
  mContent = (ViewGroup) getChildAt(1);
 }
 
 @Override
 protected void onSizeChanged(int w, int h, int oldw, int oldh) {
  super.onSizeChanged(w, h, oldw, oldh);
  mHeight = getMeasuredHeight();
  mWidhth = getMeasuredWidth();
  mRange = (int) (mWidhth * 0.8);
 }

④Wenn Sie ViewDragHelper verwenden, müssen Sie die Zeit des aktuellen Steuerelements zur Verarbeitung an ViewDragHelper übergeben.

@Override
public boolean onInterceptHoverEvent(MotionEvent event) {
 // 把触摸事件传递给ViewDragHelper
 return mViewDragHelper.shouldInterceptTouchEvent(event);
}
 
@Override
public boolean onTouchEvent(MotionEvent event) {
 try {
  mViewDragHelper.processTouchEvent(event);// 让ViewDrageHelper处理触摸事件
 } catch (Exception e) {
  e.printStackTrace();
 }
 return true;
}

⑤Schlüsselcode von ViewDragHelper

private Callback callback = new Callback() {
 
 @Override
 public boolean tryCaptureView(View child, int pointerId) {
  return true;// child：当前被拖拽的view.返回true表示当前view可以被拖拽
 }
 
 @Override
 public int getViewHorizontalDragRange(View child) {
  return mRange;// 返回拖拽的距离，并不对拖拽进行限制，决定了动画的执行速度
 }
 
 @Override
 public int clampViewPositionHorizontal(View child, int left, int dx) { // 根据建议值，修订水平方向移动的距离
  if (child == mContent) { // ①滑动主页面内容，当超过屏幕预留宽度时，不再滑动。②向左滑动不能为负
   left = fixContentSlidRange(left);
  }
  return left;
 }
 
 @Override
 public void onViewPositionChanged(View changedView, int left, int top, int dx, int dy) {// 当View的位置改变时调用，可以在此方法中添加一些View特效
  super.onViewPositionChanged(changedView, left, top, dx, dy);
  // 当我们滑动菜单内容时，保持菜单内容不动，转化为主页面内容移动
  int moveContentLeft = left;// 主页面内容左边的距离
  if (changedView == mMenu) {
   moveContentLeft = mContent.getLeft() + left;
   mMenu.layout(0, 0, mMenu.getHeight(), mMenu.getHeight());// 强制菜单不移动
  }
  moveContentLeft = fixContentSlidRange(moveContentLeft);
  mContent.layout(moveContentLeft, 0, moveContentLeft + mContent.getWidth(), mContent.getHeight());
 
  animShow(moveContentLeft);// 菜单打开时，一些动画
 
  invalidate();// 重绘界面，兼容低版本
 }
 
 @Override
 public void onViewReleased(View releasedChild, float xvel, float yvel) {// 当view松手时触发，处理自动平滑动画
  super.onViewReleased(releasedChild, xvel, yvel);
  if (xvel > 0) { // 水平速度+
   open();
  } else if (xvel == 0 && mContent.getLeft() > mRange / 2.0f) { // 手指在菜单滑出一半多时抬起
   open();
  } else {
   close();
  }
 }
};
 
 /**
 * 修订主页面的滑动距离
 */
 private int fixContentSlidRange(int left) {
  if (left > mRange) {
   return mRange;
  } else if (left < 0) {
   return 0;
  }
  return left;
 }
 
/** 伴随动画 */
private void animShow(int moveContentLeft) {
 float percent = moveContentLeft * 1.0f / mRange;// 0~1
 
 /**
  * 分析：
  *  菜单区域：位移动画，缩放动画，渐变动画
  *  内容区域：缩放动画
  *  背景区域：亮度变化
  */
 ViewHelper.setTranslationX(mMenu, evaluate(percent, -mRange / 1.2f, 0));// 位移动画
 ViewHelper.setScaleX(mMenu, evaluate(percent, 0.6f, 1.0f));// 缩放动画
 ViewHelper.setScaleY(mMenu, evaluate(percent, 0.6f, 1.0f));
 ViewHelper.setAlpha(mMenu, evaluate(percent, 0.1f, 1.0f));// 渐变动画
 
 ViewHelper.setPivotX(mContent, 0);// 缩放中心
 ViewHelper.setPivotY(mContent, mHeight / 2);
 ViewHelper.setScaleX(mContent, evaluate(percent, 1.0f, 0.9f));// 缩放动画
 ViewHelper.setScaleY(mContent, evaluate(percent, 1.0f, 0.9f));
 
 getBackground().setColorFilter((Integer)(colorEvaluate(percent, Color.BLACK, Color.TRANSPARENT)), PorterDuff.Mode.SRC_OVER);// 亮度变化
}
 
/** 估值器，根据开始数字和结束数字，随着百分比的变化得到一个数值，详情见FloatEvaluator */
 private Float evaluate(float fraction, Number startValue, Number endValue) {
  float startFloat = startValue.floatValue();
  return startFloat + fraction * (endValue.floatValue() - startFloat);
 }
 
 /** 颜色取值，根据初始颜色和结束颜色，随着百分的变化取出不同的颜色，详情见ArgbEvaluator */
 private Object colorEvaluate(float fraction, Object startValue, Object endValue) {
  int startInt = (Integer) startValue;
  int startA = (startInt >> 24) & 0xff;
  int startR = (startInt >> 16) & 0xff;
  int startG = (startInt >> 8) & 0xff;
  int startB = startInt & 0xff;
 
  int endInt = (Integer) endValue;
  int endA = (endInt >> 24) & 0xff;
  int endR = (endInt >> 16) & 0xff;
  int endG = (endInt >> 8) & 0xff;
  int endB = endInt & 0xff;
 
  return (int)((startA + (int)(fraction * (endA - startA))) << 24) |
    (int)((startR + (int)(fraction * (endR - startR))) << 16) |
    (int)((startG + (int)(fraction * (endG - startG))) << 8) |
    (int)((startB + (int)(fraction * (endB - startB))));
 }

⑥ Wir bieten eine Methode zum Öffnen/Schließen von Menüs, die Benutzer aufrufen können.

/** 菜单切换 */
public void toggle() {
 if(isOpen) {
  close();
 } else {
  open();
 }
}
 
/**
* 打开菜单
*/
private void open() {
 if (mViewDragHelper.smoothSlideViewTo(mContent, mRange, 0)) {// 判断主页面是否滑动到指定位置
  ViewCompat.postInvalidateOnAnimation(this);// 会触发computeScroll
 }
 isOpen = true;
}
 
/**
* 关闭菜单
*/
private void close() {
 if (mViewDragHelper.smoothSlideViewTo(mContent, 0, 0)) {// 判断主页面是否滑动到指定位置
  ViewCompat.postInvalidateOnAnimation(this);// 会触发computeScroll
 }
 isOpen = false;
}
 
@Override
public void computeScroll() {
 super.computeScroll();
 if (mViewDragHelper.continueSettling(true)) {// 持续执行动画，如果返回则表示动画还没有执行完
  ViewCompat.postInvalidateOnAnimation(this);
 }
}

=================== An diesem Punkt ist unser SlidingMenu definiert================ =====

Wir verwenden

public class MainActivity extends Activity {
 
 private SlidingMenu mSlidingMenu;
 
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  requestWindowFeature(Window.FEATURE_NO_TITLE);
  setContentView(R.layout.activity_main);
  initView();
 }
 
 private void initView() {
  mSlidingMenu = (SlidingMenu) findViewById(R.id.main_slidingMenu);
 }
 
 public void click(View view) {
  mSlidingMenu.toggle();
 }
}

in MainActivity. Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für alle hilfreich sein wird Unterstützen Sie die chinesische PHP-Website.

Weitere Android-basierte Artikel, die den QQ5.0-Side-Sliding-Interface-Effekt basierend auf ViewDragHelper imitieren, finden Sie auf der chinesischen PHP-Website!