Android侧滑菜单

原创 2015年11月18日 14:35:38

 自定义属性:1.书写xml文件       values/attr.xml
                       2.在布局文件中进行使用,特别注意xmlns
                       3.在构造方法中(3个参数的构造方法)中获取我们设置的值

 

自定义View   1.onMeasure决定内部View(子view)的宽和高,以及自己的宽和高  

                      2.onLayout 决定子View的放置的位置
                      3.onTouchEvent添加点击事件

动画效果使用:nineoldandroids.jar

废话不多说了,上代码,随便写的,很low但是基本上的功能都有了:

主布局:activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:hello="http://schemas.android.com/apk/res/com.my.slidingmenu"      添加
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

   
    <com.my.slidingmenu.view.SlidingMenu
        android:id="@+id/menu"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        hyman:rightPadding="100dp">
       
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:orientation="horizontal">
           
            <include layout="@layout/left_menu"/>
           
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@drawable/ic_launcher">
                <Button
                    android:onClick="toggleMenu"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="切换菜单"/>
            </LinearLayout>
        </LinearLayout>
    </com.my.slidingmenu.view.SlidingMenu>

</RelativeLayout>

左部隐藏的菜单MENU: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" >
   
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:orientation="vertical">
       
        <RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content">
            <ImageView
                android:id="@+id/img1"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_centerVertical="true"
                android:layout_marginLeft="20dp"
                android:layout_marginTop="20dp"
                android:src="@drawable/ic_launcher"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="20sp"
                android:text="第一个Item"
                android:layout_toRightOf="@id/img1"
                android:layout_centerVertical="true"/>
        </RelativeLayout>
         <RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content">
            <ImageView
                android:id="@+id/img2"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_centerVertical="true"
                android:layout_marginLeft="20dp"
                android:layout_marginTop="20dp"
                android:src="@drawable/ic_launcher"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="20sp"
                android:text="第一个Item"
                android:layout_toRightOf="@id/img2"
                android:layout_centerVertical="true"/>
        </RelativeLayout>
         <RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content">
            <ImageView
                android:id="@+id/img3"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_centerVertical="true"
                android:layout_marginLeft="20dp"
                android:layout_marginTop="20dp"
                android:src="@drawable/ic_launcher"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="20sp"
                android:text="第一个Item"
                android:layout_toRightOf="@id/img3"
                android:layout_centerVertical="true"/>
        </RelativeLayout>
         <RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content">
            <ImageView
                android:id="@+id/img4"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_centerVertical="true"
                android:layout_marginLeft="20dp"
                android:layout_marginTop="20dp"
                android:src="@drawable/ic_launcher"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="20sp"
                android:text="第一个Item"
                android:layout_toRightOf="@id/img4"
                android:layout_centerVertical="true"/>
        </RelativeLayout>
         <RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content">
            <ImageView
                android:id="@+id/img5"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_centerVertical="true"
                android:layout_marginLeft="20dp"
                android:layout_marginTop="20dp"
                android:src="@drawable/ic_launcher"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="20sp"
                android:text="第一个Item"
                android:layout_toRightOf="@id/img5"
                android:layout_centerVertical="true"/>
        </RelativeLayout>
       
    </LinearLayout>

</RelativeLayout>

自定义View使用的XML:values/attr.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
     <attr name="rightPadding" format="dimension"></attr>
    <declare-styleable name="SlidingMenu_rightPadding">
        <attr name="rightPadding"></attr>
        </declare-styleable>
</resources>
主类代码实现:MainActivity

public class MainActivity extends Activity {
 
 private SlidingMenu mLeftMenu;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mLeftMenu = (SlidingMenu) findViewById(R.id.menu);
    }

    public void toggleMenu(View view) {
  // TODO Auto-generated method stub

     mLeftMenu.toggle();
 }
   
}

 

左部菜单MENU的逻辑,动画,透明度,偏移量等的设置:SlidingMenu.java

public class SlidingMenu extends HorizontalScrollView{
 
