QQ側(cè)滑菜單的Android實(shí)現(xiàn)代碼,供大家參考,具體內(nèi)容如下
實(shí)現(xiàn)邏輯
1.先寫出菜單頁面和主頁面的布局
2.創(chuàng)建一個(gè)類,繼承RelativeLayout,實(shí)現(xiàn)里面的onLayout
3.在主布局文件中添加子空間
4.在onLayout里面獲取子控件的寬和高,并對(duì)子控件的位置進(jìn)行繪制
5.給子布局設(shè)置滑動(dòng)事件,分別在手指落下/移動(dòng)/抬起的時(shí)候,獲取手指的位置
6.在手指移動(dòng)的過程中,對(duì)菜單頁面的移動(dòng)距離進(jìn)行限制,防止菜單頁面跑出指定的頁面
7.在手指抬起的時(shí)候,判定一下手指移動(dòng)的距離,如果移動(dòng)的距離大于菜單頁面寬度的一半,那就讓菜單彈出,否則就讓菜單回到默認(rèn)的位置
8.針對(duì)菜單的彈出和收起,實(shí)現(xiàn)了一個(gè)漸變的過程,防止手指抬起的時(shí)候,菜單頁面會(huì)突然間到達(dá)指定的位置,這個(gè)功能的實(shí)現(xiàn)需要借助computeScroll方法
9.滑動(dòng)沖突的處理,分別求出手指移動(dòng)時(shí),X和Y方向的偏移量,如果x方向的大于Y方向的,那就判定滑動(dòng)事件是彈出和收起菜單,否則就判定為菜單頁面的內(nèi)部滑動(dòng)
代碼文件
布局文件
菜單布局文件
<?xml version="1.0" encoding="utf-8"?><ScrollView xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="240dp"android:background="@mipmap/menu_bg"android:layout_height="match_parent"android:orientation="vertical"><LinearLayout android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView style="@style/menu_style" android:text="新聞" android:drawableLeft="@mipmap/tab_news" /> <TextView style="@style/menu_style" android:text="訂閱" android:drawableLeft="@mipmap/tab_read" /> <TextView style="@style/menu_style" android:text="跟帖" android:drawableLeft="@mipmap/tab_ties" /> <TextView style="@style/menu_style" android:text="圖片" android:drawableLeft="@mipmap/tab_pics" /> <TextView style="@style/menu_style" android:text="話題" android:drawableLeft="@mipmap/tab_ugc" /> <TextView style="@style/menu_style" android:text="投票" android:drawableLeft="@mipmap/tab_vote" /> <TextView style="@style/menu_style" android:text="本地" android:drawableLeft="@mipmap/tab_local" /> <TextView style="@style/menu_style" android:text="聚合閱讀" android:drawableLeft="@mipmap/tab_focus" /> <TextView style="@style/menu_style" android:text="聚合閱讀" android:drawableLeft="@mipmap/tab_focus" /> <TextView style="@style/menu_style" android:text="聚合閱讀" android:drawableLeft="@mipmap/tab_focus" /> <TextView style="@style/menu_style" android:text="聚合閱讀" android:drawableLeft="@mipmap/tab_focus" /> <TextView style="@style/menu_style" android:text="聚合閱讀" android:drawableLeft="@mipmap/tab_focus" /></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:gravity="center_vertical" android:background="@mipmap/top_bar_bg" android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="wrap_content"> <ImageButton android:background="@null" android:id="@+id/ib_back" android:src="@mipmap/main_back" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <ImageView android:src="@mipmap/top_bar_divider" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <TextView android:layout_weight="1" android:gravity="center" android:text="黑馬新聞" android:textSize="20sp" android:textColor="#fff" android:layout_width="wrap_content" android:layout_height="wrap_content" /></LinearLayout><TextView android:gravity="center" android:textColor="#cfcfcf" android:textSize="20sp" android:text="釣魚島是中國的..." android:layout_width="match_parent" android:layout_height="match_parent" /></LinearLayout>
主頁面布局
<?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:id="@+id/activity_main"android:layout_width="match_parent" android:layout_height="match_parent"android:paddingBottom="@dimen/activity_vertical_margin"android:paddingLeft="@dimen/activity_horizontal_margin"android:paddingRight="@dimen/activity_horizontal_margin"android:paddingTop="@dimen/activity_vertical_margin"tools:context="com.example.a1_.MainActivity"><com.example.a1_.SlidingMenu android:id="@+id/slidingmenu" android:layout_width="match_parent" android:layout_height="match_parent"> <include layout="@layout/menu"/> <include layout="@layout/main"/></com.example.a1_.SlidingMenu></RelativeLayout>
自定義布局
package com.example.a1_;import android.content.Context;import android.util.AttributeSet;import android.view.MotionEvent;import android.view.View;import android.widget.RelativeLayout;import android.widget.Scroller;/** * Created by Administrator on 2017.05.29.0029. */public class SlidingMenu extends RelativeLayout {private float downX;private int destance;private int menuWidth;private int endx;private int dx;private final Scroller scroller;private float downY;private int dy;public SlidingMenu(Context context, AttributeSet attrs) { super(context, attrs); //創(chuàng)建Scroller對(duì)象 scroller = new Scroller(context);}@Overrideprotected void onLayout(boolean changed, int l, int t, int r, int b) { //獲取子控件 View menu = getChildAt(0); View main = getChildAt(1); //獲取菜單布局的寬度 menuWidth = menu.getMeasuredWidth(); //把菜單布局布置在屏幕左側(cè) menu.layout(-menuWidth,t,0,b); //主頁面使用默認(rèn)的位置就可以 main.layout(l,t,r,b);}//給布局添加一個(gè)touch事件@Overridepublic boolean onTouchEvent(MotionEvent event) { switch (event.getAction()){ case MotionEvent.ACTION_DOWN: //當(dāng)手指按下時(shí),記錄一下手指的位置 downX = event.getX(); break; case MotionEvent.ACTION_MOVE: //當(dāng)手指移動(dòng)的時(shí)候,記錄移動(dòng)的距離 destance = (int) (event.getX()- downX+endx); //對(duì)手指滑動(dòng)的時(shí)候,頁面移動(dòng)做出限制 if (destance>menuWidth){ destance = menuWidth; }else if (destance<0){ destance = 0; } scrollTo(-destance,0); break; case MotionEvent.ACTION_UP: //當(dāng)手指離開屏幕的時(shí)候,記錄菜單的位置,根據(jù)情況進(jìn)行判定 if (destance<menuWidth/2){ endx = 0; }else { endx = menuWidth; } int startX = destance; //計(jì)算偏移量 dx = endx-destance; scroller.startScroll(startX,0,dx,0,Math.abs(dx)*10); invalidate(); break; } return true;}//重寫computeScroll@Overridepublic void computeScroll() { if (scroller.computeScrollOffset()){ int currx = scroller.getCurrX(); scrollTo(-currx,0); invalidate(); }}//處理滑動(dòng)沖突@Overridepublic boolean onInterceptTouchEvent(MotionEvent ev) { switch (ev.getAction()){ case MotionEvent.ACTION_DOWN: //獲取當(dāng)前點(diǎn)擊的位置 downX = ev.getX(); downY = ev.getY(); break; case MotionEvent.ACTION_MOVE: //獲取x和y方向的偏移量 dx = (int) (ev.getX()-downX); dy = (int) (ev.getY() - downY); //判斷是x方向偏移的多還是y方向偏移得多 if (Math.abs(dx)>Math.abs(dy)){ //攔截move事件 return true; } break; } return super.onInterceptTouchEvent(ev);}//判斷當(dāng)前的菜單狀態(tài)是打開還是關(guān)閉的public void switchMenu(){ int startX = 0; if (endx == 0){ endx = menuWidth; }else { endx = 0; startX = menuWidth; } //設(shè)置偏移量 int dx = endx-startX; scroller.startScroll(startX,0,dx,0,Math.abs(dx)*10); invalidate();}}
主頁面代碼
package com.example.a1_;import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import android.view.View;import android.widget.ImageButton;public class MainActivity extends AppCompatActivity {private SlidingMenu slidingMenu;@Overrideprotected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); //初始化控件 ImageButton imageButton = (ImageButton) findViewById(R.id.ib_back); slidingMenu = (SlidingMenu) findViewById(R.id.slidingmenu); //設(shè)置點(diǎn)擊事件 imageButton.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { slidingMenu.switchMenu(); } });}}
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持VEVB武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
網(wǎng)友關(guān)注