你的位置:首页 > 操作系统

[操作系统]QQ左侧滑动显示


  对于新版的QQ界面,左侧增加了一个滑动效果,相信小伙伴们早已按耐不住激动的心情,这种效果是如何实现的呢?本篇我们就一起来探讨一二。既然是滑动效果这里就要使用到HorizontalScrollView类,一个水平滑动的效果。

  对于这个效果我们可以分为一个Item Menu和Layout,通过对Item Menu设置padding值来隐藏和显示左侧的Menu菜单。

  我们的Menu设计代码:

<?  android:layout_width="match_parent"  android:layout_height="match_parent"  android:background="@drawable/img_frame_background" >    <LinearLayout     android:layout_width="match_parent"    android:layout_height="wrap_content"    android:layout_centerInParent="true"    android:orientation="vertical">        <RelativeLayout       android:layout_width="match_parent"      android:layout_height="match_parent">      <ImageView        android:id="@+id/img1"        android:layout_width="50dp"        android:layout_height="50dp"        android:src="@drawable/img_1"        android:layout_marginLeft="20dp"        android:layout_marginTop="20dp"        android:layout_centerVertical="true"        />      <TextView         android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_marginLeft="20dp"        android:textColor="#fff"        android:text="第一个item"        android:layout_toRightOf="@id/img1"        android:layout_centerVertical="true"        />    </RelativeLayout>        <RelativeLayout       android:layout_width="match_parent"      android:layout_height="match_parent">      <ImageView        android:id="@+id/img2"        android:layout_width="50dp"        android:layout_height="50dp"        android:src="@drawable/img_2"        android:layout_marginLeft="20dp"        android:layout_marginTop="20dp"        android:layout_centerVertical="true"        />      <TextView         android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_marginLeft="20dp"        android:textColor="#fff"        android:text="第二个item"        android:layout_toRightOf="@id/img2"        android:layout_centerVertical="true"        />    </RelativeLayout>      </LinearLayout></RelativeLayout>

  我们的主Activity的Layout代码:

<RelativeLayout   ="http://schemas.android.com/tools"  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.example.menu.SlidingMenu     android:layout_width="match_parent"    android:layout_height="match_parent">    <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/qq"        />          </LinearLayout>  </com.example.menu.SlidingMenu>  </RelativeLayout>

  我们自定义的SlidingMenu:

package com.example.menu;import android.content.Context;import android.util.AttributeSet;import android.util.DisplayMetrics;import android.util.TypedValue;import android.view.MotionEvent;import android.view.ViewGroup;import android.view.WindowManager;import android.widget.HorizontalScrollView;import android.widget.LinearLayout;public class SlidingMenu extends HorizontalScrollView {  private LinearLayout mWapper;  private ViewGroup mMenu;  private ViewGroup mContent;  private int mScreenWidth;//屏幕的宽度  private int mMenuWidth;//设置Menu的宽度    //dp  private int mMenuRightPadding;  private boolean once = false;    /**   * 未使用自定义属性时调用此方法   * @param context   * @param attrs   */  public SlidingMenu(Context context, AttributeSet attrs) {    super(context, attrs);    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());      }    /**   * 设置内部View的宽和高,以及自己的宽和高   */  @Override  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {    super.onMeasure(widthMeasureSpec, 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;    }      }  /**   * 设置子View的放置位置   * 通过设置偏移量来隐藏Menu   */  @Override  protected void onLayout(boolean changed, int l, int t, int r, int b) {    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();//Menu左侧隐藏的区域宽度      if(scrollx >= mMenuWidth/2){        this.smoothScrollTo(mMenuWidth, 0);      }else{        this.smoothScrollTo(0, 0);      }      return true;    }    return super.onTouchEvent(ev);  }  }

  我们的主Activity:

public class MainActivity extends Activity {  @Override  protected void onCreate(Bundle savedInstanceState) {    super.onCreate(savedInstanceState);    requestWindowFeature(Window.FEATURE_NO_TITLE);//去除标题    setContentView(R.layout.activity_main);      }}

  效果图: