Chinaunix首页 | 论坛 | 博客
  • 博客访问: 417539
  • 博文数量: 121
  • 博客积分: 0
  • 博客等级: 民兵
  • 技术积分: 1393
  • 用 户 组: 普通用户
  • 注册时间: 2014-03-11 12:17
个人简介

www.vibexie.com vibexie@qq.com

文章分类

全部博文(121)

文章存档

2015年(55)

2014年(66)

我的朋友

分类: Android平台

2015-03-26 12:05:03

采用HorizontalScrollView方案
效果图:

SlidingMenu.java

  1. package cn.com.xiebiao.horizontalscrollviewtest;

  2. import android.content.Context;
  3. import android.util.AttributeSet;
  4. import android.util.DisplayMetrics;
  5. import android.util.TypedValue;
  6. import android.view.MotionEvent;
  7. import android.view.ViewGroup;
  8. import android.view.WindowManager;
  9. import android.widget.HorizontalScrollView;
  10. import android.widget.LinearLayout;

  11. import com.nineoldandroids.view.ViewHelper;

  12. /**
  13.  * Created by vibexie on 3/25/15.
  14.  */
  15. public class SlidingMenu extends HorizontalScrollView {
  16.     private LinearLayout mWapper;
  17.     private ViewGroup mMenu;
  18.     private ViewGroup mContent;

  19.     //屏幕宽度
  20.     private int mScreenWidth;
  21.     //显示menu时,主界面在右边显示的宽度
  22.     private int mMenuRightPadding;

  23.     //设置menu和主界面的宽度
  24.     private int mMenuWidth;
  25.     //onMeasure方法调用一次
  26.     private boolean once=false;
  27.     //menu是否开启
  28.     private boolean isMenuOpen=false;

  29.     //未使用自定义属性时,调用构造方法
  30.     public SlidingMenu(Context context,AttributeSet attributeSet){
  31.         super(context,attributeSet);

  32.         WindowManager windowManager=(WindowManager)context.getSystemService(Context.WINDOW_SERVICE);
  33.         DisplayMetrics displayMetrics=new DisplayMetrics();
  34.         windowManager.getDefaultDisplay().getMetrics(displayMetrics);

  35.         //获得屏幕宽度
  36.         mScreenWidth=displayMetrics.widthPixels;

  37.         //100转化为一个像素值px
  38.         mMenuRightPadding=(int)TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,100,context.getResources().getDisplayMetrics());
  39.     }

  40.     //设置子view的宽和高
  41.     @Override
  42.     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  43.         //调用一次
  44.         if(!once){
  45.             //内部的第一个view是linearLayout
  46.             mWapper=(LinearLayout)getChildAt(0);
  47.             //linearLayout内部的第一个view是leftmenu
  48.             mMenu=(ViewGroup)mWapper.getChildAt(0);
  49.             //linearLayout内部的第二个view是LinearLayout
  50.             mContent=(ViewGroup)mWapper.getChildAt(1);

  51.             //设置menu的宽度
  52.             mMenuWidth=mMenu.getLayoutParams().width=mScreenWidth-mMenuRightPadding;

  53.             //设置主界面的宽度
  54.             mContent.getLayoutParams().width=mScreenWidth;

  55.             once=true;
  56.         }
  57.         super.onMeasure(widthMeasureSpec, heightMeasureSpec);
  58.     }

  59.     //通过设置偏移里量,将menu隐藏,changed表示是否发生改变
  60.     @Override
  61.     protected void onLayout(boolean changed, int l, int t, int r, int b) {
  62.         super.onLayout(changed, l, t, r, b);
  63.         //将整个界面右移menu的宽度,以显示主界面
  64.         if(changed) {
  65.             this.scrollTo(mMenuWidth, 0);
  66.         }
  67.     }

  68.     @Override
  69.     public boolean onTouchEvent(MotionEvent ev) {
  70.         int action=ev.getAction();
  71.         switch (action){
  72.             case MotionEvent.ACTION_UP:
  73.                 //menu向右移动的宽度,大于屏幕的1/2则切换到menu,否则回到主界面
  74.                 //getScrollX()获取当前屏幕左上角相对于整个HorizontalScrollView左上角和x方向距离,单位px
  75.                 int scrollX=getScrollX();
  76.                 if(scrollX>=(mMenuWidth/2)){
  77.                     this.smoothScrollTo(mMenuWidth,0);

  78.                 }else {
  79.                     this.smoothScrollTo(0,0);
  80.                     isMenuOpen=true;
  81.                 }
  82.                 return true;
  83.         }
  84.         return super.onTouchEvent(ev);
  85.     }

  86.     //menu和主界面互相请切换的方法
  87.     public void toggle(){
  88.         if(isMenuOpen){
  89.             this.smoothScrollTo(mMenuWidth,0);
  90.             isMenuOpen=false;
  91.         }else {
  92.             this.smoothScrollTo(0,0);
  93.             isMenuOpen=true;
  94.         }
  95.     }

  96.     //l为getScrollX,t为getScrollY,old顾名思意为之前的值
  97.     @Override
  98.     protected void onScrollChanged(int l, int t, int oldl, int oldt) {
  99.         //ViewHelper需添加nineoldandroids.jar包,以兼容android3.0以下版本
  100.         //menu旋转效果
  101.         //ViewHelper.setRotationX(mMenu,l/10);
  102.         //menu抽屉效果
  103.         //ViewHelper.setTranslationX(mMenu,l);

  104.         float scale=(float)(l/(mMenuWidth*1.0));
  105.         //右滑,主界面的缩放效果,从1放到0.8
  106.         float mContentScale=(float)(0.8+0.2*scale);
  107.         ViewHelper.setPivotX(mContent,l);
  108.         ViewHelper.setPivotY(mContent,mContent.getHeight()/2);
  109.         ViewHelper.setScaleX(mContent,mContentScale);
  110.         ViewHelper.setScaleY(mContent,mContentScale);

  111.         //右滑,menu的缩放效果,从0.7放到1
  112.         float mMenuScale=(float)(0.7+0.4*(1-scale));
  113.         ViewHelper.setScaleX(mMenu,mMenuScale);
  114.         ViewHelper.setScaleY(mMenu,mMenuScale);
  115.         ViewHelper.setAlpha(mMenu,mMenuScale);
  116.         //menu向右滑出
  117.         ViewHelper.setTranslationX(mMenu,l*scale*0.9f);
  118.         super.onScrollChanged(l, t, oldl, oldt);
  119.     }
  120. }

left_menu.xml

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <RelativeLayout xmlns:android=""
  3.     android:layout_width="360dp"
  4.     android:layout_height="match_parent">

  5.     <LinearLayout
  6.         android:layout_width="match_parent"
  7.         android:layout_height="wrap_content"
  8.         android:orientation="vertical"
  9.         android:layout_centerInParent="true">

  10.         <RelativeLayout
  11.             android:layout_width="match_parent"
  12.             android:layout_height="wrap_content">
  13.         <ImageView
  14.             android:layout_width="wrap_content"
  15.             android:layout_height="wrap_content"
  16.             android:id="@+id/image1"
  17.             android:src="@drawable/photo1"
  18.             android:layout_marginLeft="20dp"
  19.             android:layout_marginTop="20dp"/>
  20.         <TextView
  21.             android:layout_width="wrap_content"
  22.             android:layout_height="wrap_content"
  23.             android:id="@+id/text1"
  24.             android:text="第一个Item"
  25.             android:textSize="30sp"
  26.             android:layout_toRightOf="@+id/image1"
  27.             android:layout_marginLeft="20dp"
  28.             android:layout_centerHorizontal="true"
  29.             android:layout_marginTop="20dp"/>
  30.         </RelativeLayout>



  31.         <RelativeLayout
  32.             android:layout_width="wrap_content"
  33.             android:layout_height="wrap_content">
  34.             <ImageView
  35.                 android:layout_width="wrap_content"
  36.                 android:layout_height="wrap_content"
  37.                 android:id="@+id/image2"
  38.                 android:src="@drawable/photo2"
  39.                 android:layout_marginLeft="20dp"
  40.                 android:layout_marginTop="20dp"/>
  41.             <TextView
  42.                 android:layout_width="wrap_content"
  43.                 android:layout_height="wrap_content"
  44.                 android:id="@+id/text2"
  45.                 android:text="第二个Item"
  46.                 android:textSize="30sp"
  47.                 android:layout_toRightOf="@+id/image2"
  48.                 android:layout_marginLeft="20dp"
  49.                 android:layout_centerHorizontal="true"
  50.                 android:layout_marginTop="20dp"/>
  51.         </RelativeLayout>


  52.         <RelativeLayout
  53.             android:layout_width="wrap_content"
  54.             android:layout_height="wrap_content">
  55.             <ImageView
  56.                 android:layout_width="wrap_content"
  57.                 android:layout_height="wrap_content"
  58.                 android:id="@+id/image3"
  59.                 android:src="@drawable/photo3"
  60.                 android:layout_marginLeft="20dp"
  61.                 android:layout_marginTop="20dp"/>
  62.             <TextView
  63.                 android:layout_width="wrap_content"
  64.                 android:layout_height="wrap_content"
  65.                 android:id="@+id/text3"
  66.                 android:text="第三个Item"
  67.                 android:textSize="30sp"
  68.                 android:layout_toRightOf="@+id/image3"
  69.                 android:layout_marginLeft="20dp"
  70.                 android:layout_centerHorizontal="true"
  71.                 android:layout_marginTop="20dp"/>
  72.         </RelativeLayout>


  73.         <RelativeLayout
  74.             android:layout_width="wrap_content"
  75.             android:layout_height="wrap_content">
  76.             <ImageView
  77.                 android:layout_width="wrap_content"
  78.                 android:layout_height="wrap_content"
  79.                 android:id="@+id/image4"
  80.                 android:src="@drawable/photo4"
  81.                 android:layout_marginLeft="20dp"
  82.                 android:layout_marginTop="20dp"/>
  83.             <TextView
  84.                 android:layout_width="wrap_content"
  85.                 android:layout_height="wrap_content"
  86.                 android:id="@+id/text4"
  87.                 android:text="第四个Item"
  88.                 android:textSize="30sp"
  89.                 android:layout_toRightOf="@+id/image4"
  90.                 android:layout_marginLeft="20dp"
  91.                 android:layout_centerHorizontal="true"
  92.                 android:layout_marginTop="20dp"/>
  93.         </RelativeLayout>

  94.     </LinearLayout>


  95. </RelativeLayout>


