Android自定義ViewGroup打造各種風(fēng)格的SlidingMenu
上篇給大家介紹QQ5.0側(cè)滑菜單的視頻課程，對于側(cè)滑的時的動畫效果的實現(xiàn)有了新的認(rèn)識，似乎打通了任督二脈，目前可以實現(xiàn)任意效果的側(cè)滑菜單了，感謝鴻洋大大??！
用的是HorizontalScrollView來實現(xiàn)的側(cè)滑菜單功能，HorizontalScrollView的好處是為我們解決了滑動功能，處理了滑動沖突問題，讓我們使用起來非常方便，但是滑動和沖突處理都是android中的難點，是我們應(yīng)該掌握的知識點，掌握了這些，我們可以不依賴于系統(tǒng)的API，隨心所欲打造我們想要的效果，因此這篇文章我將直接自定義ViewGroup來實現(xiàn)側(cè)滑菜單功能
首先我們先來看一看效果圖，第一個效果圖是一個最普通的側(cè)滑菜單，我們一會兒會先做出這種側(cè)滑菜單，然后再在此基礎(chǔ)上實現(xiàn)另外兩個效果
第一種
第二種
第三種
實現(xiàn)第一種側(cè)滑菜單，繼承自ViewGroup
繼承自ViewGroup需要我們自己來測量，布局，實現(xiàn)滑動的效果，處理滑動沖突，這些都是一些新手無從下手的知識點，希望看了這篇文章后可以對大家有一個幫助
自定義ViewGroup的一般思路是重寫onMeasure方法，在onMeasure方法中調(diào)用measureChild來測量子View，然后調(diào)用setMeasuredDimension來測量自己的大小。然后重寫onLayout方法，在onLayout中調(diào)用子View的layout方法來確定子View的位置，下面我們先來做好這兩件工作
初始時候我們的Content應(yīng)該是顯示在屏幕中的，而Menu應(yīng)該是顯示在屏幕外的。當(dāng)Menu打開時，應(yīng)該是這種樣子的
mMenuRightPadding是Menu距屏幕右側(cè)的一個距離，因為我們Menu打開后，Content還是會留一部分，而不是完全隱藏的
public class MySlidingMenu extends ViewGroup {
public MySlidingMenu(Context context) {
this(context, null, 0);
}
public MySlidingMenu(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public MySlidingMenu(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
DisplayMetrics metrics = new DisplayMetrics();
WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
wm.getDefaultDisplay().getMetrics(metrics);
//獲取屏幕的寬和高
mScreenWidth = metrics.widthPixels;
mScreenHeight = metrics.heightPixels;
//設(shè)置Menu距離屏幕右側(cè)的距離，convertToDp是將代碼中的100轉(zhuǎn)換成100dp
mMenuRightPadding = convertToDp(context,100);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
//拿到Menu，Menu是第0個孩子
mMenu = (ViewGroup) getChildAt(0);
//拿到Content，Content是第1個孩子
mContent = (ViewGroup) getChildAt(1);
//設(shè)置Menu的寬為屏幕的寬度減去Menu距離屏幕右側(cè)的距離
mMenuWidth = mMenu.getLayoutParams().width = mScreenWidth - mMenuRightPadding;
//設(shè)置Content的寬為屏幕的寬度
mContentWidth = mContent.getLayoutParams().width = mScreenWidth;
//測量Menu
measureChild(mMenu,widthMeasureSpec,heightMeasureSpec);
//測量Content
measureChild(mContent, widthMeasureSpec, heightMeasureSpec);
//測量自己，自己的寬度為Menu寬度加上Content寬度，高度為屏幕高度
setMeasuredDimension(mMenuWidth + mContentWidth, mScreenHeight);
}
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
//擺放Menu的位置，根據(jù)上面圖可以確定上下左右的坐標(biāo)
mMenu.layout(-mMenuWidth, 0, 0, mScreenHeight);
//擺放Content的位置
mContent.layout(0, 0, mScreenWidth, mScreenHeight);
}
/**
* 將傳進(jìn)來的數(shù)轉(zhuǎn)化為dp
*/
private int convertToDp(Context context , int num){
return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,num,context.getResources().getDisplayMetrics());
}
}
目前我們的側(cè)滑菜單中的兩個子View的位置應(yīng)該是這個樣子
接下來我們編寫xml布局文件
left_menu.xml 左側(cè)菜單的布局文件，是一個ListView
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <ListView android:id="@+id/menu_listview" android:layout_width="wrap_content" android:divider="@null" android:dividerHeight="0dp" android:scrollbars="none" android:layout_height="wrap_content"> </ListView> </RelativeLayout>
其中ListView的Item布局為left_menu_item.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="horizontal" android:layout_width="match_parent" android:gravity="center_vertical" android:layout_height="match_parent"> <ImageView android:id="@+id/menu_imageview" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/menu_1" android:padding="20dp" /> <TextView android:id="@+id/menu_textview" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="菜單1" android:textColor="#000000" android:textSize="20sp" /> </LinearLayout>
我們再來編寫內(nèi)容區(qū)域的布局文件 content.xml 其中有一個header，header中有一個ImageView，這個ImageView是menu的開關(guān)，我們點擊他的時候可以自動開關(guān)menu，然后header下面也是一個listview
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:layout_width="match_parent" android:layout_height="65dp" android:background="#000000" android:gravity="center_vertical" android:orientation="horizontal" > <ImageView android:id="@+id/menu_toggle" android:layout_width="40dp" android:layout_height="40dp" android:src="@drawable/toggle" android:paddingLeft="10dp" /> </LinearLayout> <ListView android:id="@+id/content_listview" android:layout_width="match_parent" android:layout_height="wrap_content" android:dividerHeight="0dp" android:divider="@null" android:scrollbars="none" /> </LinearLayout>
content的item的布局文件為 content_item.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="horizontal" android:layout_width="match_parent" android:gravity="center_vertical" android:background="#ffffff" android:layout_height="match_parent"> <ImageView android:id="@+id/content_imageview" android:layout_width="80dp" android:layout_height="80dp" android:src="@drawable/content_1" android:layout_margin="20dp" /> <TextView android:id="@+id/content_textview" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Content - 1" android:textColor="#000000" android:textSize="20sp"/> </LinearLayout>
在activity_main.xml中，我們將menu和content添加到我們的slidingMenu中
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#aaaaaa" > <com.example.user.slidingmenu.MySlidingMenu android:id="@+id/slidingmenu" android:layout_width="wrap_content" android:layout_height="match_parent" > <include android:id="@+id/menu" layout="@layout/left_menu" /> <include android:id="@+id/content" layout="@layout/content" /> </com.example.user.slidingmenu.MySlidingMenu> </RelativeLayout>
現(xiàn)在應(yīng)該是這種效果
左側(cè)菜單是隱藏在屏幕左側(cè)外部的，但是現(xiàn)在還不能滑動，如果想要實現(xiàn)滑動功能，我們可以使用View的scrollTo和scrollBy方法，這兩個方法的區(qū)別是scrollTo是直接將view移動到指定的位置，scrollBy是相對于當(dāng)前的位置移動一個偏移量，所以我們應(yīng)該重寫onTouchEvent方法，用來計算出當(dāng)前手指的一個偏移量，然后使用scrollBy方法一點一點的移動，就形成了一個可以跟隨手指移動的view的動畫效果了
在寫代碼之前，我們先掃清一下障礙，我們先來弄清楚這些坐標(biāo)是怎么回事
好了，把這些坐標(biāo)弄清楚后，我們就簡單多了，下面直接看onTouchEvent方法
@Override
public boolean onTouchEvent(MotionEvent event) {
int action = event.getAction();
switch (action){
case MotionEvent.ACTION_DOWN:
mLastX = (int) event.getX();
mLastY = (int) event.getY();
break;
case MotionEvent.ACTION_MOVE:
int currentX = (int) event.getX();
int currentY = (int) event.getY();
//拿到x方向的偏移量
int dx = currentX - mLastX;
if (dx < 0){//向左滑動
//邊界控制，如果Menu已經(jīng)完全顯示，再滑動的話
//Menu左側(cè)就會出現(xiàn)白邊了,進(jìn)行邊界控制
if (getScrollX() + Math.abs(dx) >= 0) {
//直接移動到（0，0）位置，不會出現(xiàn)白邊
scrollTo(0, 0);
} else {//Menu沒有完全顯示呢
//其實這里dx還是-dx，大家不用刻意去記
//大家可以先使用dx，然后運(yùn)行一下，發(fā)現(xiàn)
//移動的方向是相反的，那么果斷這里加個負(fù)號就可以了
scrollBy(-dx, 0);
}
}else{//向右滑動
//邊界控制，如果Content已經(jīng)完全顯示，再滑動的話
//Content右側(cè)就會出現(xiàn)白邊了，進(jìn)行邊界控制
if (getScrollX() - dx <= -mMenuWidth) {
//直接移動到（-mMenuWidth,0）位置，不會出現(xiàn)白邊
scrollTo(-mMenuWidth, 0);
} else {//Content沒有完全顯示呢
//根據(jù)手指移動
scrollBy(-dx, 0);
}
}
mLastX = currentX;
mLastY = currentY;
break;
}
return true;
}
現(xiàn)在我們的SlidingMenu依然是不能夠水平滑動的，但是listview可以豎直滑動，原因是我們的SlidingMenu默認(rèn)是不攔截事件的，那么事件會傳遞給他的子View去執(zhí)行，也就是說傳遞給了Content的ListView去執(zhí)行了，所以listview是可以滑動的，為了簡單，我們先重寫onInterceptTouchEvent方法，我們返回true，讓SlidingMenu攔截事件，我們的SlidingMenu就能夠滑動了，但是ListView是不能滑動的，等下我們會進(jìn)行滑動沖突的處理，現(xiàn)在先實現(xiàn)SlidingMenu的功能
@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
return true;
}
好了，現(xiàn)在我們可以自由的滑動我們的SlidingMenu了，并且進(jìn)行了很好的邊界控制，現(xiàn)在我們再添加個功能，就是當(dāng)Menu打開大于二分之一時，松開手指，Menu自動打開。當(dāng)Menu打開小于二分之一時，松開手指，Menu自動關(guān)閉。自動滑動的功能我們要借助Scroller來實現(xiàn)
我們在構(gòu)造方法中初始化一個Scroller
public MySlidingMenu(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
...
mScroller = new Scroller(context);
...
}
然后重寫computeScroll方法，這個方法是保證Scroller自動滑動的必須方法，這是一個模板方法，到哪里都這么些就好了
@Override
public void computeScroll() {
if (mScroller.computeScrollOffset()){
scrollTo(mScroller.getCurrX(), mScroller.getCurrY());
invalidate();
}
}
接著我們在onTouchEvent的ACTION_UP中進(jìn)行判斷，判斷當(dāng)前menu打開了多少
case MotionEvent.ACTION_UP:
if (getScrollX() < -mMenuWidth / 2){//打開Menu
//調(diào)用startScroll方法，第一個參數(shù)是起始X坐標(biāo)，第二個參數(shù)
//是起始Y坐標(biāo)，第三個參數(shù)是X方向偏移量，第四個參數(shù)是Y方向偏移量
mScroller.startScroll(getScrollX(), 0, -mMenuWidth - getScrollX(), 0, 300);
//設(shè)置一個已經(jīng)打開的標(biāo)識，當(dāng)實現(xiàn)點擊開關(guān)自動打開關(guān)閉功能時會用到
isOpen = true;
//一定不要忘了調(diào)用這個方法重繪，否則沒有動畫效果
invalidate();
}else{//關(guān)閉Menu
//同上
mScroller.startScroll(getScrollX(), 0, -getScrollX(), 0, 300);
isOpen = false;
invalidate();
}
break;
關(guān)于startScroll中的startX和startY好判斷，那么dx和dy怎么計算呢？其實也非常簡單，比如我們startX坐標(biāo)為30，我們想移動到-100，那么startX+dx = -100 –> dx = -100 - startX –> dx = -130
好了現(xiàn)在我們就可以實現(xiàn)松開手指后自動滑動的動畫效果了
現(xiàn)在我們還需要點擊content中左上角的一個三角，如果當(dāng)前menu沒有打開，則自動打開，如果已經(jīng)打開，則自動關(guān)閉的功能，自動滑動的效果我們要借助Scroller.startScroll方法
/**
* 點擊開關(guān)，開閉Menu，如果當(dāng)前menu已經(jīng)打開，則關(guān)閉，如果當(dāng)前menu已經(jīng)關(guān)閉，則打開
*/
public void toggleMenu(){
if (isOpen){
closeMenu();
}else{
openMenu();
}
}
/**
* 關(guān)閉menu
*/
private void closeMenu() {
//也是使用startScroll方法，dx和dy的計算方法一樣
mScroller.startScroll(getScrollX(),0,-getScrollX(),0,500);
invalidate();
isOpen = false;
}
/**
* 打開menu
*/
private void openMenu() {
mScroller.startScroll(getScrollX(),0,-mMenuWidth-getScrollX(),0,500);
invalidate();
isOpen = true;
}
然后我們可以在MainActivity中拿到我們content左上角三角形的imageview，然后給他設(shè)置一個點擊事件，調(diào)用我們的toggleMenu方法
mMenuToggle.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
mSlidingMenu.toggleMenu();
}
});
處理滑動沖突
由于我們的menu和content是listview，listview是支持豎直滑動的，而我們的slidingMenu是支持水平滑動的，因此會出現(xiàn)滑動的沖突。剛才我們直接在onInterceptTouchEvent中返回了true，因此SlidingMenu就會攔截所有的事件，而ListView接收不到任何的事件，因此ListView不能滑動了，我們要解決這個滑動沖突很簡單，只需要判斷當(dāng)前是水平滑動還是豎直滑動，如果是水平滑動的話則讓SlidingMenu攔截事件，如果是豎直滑動的話就不攔截事件，把事件交給子View的ListView去執(zhí)行
@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
boolean intercept = false;
int x = (int) ev.getX();
int y = (int) ev.getY();
switch (ev.getAction()){
case MotionEvent.ACTION_DOWN:
intercept = false;
break;
case MotionEvent.ACTION_MOVE:
int deltaX = (int) ev.getX() - mLastXIntercept;
int deltaY = (int) ev.getY() - mLastYIntercept;
if (Math.abs(deltaX) > Math.abs(deltaY)){//橫向滑動
intercept = true;
}else{//縱向滑動
intercept = false;
}
break;
case MotionEvent.ACTION_UP:
intercept = false;
break;
}
mLastX = x;
mLastY = y;
mLastXIntercept = x;
mLastYIntercept = y;
return intercept;
}
好了，現(xiàn)在我們的滑動沖突就解決了，我們既可以水平滑動SlidingMenu，又可以豎直滑動ListView，那么第一種SlidingMenu就已經(jīng)實現(xiàn)了，我們再來看看另外兩種怎么去實現(xiàn)
實現(xiàn)第二種QQ V6.2.3風(fēng)格的SlidingMenu
這種SlidingMenu是和QQ v6.2.3 的側(cè)滑菜單風(fēng)格一致的，我們發(fā)現(xiàn)Menu和Content的滑動速度是有一個速度差的，實際上我們可以通過修改Menu的偏移量來達(dá)到這種效果
此時Menu的偏移量為mMenuWidth的2/3，當(dāng)我們慢慢打開Menu的同時，修改Menu的偏移量，最終修改為0
這樣就達(dá)到了一種速度差的效果，我們只需要在onTouchEvent的ACTION_MOVE和computeScroll中添加一行如下代碼就可以
mMenu.setTranslationX(2*(mMenuWidth+getScrollX())/3);
我們分析一下，在最開始，mMenuWidth+getScrollX=mMenuWidth，再乘以2/3，得到的就是mMenuWidth的2/3 ， 當(dāng)我們滑動至Menu完全打開時，mMenuWidth+getScrollX=0 ， 這就達(dá)到了我們的效果
為什么要在computeScroll中也添加這一行代碼呢，因為當(dāng)我們滑動過程中，如果我們手指離開屏幕，ACTION_MOVE肯定就不執(zhí)行了，但是當(dāng)我們手指離開屏幕后，會有一段自動打開或者關(guān)閉的動畫，那么這段動畫應(yīng)該繼續(xù)去設(shè)置Menu的偏移量，因此我們在computeScroll中也要添加這一行代碼。
好了，效果我們已經(jīng)實現(xiàn)了，只需要去設(shè)置Menu的偏移量就可以了，是不是非常簡單
實現(xiàn)第三種QQ V5.0風(fēng)格的SlidingMenu
這個效果中Menu有一個偏移的效果，透明度的變化以及放大的效果。Content中有一個縮小的效果。
首先我們要有一個變量，用來記錄當(dāng)前menu已經(jīng)打開了多少百分比。
這里我們要注意，getScrollX得到的數(shù)值正好是負(fù)值，所以我們計算的時候要將getScrollX的值取絕對值再去計算，我們在onTouchEvent的MOVE中要計算這個值，同時在computeScroll方法中也要計算這個值，因為當(dāng)我們手指抬起時，可能會執(zhí)行一段自動打開或者關(guān)閉的動畫，那么我們在MOVE中的計算肯定停止了，但是在執(zhí)行動畫的過程中，是Scroller在起作用，那么computeScroll就會執(zhí)行直到動畫結(jié)束，因此我們要在computeScroll中同樣進(jìn)行計算
scale = Math.abs((float)getScrollX()) / (float) mMenuWidth;
scale的值是[0，1]的，因此我們就可以根據(jù)這個值來對menu的偏移量進(jìn)行設(shè)置。
我們可以通過設(shè)置View的setScaleX和setScaleY來對View進(jìn)行放大縮小，當(dāng)然這個縮放比例要根據(jù)我們的scale值來改變，首先我們的Menu有一個放大的效果，我們就指定為Menu從0.7放大到1.0，那么我們就可以這樣寫
mMenu.setScaleX(0.7f + 0.3f*scale); mMenu.setScaleY(0.7f + 0.3f*scale);
透明度是從0到1的，所以我們直接用scale的值就可以了
mMenu.setAlpha(scale);
我還給Menu設(shè)置了一個偏移量，這個偏移量大家可以自己計算，我是這樣計算的
mMenu.setTranslationX(mMenuWidth + getScrollX() - (mMenuWidth/2)*(1.0f-scale));
設(shè)置完Menu后，我們再來設(shè)置Content，Content的大小是從1.0縮小到0.7，因此我們這樣寫
mContent.setScaleX(1 - 0.3f*scale); mContent.setPivotX(0); mContent.setScaleY(1.0f - 0.3f * scale);
其中mContent.setPivotX(0)是讓Content的縮放中心店的X軸坐標(biāo)為0點
我們可以將這個變化的過程抽取為一個方法
private void slidingMode3(){
mMenu.setTranslationX(mMenuWidth + getScrollX() - (mMenuWidth/2)*(1.0f-scale));
mMenu.setScaleX(0.7f + 0.3f*scale);
mMenu.setScaleY(0.7f + 0.3f*scale);
mMenu.setAlpha(scale);
mContent.setScaleX(1 - 0.3f*scale);
mContent.setPivotX(0);
mContent.setScaleY(1.0f - 0.3f * scale);
}
將這個方法添加到onTouchEvent的ACTION_MOVE和computeScroll中就可以了。
我們看到所有的滑動風(fēng)格都是在基于第一種基礎(chǔ)上，修改Menu或者Content的translationX或者scaleX scaleY的值來決定的，因此我們可以打造各種各樣的SlidingMenu來。
以上所述是小編給大家介紹的Android自定義ViewGroup打造各種風(fēng)格的SlidingMenu的相關(guān)知識，希望對大家有所幫助！
- Android自定義Adapter的ListView的思路及代碼
- android開發(fā)中ListView與Adapter使用要點介紹
- Android中 自定義數(shù)據(jù)綁定適配器BaseAdapter的方法
- 舉例講解Android應(yīng)用中SimpleAdapter簡單適配器的使用
- 詳解Android App中ViewPager使用PagerAdapter的方法
- Android自定義Spinner下拉列表（使用ArrayAdapter和自定義Adapter實現(xiàn)）
- Android App開發(fā)中自定義View和ViewGroup的實例教程
- Android自定義ViewGroup之實現(xiàn)FlowLayout流式布局
- Android自定義ViewGroup的實現(xiàn)方法
- Android自定義viewgroup 使用adapter適配數(shù)據(jù)（6）
相關(guān)文章
這篇文章主要介紹了android讀寫中文如何避免亂碼的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家具有一定的參考價值，需要的朋友們下面來一起看看吧。2017-04-04
這篇文章主要介紹了Android編程設(shè)計模式之原型模式,結(jié)合實例形式詳細(xì)分析了Android設(shè)計模式之原型模式的概念、原理、定義、使用方法及相關(guān)注意事項,需要的朋友可以參考下2017-12-12
這篇文章主要介紹了詳解Android Gradle插件3.0挖坑日記,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
Fragment里添加ListView不要用ListFragment
這篇文章主要介紹了Fragment里添加ListView不要用ListFragment,需要的朋友可以參考下2015-07-07
Android手勢滑動實現(xiàn)ImageView縮放圖片大小
這篇文章主要為大家詳細(xì)介紹了Android手勢滑動實現(xiàn)ImageView縮放圖片大小的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-02-02
這篇文章主要介紹了Android中Blade的使用實例詳解,需要的朋友可以參考下2018-02-02
這篇文章主要介紹了Android中Handler消息傳遞機(jī)制 的相關(guān)資料,需要的朋友可以參考下2016-03-03
Android如何通過scheme跳轉(zhuǎn)界面，這篇文章就為大家介紹了Android通過scheme跳轉(zhuǎn)界面的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章主要為大家詳細(xì)介紹了android實現(xiàn)簡單圓弧效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
詳解Android?Flutter中SliverAppBar的使用教程
對于一個APP來說，肯定會有一個AppBar，這個AppBar一般包含了APP的導(dǎo)航信息等。在lutter已經(jīng)為我們提供了一個非常強(qiáng)大的AppBar組件，這個組件叫做SliverAppBar。本文就來聊聊它的具體使用吧2023-01-01