android侧滑菜单实现(一)
仿qq的那种侧滑菜单,可以*定义布局,并且监听布局中的控件的点击事件
(1)主界面的xml:activity_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" > <com.example.administrator.testb.SlideMenu android:id="@+id/slideMenu" android:layout_width="match_parent" android:layout_height="match_parent"> <!--菜单界面的布局--> <include layout="@layout/layout_menu"/> <!--主界面的布局--> <include layout="@layout/layout_main"/> </com.example.administrator.testb.SlideMenu> </RelativeLayout>
(2)主显示界面的xml: layout_main.xml,自己添加根据实际情况来
(3)侧滑界面的xml:layout_menu.xml
<?xml version="1.0" encoding="utf-8"?> <ScrollView xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="240dp" android:layout_height="match_parent"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#33aa9900" android:orientation="vertical"> <TextView android:id="@+id/tv_news" style="@style/MenuTabText" android:text="新闻" /> </LinearLayout> </ScrollView>
(4)在values文件夹中的style.xml文件里面添加样式:
<style name="MenuTabText"> <item name="android:layout_width">match_parent</item> <item name="android:layout_height">wrap_content</item> <item name="android:textColor">#000000</item> <item name="android:gravity">center_vertical</item> <item name="android:drawablePadding">15dp</item> <item name="android:padding">15dp</item> <item name="android:textSize">22sp</item> </style>
(5)主界面调用,并且添加点击事件
public class MainActivity extends AppCompatActivity { //参考网址: https://blog.csdn.net/gewuban/article/details/50966424 private ImageView btn_back; private SlideMenu slideMenu; private TextView tv_news;
@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); btn_back = (ImageView)findViewById(R.id.btn_back); tv_news = (TextView)findViewById(R.id.tv_news); slideMenu = (SlideMenu)findViewById(R.id.slideMenu); //点击返回键打开或关闭Menu btn_back.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { slideMenu.switchMenu(); } }); tv_news.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { // slideMenu.switchMenu(); Log.e("TAG","click tv_news "); } }); } }
(6)新建的class类,实现侧滑功能的类
public class SlideMenu extends FrameLayout { private View menuView,mainView; private int menuWidth; private Scroller scroller; public SlideMenu(Context context) { super(context); init(); } public SlideMenu(Context context, AttributeSet attrs) { super(context, attrs); init(); } private void init(){ scroller = new Scroller(getContext()); } /** * 当1级子view全部加载完调用,可以用初始化子view引用 * 注意这里无法获取子view的宽高 */ @Override protected void onFinishInflate() { super.onFinishInflate(); menuView = getChildAt(0); mainView = getChildAt(1); menuWidth = menuView.getLayoutParams().width; } //使Menu也具有滑动功能 public boolean onInterceptTouchEvent(MotionEvent ev){ switch (ev.getAction()) { case MotionEvent.ACTION_DOWN: downX = (int) ev.getX(); break; case MotionEvent.ACTION_MOVE: int deltaX = (int) (ev.getX() - downX); if (Math.abs(deltaX) > 8){ return true; } break; } return super.onInterceptTouchEvent(ev); } /** * s设置两个子view在页面上的布局 * @param l:当前子view的左边在父view的坐标系的x坐标 * @param t:当前子view的顶边在父view的坐标系的y坐标 * @param r:当前子view的宽 * @param b:当前子view的高 */ @Override protected void onLayout(boolean changed, int l, int t, int r, int b) { menuView.layout(-menuWidth, 0, 0, b); mainView.layout(0, 0, r, b); } /** * 处理屏幕滑动事件 */ private int downX; public boolean onTouchEvent(MotionEvent event) { switch (event.getAction()) { case MotionEvent.ACTION_DOWN: downX = (int) event.getX(); break; case MotionEvent.ACTION_MOVE: int moveX = (int) event.getX(); int deltaX = moveX - downX; int newScrollX = getScrollX() - deltaX; if (newScrollX < -menuWidth) newScrollX = -menuWidth; if (newScrollX > 0) newScrollX = 0; scrollTo(newScrollX, 0); downX = moveX; break; case MotionEvent.ACTION_UP: //当滑动距离小于Menu宽度的一半时,平滑滑动到主页面 if(getScrollX()>-menuWidth/2){ closeMenu(); }else { //当滑动距离大于Menu宽度的一半时,平滑滑动到Menu页面 openMenu(); } break; } return true; } //关闭menu private void closeMenu(){ scroller.startScroll(getScrollX(),0,0-getScrollX(),0,400); invalidate(); } //打开menu private void openMenu(){ scroller.startScroll(getScrollX(),0,-menuWidth-getScrollX(),0,400); invalidate(); } /** * Scroller不主动去调用这个方法 * 而invalidate()可以调用这个方法 * invalidate->draw->computeScroll */ public void computeScroll(){ super.computeScroll(); if(scroller.computeScrollOffset()){ //返回true,表示动画没结束 scrollTo(scroller.getCurrX(),0); invalidate(); } } /** * 切换菜单的开和关 */ public void switchMenu(){ if(getScrollX()==0){ openMenu(); }else { closeMenu(); } } }
实现效果图: