博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
QQ左侧滑动显示
阅读量:4944 次
发布时间:2019-06-11

本文共 3504 字,大约阅读时间需要 11 分钟。

  对于新版的QQ界面,左侧增加了一个滑动效果,相信小伙伴们早已按耐不住激动的心情,这种效果是如何实现的呢?本篇我们就一起来探讨一二。既然是滑动效果这里就要使用到HorizontalScrollView类,一个水平滑动的效果。

  对于这个效果我们可以分为一个Item Menu和Layout,通过对Item Menu设置padding值来隐藏和显示左侧的Menu菜单。

  我们的Menu设计代码:

  我们的主Activity的Layout代码:

  我们自定义的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 LinearLayout mWapper;    private ViewGroup mMenu;    private ViewGroup mContent;    private int mScreenWidth;//屏幕的宽度    private int mMenuWidth;//设置Menu的宽度        //dp    private int mMenuRightPadding;    private boolean once = false;        /**     * 未使用自定义属性时调用此方法     * @param context     * @param attrs     */    public SlidingMenu(Context context, AttributeSet attrs) {        super(context, attrs);        WindowManager wm = (WindowManager) context.getSystemService(context.WINDOW_SERVICE);        DisplayMetrics outMetrics = new DisplayMetrics();        wm.getDefaultDisplay().getMetrics(outMetrics );        mScreenWidth = outMetrics.widthPixels;                //将dp转换为px        mMenuRightPadding = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 50, context.getResources().getDisplayMetrics());            }        /**     * 设置内部View的宽和高,以及自己的宽和高     */    @Override    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        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;        }            }    /**     * 设置子View的放置位置     * 通过设置偏移量来隐藏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);        }    }        /**     * 控制手指的滑动效果     */    @Override    public boolean onTouchEvent(MotionEvent ev) {        int action = ev.getAction();        switch (action) {        case MotionEvent.ACTION_UP:            int scrollx = getScrollX();//Menu左侧隐藏的区域宽度            if(scrollx >= mMenuWidth/2){                this.smoothScrollTo(mMenuWidth, 0);            }else{                this.smoothScrollTo(0, 0);            }            return true;        }        return super.onTouchEvent(ev);    }    }

  我们的主Activity:

public class MainActivity extends Activity {    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        requestWindowFeature(Window.FEATURE_NO_TITLE);//去除标题        setContentView(R.layout.activity_main);            }}

  效果图:

  

 

转载于:https://www.cnblogs.com/AndroidJotting/p/4469885.html

你可能感兴趣的文章