QQ5.0侧滑效果

1490阅读　0评论2015-03-26　vibe26
分类：Android平台

采用HorizontalScrollView方案
效果图:

SlidingMenu.java

  1. package cn.com.xiebiao.horizontalscrollviewtest;

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

  13. import com.nineoldandroids.view.ViewHelper;

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

  23.     //屏幕宽度
  24.     private int mScreenWidth;
  25.     //显示menu时，主界面在右边显示的宽度
  26.     private int mMenuRightPadding;

  28.     //设置menu和主界面的宽度
  29.     private int mMenuWidth;
  30.     //onMeasure方法调用一次
  31.     private boolean once=false;
  32.     //menu是否开启
  33.     private boolean isMenuOpen=false;

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

  39.         WindowManager windowManager=(WindowManager)context.getSystemService(Context.WINDOW_SERVICE);
  40.         DisplayMetrics displayMetrics=new DisplayMetrics();
  41.         windowManager.getDefaultDisplay().getMetrics(displayMetrics);

  43.         //获得屏幕宽度
  44.         mScreenWidth=displayMetrics.widthPixels;

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

  50.     //设置子view的宽和高
  51.     @Override
  52.     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  53.         //调用一次
  54.         if(!once){
  55.             //内部的第一个view是linearLayout
  56.             mWapper=(LinearLayout)getChildAt(0);
  57.             //linearLayout内部的第一个view是leftmenu
  58.             mMenu=(ViewGroup)mWapper.getChildAt(0);
  59.             //linearLayout内部的第二个view是LinearLayout
  60.             mContent=(ViewGroup)mWapper.getChildAt(1);

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

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

  68.             once=true;
  69.         }
  70.         super.onMeasure(widthMeasureSpec, heightMeasureSpec);
  71.     }

  73.     //通过设置偏移里量，将menu隐藏,changed表示是否发生改变
  74.     @Override
  75.     protected void onLayout(boolean changed, int l, int t, int r, int b) {
  76.         super.onLayout(changed, l, t, r, b);
  77.         //将整个界面右移menu的宽度,以显示主界面
  78.         if(changed) {
  79.             this.scrollTo(mMenuWidth, 0);
  80.         }
  81.     }

  83.     @Override
  84.     public boolean onTouchEvent(MotionEvent ev) {
  85.         int action=ev.getAction();
  86.         switch (action){
  87.             case MotionEvent.ACTION_UP:
  88.                 //menu向右移动的宽度，大于屏幕的1/2则切换到menu，否则回到主界面
  89.                 //getScrollX()获取当前屏幕左上角相对于整个HorizontalScrollView左上角和x方向距离，单位px
  90.                 int scrollX=getScrollX();
  91.                 if(scrollX>=(mMenuWidth/2)){
  92.                     this.smoothScrollTo(mMenuWidth,0);

  94.                 }else {
  95.                     this.smoothScrollTo(0,0);
  96.                     isMenuOpen=true;
  97.                 }
  98.                 return true;
  99.         }
  100.         return super.onTouchEvent(ev);
  101.     }

  103.     //menu和主界面互相请切换的方法
  104.     public void toggle(){
  105.         if(isMenuOpen){
  106.             this.smoothScrollTo(mMenuWidth,0);
  107.             isMenuOpen=false;
  108.         }else {
  109.             this.smoothScrollTo(0,0);
  110.             isMenuOpen=true;
  111.         }
  112.     }

  114.     //l为getScrollX,t为getScrollY,old顾名思意为之前的值
  115.     @Override
  116.     protected void onScrollChanged(int l, int t, int oldl, int oldt) {
  117.         //ViewHelper需添加nineoldandroids.jar包，以兼容android3.0以下版本
  118.         //menu旋转效果
  119.         //ViewHelper.setRotationX(mMenu,l/10);
  120.         //menu抽屉效果
  121.         //ViewHelper.setTranslationX(mMenu,l);

  123.         float scale=(float)(l/(mMenuWidth*1.0));
  124.         //右滑，主界面的缩放效果,从1放到0.8
  125.         float mContentScale=(float)(0.8+0.2*scale);
  126.         ViewHelper.setPivotX(mContent,l);
  127.         ViewHelper.setPivotY(mContent,mContent.getHeight()/2);
  128.         ViewHelper.setScaleX(mContent,mContentScale);
  129.         ViewHelper.setScaleY(mContent,mContentScale);

  131.         //右滑，menu的缩放效果,从0.7放到1
  132.         float mMenuScale=(float)(0.7+0.4*(1-scale));
  133.         ViewHelper.setScaleX(mMenu,mMenuScale);
  134.         ViewHelper.setScaleY(mMenu,mMenuScale);
  135.         ViewHelper.setAlpha(mMenu,mMenuScale);
  136.         //menu向右滑出
  137.         ViewHelper.setTranslationX(mMenu,l*scale*0.9f);
  138.         super.onScrollChanged(l, t, oldl, oldt);
  139.     }
  140. }

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">

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

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



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


  59.         <RelativeLayout
  60.             android:layout_width="wrap_content"
  61.             android:layout_height="wrap_content">
  62.             <ImageView
  63.                 android:layout_width="wrap_content"
  64.                 android:layout_height="wrap_content"
  65.                 android:id="@+id/image3"
  66.                 android:src="@drawable/photo3"
  67.                 android:layout_marginLeft="20dp"
  68.                 android:layout_marginTop="20dp"/>
  69.             <TextView
  70.                 android:layout_width="wrap_content"
  71.                 android:layout_height="wrap_content"
  72.                 android:id="@+id/text3"
  73.                 android:text="第三个Item"
  74.                 android:textSize="30sp"
  75.                 android:layout_toRightOf="@+id/image3"
  76.                 android:layout_marginLeft="20dp"
  77.                 android:layout_centerHorizontal="true"
  78.                 android:layout_marginTop="20dp"/>
  79.         </RelativeLayout>


  82.         <RelativeLayout
  83.             android:layout_width="wrap_content"
  84.             android:layout_height="wrap_content">
  85.             <ImageView
  86.                 android:layout_width="wrap_content"
  87.                 android:layout_height="wrap_content"
  88.                 android:id="@+id/image4"
  89.                 android:src="@drawable/photo4"
  90.                 android:layout_marginLeft="20dp"
  91.                 android:layout_marginTop="20dp"/>
  92.             <TextView
  93.                 android:layout_width="wrap_content"
  94.                 android:layout_height="wrap_content"
  95.                 android:id="@+id/text4"
  96.                 android:text="第四个Item"
  97.                 android:textSize="30sp"
  98.                 android:layout_toRightOf="@+id/image4"
  99.                 android:layout_marginLeft="20dp"
  100.                 android:layout_centerHorizontal="true"
  101.                 android:layout_marginTop="20dp"/>
  102.         </RelativeLayout>

  104.     </LinearLayout>


  107. </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">

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

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

  28.              </LinearLayout>
  29.         </LinearLayout>

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

  33. </RelativeLayout>

MainActivity.java

  1. package cn.com.xiebiao.horizontalscrollviewtest;

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


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

  19.     public void toggleMenu(View view){
  20.         slidingMenu.toggle();
  21.     }


  24.     @Override
  25.     public boolean onCreateOptionsMenu(Menu menu) {
  26.         // Inflate the menu; this adds items to the action bar if it is present.
  27.         getMenuInflater().inflate(R.menu.menu_main, menu);
  28.         return true;
  29.     }

  31.     @Override
  32.     public boolean onOptionsItemSelected(MenuItem item) {
  33.         // Handle action bar item clicks here. The action bar will
  34.         // automatically handle clicks on the Home/Up button, so long
  35.         // as you specify a parent activity in AndroidManifest.xml.
  36.         int id = item.getItemId();

  38.         //noinspection SimplifiableIfStatement
  39.         if (id == R.id.action_settings) {
  40.             return true;
  41.         }
  42.         return super.onOptionsItemSelected(item);
  43.     }
  44. }


AndroidMainfest.java

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

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

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

  21. </manifest>




上一篇：Chat聊天分析
下一篇：自定义View—onMeasure流程，MeasureSpec详解