欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Android控件View打造完美的自定義側(cè)滑菜單

 更新時間：2017年02月20日 15:14:55   作者：gxflh  
這篇文章主要介紹了Android控件View打造完美的自定義側(cè)滑菜單的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下

一、概述

　　在App中，經(jīng)常會出現(xiàn)側(cè)滑菜單，側(cè)滑滑出View等效果，雖然說Android有很多第三方開源庫，但是實際上咱們可以自己也寫一個自定義的側(cè)滑View控件，其實不難，主要涉及到以下幾個要點：

1.對Android中Window類中的DecorView有所了解

2.對Scroller類實現(xiàn)平滑移動效果

3.自定義ViewGroup的實現(xiàn)

首先來看看效果圖吧：

     

　　下面現(xiàn)在就來說說這里咱們實現(xiàn)側(cè)滑View的基本思路吧，這里我采用的是自定義一個繼承于RelativeLayout的控件叫做XCSlideView類吧。

首先從布局文件中inflater出來一個menuView，然后通過addView的方法，將該側(cè)滑View添加到自定義的控件View中怎么讓XCSlideView 這個側(cè)滑View 隱藏到屏幕之外呢？很簡單通過ScrollTo方法，移動一個屏幕寬度的距離即可，這里以左側(cè)滑出為例吧，只需要這樣 XCSlideView.this.scrollTo(mScreenWidth, 0);mScreenWidth是屏幕寬度。下面還要處理的就是底下的半透明黑色的蒙層效果，這個其實就是一個View，然后設(shè)置半透明效果。這個當然簡單了，關(guān)鍵是咱們讓他顯示在咱們的自定義側(cè)滑View的下面呢，這里咱們先給出DecorView的簡單分析，方便下面介紹添加半透明View蒙層下：

下面是對上面這張圖的解釋：

1、DecorView為整個Window界面的最頂層View。

2、DecorView只有一個子元素為LinearLayout。代表整個Window界面，包含通知欄，標題欄，內(nèi)容顯示欄三塊區(qū)域。

3、LinearLayout里有兩個FrameLayout子元素。

  (20)為標題欄顯示界面。只有一個TextView顯示應(yīng)用的名稱。也可以自定義標題欄，載入后的自定義標題欄View將加入FrameLayout中。

  (21)為內(nèi)容欄顯示界面。就是setContentView()方法載入的布局界面，加入其中。 

有了上面的DecorVIew知識背景，現(xiàn)在就來說說 怎么添加蒙層View和將自定義側(cè)滑View添加到Activity的DecorView中，首先把蒙層View添加到

（31）customView中去，然后將自定義側(cè)滑View添加到 （21）FrameLayout中去，至于為什么要這樣，是因為考慮到自定義側(cè)滑View不一定是寬度為屏幕寬度，所以才這么做，而且也方面處理有無標題欄，有無采用沉浸式狀態(tài)欄設(shè)計等情況。

二、自定義側(cè)滑View的實現(xiàn)

根據(jù)上面的概述，大家應(yīng)該知道大概的思路了，下面我就給出自定義側(cè)滑View類的核心代碼：

1、自定義側(cè)滑View用到的變量:

//側(cè)滑方向-從哪側(cè)滑出
 public static enum Positon {
 LEFT, RIGHT
 }
 private Context mContext;
 private Activity mActivity;
 private Scroller mScroller = null;
 //側(cè)滑菜單布局View
 private View mMenuView;
 //底部蒙層View
 private View mMaskView;
 private int mMenuWidth = 0;
 //屏幕寬度
 private int mScreenWidth = 0;
 //是否在滑動中
 private boolean mIsMoving = false;
 //顯示登錄界面與否
 private boolean mShow = false;
 //滑動動畫時間
 private int mDuration = 600;
 //缺省側(cè)滑方向為左
 private Positon mPositon = Positon.LEFT;

2、初始化創(chuàng)建自定義側(cè)滑View：

**
 * 創(chuàng)建側(cè)滑菜單View
 */
 public static XCSlideView create(Activity activity) {
 XCSlideView view = new XCSlideView(activity);
 return view;
 }
 /**
 * 創(chuàng)建側(cè)滑菜單View
 */
 public static XCSlideView create(Activity activity, Positon positon) {
 XCSlideView view = new XCSlideView(activity);
 view.mPositon = positon;
 return view;
 }

3、創(chuàng)建半透明蒙層View，并添加到contentView中去

/**
 * 創(chuàng)建 蒙層View并添加到contentView中
 */
 private void attachToContentView(Activity activity, Positon positon) {
 mPositon = positon;
 ViewGroup contentFrameLayout = (ViewGroup) activity.findViewById(android.R.id.content);
 ViewGroup contentView = ((ViewGroup) contentFrameLayout.getChildAt(0));
 mMaskView = new View(activity);
 mMaskView.setBackgroundColor(mContext.getResources().getColor(R.color.mask_color));
 contentView.addView(mMaskView, contentView.getLayoutParams());
 mMaskView.setVisibility(View.GONE);
 mMaskView.setClickable(true);
 mMaskView.setOnClickListener(new OnClickListener() {
 @Override
 public void onClick(View view) {
 if (isShow()) {
  dismiss();
 }
 }
 });
 }

