慕课网QQ侧滑界面一

最新推荐文章于 2018-09-22 15:44:51 发布

伟衙内

最新推荐文章于 2018-09-22 15:44:51 发布

阅读量742

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/lw18751836671/article/details/40212371

版权

前端专栏收录该内容

21 篇文章 1 订阅

订阅专栏

1. QQ侧滑原理(第一种)：

HorizontalScorllView

如图，

中间黑色的是手机屏幕，左边绿色的是手机的Menu，右边紫色的是手机的Content，在HorizontalScorllView中，当一开始是可以是手机的Menu在手机屏幕中，也就是黑色区域，如果向左滑动手机屏幕则紫色区域被拖进手机屏幕，

用HorizontalScorllView的好处是当有ListView时不用判断滑动的方向，我们只需要判断滑动的偏移量，如果偏移量足够大则另一半区域拖入，否则不拖入。

而滑动的监听为：OnTouchEvent

蓝色的是手机屏幕即我们看到的区域，而Menu，Content都在绿色的区域，我们的滑动其实就是将绿色的区域左右移动

1. 代码区域：

1. res/left_menu.xml

 <?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"
    android:background="@drawable/img_frame_background" >

    <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="wrap_content" >

            <ImageView
                android:id="@+id/img01"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_marginLeft="20dp"
                android:layout_marginTop="20dp"
                android:src="@drawable/img_1" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_marginLeft="20dp"
                android:layout_toRightOf="@id/img01"
                android:text="first item"
                android:textColor="#fff"
                android:textSize="20sp" />
        </RelativeLayout>

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content" >

            <ImageView
                android:id="@+id/img02"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_marginLeft="20dp"
                android:layout_marginTop="20dp"
                android:src="@drawable/img_2" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_marginLeft="20dp"
                android:layout_toRightOf="@id/img02"
                android:text="second item"
                android:textColor="#fff"
                android:textSize="20sp" />
        </RelativeLayout>

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content" >

            <ImageView
                android:id="@+id/img03"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_marginLeft="20dp"
                android:layout_marginTop="20dp"
                android:src="@drawable/img_3" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_marginLeft="20dp"
                android:layout_toRightOf="@id/img03"
                android:text="third item"
                android:textColor="#fff"
                android:textSize="20sp" />
        </RelativeLayout>

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content" >

            <ImageView
                android:id="@+id/img04"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_marginLeft="20dp"
                android:layout_marginTop="20dp"
                android:src="@drawable/img_4" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_marginLeft="20dp"
                android:layout_toRightOf="@id/img04"
                android:text="forth item"
                android:textColor="#fff"
                android:textSize="20sp" />
        </RelativeLayout>

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content" >

            <ImageView
                android:id="@+id/img05"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_marginLeft="20dp"
                android:layout_marginTop="20dp"
                android:src="@drawable/img_5" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_marginLeft="20dp"
                android:layout_toRightOf="@id/img05"
                android:text="fifth item"
                android:textColor="#fff"
                android:textSize="20sp" />
        </RelativeLayout>
    </LinearLayout>

</RelativeLayout>

界面效果如下所示：

1. res/activity_main.xml

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

    <com.example.customview.CustomHorizontalScorllView这个是下面的自定义组件，为了显现滑动效果
        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_menuxml" />

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@drawable/qq" >
            </LinearLayout>
        </LinearLayout>
    </ com.example.customview.CustomHorizontalScorllView >
</RelativeLayout>

1. 自定义的HorizontalScrollView：

 package com.example.customview;

