`
ff20081528
  • 浏览: 85810 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

android仿腾讯安全管家首页抽屉效果

阅读更多
转载请说明出处
最近在做公司新产品的设计,看到腾讯安全管家首页的抽屉效果设计的挺不错,一方面可以讲经常使用的功能模块直接显示给用户,另一方面将用户不常用的功能模块隐藏起来,而这些功能模块的显示和隐藏可以通过一个抽屉组建实现。所以我们想将这个设计理念加入到我们的产品中。腾讯安全管家效果图如下:



虽然android 文档中向我们提供了一个叫SlidingDrawer的抽屉组建,但是这个组建的使用限制比较多,也实现不了我们想要的效果。故到网上搜了一会,也没看到有开发者写这样的组建。所以只能靠自己了,但是在网上还是看到了一下有价值的参考案例。
不费话了,直接上实现后的效果图:


下面是自定义组建的实现代码
import android.content.Context;
import android.os.AsyncTask;
import android.util.Log;
import android.view.GestureDetector;
import android.view.MotionEvent;
import android.view.View;
import android.widget.Button;
import android.widget.LinearLayout;

public class CustomSlidingDrawer extends LinearLayout implements GestureDetector.OnGestureListener, View.OnTouchListener{
	private final static String TAG = "CustomSlidingDrawer";
	
	private Button btnHandler;
	private LinearLayout container;
	private int mBottonMargin=0;
	private GestureDetector mGestureDetector;
	private boolean mIsScrolling=false;
	private float mScrollY;
	private int moveDistance;
	
	public CustomSlidingDrawer(Context context,View otherView,int width,int height, int hideDistance) {
		super(context);
		moveDistance = hideDistance;
		//定义手势识别
		mGestureDetector = new GestureDetector(context,this);
		mGestureDetector.setIsLongpressEnabled(false);
		
		//改变CustomSlidingDrawer附近组件的属性
		LayoutParams otherLP=(LayoutParams) otherView.getLayoutParams();
		//这一步很重要,要不组建不会显示
		otherLP.weight=1;
		otherView.setLayoutParams(otherLP);
		
		//设置CustomSlidingDrawer本身的属性
		LayoutParams lp=new LayoutParams(width, height);
		lp.bottomMargin = -moveDistance;
		mBottonMargin=Math.abs(lp.bottomMargin);
		this.setLayoutParams(lp);
		this.setOrientation(LinearLayout.VERTICAL);
		//this.setBackgroundColor(Color.BLUE);
		
		//设置Handler的属性
		btnHandler=new Button(context);
		btnHandler.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, 35));
		btnHandler.setOnTouchListener(this);
		this.addView(btnHandler);
		
		//设置Container的属性
		container=new LinearLayout(context);
		//container.setBackgroundColor(Color.GREEN);
		container.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT,
				LayoutParams.MATCH_PARENT));
		this.addView(container);
	}
	
	/**
	 * 把View放在CustomSlidingDrawer的Container
	 * @param v
	 */
	public void fillPanelContainer(View v)
	{
		container.addView(v);
	}
	
	/**
	 * 异步移动CustomSlidingDrawer
	 */
	class AsynMove extends AsyncTask<Integer, Integer, Void> {
		@Override
		protected Void doInBackground(Integer... params) {
			Log.e(TAG, "AsynMove doInBackground");
			int times;
			if (mBottonMargin % Math.abs(params[0]) == 0)// 整除
				times = mBottonMargin / Math.abs(params[0]);
			else
				// 有余数
				times = mBottonMargin / Math.abs(params[0]) + 1;
			for (int i = 0; i < times; i++) {
				publishProgress(params);
			}
			return null;
		}
		@Override
		protected void onProgressUpdate(Integer... params) {
			Log.e(TAG, "AsynMove onProgressUpdate");
			LayoutParams lp = (LayoutParams) CustomSlidingDrawer.this.getLayoutParams();
			if (params[0] < 0)
				lp.bottomMargin = Math.max(lp.bottomMargin + params[0],
						(-mBottonMargin));
			else
				lp.bottomMargin = Math.min(lp.bottomMargin + params[0], 0);
			CustomSlidingDrawer.this.setLayoutParams(lp);
		}
	}
	
	@Override
	public boolean onDown(MotionEvent e) {
		mScrollY=0;
		mIsScrolling=false;
		return false;
	}
	
	@Override
	public boolean onSingleTapUp(MotionEvent e) {
		LayoutParams lp = (LayoutParams) CustomSlidingDrawer.this.getLayoutParams();
		if (lp.bottomMargin < 0)
			new AsynMove().execute(new Integer[] { moveDistance });// 正数展开
		else if (lp.bottomMargin >= 0)
			new AsynMove().execute(new Integer[] { -moveDistance });// 负数收缩
		return false;
	}
	
	@Override
	public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX,
			float distanceY) {
		mIsScrolling=true;
		mScrollY+=distanceY;
		LayoutParams lp=(LayoutParams) CustomSlidingDrawer.this.getLayoutParams();
		if (lp.bottomMargin < -1 && mScrollY > 0) {//往上拖拉
			lp.bottomMargin = Math.min((lp.bottomMargin + (int) mScrollY),0);
			CustomSlidingDrawer.this.setLayoutParams(lp);
		} else if (lp.bottomMargin > -(mBottonMargin) && mScrollY < 0) {//往下拖拉
			lp.bottomMargin = Math.max((lp.bottomMargin + (int) mScrollY),-mBottonMargin);
			CustomSlidingDrawer.this.setLayoutParams(lp);
		}
		return false;
	}
	
	@Override
	public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
			float velocityY) {return false;}
	@Override
	public void onLongPress(MotionEvent e) {}
	@Override
	public void onShowPress(MotionEvent e) {}
	
	@Override
	public boolean onTouch(View v, MotionEvent event) {
		if(event.getAction()==MotionEvent.ACTION_UP && //onScroll时的ACTION_UP
				mIsScrolling==true)
		{
			LayoutParams lp=(LayoutParams) CustomSlidingDrawer.this.getLayoutParams();
			if (lp.bottomMargin >= (-mBottonMargin/2)) {//往上超过一半
				new AsynMove().execute(new Integer[] { moveDistance });// 正数展开
			} 
			else if (lp.bottomMargin < (-mBottonMargin/2)) {//往下拖拉
				new AsynMove().execute(new Integer[] { -moveDistance });// 负数收缩
			}
		}
		return mGestureDetector.onTouchEvent(event); 
	}
}


下面是demo的源码:
  • 大小: 74.2 KB
  • 大小: 71.1 KB
  • 大小: 51 KB
  • 大小: 52.2 KB
分享到:
评论

相关推荐

    Android仿腾讯视频启动页及广告页动画

    android仿腾讯视频启动页及广告页面动画效果实现

    WPF 仿腾讯电脑管家

    “WPF 仿腾讯电脑管家”项目展示了如何运用WPF、MVVM设计模式以及相关的UI设计原则,创建一个与电脑管家界面相似的应用。通过学习该项目,开发者可以掌握如何在WPF中实现自定义控件、使用阿里Iconfont图标、设计复杂...

    仿腾讯安全管家火箭发射的例子

    在Android开发领域,模仿腾讯安全管家的火箭发射特效是一个相当有趣的实践案例,它结合了动画、用户交互以及自定义视图等技术。这个例子旨在创建一个动态的效果,让用户能够通过拖动小火箭来触发火箭升空,然后击落...

    仿腾讯手机管家火箭发射

    【Android手机关键火箭】——仿腾讯手机管家火箭发射 在移动应用开发领域,尤其是在Android平台上,创新和用户体验一直是开发者关注的重点。"仿腾讯手机管家火箭发射"是一个有趣的案例,它展示了如何通过编程技术来...

    Android仿腾讯QQ侧滑菜单

    Android 利用ViewDragHelper实现的仿腾讯QQ侧滑菜单的实现

    Android 简易的自定义动画框架(3)高仿腾讯手机管家火箭动画

    请看博客文章: 【Android进阶】如何写一个很屌的动画(3)---高仿腾讯手机管家火箭动画,http://blog.csdn.net/scnuxisan225/article/details/50454948

    腾讯管家离线安装包.12.15版

    腾讯管家离线安装包.12.15版本. 适合没有外网环境的系统安装.

    VS2008做的仿腾讯手机管家程序

    "VS2008做的仿腾讯手机管家程序" 这个标题意味着这个项目是一个使用Visual Studio 2008开发的软件,它的设计灵感来源于腾讯的手机安全应用——腾讯手机管家。VS2008是微软推出的集成开发环境(IDE),它支持C++, C#,...

    腾讯手机管家(PC版) For Android.rar

    综上所述,腾讯手机管家(PC版)For Android是一款全方位的手机管理工具,它集刷机助手、数据备份、应用管理、安全防护等多种功能于一身,为安卓用户提供了全面的手机维护解决方案。通过与电脑的连接,用户可以更...

    仿腾讯手机管家界面MFC源码

    【标题】"仿腾讯手机管家界面MFC源码"是一个示例项目,它展示了如何使用Microsoft Foundation Class (MFC)库来创建一个类似腾讯手机管家的用户界面。MFC是微软提供的一套C++类库,它简化了Windows应用程序的开发,...

    Android 仿腾讯通讯录管理-IT计算机-毕业设计.zip

    【Android 仿腾讯通讯录管理】是一个典型的Android应用开发项目,旨在帮助学生和开发者了解如何在Android平台上构建一个类似于腾讯手机通讯录的应用。这个毕业设计的源码提供了丰富的学习资源,涵盖了Android应用...

    Android 开发之 仿腾讯视频全部频道 RecyclerView 拖拽 + 固定首个

    本文将深入探讨如何在Android应用中实现一个类似腾讯视频的全频道RecyclerView,具备拖拽功能以及固定首个元素的效果。我们将涵盖以下几个关键知识点: 1. RecyclerView基本使用: RecyclerView是Android支持库中...

    腾讯电脑管家离线安装包.13.5版

    腾讯电脑管家离线安装包.13.5.20525.234 版本. 适合没有外网环境的系统安装. 功能新特性: 【换肤功能】支持管家客户端全屏模式换肤 【文档守护者】新增源文件解密功能;支持Aurora勒索病毒解密

    腾讯电脑管家软件管理独立版

    **腾讯电脑管家软件管理独立版**是一款专为用户设计的轻量级软件管理工具,它提供了独立的版本,不捆绑腾讯电脑管家主程序,让用户在享受便捷的软件管理服务的同时,避免了不必要的软件安装。这款工具的核心功能主要...

    Android仿腾讯轻听音乐播放器,UI美观,功能模块丰富,优秀安卓app设计!

    这是一款优雅的依照Material Design的音乐播放器,UI参考 腾讯轻听 音乐播放器,使用 Lastfm Api 与 酷狗歌词Api。项目架构采用 mvp-clean,基于 Retrofit2 + Dagger2 + Rxjava + RxBus + Glide。 软件特点: 1、...

    android仿腾讯微博客户端

    《Android仿腾讯微博客户端开发详解》 在移动互联网飞速发展的今天,社交应用已经成为人们日常生活中不可或缺的一部分。作为中国主流的社交媒体平台,腾讯微博在移动端的重要性不言而喻。本篇将详细介绍如何在...

    腾讯电池管家 For Android v1.2.0.zip

    《腾讯电池管家For Android v1.2.0:专业安卓电量管理详解》 在移动设备日益普及的今天,电池续航成为用户关注的重点。腾讯电池管家作为一款专为Android系统设计的免费省电工具,旨在帮助用户优化电池使用,延长...

    仿腾讯图库图片浏览效果

    【标题】"仿腾讯图库图片浏览效果"所涉及的知识点主要集中在JavaScript(JS)、HTML和CSS这三种前端核心技术上,这些技术共同构建了一个类似腾讯图库的图片浏览体验。 【JavaScript(JS)】在这样的项目中,...

    仿腾讯的android下载对话框动画

    总结来说,仿腾讯的Android下载对话框动画涉及了Android自定义View的创建、图形绘制、动画实现以及与后台任务的交互等多个关键知识点。理解并实践这些技术,不仅能够提升开发者的设计能力,还能加深对Android系统...

Global site tag (gtag.js) - Google Analytics