activity_main.xml

  1. <RelativeLayout xmlns:android=""
  2.     xmlns:tools="" android:layout_width="match_parent"
  3.     android:layout_height="match_parent"
  4.     android:background="@drawable/menu">
  5.     <cn.com.xiebiao.horizontalscrollviewtest.SlidingMenu
  6.         android:layout_width="match_parent"
  7.         android:layout_height="match_parent"
  8.         android:id="@+id/id_menu">

  9.         <LinearLayout
  10.             android:layout_width="wrap_content"
  11.             android:layout_height="match_parent"
  12.             android:orientation="horizontal">
  13.             <include layout="@layout/left_menu"></include>
  14.             <LinearLayout
  15.                 android:layout_width="360dp"
  16.                 android:layout_height="match_parent"
  17.                 android:background="@drawable/qq"
  18.                 android:paddingTop="25dp">

  19.                 <Button
  20.                     android:layout_width="wrap_content"
  21.                     android:layout_height="wrap_content"
  22.                     android:id="@+id/toggle"
  23.                     android:onClick="toggleMenu"
  24.                     android:text="《menu"/>

  25.              </LinearLayout>
  26.         </LinearLayout>

  27.     </cn.com.xiebiao.horizontalscrollviewtest.SlidingMenu>

  28. </RelativeLayout>

MainActivity.java

  1. package cn.com.xiebiao.horizontalscrollviewtest;

  2. import android.app.Activity;
  3. import android.os.Bundle;
  4. import android.view.Menu;
  5. import android.view.MenuItem;
  6. import android.view.View;


  7. public class MainActivity extends Activity {
  8.     private SlidingMenu slidingMenu;
  9.     @Override
  10.     protected void onCreate(Bundle savedInstanceState) {
  11.         super.onCreate(savedInstanceState);
  12.         setContentView(R.layout.activity_main);
  13.         slidingMenu=(SlidingMenu)this.findViewById(R.id.id_menu);
  14.     }

  15.     public void toggleMenu(View view){
  16.         slidingMenu.toggle();
  17.     }


  18.     @Override
  19.     public boolean onCreateOptionsMenu(Menu menu) {
  20.         // Inflate the menu; this adds items to the action bar if it is present.
  21.         getMenuInflater().inflate(R.menu.menu_main, menu);
  22.         return true;
  23.     }

  24.     @Override
  25.     public boolean onOptionsItemSelected(MenuItem item) {
  26.         // Handle action bar item clicks here. The action bar will
  27.         // automatically handle clicks on the Home/Up button, so long
  28.         // as you specify a parent activity in AndroidManifest.xml.
  29.         int id = item.getItemId();

  30.         //noinspection SimplifiableIfStatement
  31.         if (id == R.id.action_settings) {
  32.             return true;
  33.         }
  34.         return super.onOptionsItemSelected(item);
  35.     }
  36. }


AndroidMainfest.java

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <manifest xmlns:android=""
  3.     package="cn.com.xiebiao.horizontalscrollviewtest" >

  4.     <application
  5.         android:allowBackup="true"
  6.         android:icon="@mipmap/ic_launcher"
  7.         android:label="@string/app_name"
  8.         android:theme="@android:style/Theme.NoTitleBar" >
  9.         <activity
  10.             android:name=".MainActivity"
  11.             android:label="@string/app_name" >
  12.             <intent-filter>
  13.                 <action android:name="android.intent.action.MAIN" />

  14.                 <category android:name="android.intent.category.LAUNCHER" />
  15.             </intent-filter>
  16.         </activity>
  17.     </application>

  18. </manifest>




阅读(1440) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~