import android.app.Notification.Action;
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 CustomHorizontalView extends HorizontalScrollView {

	private int mScreenWidth;
	private int mRightPadding = 50;// 单位为dp
	private int mMenuWidth;// 菜单的宽度

	private LinearLayout mWrapper = null;
	private ViewGroup mMenu = null;
	private ViewGroup mContent = null;

	private boolean once = false;// 指标，设置onMeasure方法中的设置宽高只设置一次

	public CustomHorizontalView(Context context, AttributeSet attrs) {
		super(context, attrs);
		// TODO Auto-generated constructor stub
		WindowManager wm = (WindowManager) context
				.getSystemService(Context.WINDOW_SERVICE);
		DisplayMetrics metrics = new DisplayMetrics();
		wm.getDefaultDisplay().getMetrics(metrics);
		this.mScreenWidth = metrics.widthPixels;

		// 将dp转化为px的单位
		this.mRightPadding = (int) TypedValue.applyDimension(
				TypedValue.COMPLEX_UNIT_DIP, 50, context.getResources()
						.getDisplayMetrics());
	}

	/**
	 * 设置子View的宽高 设置自己的宽高
	 */
	@Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
		// TODO Auto-generated method stub
		if (!once) {
			this.mWrapper = (LinearLayout) getChildAt(0);// 得到XML中HorizontalScrollView中的第一个LinearLayout
			this.mMenu = (ViewGroup) this.mWrapper.getChildAt(0);// 到到上面LinearLayout中的第一个布局即include的那个
			this.mContent = (ViewGroup) this.mWrapper.getChildAt(1);// 得到上面的第二个布局也就是XML中的LinearLayout那个
			this.mMenuWidth = this.mMenu.getLayoutParams().width = this.mScreenWidth
					- this.mRightPadding;
			this.mContent.getLayoutParams().width = this.mScreenWidth;
			once = true;
		}
		super.onMeasure(widthMeasureSpec, heightMeasureSpec);
	}
	
	/**
	 * 通过设置偏移量使Menu隐藏或出现
	 */
	@Override
	protected void onLayout(boolean changed, int l, int t, int r, int b) {
		// TODO Auto-generated method stub
		super.onLayout(changed, l, t, r, b);
		if(changed)
		{
			this.scrollTo(this.mMenuWidth, 0);//通过此方法(滚动到mMenuWidth，0 这个坐标)使Menu隐藏
		}
	}
	
	@Override
	public boolean onTouchEvent(MotionEvent ev) {
		// TODO Auto-generated method stub
		int action = ev.getAction();//通过这个得知用户的动作
		switch(action)
		{
		case MotionEvent.ACTION_UP:
			int scrollX = getScrollX();//此处为Menu隐藏的在手机屏幕可见区域外的区域,即隐藏在左边的区域
			if(scrollX>=this.mMenuWidth/2)
			{
				this.smoothScrollTo(this.mMenuWidth, 0);//继续隐藏左边的Menu区域
			}
			else
			{
				this.smoothScrollTo(0, 0);
			}
			return true;
		}
		return super.onTouchEvent(ev);
	}

}

1. 用户可调滑动边距的设置（ViewGroup支持自定义属性）

1. 编写values/attr.xml文件：

 <?xml version="1.0" encoding="utf-8"?>
<resources>

    <attr name="rightPadding" format="dimension"></attr>

    <declare-styleable name="CustomHorizontalScorllView"有文章说的name要和自定义组件的名称一样（但是我实验时即使name 和自定义组件不一样也可以）>
        <attr name="rightPadding"></attr>
    </declare-styleable>

</resources>

1. 在activity_main.xml文件中自定义命名空间：红色部分

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
   <span style="color:#ff0000;"> xmlns:padding=http://schemas.android.com/apk/res/com.example.qqslidmenu  </span>  其中padding是随便写的，而com.example.qqslidmenu是应用所在的包名即MainActivity的包名
<com.example.customview.CustomHorizontalView
        android:layout_width="match_parent"
        android:layout_height="match_parent" 
        padding:rightPadding="100">此处是使用上面自定义属性时的

1. 在CustomHorizontalView中：

我们前面编写的构造函数： public CustomHorizontalView(Contextcontext, AttributeSetattrs)这是在未自定义属性时调用的，现在我们自定义了属性，所以就不会调用了