 /*
  * 自定义属性:1.书写xml文件       values/attr.xml
  *         2.在布局文件中进行使用,特别注意xmlns
  *         3.在构造方法中(3个参数的构造方法)中获取我们设置的值
  * */
 private LinearLayout mWapper;
 private ViewGroup mMenu;
 private ViewGroup mContent;
 
 private int mMenuWidth;
 
 private int mScreenWidth;
 private int mMenuRightPadding = 50;//菜单menu到右侧的距离
 private boolean once = false;
 
 private boolean isOpen = false;

 
 /*
  * 自定义View   1.onMeasure决定内部View(子view)的宽和高,以及自己的宽和高     
  *            2.onLayout 决定子View的放置的位置
  *            3.onTouchEvent
  * 未使用自定义属性时,调用
  * */
 public SlidingMenu(Context context, AttributeSet attrs) {
  this(context, attrs, 0);
  
 }
 
 /*
  * 当使用了自定义属性时,会调用此构造方法
  * */
 public SlidingMenu(Context context, AttributeSet attrs, int defStyle) {
  super(context, attrs, defStyle);
  
  //获取我们定义的属性
  TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.SlidingMenu_rightPadding, defStyle, 0);
  int n = a.getIndexCount();
  for (int i = 0; i < n; i++) {
   int attr = a.getIndex(i);
   switch (attr) {
   case R.styleable.SlidingMenu_rightPadding_rightPadding:
    mMenuRightPadding = a.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 50, context.getResources().getDisplayMetrics()));
    break;

   default:
    break;
   }
  }
  a.recycle();
  WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
  DisplayMetrics outMetrics = new DisplayMetrics();
    wm.getDefaultDisplay().getMetrics(outMetrics);
    mScreenWidth = outMetrics.widthPixels;
