Android自定義實(shí)現(xiàn)側(cè)滑菜單效果
更新時(shí)間：2019年01月28日 11:06:06 作者：oblivion0001
這篇文章主要為大家詳細(xì)介紹了Android自定義實(shí)現(xiàn)側(cè)滑菜單效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了Android自定義實(shí)現(xiàn)側(cè)滑菜單的具體代碼，供大家參考，具體內(nèi)容如下
實(shí)現(xiàn)原理：繼承ViewGroup控件要顯示到界面上需要重寫OnMeature()
OnLayout()，因此在實(shí)現(xiàn)OnLayout()的時(shí)候，將菜單界面劃出到屏幕左側(cè)，動(dòng)態(tài)改變菜單界面距離scrollXto()左邊界的距離就能實(shí)現(xiàn)滑動(dòng)效果。
1.繼承ViewGroup
2.事件分發(fā)機(jī)制
在主界面中添加兩個(gè)子控件
<com.oblivion.ui.SlideMenu xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/sliding_menu" android:layout_width="match_parent" android:layout_height="match_parent"> <!-- 在SlidingMenu中的索引0 --> <include layout="@layout/menu" /> <!-- 在SlidingMenu中的索引1 --> <include layout="@layout/main" /> </com.oblivion.ui.SlideMenu>
menu菜單布局
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="240dp"
android:layout_height="match_parent"
android:background="@drawable/menu_bg">
<LinearLayout
android:layout_width="240dp"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="@+id/tv_news"
style="@style/menu_item"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/select_menu"
android:clickable="true"
android:drawableLeft="@drawable/tab_news"
android:drawablePadding="10dp"
android:text="新聞" />
<TextView
android:id="@+id/tv_read"
style="@style/menu_item"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableLeft="@drawable/tab_read"
android:drawablePadding="10dp"
android:text="訂閱" />
<TextView
android:id="@+id/tv_local"
style="@style/menu_item"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableLeft="@drawable/tab_local"
android:drawablePadding="10dp"
android:text="本地" />
<TextView
android:id="@+id/tv_ties"
style="@style/menu_item"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableLeft="@drawable/tab_ties"
android:drawablePadding="10dp"
android:text="跟帖" />
<TextView
android:id="@+id/tv_pics"
style="@style/menu_item"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableLeft="@drawable/tab_pics"
android:drawablePadding="10dp"
android:text="圖片" />
<TextView
android:id="@+id/tv_ugc"
style="@style/menu_item"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableLeft="@drawable/tab_ugc"
android:drawablePadding="10dp"
android:text="話題" />
<TextView
android:id="@+id/tv_vote"
style="@style/menu_item"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableLeft="@drawable/tab_vote"
android:drawablePadding="10dp"
android:text="投票" />
<TextView
android:id="@+id/tv_focus"
style="@style/menu_item"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableLeft="@drawable/tab_focus"
android:drawablePadding="10dp"
android:text="焦點(diǎn)" />
</LinearLayout>
</ScrollView>顯示界面布局
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/top_bar_bg"
android:orientation="horizontal">
<ImageView
android:id="@+id/iv_showmenu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/main_back" />
<View
android:layout_width="1dp"
android:layout_height="match_parent"
android:background="@drawable/top_bar_divider"></View>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="新聞首頁(yè)"
android:textColor="#ffffff"
android:textSize="30sp" />
</LinearLayout>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:text="這么low"
android:textColor="#000000"
android:textSize="20sp" />
</LinearLayout>實(shí)現(xiàn)原理：繼承ViewGroup控件要顯示到界面上需要重寫OnMeature() OnLayout()，因此在實(shí)現(xiàn)OnLayout()的時(shí)候，將菜單界面劃出到屏幕左側(cè)，動(dòng)態(tài)改變菜單界面距離scrollXto()左邊界的距離就能實(shí)現(xiàn)滑動(dòng)效果。
實(shí)現(xiàn)onMeasure()和onLayout()方法，對(duì)控件進(jìn)行布局
/**
* 測(cè)量布局中的控件
*
* @param widthMeasureSpec
* @param heightMeasureSpec
*/
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);//測(cè)量自身寬高
//得到menu界面
menuView = getChildAt(0);
menuViewWidth = menuView.getLayoutParams().width;
//得到main界面
mainView = getChildAt(1);
//設(shè)定menuView的寬------不用setMeasure...
menuView.measure(MeasureSpec.makeMeasureSpec(menuViewWidth, MeasureSpec.EXACTLY), heightMeasureSpec);
//設(shè)定mainView的寬
mainView.measure(widthMeasureSpec, heightMeasureSpec);
}
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
int menuleft = -menuViewWidth;//menu設(shè)定的left
int menuright = 0;//menu設(shè)定的right
int menutop = 0;//menu設(shè)定的top
int menubottom = b - t;//menu設(shè)定的bottom
//布局menuView 控件xx2
menuView.layout(menuleft, menutop, menuright, menubottom);
int mainleft = 0;//main設(shè)定的left
int mainright = r - l;//main設(shè)定的right
int maintop = 0;//main設(shè)定的top
int mainbottom = b - t;//main設(shè)定的bottom
mainView.layout(mainleft, maintop, mainright, mainbottom);
System.out.println(menuViewWidth--);//原來(lái)這這里減減了；
}通過onTouch（）方法，以及scrollX()和getScrollX()方法獲取邊界值，動(dòng)態(tài)改變?nèi)?shí)現(xiàn)滑動(dòng)。
這里需要注意的是scrollX（），getScrollX()得到的值是相對(duì)于布局起始點(diǎn)的，所以需要重新封裝；
平滑動(dòng)畫，需要在構(gòu)造函數(shù)中創(chuàng)建一個(gè)Scroll 類,然后通過ComplentScroll..方法，判斷設(shè)定的平滑動(dòng)畫是否結(jié)束。
最后通過，動(dòng)畫結(jié)束后的邊界值，判斷是否打開，關(guān)閉狀態(tài)。
/**
* 由于系統(tǒng)scrollTo是取反操作，所以需要封裝一下
*
* @param distance
*/
private void scrollTo(int distance) {
super.scrollTo(-distance, 0);
}
public int getMyScrollX() {
return -getScrollX();
}
/**
* 控件觸莫狀態(tài)
*
* @param event
* @return
*/
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
//記錄按下點(diǎn)
down_dot = (int) event.getX();
System.out.println(down_dot);
break;
case MotionEvent.ACTION_MOVE:
int move_dot = (int) event.getX();
//動(dòng)態(tài)的移動(dòng)點(diǎn)和按下點(diǎn)的間距絕對(duì)值
move2down_distance = move_dot - down_dot;
//移動(dòng)間距與上次抬起的點(diǎn)
int lastUp_dot = move2down_distance + up_dot;
// 控制邊界
if (lastUp_dot >= menuViewWidth) {
lastUp_dot = menuViewWidth;
} else if (lastUp_dot <= 0) {
lastUp_dot = 0;
}
//設(shè)定移動(dòng)后的距離
scrollTo(lastUp_dot);
break;
case MotionEvent.ACTION_UP:
//當(dāng)前抬起手指點(diǎn)
up_dot = (int) event.getX();
//設(shè)定最終的狀態(tài)
setFinalScroll();
break;
}
return true;//將事件消費(fèi)掉
}
/**
* 當(dāng)手指抬起后，記錄最終的狀態(tài)；
*/
private void setFinalScroll() {
//得到當(dāng)前距離左邊界的距離
currrentScroll = getMyScrollX();
if (currrentScroll >= menuViewWidth / 2) {
//scrollTo(menuViewWidth);
rightAnimation();
} else {
leftAnimation();
}
}
/**
* 平滑向左的移動(dòng)動(dòng)畫
*/
private void leftAnimation() {
//scrollTo(0);
int dx = 0 - currrentScroll;//要移動(dòng)的距離
//設(shè)定平滑動(dòng)畫
msScroller.startScroll(currrentScroll, 0, dx, 0, 300);
invalidate();
//設(shè)定一下抬起點(diǎn)
up_dot = 0;
//調(diào)用接口的關(guān)閉狀態(tài)
mOnDragStateListener.onDragClose();
}
/**
* 平滑向右移動(dòng)的動(dòng)畫
*/
private void rightAnimation() {
int dx = menuViewWidth - currrentScroll;//要移動(dòng)的距離
//設(shè)定平滑動(dòng)畫
msScroller.startScroll(currrentScroll, 0, dx, 0, 300);
invalidate();
//設(shè)定一下抬起點(diǎn)
up_dot = menuViewWidth;
//調(diào)用接口的開啟狀態(tài)
mOnDragStateListener.onDragOpen();
}
/**
* 平滑移動(dòng)動(dòng)畫是否結(jié)束
*/
@Override
public void computeScroll() {
super.computeScroll();
if (msScroller.computeScrollOffset()) {
int currX = msScroller.getCurrX();//模擬出來(lái)的數(shù)值
scrollTo(currX);
invalidate();
}
}創(chuàng)建回調(diào)接口
public void setOnDragStateListener(onDragStateListener listener) {
mOnDragStateListener = listener;
}
/**
* 回調(diào)修改狀態(tài)
*
* @param dragState
*/
public void setStateChange(boolean dragState) {
if (dragState) {
currrentScroll = 0;
rightAnimation();
} else {
currrentScroll = menuViewWidth;
leftAnimation();
}
}
/**
* 創(chuàng)建拖拽的回調(diào)接口
*/
public interface onDragStateListener {
/**
* 被拖拽開
*/
void onDragOpen();
/**
* 被關(guān)閉
*/
void onDragClose();
}主Activity中實(shí)現(xiàn)效果
iv_showmenu.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//圖片點(diǎn)擊后觸發(fā)改變狀態(tài)
sliding_menu.setStateChange(dragState);
}
});
sliding_menu.setOnDragStateListener(new SlideMenu.onDragStateListener() {
@Override
public void onDragOpen() {
ToastUtils.setToast(getApplicationContext(), "open");
dragState = false;
tv_news.setSelected(true);
tv_news.setTextColor(Color.BLUE);
}
@Override
public void onDragClose() {
ToastUtils.setToast(getApplicationContext(), "close");
dragState = true;
tv_news.setSelected(false);
tv_news.setTextColor(Color.WHITE);
}
});
tv_news.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
ToastUtils.setToast(getApplicationContext(), tv_news.getText().toString());
}
});
}
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
下面小編就為大家?guī)?lái)一篇老生常談onTouch和onTouchEvent(必看篇)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2017-03-03
這篇文章主要為大家詳細(xì)介紹了Android滑動(dòng)組件懸浮固定在頂部效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
這篇文章主要介紹了Android 畫一個(gè)太極圖實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2016-09-09
關(guān)于Android中點(diǎn)擊通知欄的通知啟動(dòng)Activity問題解決
這篇文章主要介紹了關(guān)于解決Android中點(diǎn)擊通知欄的通知啟動(dòng)Activity問題的相關(guān)資料，文中介紹的非常詳細(xì)，對(duì)大家具有一定的參考價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-03-03
android數(shù)據(jù)存儲(chǔ)之文件存儲(chǔ)方法
本篇文章主要介紹了android數(shù)據(jù)存儲(chǔ)之文件存儲(chǔ)的方法，具有一定的參考價(jià)值，有需要的可以了解一下。2016-11-11
android實(shí)現(xiàn)視頻的加密和解密（使用AES）
本篇文章主要介紹了android實(shí)現(xiàn)視頻的加密和解密（使用AES），小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2017-05-05
android 震動(dòng)和提示音的實(shí)現(xiàn)代碼
這篇文章主要介紹了android 震動(dòng)和提示音的實(shí)現(xiàn)代碼，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-12-12
Android Socket通信實(shí)現(xiàn)簡(jiǎn)單聊天室
這篇文章主要為大家詳細(xì)介紹了Android網(wǎng)絡(luò)編程之Socket通信實(shí)現(xiàn)簡(jiǎn)單聊天室，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-03-03
Android 5秒學(xué)會(huì)使用手勢(shì)解鎖功能
本文講述的是一個(gè)手勢(shì)解鎖的庫(kù)，可以定制顯示隱藏宮格點(diǎn)、路徑、并且?guī)в行【艑m格顯示圖，和震動(dòng)！讓你學(xué)會(huì)使用這個(gè)簡(jiǎn)單,高效的庫(kù)，好了，具體內(nèi)容詳情大家通過本文學(xué)習(xí)吧2017-12-12
創(chuàng)建子線程對(duì)Android進(jìn)行網(wǎng)絡(luò)訪問
這篇文章介紹了Android中創(chuàng)建子線程進(jìn)行網(wǎng)絡(luò)訪問的方法，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考2021-11-11