Android 自定义View修炼-打造完美的自定义侧滑菜单/侧滑View控件(转)

简介: 一、概述   在App中,经常会出现侧滑菜单,侧滑滑出View等效果,虽然说Android有很多第三方开源库,但是实际上 咱们可以自己也写一个自定义的侧滑View控件,其实不难,主要涉及到以下几个要点: 1.对Android中Window类中的DecorView有所了解 2.对Scroller类实现平滑移动效果 3.自定义ViewGroup的实现 首先来看看效果图吧:        下面现在就来说说这里咱们实现侧滑View的基本思路吧,这里我采用的是自定义一个继承于RelativeLayout的控件叫做XCSlideView类吧。

一、概述

  在App中,经常会出现侧滑菜单,侧滑滑出View等效果,虽然说Android有很多第三方开源库,但是实际上

咱们可以自己也写一个自定义的侧滑View控件,其实不难,主要涉及到以下几个要点:

1.对Android中Window类中的DecorView有所了解

2.对Scroller类实现平滑移动效果

3.自定义ViewGroup的实现

首先来看看效果图吧:

    

  下面现在就来说说这里咱们实现侧滑View的基本思路吧,这里我采用的是自定义一个继承于RelativeLayout的控件叫做XCSlideView类吧。

首先从布局文件中inflater出来一个menuView,然后通过addView的方法,将该侧滑View添加到自定义的控件View中

怎么让XCSlideView 这个侧滑View 隐藏到屏幕之外呢?很简单通过ScrollTo方法,移动一个屏幕宽度的距离即可,这里以

左侧滑出为例吧,只需要这样 XCSlideView.this.scrollTo(mScreenWidth, 0);mScreenWidth是屏幕宽度。下面还要处理的就是底下的

半透明黑色的蒙层效果,这个其实就是一个View,然后设置半透明效果。这个当然简单了,关键是咱们让他显示在咱们的自定义侧滑View的下面呢,

这里咱们先给出DecorView的简单分析,方便下面介绍添加半透明View蒙层下:

 

下面是对上面这张图的解释:

1、DecorView为整个Window界面的最顶层View。

2、DecorView只有一个子元素为LinearLayout。代表整个Window界面,包含通知栏,标题栏,内容显示栏三块区域。

3、LinearLayout里有两个FrameLayout子元素。

  (20)为标题栏显示界面。只有一个TextView显示应用的名称。也可以自定义标题栏,载入后的自定义标题栏View将加入FrameLayout中。

  (21)为内容栏显示界面。就是setContentView()方法载入的布局界面,加入其中。

 

有了上面的DecorVIew知识背景,现在就来说说 怎么添加蒙层View和将自定义侧滑View添加到Activity的DecorView中,首先把蒙层View添加到

(31)customView中去,然后将自定义侧滑View添加到 (21)FrameLayout中去,至于为什么要这样,是因为考虑到自定义侧滑View不一定是宽度为

屏幕宽度,所以才这么做,而且也方面处理有无标题栏,有无采用沉浸式状态栏设计等情况。

二、自定义侧滑View的实现

根据上面的概述,大家应该知道大概的思路了,下面我就给出自定义侧滑View类的核心代码:

1、自定义侧滑View用到的变量:

复制代码
//侧滑方向-从哪侧滑出
    public static enum Positon { LEFT, RIGHT } private Context mContext; private Activity mActivity; private Scroller mScroller = null; //侧滑菜单布局View private View mMenuView; //底部蒙层View private View mMaskView; private int mMenuWidth = 0; //屏幕宽度 private int mScreenWidth = 0; //是否在滑动中 private boolean mIsMoving = false; //显示登录界面与否 private boolean mShow = false; //滑动动画时间 private int mDuration = 600; //缺省侧滑方向为左 private Positon mPositon = Positon.LEFT;
复制代码

 

2、初始化创建自定义侧滑View:

复制代码
**
     * 创建侧滑菜单View
     */
    public static XCSlideView create(Activity activity) {
        XCSlideView view = new XCSlideView(activity); return view; } /** * 创建侧滑菜单View */ public static XCSlideView create(Activity activity, Positon positon) { XCSlideView view = new XCSlideView(activity); view.mPositon = positon; return view; }
复制代码

3、创建半透明蒙层View,并添加到contentView中去

复制代码
/**
     * 创建 蒙层View并添加到contentView中
     */
    private void attachToContentView(Activity activity, Positon positon) { mPositon = positon; ViewGroup contentFrameLayout = (ViewGroup) activity.findViewById(android.R.id.content); ViewGroup contentView = ((ViewGroup) contentFrameLayout.getChildAt(0)); mMaskView = new View(activity); mMaskView.setBackgroundColor(mContext.getResources().getColor(R.color.mask_color)); contentView.addView(mMaskView, contentView.getLayoutParams()); mMaskView.setVisibility(View.GONE); mMaskView.setClickable(true); mMaskView.setOnClickListener(new OnClickListener() { @Override public void onClick(View view) { if (isShow()) { dismiss(); } } }); }
复制代码

4、设置侧滑菜单View,并添加到DectorView->LinearLayout->内容显示区域View(FrameLayout)中

复制代码
/**
     * 设置侧滑菜单View,并添加到DectorView->LinearLayout->内容显示区域View中
     */
    public void setMenuView(Activity activity, View view) { mActivity = activity; mMenuView = view; LayoutParams params = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT); addView(mMenuView, params); mMenuView.post(new Runnable() { @Override public void run() { // TODO Auto-generated method stub mMenuWidth = mMenuView.getWidth(); switch (mPositon) { case LEFT: XCSlideView.this.scrollTo(mScreenWidth, 0); break; case RIGHT: XCSlideView.this.scrollTo(-mScreenWidth, 0); break; } } }); ViewGroup contentFrameLayout = (ViewGroup) activity.findViewById(android.R.id.content); ViewGroup contentView = contentFrameLayout; contentView.addView(this); FrameLayout.LayoutParams layoutParams = (FrameLayout.LayoutParams) this.getLayoutParams(); switch (mPositon) { case LEFT: layoutParams.gravity = Gravity.LEFT; layoutParams.leftMargin = 0; break; case RIGHT: layoutParams.gravity = Gravity.RIGHT; layoutParams.rightMargin = 0; break; } TextView titleFrameLayout = (TextView) activity.findViewById(android.R.id.title); if( titleFrameLayout != null){ layoutParams.topMargin = DensityUtil.getStatusBarHeight(mContext); } int flags = mActivity.getWindow().getAttributes().flags; int flag = (flags & WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS); if(flag == WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS){ //说明状态栏使用沉浸式 layoutParams.topMargin = DensityUtil.getStatusBarHeight(mContext); } this.setLayoutParams(layoutParams); }
复制代码

5、处理自定义侧滑View的侧滑滑动和隐藏效果:

复制代码
/**
     * 显示侧滑菜单View
     */
    public void show(){ if(isShow() && !mIsMoving) return; switch (mPositon) { case LEFT: startScroll(mMenuWidth, -mMenuWidth, mDuration); break; case RIGHT: startScroll(-mMenuWidth, mMenuWidth, mDuration); break; } switchMaskView(true); mShow = true; } /** * 蒙层显示开关 */ private void switchMaskView(boolean bShow){ if(bShow){ mMaskView.setVisibility(View.VISIBLE); Animation animation = new AlphaAnimation(0.0f, 1.0f); animation.setDuration(mDuration); mMaskView.startAnimation(animation); }else{ mMaskView.setVisibility(View.GONE); } } /** * 关闭侧滑菜单View */ public void dismiss() { // TODO Auto-generated method stub if(!isShow() && !mIsMoving) return; switch (mPositon) { case LEFT: startScroll(XCSlideView.this.getScrollX(), mMenuWidth, mDuration); break; case RIGHT: startScroll(XCSlideView.this.getScrollX(), -mMenuWidth, mDuration); break; } switchMaskView(false); mShow = false; } public boolean isShow(){ return mShow; } @Override public void computeScroll() { // TODO Auto-generated method stub if (mScroller.computeScrollOffset()) { scrollTo(mScroller.getCurrX(), mScroller.getCurrY()); // 更新界面  postInvalidate(); mIsMoving = true; } else { mIsMoving = false; } super.computeScroll(); } /** * 拖动移动 */ public void startScroll(int startX, int dx,int duration){ mIsMoving = true; mScroller.startScroll(startX,0,dx,0,duration); invalidate(); }
复制代码

三、如何使用该自定义侧滑View控件

使用起来,比较简单,通过create方法创建一个侧滑VIew,然后通过setMenuView方法设置一个侧滑View进去,有需要设置

宽度的话, 通过setMenuWidth方法来设置即可,最后用show()方法滑出来就可以啦,使用起来是不是很方便?

复制代码
private XCSlideView mSlideViewLeft;
//屏幕宽度
private int mScreenWidth = 0; View menuViewLeft = LayoutInflater.from(mContext).inflate(R.layout.layout_slideview,null); mSlideViewLeft = XCSlideView.create(this, XCSlideView.Positon.LEFT); mSlideViewLeft.setMenuView(MainActivity.this, menuViewLeft); mSlideViewLeft.setMenuWidth(mScreenWidth * 7 / 9); Button left = (Button)findViewById(R.id.btn_left); left.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { // TODO Auto-generated method stub if (!mSlideViewLeft.isShow()) mSlideViewLeft.show(); } });
复制代码

四、源码下载:

源码下载http://download.csdn.net/detail/jczmdeveloper/9119423

http://www.cnblogs.com/JczmDeveloper/p/4821148.html

 

相关文章
|
1月前
|
缓存 前端开发 Android开发
安卓开发中的自定义视图:从零到英雄
【10月更文挑战第42天】 在安卓的世界里,自定义视图是一块画布,让开发者能够绘制出独一无二的界面体验。本文将带你走进自定义视图的大门,通过深入浅出的方式,让你从零基础到能够独立设计并实现复杂的自定义组件。我们将探索自定义视图的核心概念、实现步骤,以及如何优化你的视图以提高性能和兼容性。准备好了吗?让我们开始这段创造性的旅程吧!
27 1
|
1月前
|
XML 前端开发 Android开发
Android:UI:Drawable:View/ImageView与Drawable
通过本文的介绍,我们详细探讨了Android中Drawable、View和ImageView的使用方法及其相互关系。Drawable作为图像和图形的抽象表示,提供了丰富的子类和自定义能力,使得开发者能够灵活地实现各种UI效果。View和ImageView则通过使用Drawable实现了各种图像和图形的显示需求。希望本文能为您在Android开发中使用Drawable提供有价值的参考和指导。
40 2
|
1月前
|
搜索推荐 前端开发 Android开发
安卓应用开发中的自定义视图实现
【10月更文挑战第30天】在安卓开发的海洋中,自定义视图是那抹不可或缺的亮色,它为应用界面的个性化和交互体验的提升提供了无限可能。本文将深入探讨如何在安卓平台创建自定义视图,并展示如何通过代码实现这一过程。我们将从基础出发,逐步引导你理解自定义视图的核心概念,然后通过一个实际的代码示例,详细讲解如何将理论应用于实践,最终实现一个美观且具有良好用户体验的自定义控件。无论你是想提高自己的开发技能,还是仅仅出于对安卓开发的兴趣,这篇文章都将为你提供价值。
|
1月前
|
Android开发 开发者 UED
安卓开发中自定义View的实现与性能优化
【10月更文挑战第28天】在安卓开发领域,自定义View是提升应用界面独特性和用户体验的重要手段。本文将深入探讨如何高效地创建和管理自定义View,以及如何通过代码和性能调优来确保流畅的交互体验。我们将一起学习自定义View的生命周期、绘图基础和事件处理,进而探索内存和布局优化技巧,最终实现既美观又高效的安卓界面。
41 5
|
2月前
|
缓存 数据处理 Android开发
在 Android 中使用 RxJava 更新 View
【10月更文挑战第20天】使用 RxJava 来更新 View 可以提供更优雅、更高效的解决方案。通过合理地运用操作符和订阅机制,我们能够轻松地处理异步数据并在主线程中进行 View 的更新。在实际应用中,需要根据具体情况进行灵活运用,并注意相关的注意事项和性能优化,以确保应用的稳定性和流畅性。可以通过不断的实践和探索,进一步掌握在 Android 中使用 RxJava 更新 View 的技巧和方法,为开发高质量的 Android 应用提供有力支持。
|
2月前
|
缓存 调度 Android开发
Android 在子线程更新 View
【10月更文挑战第21天】在 Android 开发中,虽然不能直接在子线程更新 View,但通过使用 Handler、AsyncTask 或 RxJava 等方法,可以实现子线程操作并在主线程更新 View 的目的。在实际应用中,需要根据具体情况选择合适的方法,并注意相关的注意事项和性能优化,以确保应用的稳定性和流畅性。可以通过不断的实践和探索,进一步掌握在子线程更新 View 的技巧和方法,为开发高质量的 Android 应用提供支持。
43 2
|
2月前
|
XML 前端开发 Android开发
Android面试高频知识点(3) 详解Android View的绘制流程
Android面试高频知识点(3) 详解Android View的绘制流程
Android面试高频知识点(3) 详解Android View的绘制流程
|
Android开发
Android侧滑菜单完整详细示例(精装版)
MainActivity如下:package cn.patience7; import android.os.AsyncTask; import android.
1187 0
|
Android开发
Android侧滑菜单完整详细示例(改进版)
MainActivity如下:package cc.cd; import android.os.Bundle; import android.view.
995 0
|
Android开发
Android侧滑菜单完整详细示例(基础版)
MainActivity如下:package cc.cd; import android.os.AsyncTask; import android.
1055 0