第3例：仿QQ滑动菜单

作者: 追梦小乐 | 来源:发表于2018-06-26 17:33 被阅读9次

核心思想知识点：
1）、自定义view的基本流程
2）、getScrollX()方法的理解以及使用

效果图如下

GIF.gif

功能实现过程

1、left_menu.xml（左侧菜单布局）

<?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:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="@drawable/left_title">

    </LinearLayout>
    <!--菜单部分-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="2"
        android:background="@drawable/left_bg">

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

            <Button
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:background="@drawable/btn_bg"
                android:drawableLeft="@drawable/img1"
                android:drawablePadding="10dp"
                android:gravity="center_vertical"
                android:paddingLeft="20dp"
                android:text="@string/text_1"
                android:textSize="18sp" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:background="@drawable/btn_bg"
                android:drawableLeft="@drawable/img2"
                android:drawablePadding="10dp"
                android:gravity="center_vertical"
                android:paddingLeft="20dp"
                android:text="@string/text_2"
                android:textSize="18sp" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:background="@drawable/btn_bg"
                android:drawableLeft="@drawable/img3"
                android:drawablePadding="10dp"
                android:gravity="center_vertical"
                android:paddingLeft="20dp"
                android:text="@string/text_3"
                android:textSize="18sp" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:background="@drawable/btn_bg"
                android:drawableLeft="@drawable/img4"
                android:drawablePadding="10dp"
                android:gravity="center_vertical"
                android:paddingLeft="20dp"
                android:text="@string/text_4"
                android:textSize="18sp" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:background="@drawable/btn_bg"
                android:drawableLeft="@drawable/img5"
                android:drawablePadding="10dp"
                android:gravity="center_vertical"
                android:paddingLeft="20dp"
                android:text="@string/text_5"
                android:textSize="18sp" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"

                android:background="@drawable/btn_bg"
                android:drawableLeft="@drawable/img6"
                android:drawablePadding="10dp"
                android:gravity="center_vertical"
                android:paddingLeft="20dp"
                android:text="@string/text_6"
                android:textSize="18sp" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:background="@drawable/btn_bg"
                android:drawableLeft="@drawable/img7"
                android:drawablePadding="10dp"
                android:gravity="center_vertical"
                android:paddingLeft="20dp"
                android:text="@string/text_7"
                android:textSize="18sp" />
        </LinearLayout>

    </LinearLayout>


</LinearLayout>

btn_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!--设置按钮默认显示的图片-->
    <item android:state_pressed="false" android:state_focused="false"
        android:drawable="@drawable/btn_white" />
    <!--设置按钮按下显示的图片-->
    <item android:state_pressed="true" android:drawable="@drawable/btn_gray"/>
    <!--设置按钮长按时显示的图片-->
    <item android:state_focused="true" android:drawable="@drawable/btn_gray"/>

</selector>

2、QQMenu.java（自定义HorizontalScrollView）

public class QQMenu extends HorizontalScrollView {

    private static final String TAG = QQMenu.class.getSimpleName();
    private LinearLayout mScrollView;            //定义横向滚动条布局
    private ViewGroup mMenu;                 //定义菜单区域
    private ViewGroup mContent;             //定义主显示区域
    private int mScreenWidth;              //定义屏幕宽度
    private int mMenuRightPadding = 50;   //定义菜单右边距为50dp
    private boolean call;                   //定义只设置一次自己和子视图的宽和高
    private int mMenuWidth;                 //定义菜单宽度

    public QQMenu(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;
        //将50dp边距转为像素值px
        mMenuRightPadding = (int) TypedValue.applyDimension(
                TypedValue.COMPLEX_UNIT_DIP, 50,
                context.getResources().getDisplayMetrics());

    }


    //设置滚动视图与子视图的宽和高
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        Log.d(TAG,"onMeasure==============");
        if (!call) {                                          //用于判断只设置一次尺寸
            mScrollView = (LinearLayout) getChildAt(0);          //获取滚动视图中的子布局
            mMenu = (ViewGroup) mScrollView.getChildAt(0);      //获取菜单区域
            mContent = (ViewGroup) mScrollView.getChildAt(1);   //获取主显示区域
            //设置菜单宽度
            mMenuWidth = mMenu.getLayoutParams().width = mScreenWidth
                    - mMenuRightPadding;
            //设置主显示区域宽度
            mContent.getLayoutParams().width = mScreenWidth;
            call = true;

            Log.d(TAG,"mScreenWidth========="+mScreenWidth);
            Log.d(TAG,"mMenuWidth========="+mMenuWidth);
        }
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }



    //设置偏移量让菜单隐藏
    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        super.onLayout(changed, l, t, r, b);
        if (changed) {
            Log.d(TAG,"onLayout==============");
            //默认的布局：隐藏菜单栏、显示主内容区域
            this.scrollTo(mMenuWidth, 0);    //滚动条向右移动，主显示区域向左移动
        }
    }



    //判断手指抬起时隐藏菜单还是显示菜单
    //理解getScrollX()方法的含义：https://blog.csdn.net/znouy/article/details/51338256
    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        int action = ev.getAction();
        switch (action) {
            case MotionEvent.ACTION_UP:
                Log.d(TAG,"onTouchEvent========MotionEvent.ACTION_UP=======");
                int scrollX = getScrollX();                 //隐藏左边的宽度
                Log.d(TAG,"scrollX========="+scrollX);
                Log.d(TAG,"mMenuWidth / 2========="+mMenuWidth / 2);
                if (scrollX >= mMenuWidth / 2) {             //如果隐藏左边的宽度大于菜单宽度的1/2时
                    this.smoothScrollTo(mMenuWidth, 0);        //隐藏菜单
                    Log.d(TAG,"隐藏菜单=============");
                } else {
                    this.smoothScrollTo(0, 0);              //显示菜单
                    Log.d(TAG,"显示菜单=============");
                }
                return true;
        }
        return super.onTouchEvent(ev);
    }

}

3、activity_main.xml（主布局文件）

<?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"
    tools:context="com.mingrisoft.qqmenu.MainActivity">
    <!--自定义横向滚动条-->
    <com.example.qqmenu.QQMenu
        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/bg_main">

            </LinearLayout>

        </LinearLayout>
    </com.example.qqmenu.QQMenu>
</RelativeLayout>

4、MainActivity.java

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

对getScrollX()的分析

结合上面代码的Log代码，注意看scrollX数值的变化，从而理解getScrollX()方法的含义

image.png

理解getScrollX()方法的参考文章

https://blog.csdn.net/znouy/article/details/51338256

第3例：仿QQ滑动菜单

效果图如下

功能实现过程

1、left_menu.xml（左侧菜单布局）

btn_bg.xml

2、QQMenu.java（自定义HorizontalScrollView）

3、activity_main.xml（主布局文件）

4、MainActivity.java

对getScrollX()的分析

理解getScrollX()方法的参考文章

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

android精彩编程案例系列