2. CustomHorizontalScrollView类的改动如下：

/**
	 * 未自定义属性时调用
	 * 
	 * @param context
	 * @param attrs
	 */
	public CustomHorizontalView(Context context, AttributeSet attrs) {
		this(context, attrs, 0);
		// TODO Auto-generated constructor stub

	}

	/**
	 * 当使用自定义属性时会调用此构造方法
	 * 
	 * @param context
	 * @param attrs
	 * @param defStyle
	 */
	public CustomHorizontalView(Context context, AttributeSet attrs,
			int defStyle) {
		super(context, attrs, defStyle);
		// TODO Auto-generated constructor stub

		TypedArray a = context.getTheme().obtainStyledAttributes(attrs,
				R.styleable.CustomHorizontalView, defStyle, 0);此处是获取自定义XML文件的数组，得到用户自定义的所有属性
		int n = a.getIndexCount();//得到属性（数组）的数目 
		for(int i=0;i<n;i++)
		{
			int attr = a.getIndex(i);
			switch(attr)
			{
			case R.styleable.CustomHorizontalView_rightPadding:
				this.mRightPadding = a.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(
				TypedValue.COMPLEX_UNIT_DIP, 50, context.getResources()
						.getDisplayMetrics()));//后面的参数是当用户没有自定义属性时的默认值
				break;
			}
		}
		a.recycle();//释放

		WindowManager wm = (WindowManager) context
				.getSystemService(Context.WINDOW_SERVICE);
		DisplayMetrics metrics = new DisplayMetrics();
		wm.getDefaultDisplay().getMetrics(metrics);
		this.mScreenWidth = metrics.widthPixels;

//		// 将dp转化为px的单位
//		this.mRightPadding = (int) TypedValue.applyDimension(
//				TypedValue.COMPLEX_UNIT_DIP, 50, context.getResources()
//						.getDisplayMetrics());由于在此之前已经设置了默认值所以此处不需要再设置一次了
	}

	/**
	 * 在代码中new一个对象时调用
	 * 
	 * @param context
	 */
	public CustomHorizontalView(Context context) {
		this(context, null, 0);
		// TODO Auto-generated constructor stub
	}

在滑动的Content中添加一个切换屏幕的点击按钮

avtivity_main.xml中：

 <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@drawable/qq" >
                <Button 
                    android:id="@+id/chang_menu_button"
                    android:onClick="toggleMenu"—>Button的按钮事件
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="change menu"/>
            </LinearLayout>
在MainActivity类中：
public class MainActivity extends ActionBarActivity {
	private CustomHorizontalView customview = null;
	

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		super.requestWindowFeature(Window.FEATURE_NO_TITLE);
		super.setContentView(R.layout.activity_main);
		this.customview = (CustomHorizontalView) super
				.findViewById(R.id.customHorizontalView);这个是自定义组件的在avtivity_main.xml中的id
	}

	/**
	 * 此处是Button的监听的事件
	 */
	public void toggleMenu(View view) {
		this.customview.toggle();
	}

}

1. 抽屉式侧滑:
原理：通过菜单的偏移量来改变菜单显示的多少
mMenuWidth-偏移量
需要用到属性动画TranslationX
getScrollX中：一开始Menu隐藏中：所以它的值最大为mMenuWidth
当Menu滑出时它的值变小直到为0
2. 步骤：
在CustomHorizontalView类中加入如下代码用于监听滚动事件：同时为了设置属性动画需要引入nineoldandroids-2.4.0.jar这个包，这是为了兼容Android3.0一下的版本（如果是Android3.0以上的版本则不用这个包）

/**
	 * 当滚动发生时用于监听滚动的，在滚动的全过程中都监听
	 */
	@Override
	protected void onScrollChanged(int l, int t, int oldl, int oldt) {
		// TODO Auto-generated method stub
		super.onScrollChanged(l, t, oldl, oldt);

		// 这里l的初始值为mMenuWidth，越右拖l越小
		float scale = l * 1.0f / this.mMenuWidth;// 此scale的值从1~0变化
		// 调用属性动画，设置TranslationX
		ViewHelper.setTranslationX(mMenu, this.mMenuWidth * scale);
	}

