效果图:
实现思路:
1 在布局中写一个 HorizontalScrollView(自定义控件SlidingMenu继承 HorizontalScrollView)
2 HorizontalScrollView的子布局是一个水平线性布局,
水平线性布局里面一个布局作为菜单,一个布局作为内容
3 SlidingMenu继承HorizontalScrollView左右滑动已经自带实现,
我们只要在onTouchEvent的ACTION_UP中判断滑动是否超过菜单宽度的一半
如果超过一半,显示菜单,如果没有超过,隐藏菜单
实现代码:
自定义侧滑控件:SlidingMenu
package com.zhh.cehuacaidai.view;
import android.content.Context;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.util.TypedValue;
import android.view.MotionEvent;
import android.view.ViewGroup;
import android.view.WindowManager;
import android.widget.HorizontalScrollView;
import android.widget.LinearLayout;
/**
* 自定义普通侧滑菜单
* 思路:
* 1在布局中写一个 HorizontalScrollView
* 2HorizontalScrollView的子布局是一个水平线性布局,
* 水平线性布局里面一个布局作为菜单,一个布局作为内容
* 3继承HorizontalScrollView左右滑动已经自带实现,
* 我们只要在onTouchEvent的ACTION_UP中判断滑动是否超过菜单宽度的一半
* 如果超过一半,显示菜单,如果没有超过,隐藏菜单
*/
public class SlidingMenu extends HorizontalScrollView {
// 里面的线性布局
private LinearLayout mWapper;
// 菜单布局
private ViewGroup mMenu;
// 内容布局
private ViewGroup mContent;
// 屏幕宽度
private int mScreenWidth;
// 菜单宽度
private int mMenuWidth;
// 菜单里右边的距离 dp
private int mMenuRightPadding = 50;
// 宽高只设置一次
private boolean once = false;
private boolean isOpen;
public SlidingMenu(Context context) {
// 调两个参数的构造方法
this(context, null);
}
public SlidingMenu(Context context, AttributeSet attrs) {
// 调三个参数的构造方法
this(context, attrs, 0);
}
public SlidingMenu(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
// 拿到屏幕的宽度,并赋值
WindowManager wm = (WindowManager) context
.getSystemService(Context.WINDOW_SERVICE);
DisplayMetrics outMetrics = new DisplayMetrics();
wm.getDefaultDisplay().getMetrics(outMetrics);
mScreenWidth = outMetrics.widthPixels;
// 把dp装化成px,android内部使用的是px
mMenuRightPadding = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 50, context.getResources().getDisplayMetrics());
}
/**
* 设置子view的宽高,和设置自己的宽高
*
* @param widthMeasureSpec
* @param heightMeasureSpec
*/
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
if (!once) {
// 拿到水平线性布局
mWapper = (LinearLayout) getChildAt(0);
// 拿到水平线性布局中的菜单布局
mMenu = (ViewGroup) mWapper.getChildAt(0);
// 拿到水平线性布局中的内容布局
mContent = (ViewGroup) mWapper.getChildAt(1);
// 设置菜单宽度
mMenuWidth = mMenu.getLayoutParams().width = mScreenWidth - mMenuRightPadding;
// 设置内容布局的宽度
mContent.getLayoutParams().width = mScreenWidth;
once = true;
}
}
/**
* 设置子View的位置
* 通过设置偏移量,将menu隐藏
*/
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
super.onLayout(changed, l, t, r, b);
if (changed) {
// 正值是向左滑动,负值是向右滑动
this.scrollTo(mMenuWidth, 0);
}
}
/**
* 事件处理
*
* @param event
* @return
*/
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
// 当手指离开时
case MotionEvent.ACTION_UP:
// 隐藏在左边的宽度
int scrollX = getScrollX();
// 隐藏在左边的宽度大于菜单宽度的1/2时,让菜单隐藏
if(scrollX>=mMenuWidth/2) {
// 带有动画效果
this.smoothScrollTo(mMenuWidth, 0);
}else{
this.smoothScrollTo(0,0);
}
return true;
}
return super.onTouchEvent(event);
}
}
在布局activity_main.xml中引用
<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=".MainActivity">
<!--HorizontalScrollView中只有一个子类-->
<com.zhh.cehuacaidai.view.SlidingMenu
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--左边是菜单,右边是内容 -->
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="horizontal">
<!-- 左边菜单-->
<include layout="@layout/left_menu" />
<!-- 右边内容-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@mipmap/qq">
</LinearLayout>
</LinearLayout>
</com.zhh.cehuacaidai.view.SlidingMenu>
</RelativeLayout>
菜单布局left_menu.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@mipmap/img_frame_background" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<ImageView
android:id="@+id/id_img1"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_centerVertical="true"
android:layout_marginLeft="20dp"
android:layout_marginTop="20dp"
android:src="@mipmap/img_1" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="20dp"
android:layout_toRightOf="@id/id_img1"
android:text="第一个Item"
android:textColor="#ffffff"
android:textSize="20sp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<ImageView
android:id="@+id/id_img2"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_centerVertical="true"
android:layout_marginLeft="20dp"
android:layout_marginTop="20dp"
android:src="@mipmap/img_2" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="20dp"
android:layout_toRightOf="@id/id_img2"
android:text="第二个Item"
android:textColor="#ffffff"
android:textSize="20sp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<ImageView
android:id="@+id/id_img3"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_centerVertical="true"
android:layout_marginLeft="20dp"
android:layout_marginTop="20dp"
android:src="@mipmap/img_3" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="20dp"
android:layout_toRightOf="@id/id_img3"
android:text="第三个Item"
android:textColor="#ffffff"
android:textSize="20sp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<ImageView
android:id="@+id/id_img4"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_centerVertical="true"
android:layout_marginLeft="20dp"
android:layout_marginTop="20dp"
android:src="@mipmap/img_4" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="20dp"
android:layout_toRightOf="@id/id_img4"
android:text="第四个Item"
android:textColor="#ffffff"
android:textSize="20sp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<ImageView
android:id="@+id/id_img5"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_centerVertical="true"
android:layout_marginLeft="20dp"
android:layout_marginTop="20dp"
android:src="@mipmap/img_5" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="20dp"
android:layout_toRightOf="@id/id_img5"
android:text="第五个Item"
android:textColor="#ffffff"
android:textSize="20sp" />
</RelativeLayout>
</LinearLayout>
</RelativeLayout>
源码下载:
https://download.csdn.net/download/zhaihaohao1/10671937
参考视频:
http://www.imooc.com/learn/211
参考文章:
https://blog.csdn.net/lmj623565791/article/details/39185641
Android自带控件DrawerLayout,实现侧滑
https://blog.csdn.net/student9128/article/details/53247491