之前寫過一片文章是關於使用Android的DrawerLayout來實現側滑選單的——Android側滑選單DrawerLayout使用。
本文直接使用自定義的ViewGroup來實現Android側滑選單。
用到的技術： 1、Android自定義控制元件； 2、Android 的事件攔截onInterceptTouchEvent和觸控事件onTouchEvent處理。 3、Scroller的使用。
效果圖：
不多說，馬上上程式碼，自定義的MyViewGroup：
public class MyViewGroup extends ViewGroup {
private int mMostRecentX; // 最新的x軸偏移量
private final int MENU_SCREEN = 0; // 選單介面
private final int MAIN_SCREEN = 1; // 主介面
private int currentScreen = MAIN_SCREEN; // 當前螢幕, 預設為: 主介面
private Scroller mScroller; // 模擬資料物件
public MyViewGroup(Context context, AttributeSet attrs) {
super(context, attrs);
mScroller = new Scroller(context);
}
/**
* 此方法是SlideMenu控制元件測量寬和高時回撥.
* widthMeasureSpec 寬度測量規格: 整個螢幕的寬
* heightMeasureSpec 高度測量規格: 整個螢幕的高
*/
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
// 測量選單的寬和高
View menuView = getChildAt(0);
menuView.measure(menuView.getLayoutParams().width, heightMeasureSpec);
// 測量主介面的寬和高
View mainView = getChildAt(1);
// 主介面的寬度是整個螢幕的寬.
mainView.measure(widthMeasureSpec, heightMeasureSpec);
}
/**
* 佈置SlideMenu中包含的子控制元件的位置.
* left = 0;
* top = 0;
* right = 整個螢幕的寬度;
* bottom = 整個螢幕的高度;
*/
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
// 佈置選單介面的位置: left=-選單的寬度, top=0, right=0, bottom=整個螢幕的高度
View menuView = getChildAt(0);
menuView.layout(-menuView.getMeasuredWidth(), 0, 0, b);
// 佈置主介面的位置: left=0, top=0, right=整個螢幕的寬度, bottom=整個螢幕的高度;
View mainView = getChildAt(1);
mainView.layout(l, t, r, b);
}
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
mMostRecentX = (int) event.getX();
break;
case MotionEvent.ACTION_MOVE:
int moveX = (int) event.getX();
// 1. 計算差值: mMostRecentX - moveX = 48 - 42 = 6;
int diff = mMostRecentX - moveX;
// 2. 限定左右邊界
int currentX = getScrollX() + diff;
if(currentX < -getChildAt(0).getMeasuredWidth()) {
// 超出了左邊界, 已經移動超過-240
scrollTo(-getChildAt(0).getMeasuredWidth(), 0);
} else if(currentX > 0) {
scrollTo(0, 0);
} else {
// 3. 根據差值, 使用scrollBy方法移動螢幕. scrollBy(6, 0);
scrollBy(diff, 0);
}
// 4. 需要把mMostRecentX重新賦值, 賦值為moveX. mMostRecentX = 48;
mMostRecentX = moveX;
break;
case MotionEvent.ACTION_UP:
// 取出當前x軸的偏移量
int scrollX = getScrollX();
if(scrollX > (-getChildAt(0).getMeasuredWidth() / 2)) {
// 當前應該切換到主介面
currentScreen = MAIN_SCREEN;
} else {
// 當前應該切換到選單介面
currentScreen = MENU_SCREEN;
}
switchScreen();
break;
default:
break;
}
return true; // 完全自己處理事件
}
/**
* 根據currentScreen來切換螢幕顯示的介面
*/
private void switchScreen() {
int startX = getScrollX();
int dx = 0;
if(currentScreen == MAIN_SCREEN) {
// 切換到主介面
// scrollTo(0, 0);
// 演算法: 目地的值 - startX
dx = 0 - startX;
} else if(currentScreen == MENU_SCREEN) {
// scrollTo(-getChildAt(0).getMeasuredWidth(), 0);
dx = -getChildAt(0).getMeasuredWidth() - startX;
}
// 開始模擬資料了, 只模擬資料
mScroller.startScroll(startX, 0, dx, 0, Math.abs(dx) * 2);
// 重繪重新整理.
invalidate(); // invalidate -> drawChild -> child.draw -> computeScroll
}
@Override
public void computeScroll() {
// 更新scrollX或者scrollY的值.
if(mScroller.computeScrollOffset()) {
// 當前正在模擬資料, 取出x軸模擬的值, 設定給scrollTo方法.
int currX = mScroller.getCurrX();
// System.out.println("currX: " + currX);
scrollTo(currX, 0);
invalidate(); // 遞迴
}
}
/**
* 是否顯示選單
* @return
*/
public boolean isShowMenu() {
return currentScreen == MENU_SCREEN;
}
/**
* 隱藏選單
*/
public void hideMenu() {
currentScreen = MAIN_SCREEN;
switchScreen();
}
/**
* 顯示選單
*/
public void showMenu() {
currentScreen = MENU_SCREEN;
switchScreen();
}
@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
switch (ev.getAction()) {
case MotionEvent.ACTION_DOWN:
mMostRecentX = (int) ev.getX();
break;
case MotionEvent.ACTION_MOVE:
int moveX = (int) ev.getX();
// 如果移動的偏移量的距離超過了10
int diff = moveX - mMostRecentX;
if(Math.abs(diff) > 10) {
// System.out.println("橫著滑動了");
return true;
}
break;
default:
break;
}
return super.onInterceptTouchEvent(ev);
}
}
複製程式碼希望讀者可以認真的看下注釋，註釋已經標註得很明白了。
使用的時候，在xml中使用，需要佈局側滑選單欄和主介面
activity_custom_view_group：
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.linwj.myapplication.CustomViewGroupActivity">
<com.example.linwj.myapplication.com.example.linwj.myapplication.view.MyViewGroup
android:id="@+id/slidemenu"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<include layout="@layout/slidemenu_menu"/>
<include layout="@layout/slidemenu_main"/>
</com.example.linwj.myapplication.com.example.linwj.myapplication.view.MyViewGroup>
</RelativeLayout>
複製程式碼slidemenu_menu.xml：
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="240dip"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="240dip"
android:layout_height="match_parent"
android:background="@mipmap/menu_bg"
android:orientation="vertical" >
<TextView
style="@style/menu_tab_style"
android:background="#33663300"
android:drawableLeft="@mipmap/tab_news"
android:text="新聞" />
<TextView
style="@style/menu_tab_style"
android:drawableLeft="@mipmap/tab_read"
android:text="訂閱" />
<TextView
style="@style/menu_tab_style"
android:drawableLeft="@mipmap/tab_local"
android:text="本地" />
<TextView
style="@style/menu_tab_style"
android:drawableLeft="@mipmap/tab_ties"
android:text="跟帖" />
<TextView
style="@style/menu_tab_style"
android:drawableLeft="@mipmap/tab_pics"
android:text="圖片" />
<TextView
style="@style/menu_tab_style"
android:drawableLeft="@mipmap/tab_ugc"
android:text="話題" />
</LinearLayout>
</ScrollView>
複製程式碼slidemenu_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.linwj.myapplication.CustomViewGroupActivity">
<com.example.linwj.myapplication.com.example.linwj.myapplication.view.MyViewGroup
android:id="@+id/slidemenu"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<include layout="@layout/slidemenu_menu"/>
<include layout="@layout/slidemenu_main"/>
</com.example.linwj.myapplication.com.example.linwj.myapplication.view.MyViewGroup>
</RelativeLayout>
複製程式碼Activity:
public class CustomViewGroupActivity extends AppCompatActivity implements View.OnClickListener {
private MyViewGroup myViewGroup;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_custom_view_group);
findViewById(R.id.ib_slidemenu_main_back).setOnClickListener(this);
myViewGroup = (MyViewGroup) findViewById(R.id.slidemenu);
}
@Override
public void onClick(View v) {
// 切換當前螢幕顯示的狀態
if(myViewGroup.isShowMenu()) {
// 顯示選單, 切換到主介面
myViewGroup.hideMenu();
} else {
// 顯示主介面, 切換到選單
myViewGroup.showMenu();
}
}
public void clickTab(View v) {
TextView tv = (TextView) v;
Toast.makeText(this, tv.getText(), Toast.LENGTH_SHORT).show();
}
}
複製程式碼這就是自定義ViewGroup實現Android的側滑選單以及使用，希望大家喜歡！！！