Android控件View打造完美的自定義側(cè)滑菜單
一、概述
在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è)置半透明效果。這個當(dāng)然簡單了,關(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)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
android教程使用webview訪問https的url處理sslerror示例
這篇文章主要介紹了android教程使用webview訪問https的url處理sslerror示例,大家參考使用吧2014-01-01通過FancyView提供 Android 酷炫的開屏動畫實例代碼
這篇文章主要介紹了通過FancyView提供 Android 酷炫的開屏動畫的實現(xiàn)代碼,需要的朋友可以參考下2017-12-12Android從源碼的角度徹底理解事件分發(fā)機制的解析(上)
這篇文章主要介紹了Android從源碼的角度徹底理解事件分發(fā)機制的解析,具有很好的參考價值,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-05-05