4、設(shè)置側(cè)滑菜單View，并添加到DectorView->LinearLayout->內(nèi)容顯示區(qū)域View（FrameLayout）中

/**
 * 設(shè)置側(cè)滑菜單View，并添加到DectorView->LinearLayout->內(nèi)容顯示區(qū)域View中
 */
 public void setMenuView(Activity activity, View view) {
 mActivity = activity;
 mMenuView = view;
 LayoutParams params = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
 addView(mMenuView, params);
 mMenuView.post(new Runnable() {
 @Override
 public void run() {
 // TODO Auto-generated method stub
 mMenuWidth = mMenuView.getWidth();
 switch (mPositon) {
  case LEFT:
  XCSlideView.this.scrollTo(mScreenWidth, 0);
  break;
  case RIGHT:
  XCSlideView.this.scrollTo(-mScreenWidth, 0);
  break;
 }

 }
 });
 ViewGroup contentFrameLayout = (ViewGroup) activity.findViewById(android.R.id.content);
 ViewGroup contentView = contentFrameLayout;
 contentView.addView(this);
 FrameLayout.LayoutParams layoutParams = (FrameLayout.LayoutParams) this.getLayoutParams();
 switch (mPositon) {
 case LEFT:
 layoutParams.gravity = Gravity.LEFT;
 layoutParams.leftMargin = 0;
 break;
 case RIGHT:
 layoutParams.gravity = Gravity.RIGHT;
 layoutParams.rightMargin = 0;
 break;
 }
 TextView titleFrameLayout = (TextView) activity.findViewById(android.R.id.title);
 if( titleFrameLayout != null){
 layoutParams.topMargin = DensityUtil.getStatusBarHeight(mContext);
 }
 int flags = mActivity.getWindow().getAttributes().flags;
 int flag = (flags & WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
 if(flag == WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS){
 //說明狀態(tài)欄使用沉浸式
 layoutParams.topMargin = DensityUtil.getStatusBarHeight(mContext);
 }
 this.setLayoutParams(layoutParams);
 }

5、處理自定義側(cè)滑View的側(cè)滑滑動和隱藏效果：

/**
 * 顯示側(cè)滑菜單View
 */
 public void show(){
 if(isShow() && !mIsMoving)
 return;
 switch (mPositon) {
 case LEFT:
 startScroll(mMenuWidth, -mMenuWidth, mDuration);
 break;
 case RIGHT:
 startScroll(-mMenuWidth, mMenuWidth, mDuration);
 break;
 }
 switchMaskView(true);
 mShow = true;
 }
 /**
 * 蒙層顯示開關(guān)
 */
 private void switchMaskView(boolean bShow){
 if(bShow){
 mMaskView.setVisibility(View.VISIBLE);
 Animation animation = new AlphaAnimation(0.0f, 1.0f);
 animation.setDuration(mDuration);
 mMaskView.startAnimation(animation);
 }else{
 mMaskView.setVisibility(View.GONE);
 }
 }
 /**
 * 關(guān)閉側(cè)滑菜單View
 */
 public void dismiss() {
 // TODO Auto-generated method stub
 if(!isShow() && !mIsMoving)
 return;
 switch (mPositon) {
 case LEFT:
 startScroll(XCSlideView.this.getScrollX(), mMenuWidth, mDuration);
 break;
 case RIGHT:
 startScroll(XCSlideView.this.getScrollX(), -mMenuWidth, mDuration);
 break;
 }
 switchMaskView(false);
 mShow = false;
 }
 public boolean isShow(){
 return mShow;
 }
 @Override
 public void computeScroll() {
 // TODO Auto-generated method stub
 if (mScroller.computeScrollOffset()) {
 scrollTo(mScroller.getCurrX(), mScroller.getCurrY());
 // 更新界面
 postInvalidate();
 mIsMoving = true; 
 } else {
 mIsMoving = false;
 }
 super.computeScroll();
 }
 /**
 * 拖動移動
 */
 public void startScroll(int startX, int dx,int duration){
 mIsMoving = true;
 mScroller.startScroll(startX,0,dx,0,duration);
 invalidate();
 }

三、如何使用該自定義側(cè)滑View控件

使用起來，比較簡單，通過create方法創(chuàng)建一個側(cè)滑VIew，然后通過setMenuView方法設(shè)置一個側(cè)滑View進去，有需要設(shè)置寬度的話， 通過setMenuWidth方法來設(shè)置即可，最后用show（）方法滑出來就可以啦，使用起來是不是很方便？

private XCSlideView mSlideViewLeft;
//屏幕寬度
private int mScreenWidth = 0;
View menuViewLeft = LayoutInflater.from(mContext).inflate(R.layout.layout_slideview,null);
mSlideViewLeft = XCSlideView.create(this, XCSlideView.Positon.LEFT);
mSlideViewLeft.setMenuView(MainActivity.this, menuViewLeft);
mSlideViewLeft.setMenuWidth(mScreenWidth * 7 / 9);
Button left = (Button)findViewById(R.id.btn_left);
 left.setOnClickListener(new View.OnClickListener() {

 @Override
 public void onClick(View v) {
 // TODO Auto-generated method stub
 if (!mSlideViewLeft.isShow())
  mSlideViewLeft.show();
 }
 });

四、源碼下載

下載：側(cè)滑菜單

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論