Android侧边栏的自定义实现(附源码)

林炳文Evankaka原创作品。转载请注明出处http://blog.csdn.net/evankaka

本文要实现手指在手机上向左或向右移动时,能相应的移动左右两个视图(源码下载

先来看看效果:

一、实现思路

1.思路

菜单在左,内容在右,然后菜单显示时和手机右边框有一定的间隔,内容显示一小部分。内容全部显示时,菜单全部不可见。如下面两个图

显示内容

显示菜单

2.判断逻辑

这是判断手指按着屏幕和手指抬起时要不要显示还是隐藏菜单

二、代码清单

首先来看下布局:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    tools:context=".MainActivity" >
    <LinearLayout
        android:id="@+id/menu"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        android:background="@drawable/pn" >
    </LinearLayout>
    <LinearLayout
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        android:background="@drawable/sn">
    </LinearLayout>

</LinearLayout>

接下来看看代码

package com.example.learningjava;

import com.example.learningjava.R.string;

import android.R.integer;
import android.R.menu;
import android.os.AsyncTask;
import android.os.Build;
import android.os.Bundle;
import android.annotation.SuppressLint;
import android.annotation.TargetApi;
import android.widget.LinearLayout.LayoutParams;
import android.app.Activity;
import android.util.DisplayMetrics;
import android.util.Log;
import android.view.Menu;
import android.view.MotionEvent;
import android.view.VelocityTracker;
import android.view.View;
import android.view.View.OnTouchListener;
import android.view.Window;
import android.widget.LinearLayout;

public class MainActivity extends Activity implements OnTouchListener{

	private LinearLayout menuLayout;//菜单项
	private LinearLayout contentLayout;//内容项
	private LayoutParams  menuParams;//菜单项目的参数
	private LayoutParams contentParams;//内容项目的参数contentLayout的宽度值 

	private int disPlayWidth;//手机屏幕分辨率
    private float xDown;//手指点下去的横坐标
    private float xMove;//手指移动的横坐标
    private float xUp;//记录手指上抬后的横坐标

    private VelocityTracker mVelocityTracker; // 用于计算手指滑动的速度。
    float velocityX;//手指左右移动的速度
    public static final int SNAP_VELOCITY = 400; //滚动显示和隐藏menu时,手指滑动需要达到的速度。 

    private boolean menuIsShow = false;//初始化菜单项不可翙
	private static final int menuPadding=80;//menu完成显示,留给content的宽度

  protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);
        initLayoutParams();

    }
  /**
   *初始化Layout并设置其相应的参数
   */
  private void initLayoutParams()
  {
	//得到屏幕的大小
      DisplayMetrics dm = new DisplayMetrics();
      getWindowManager().getDefaultDisplay().getMetrics(dm);
      disPlayWidth =dm.widthPixels;  

      //获得控件
      menuLayout = (LinearLayout) findViewById(R.id.menu);
      contentLayout = (LinearLayout) findViewById(R.id.content);
      findViewById(R.id.layout).setOnTouchListener(this);

      //获得控件参数
      menuParams=(LinearLayout.LayoutParams)menuLayout.getLayoutParams();
      contentParams = (LinearLayout.LayoutParams) contentLayout.getLayoutParams();

       //初始化菜单和内容的宽和边距
      menuParams.width = disPlayWidth - menuPadding;
      menuParams.leftMargin = 0 - menuParams.width;
      contentParams.width = disPlayWidth;
      contentParams.leftMargin=0;

      //设置参数
      menuLayout.setLayoutParams(menuParams);
      contentLayout.setLayoutParams(contentParams);

  }

  @Override
  public boolean onTouch(View v, MotionEvent event)
  {
	  acquireVelocityTracker(event);
	  switch (event.getAction())
      {
      case MotionEvent.ACTION_DOWN:
    	  xDown=event.getRawX();
          break;

      case MotionEvent.ACTION_MOVE:
    	  xMove=event.getRawX();
    	  isScrollToShowMenu();
          break;

      case MotionEvent.ACTION_UP:
    	  xUp=event.getRawX();
    	  isShowMenu();
    	  releaseVelocityTracker();
          break;

      case MotionEvent.ACTION_CANCEL:
          releaseVelocityTracker();
          break;
      }
      return true;
  }
  /**
   * 根据手指按下的距离,判断是否滚动显示菜单
   */
  private void isScrollToShowMenu()
  {
        int distanceX = (int) (xMove - xDown);
        if (!menuIsShow) {
      		scrollToShowMenu(distanceX);
        }else{
      		scrollToHideMenu(distanceX);
        }
  }
  /**
   * 手指抬起之后判断是否要显示菜单
   */
  private void isShowMenu()
  {
       velocityX =getScrollVelocity();
       if(wantToShowMenu()){
    	   if(shouldShowMenu()){
    		   showMenu();
    	   }else{
    		   hideMenu();
    	   }
       }
       else if(wantToHideMenu()){
    	   if(shouldHideMenu()){
    		   hideMenu();
    	   }else{
			  showMenu();
		   }
       }
  }
  /**
   *想要显示菜单,当向右移动距离大于0并且菜单不可见
   */
  private boolean wantToShowMenu(){
	  return !menuIsShow&&xUp-xDown>0;
  }
  /**
   *想要隐藏菜单,当向左移动距离大于0并且菜单可见
   */
  private boolean wantToHideMenu(){
	  return menuIsShow&&xDown-xUp>0;
  }
  /**
   *判断应该显示菜单,当向右移动的距离超过菜单的一半或者速度超过给定值
   */
  private boolean shouldShowMenu(){
	  return xUp-xDown>menuParams.width/2||velocityX>SNAP_VELOCITY;
  }
  /**
   *判断应该隐藏菜单,当向左移动的距离超过菜单的一半或者速度超过给定值
   */
  private boolean shouldHideMenu(){
	  return xDown-xUp>menuParams.width/2||velocityX>SNAP_VELOCITY;
  }
  /**
   * 显示菜单栏
   */
  private void showMenu()
  {
      new showMenuAsyncTask().execute(50);
      menuIsShow=true;
  }
  /**
   * 隐藏菜单栏
   */
  private void hideMenu()
  {
	 new showMenuAsyncTask().execute(-50);
     menuIsShow=false;
  }
  /**
   *指针按着时,滚动将菜单慢慢显示出来
   *@param scrollX 每次滚动移动的距离
   */
  private void scrollToShowMenu(int scrollX)
  {
	  if(scrollX>0&&scrollX<= menuParams.width)
	  menuParams.leftMargin =-menuParams.width+scrollX;
	  menuLayout.setLayoutParams(menuParams);
  }
  /**
   *指针按着时,滚动将菜单慢慢隐藏出来
   *@param scrollX 每次滚动移动的距离
   */
  private void scrollToHideMenu(int scrollX)
  {
	  if(scrollX>=-menuParams.width&&scrollX<0)
	  menuParams.leftMargin=scrollX;
	  menuLayout.setLayoutParams(menuParams);
  }

  /**
   * 创建VelocityTracker对象,并将触摸content界面的滑动事件加入到VelocityTracker当中。
   * @param event 向VelocityTracker添加MotionEvent
   */
  private void acquireVelocityTracker(final MotionEvent event) {
      if(null == mVelocityTracker) {
          mVelocityTracker = VelocityTracker.obtain();
      }
      mVelocityTracker.addMovement(event);
  }
  /**
   * 获取手指在content界面滑动的速度。
   * @return 滑动速度,以每秒钟移动了多少像素值为单位。
   */
  private int getScrollVelocity() {
      mVelocityTracker.computeCurrentVelocity(1000);
      int velocity = (int) mVelocityTracker.getXVelocity();  

      return Math.abs(velocity);
  }
  /**
   * 释放VelocityTracker
   */
  private void releaseVelocityTracker() {
      if(null != mVelocityTracker) {
          mVelocityTracker.clear();
          mVelocityTracker.recycle();
          mVelocityTracker = null;
      }
  }
  /**
  *
  *:模拟动画过程,让肉眼能看到滚动的效果
  *
  */
  class showMenuAsyncTask extends AsyncTask<Integer, Integer, Integer>
  {

      @Override
      protected Integer doInBackground(Integer... params)
      {
          int leftMargin = menuParams.leftMargin;
          while (true)
          {// 根据传入的速度来滚动界面,当滚动到达左边界或右边界时,跳出循环。
              leftMargin += params[0];
              if (params[0] > 0 && leftMargin > 0)
              {
            	  leftMargin= 0;
                  break;
              } else if (params[0] < 0 && leftMargin <-menuParams.width)
              {
            	  leftMargin=-menuParams.width;
                  break;
              }
              publishProgress(leftMargin);
              try
              {
                  Thread.sleep(40);//休眠一下,肉眼才能看到滚动效果
              } catch (InterruptedException e)
              {
                  e.printStackTrace();
              }
          }
          return leftMargin;
      }
      @Override
      protected void onProgressUpdate(Integer... value)
      {
          menuParams.leftMargin = value[0];
          menuLayout.setLayoutParams(menuParams);
      }

      @Override
      protected void onPostExecute(Integer result)
      {
          menuParams.leftMargin = result;
          menuLayout.setLayoutParams(menuParams);
      }

  }
}

