安卓初学之qq侧滑功能的实现

最新推荐文章于 2021-05-27 09:57:03 发布

置顶 Traunig

最新推荐文章于 2021-05-27 09:57:03 发布

阅读量568

点赞数

分类专栏：安卓开发

本文链接：https://blog.csdn.net/Traunig/article/details/44493533

版权

安卓开发专栏收录该内容

1 篇文章 0 订阅

订阅专栏

安卓初学之qq侧滑功能的实现

作为一个安卓初学者，今天看了慕课网的仿照qq的侧滑功能的相关视频，觉得感触很深。特地把一些学到的知识写出来和大家分享一下~~

（一）需要了解的一些小知识

①ViewGroup是安卓里的一个类，通过查询安卓的api文档得知，它继承自android.view.View，然后呢大家所熟悉的FramLayout，GridLayout,LinearLayout,RelativeLayout这些布局都是从它继承下来的。
②实现qq的功能需要引入一个第三方的jar包，名字叫做nineoldandroids，大家百度一下，很容易就可以找到地方下载。

（二）实现的大概逻辑

①最主要的布局就是HorizontalScrollView，隐藏掉它的滚动条，然后对其进行自定义。
②在HorizontalScrollView下有俩个大的布局，一个布局在就是左边那个滑出来的menu菜单，可以通过LinearLayout或者RelativeLayout等任意布局实现。不过呢我建议还是通过RelativeLayout里面套一个LinearLayout的方式来进行实现，把头像，设置和夜间模式调到LinearLayout的外边，LinearLayout里面是N个RelativeLayout用于放在图标和Textview。

（三）相关的布局代码文件

这个是滑出来的布局

<?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="wrap_content"
        android:layout_centerInParent="true"
        android:orientation="vertical" >

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="50dp" >

            <ImageButton
                android:id="@+id/imageButton1"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:layout_centerVertical="true"
                android:layout_marginLeft="20dp"
                android:background="@drawable/img_1" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_marginLeft="20dp"
                android:layout_toRightOf="@+id/imageButton1"
                android:text="这是第一个"
                android:textSize="20sp" />
        </RelativeLayout>

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="50dp" >

            <ImageButton
                android:id="@+id/imageButton2"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:layout_centerVertical="true"
                android:layout_marginLeft="20dp"
                android:background="@drawable/img_1" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_marginLeft="20dp"
                android:layout_toRightOf="@+id/imageButton2"
                android:text="这是第一个"
                android:textSize="20sp" />
        </RelativeLayout>

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="50dp" >

            <ImageButton
                android:id="@+id/imageButton3"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:layout_centerVertical="true"
                android:layout_marginLeft="20dp"
                android:background="@drawable/img_1" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_marginLeft="20dp"
                android:layout_toRightOf="@+id/imageButton3"
                android:text="这是第一个"
                android:textSize="20sp" />
        </RelativeLayout>

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="50dp" >

            <ImageButton
                android:id="@+id/imageButton4"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:layout_centerVertical="true"
                android:layout_marginLeft="20dp"
                android:background="@drawable/img_1" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_marginLeft="20dp"
                android:layout_toRightOf="@+id/imageButton4"
                android:text="这是第一个"
                android:textSize="20sp" />
        </RelativeLayout>

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="50dp" >

            <ImageButton
                android:id="@+id/imageButton5"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:layout_centerVertical="true"
                android:layout_marginLeft="20dp"
                android:background="@drawable/img_1" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_marginLeft="20dp"
                android:layout_toRightOf="@+id/imageButton5"
                android:text="这是第一个"
                android:textSize="20sp" />
        </RelativeLayout>
    </LinearLayout>

</RelativeLayout>

这个是主布局，主布局里面包含了滑出来的布局
在此呢，我对HorizontalScrollView进行了自定义，自定的相关代码就保存在com.icebreaker.qzuniversityhelper.view.SlidingMenu下。

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/img_frame_background" >

    <com.icebreaker.qzuniversityhelper.view.SlidingMenu
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="none" >

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

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

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:background="@drawable/qq"
                android:orientation="vertical" >
            </LinearLayout>
        </LinearLayout>
    </com.icebreaker.qzuniversityhelper.view.SlidingMenu>

</RelativeLayout>

（四）实现功能的代码

首先提醒一下大家，需要导入nineoldandroids.jar包，不然ViewHelper的相关代码会出错

这是实现自定义HorizontalScrollView 的相关代码，也是重点内容
实现要重写构造方法，然后重写onMeasure，onLayout和onTouch事件，
添加了这段代码之后就有了侧滑的效果。

package com.icebreaker.qzuniversityhelper.view;

import com.nineoldandroids.view.ViewHelper;

import android.content.Context;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
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 mConten;

    private int mMenuWidth;
    private int mScreenWidth;
    private int mMenuRightPadding;
    private boolean once = true;
    /*
     * 未使用自定义属性时调用
     */
    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;
        mMenuRightPadding = mScreenWidth/4;

    }

    /*
     * 决定内部子view的宽和高以及自己的宽和高
     * (non-Javadoc)
     * @see android.widget.HorizontalScrollView#onMeasure(int, int)
     */
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        if(once){
            mWapper = (LinearLayout)getChildAt(0);
            mMenu = (ViewGroup)mWapper.getChildAt(0);
            mConten = (ViewGroup)mWapper.getChildAt(1);
            mMenuWidth = mMenu .getLayoutParams().width = mScreenWidth -mMenuRightPadding;
            mConten.getLayoutParams().width = mScreenWidth;

            once = !once;
        }
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

    /*
     * 决定子view放置的位置
     * (non-Javadoc)
     * @see android.widget.HorizontalScrollView#onLayout(boolean, int, int, int, int)
     */
    @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();

        if(action == MotionEvent.ACTION_UP){
            int scrollX = getScrollX();
            if(scrollX >= mMenuWidth / 2){
                smoothScrollTo(mMenuWidth, 0);
            }
            else{
                smoothScrollTo(0, 0);
            }
            return true;
        }

        return super.onTouchEvent(ev);
    }
}

这段代码就是实现类似qq的的抽屉的效果的代码~~这里需要引入前面提到那个jar包，
不然这段代码就会出错

    @Override
    protected void onScrollChanged(int l, int t, int oldl, int oldt) {
        super.onScrollChanged(l, t, oldl, oldt);
        //调用属性动画，设置TranslationX
        float scale = 1.0f * l / mMenuWidth;//0~1
        float leftScale = 1.0f - scale * 0.2f;

        float leftAlpa = 0.6f + 0.4f * (1 - scale);

        ViewHelper.setTranslationX(mMenu, scale * mMenuWidth * 0.7f);

        float rightScale = 0.7f+0.3f*scale;
        ViewHelper.setScaleX(mMenu, leftScale);
        ViewHelper.setScaleY(mMenu, leftScale);
        ViewHelper.setAlpha(mMenu, leftAlpa);

        ViewHelper.setPivotX(mConten, 0);
        ViewHelper.setPivotY(mConten, mConten.getHeight()/2);
        ViewHelper.setScaleX(mConten, rightScale);
        ViewHelper.setScaleY(mConten, rightScale);
    }