个人理解如下：

首先是初始化当scale的值为1的时候：

这个绿色的矩形就是：

这个界面。

蓝色是

这个界面，初始时，我们设定（ViewHelper.setTranslationX(mMenu,this.mMenuWidth *scale);

），此时设置的是偏移量，mMenuWidth是屏幕的宽度，则此时绿色的矩形就会由原本的在手机屏幕外面偏移到手机屏幕内，效果就是在蓝色界面的下方。但是随着滑动蓝色的界面会往屏幕右边滑去，绿色的界面本来也会随着蓝色界面往右边滑去，但是我们此时设定绿色界面的偏移量慢慢的变小，效果便是绿色的界面慢慢的在原地不动，而蓝色的界面慢慢的从屏幕中离开露出底部的绿色界面

下面黑色的代表手机屏幕，绿色的是那个界面）

1. 这种效果图的侧滑界面制作：

区别1；内容区域1.0~0.7缩放效果

scale的值： 1.0~0.0

所以运算得到内容区域值：0.7+0.3*scale

区别2 ：菜单的偏移量需要修改

区别3：菜单的显示时有缩放以及透明度变化

缩放：0.7~1.0

1.0- scale*0.3

透明度： 0.6~1.0

0.6+0.4*（1-scale）

2. 添加代码如下：

/**
	 * 当滚动发生时用于监听滚动的，在滚动的全过程中都监听
	 */
	@Override
	protected void onScrollChanged(int l, int t, int oldl, int oldt) {
		// TODO Auto-generated method stub
		super.onScrollChanged(l, t, oldl, oldt);

		// 这里l的初始值为mMenuWidth，越右拖l越小
		float scale = l * 1.0f / this.mMenuWidth;// 此scale的值从1~0变化

		/**
		 * 区别1；内容区域1.0~0.7缩放效果 scale的值： 1.0~0.0 所以运算得到内容区域值：0.7+0.3*scale 区别2
		 * ：菜单的偏移量需要修改 区别3：菜单的显示时有缩放以及透明度变化 缩放：0.7~1.0 1.0- scale*0.3 透明度：
		 * 0.6~1.0 0.6+0.4*（1-scale）
		 */
		float rightscale = 0.7f + 0.3f * scale;
		float leftscale = 1.0f-scale*0.3f;
		float leftAlpha = 0.6f+0.4f*(1-scale);
		// 调用属性动画，设置TranslationX
		ViewHelper.setTranslationX(mMenu, this.mMenuWidth * scale);// mMenu是偏移的对象，后面的是偏移的值
		ViewHelper.setScaleX(this.mMenu, leftscale);
		ViewHelper.setScaleY(this.mMenu, leftscale);
		ViewHelper.setAlpha(this.mMenu, leftAlpha);
		// 设置右侧界面的缩放中心点，设置为在左边边框的中点
		ViewHelper.setPivotX(this.mContent, 0);
		ViewHelper.setPivotY(this.mContent, this.mContent.getHeight() / 2);
		ViewHelper.setScaleX(this.mContent, rightscale);
		ViewHelper.setScaleY(this.mContent, rightscale);
	}

注：以上笔记是通过观看慕课网视频所做

伟衙内

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
慕课网QQ侧滑界面一

1. QQ侧滑原理(第一种)：HorizontalScorllView如图，中间黑色的是手机屏幕，左边绿色的是手机的Menu，右边紫色的是手机的Content，在HorizontalScorllView中，当一开始是可以是手机的Menu在手机屏幕中，也就是黑色区域，如果向左滑动手机屏幕则紫色区域被拖进手机屏幕，用HorizontalScorllView的好处是当有ListView
复制链接

扫一扫

专栏目录