//    //把dp转化为px
//    mMenuRightPadding = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 50, context.getResources().getDisplayMetrics());
 }


 public SlidingMenu(Context context) {
  this(context, null);
  // TODO Auto-generated constructor stub
 }


 /*
  * 设置子view的宽和高
  * */
 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  if (!once) {
   
   mWapper = (LinearLayout) getChildAt(0);
   mMenu = (ViewGroup) mWapper.getChildAt(0);
   mContent = (ViewGroup) mWapper.getChildAt(1);
   mMenuWidth = mMenu.getLayoutParams().width = mScreenWidth - mMenuRightPadding;
   mContent.getLayoutParams().width = 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(mMenuWidth, 0);
  }
 }
 
 @Override
 public boolean onTouchEvent(MotionEvent ev) {
  int action = ev.getAction();
  switch (action) {
  case MotionEvent.ACTION_UP:
   //隐藏在左边的宽度
   int scrollX = getScrollX();
   if (scrollX >= mMenuWidth / 2) {
    this.smoothScrollTo(mMenuWidth, 0);
    isOpen = false;
   }else {
    this.smoothScrollTo(0, 0);
    isOpen = true;
   }
   return true;
  }
  return super.onTouchEvent(ev);
 }
 //打开菜单
 private void openMenu() {
  // TODO Auto-generated method stub

  if(isOpen)return;
  this.smoothScrollTo(0, 0);
  isOpen = true;
 }
 private void closeMenu(){
  if(!isOpen)return;
  this.smoothScrollTo(mMenuWidth, 0);
  isOpen = false;
 }
 //切换菜单
 public void toggle() {
  // TODO Auto-generated method stub

  if (isOpen) {
   closeMenu();
  }else {
   openMenu();
  }
 }
 /*
  * 滚动发生的时候
  * */
 @Override
 protected void onScrollChanged(int l, int t, int oldl, int oldt) {
  // TODO Auto-generated method stub
  super.onScrollChanged(l, t, oldl, oldt);
  float scale = l * 1.0f/mMenuWidth;
  
  /*
   * 区别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, mMenuWidth * scale*0.8f);
  ViewHelper.setScaleX(mMenu, leftScale);
  ViewHelper.setScaleY(mMenu, leftScale);
  ViewHelper.setAlpha(mMenu, leftAlpha);
  //设置缩放的中心点
  ViewHelper.setPivotX(mContent, 0);
  ViewHelper.setPivotY(mContent, mContent.getHeight());
  ViewHelper.setScaleX(mContent, rightScale);
  ViewHelper.setScaleY(mContent, rightScale);
 }

}

代码下载地址:http://download.csdn.net/detail/weimo1234/9279679


 

 

 

版权声明:本文为博主原创文章,未经博主允许不得转载。

Android自定义控件——侧滑菜单

当我们打开某些应用的时候,总是会出现“侧滑菜单”这样的效果,至于这种侧滑菜单是谁首先创造出来的,已经不重要,但是侧滑菜单确实功能新颖,用户体验极好,以至于市面上很多很多的应用也纷纷加入侧滑菜单的效果,...
  • lee_tianya
  • lee_tianya
  • 2014年09月22日 11:41
  • 7930

Android 实现侧滑菜单-design

google提供的Design开发包里,有很多实用好看的新控件,这里介绍下使用DrawerLayout+NavigationView实现侧滑菜单效果要使用Design包,只要在项目的build.gra...
  • zhuwentao2150
  • zhuwentao2150
  • 2016年08月16日 23:54
  • 2624

仿Android 5.0 侧滑菜单按钮动画 以及侧滑菜单联动

标签:android 5.0 侧滑菜单 按钮过度动画 前阵子看到Android 5.0 的新的侧滑菜单按钮,其有打开和关闭两种状态,状态之间切换时也会有动画过度。 突发奇想的自己实现了一个。效果...
  • a740169405
  • a740169405
  • 2015年12月13日 18:09
  • 1747

Android侧滑菜单——SlidingMenu详解使用

简介SlideMenu是一个Android端滑动菜单组件,功能强大而且经过简单的设置,就能实现两侧滑动菜单,还可以设置菜单的阴影、渐变色、划动模式等。 SlidingMenu 是github 上An...
  • qq_37293612
  • qq_37293612
  • 2017年02月07日 00:08
  • 252

Android 侧滑菜单的实现(NavigationView)

很早之前就像写个android的侧滑菜单加入到项目中了,但是很多给的都是密密麻麻的代码,今天看到了简单快速的实现方法:通过NavigationView+DrawLayout来实现侧滑菜单的功能。Goo...
  • s1674521
  • s1674521
  • 2017年03月15日 12:54
  • 3583

Android 自定义控件打造史上最简单的侧滑菜单

转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/39185641 ,本文出自【张鸿洋的博客】侧滑菜单在很多应用中都会见到,最近QQ5...
  • lmj623565791
  • lmj623565791
  • 2014年09月11日 17:57
  • 135884

Android中侧滑菜单效果实现(主界面和菜单界面实现平移、缩放、滚动动画)

编写不易,如有转载,请声明出处: 梦回河口:http://blog.csdn.net/zxc514257857/article/details/726027781,技术要点 自定义侧滑控件Slide...
  • zxc514257857
  • zxc514257857
  • 2017年05月21日 19:26
  • 721

5分钟学会两种侧滑菜单栏

侧滑菜单效果其实在应用上很是常见。其中大部分新闻客户端都使用了这种效果。使用起来也是又溜(6)又简单,并且经久以来,也被用户所熟悉。而本文提供两种方法来实现这样的一种抽屉效果。...
  • donkor_
  • donkor_
  • 2017年02月18日 16:26
  • 2052

Android 官方自带侧滑菜单DrawerLayout

【DrawerLayout】 1、在Android的support库中增加了一个专门用于创建侧滑菜单的组件DrawerLayout,接下来我们就讲解一下怎样使用这个原生的组件创建一个仿推酷的...
  • hudan2714
  • hudan2714
  • 2016年08月30日 11:40
  • 5040

【Android】自定义控件-仿QQ联系人侧滑条目,右侧滑菜单。

一直没有写博客的习惯,一直都是看别人的博客,学习别人的东西。平时工作中总会遇到或大或小的问题,往往是上百度CSDN查找答案。今天尝试着写博客,一是更加深入地熟悉一下博客;二是转变一下学习方式;三是把自...
  • wlcm603
  • wlcm603
  • 2016年06月27日 18:16
  • 1223
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Android侧滑菜单
举报原因:
原因补充:

(最多只允许输入30个字)