时间:2021-05-19
QQ侧滑菜单的Android实现代码,供大家参考,具体内容如下
实现逻辑
1.先写出菜单页面和主页面的布局
2.创建一个类,继承RelativeLayout,实现里面的onLayout
3.在主布局文件中添加子空间
4.在onLayout里面获取子控件的宽和高,并对子控件的位置进行绘制
5.给子布局设置滑动事件,分别在手指落下\移动\抬起的时候,获取手指的位置
6.在手指移动的过程中,对菜单页面的移动距离进行限制,防止菜单页面跑出指定的页面
7.在手指抬起的时候,判定一下手指移动的距离,如果移动的距离大于菜单页面宽度的一半,那就让菜单弹出,否则就让菜单回到默认的位置
8.针对菜单的弹出和收起,实现了一个渐变的过程,防止手指抬起的时候,菜单页面会突然间到达指定的位置,这个功能的实现需要借助computeScroll方法
9.滑动冲突的处理,分别求出手指移动时,X和Y方向的偏移量,如果x方向的大于Y方向的,那就判定滑动事件是弹出和收起菜单,否则就判定为菜单页面的内部滑动
代码文件
布局文件
菜单布局文件
<?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); //创建Scroller对象 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(); //把菜单布局布置在屏幕左侧 menu.layout(-menuWidth,t,0,b); //主页面使用默认的位置就可以 main.layout(l,t,r,b);}//给布局添加一个touch事件@Overridepublic boolean onTouchEvent(MotionEvent event) { switch (event.getAction()){ case MotionEvent.ACTION_DOWN: //当手指按下时,记录一下手指的位置 downX = event.getX(); break; case MotionEvent.ACTION_MOVE: //当手指移动的时候,记录移动的距离 destance = (int) (event.getX()- downX+endx); //对手指滑动的时候,页面移动做出限制 if (destance>menuWidth){ destance = menuWidth; }else if (destance<0){ destance = 0; } scrollTo(-destance,0); break; case MotionEvent.ACTION_UP: //当手指离开屏幕的时候,记录菜单的位置,根据情况进行判定 if (destance<menuWidth/2){ endx = 0; }else { endx = menuWidth; } int startX = destance; //计算偏移量 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(); }}//处理滑动冲突@Overridepublic boolean onInterceptTouchEvent(MotionEvent ev) { switch (ev.getAction()){ case MotionEvent.ACTION_DOWN: //获取当前点击的位置 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);}//判断当前的菜单状态是打开还是关闭的public void switchMenu(){ int startX = 0; if (endx == 0){ endx = menuWidth; }else { endx = 0; startX = menuWidth; } //设置偏移量 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); //设置点击事件 imageButton.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { slidingMenu.switchMenu(); } });}}以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本课程将带领大家通过自定义控件实现QQ5.0侧滑菜单,课程将循序渐进,首先实现最普通的侧滑菜单,然后引入属性动画与拖动菜单效果相结合,最终实现QQ5.0侧滑菜单
关于实现网易新闻客户端的界面,以前写过很多博客,请参考:Android实现网易新闻客户端效果Android实现网易新闻客户端侧滑菜单(一)Android实现网易
谷歌官方推出了一种侧滑菜单的实现方式(抽屉效果),即DrawerLayout,这个类是在SupportLibrary里的,需要加上android-support
uitabbarcontroller做qq侧滑菜单效果:首先要了解uitabbarcontroller的层级结构:uitabbarcontroller加载的其它
一、概述 在App中,经常会出现侧滑菜单,侧滑滑出View等效果,虽然说Android有很多第三方开源库,但是实际上咱们可以自己也写一个自定义的侧滑View控