三、效果与说明



源码下载
时间: 2024-10-01 07:47:35

Android侧边栏的自定义实现(附源码)的相关文章

WPF一步步实现完全无边框自定义Window(附源码)

原文:WPF一步步实现完全无边框自定义Window(附源码) 在我们设计一个软件的时候,有很多时候我们需要按照美工的设计来重新设计整个版面,这当然包括主窗体,因为WPF为我们提供了强大的模板的特性,这就为我们自定义各种空间提供了可能性,这篇博客主要用来介绍如何自定义自己的Window,在介绍整个写作思路之前,我们来看看最终的效果. 图一 自定义窗体主界面 这里面的核心就是重写Window的Template,针对整个开发过程中出现的问题我们再来一步步去剖析,首先要看看我们定义好的样式 <Resou

Android抢先截获短信(附源码)

之前在写通讯录应用时,将整体的代码写完后,自测时发现非常非常多的问题,其中一个非常重要严重的就是可以发出短信,但收不到任何的短信息,这搞的我好捉鸡啊!后来调试发现是由于没有收到短信的消息导致的,然后将自己手机中的QQ通讯录尝试着卸载掉,这时就可以收到了. 后来有时间了在网上查找相关资料,并且按照网上的理论编写了代码测试,解决了这个问题,在这里通过博客把解决的方法记录下来. 首先要知道广播分为无序,有序,sticky三种广播 无序广播应该最常用的,就是普通的广播,任何BroadcastReceiv

Android增量升级简单实现(附源码)

随着现在手机硬件不断的提升,分辨率提高手机的安装包也是越来越大了.当年NOKIA,MOTO时代,一个手机APP如果有1MB那都是算大的,2MB已经不得了了.虽然网络.存储都已经大大提升,但是流量还不至于廉价到APP改了一个标题要去下载一个几兆的程序安装包.今天就介绍安卓增量下载的实现.有耐心的先看原理,后面实践! 增量升级的原理 今天我们就来实现类似的应用的增量升级.其实增量升级的原理很简单,即首先将应用的旧版本Apk与新版本Apk做差分,得到更新的部分的补丁,例如旧版本的APK有5M,新版的有

ANDROID自定义视图——仿瀑布布局(附源码)

简介: 在自定义view的时候,其实很简单,只需要知道3步骤: 1.测量--onMeasure():决定View的大小 2.布局--onLayout():决定View在ViewGroup中的位置 3.绘制--onDraw():如何绘制这个View. 第3步的onDraw系统已经封装的很好了,基本不用我们来操心,只需要专注到1,2两个步骤就中好了. 第一步的测量,可以参考:(ANDROID自定义视图--onMeasure,MeasureSpec源码 流程 思路详解) 第二步的布局,可以参考:(AN

Android应用经典主界面框架之一:仿QQ (使用Fragment, 附源码)

最近反复研究日常经典必用的几个android app,从主界面带来的交互方式入手进行分析,我将其大致分为三类.今天记录第一种方式,即主界面下面有几个tab页,最上端是标题栏,tab页和tab页之间不是通过滑动切换的,而是通过点击切换tab页.早期这种架构一直是使用tabhost+activitygroup来使用,随着fragment的出现及google官方也大力推荐使用fragment,后者大有代替前者之势.本文也使用fragment进行搭建,标题中的"经典"指这种交互经典,非本文的代

Android UI开发: 横向ListView(HorizontalListView)及一个简单相册的完整实现 (附源码下载)

Android UI开发: 横向ListView(HorizontalListView)及一个简单相册的完整实现 (附源码下载) POSTED ON 2014年6月27日 BY 天边的星星 本文内容: 1.横向ListView的所有实现思路; 2.其中一个最通用的思路HorizontalListView,并基于横向ListView开发一个简单的相册: 3.实现的横向ListView在点击.浏览时item背景会变色,并解决了listview里setSelected造成item的选择状态混乱的问题.

Android学习笔记(十四)——在运行时添加碎片(附源码)

在运行时添加碎片 点击获取源码 将UI分割为多个可配置的部分是碎片的优势之一,但其真正强大之处在于可在运行时动态地把它们添加到活动中. 1.使用上一篇创建的Fragments项目,在main.xml文件中注释掉两个<fragment>元素: 2.在FragmentActivity.java中添加下面的代码: FragmentManager fragmentManager = getSupportFragmentManager();//向活动添加碎片 FragmentTransaction fr

Android学习笔记(十五)——碎片的生命周期(附源码)

碎片的生命周期 点击下载源码 与活动类似,碎片具有自己的生命周期.理解了碎片的生命周期后,我们可以在碎片被销毁时正确地保存其实例,在碎片被重建时将其还原到前一个状态. 1.使用上一篇的项目Fragments,在Fragment1.java文件中添加如下代码: package net.zenail.Fragments; import android.app.Activity; import android.os.Bundle; import android.support.v4.app.Fragm

android Listview分批加载+自动加载(附源码下载)

直接上代码,代码有注释: public class TestForListviewActivity extends Activity implements OnScrollListener { private ListView mListview = null; private View mFooterView; private PaginationAdapter mAdapter; private Handler handler=new Handler(); private boolean i