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

[操作系统]QQ左侧滑动显示之按钮切换


  上一篇为大家介绍了关于自定义属性设置方法,本篇我将为大家介绍一下如何通过按钮来控制Menu的显示和隐藏,为了达到这个效果我们需要在SlidingMenu中添加三个方法,用来达到实现上述效果的目的。

  我们的SlidingMenu代码:

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;  private boolean isOpen = false;//标示菜单的状态:隐藏  or 显示    public SlidingMenu(Context context) {    this(context, null);  }    /**   * 未使用自定义属性时调用此方法   * @param context   * @param attrs   */  public SlidingMenu(Context context, AttributeSet attrs) {    this(context, attrs, 0);  }    /**   * 当使用了自定义的样式时调用   * @param context   * @param attrs   * @param defStyle   */  public SlidingMenu(Context context, AttributeSet attrs, int defStyle) {    super(context, attrs, defStyle);        //获取我们定义的属性    TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.SlidingMenu, 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:        mMenuRightPadding = a.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 50, context.getResources().getDisplayMetrics()));        break;      }    }    a.recycle();        WindowManager wm = (WindowManager) context.getSystemService(context.WINDOW_SERVICE);    DisplayMetrics outMetrics = new DisplayMetrics();    wm.getDefaultDisplay().getMetrics(outMetrics );    mScreenWidth = outMetrics.widthPixels;      }    /**   * 设置内部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);        isOpen = false;      }else{        this.smoothScrollTo(0, 0);        isOpen = true;      }      return true;    }    return super.onTouchEvent(ev);  }    /**   * 打开菜单   */  public void OpenMenu(){    if(isOpen){      return;    }else{      this.smoothScrollTo(0, 0);      isOpen = true;    }  }    /**   * 关闭菜单   */  public void CloseMenu(){    if(isOpen){      this.smoothScrollTo(mMenuWidth, 0);      isOpen = false;    }else{      return;    }  }    /**   * 切换菜单   */  public void Toggle(){    if(isOpen){      CloseMenu();    }else{      OpenMenu();    }  }  }

  与之前代码不同的地方我已经为大家特别标注,相信大家不难理解。

  我们布局文件代码:

<RelativeLayout   ="http://schemas.android.com/tools"  ="http://schemas.android.com/apk/res/com.example.android_qq_view"  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:id="@+id/slidingMenu"    android:layout_width="match_parent"    android:layout_height="match_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/qq"        >        <Button           android:id="@+id/button"          android:layout_width="wrap_content"          android:layout_height="wrap_content"          android:text="切换按钮"          />      </LinearLayout>          </LinearLayout>  </com.example.menu.SlidingMenu>  </RelativeLayout>

  我们的MainActivity:

public class MainActivity extends Activity {  private Button button;  private SlidingMenu sm ;  @Override  protected void onCreate(Bundle savedInstanceState) {    super.onCreate(savedInstanceState);    requestWindowFeature(Window.FEATURE_NO_TITLE);    setContentView(R.layout.activity_main);    sm = (SlidingMenu) findViewById(R.id.slidingMenu);    button = (Button) findViewById(R.id.button);    button.setOnClickListener(new OnClickListener() {            @Override      public void onClick(View arg0) {        sm.Toggle();      }    });  }}

  到这里我们的切换效果就已经实现了。