侧滑菜单的实现,利用HorizontalScrollView,就是水平滚动条,平时打开时,让内容页面为初始页面,所以菜单隐藏在左侧。
左侧菜单布局的Xml,假定了4个选项~
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000000"
>
<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/image1"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_centerVertical="true"
android:layout_marginLeft="20dp"
android:layout_marginTop="20dp"
android:src="@mipmap/ic_launcher" />
<TextView
android:layout_centerVertical="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@id/image1"
android:text="第一个item"
android:textColor="#ffffff"
android:layout_marginLeft="20dp"
android:textSize="20sp" />
RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/image2"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_centerVertical="true"
android:layout_marginLeft="20dp"
android:layout_marginTop="20dp"
android:src="@mipmap/ic_launcher" />
<TextView
android:layout_centerVertical="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@id/image2"
android:text="第二个item"
android:textColor="#ffffff"
android:layout_marginLeft="20dp"
android:textSize="20sp" />
RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/image3"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_centerVertical="true"
android:layout_marginLeft="20dp"
android:layout_marginTop="20dp"
android:src="@mipmap/ic_launcher" />
<TextView
android:layout_centerVertical="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@id/image3"
android:text="第三个item"
android:textColor="#ffffff"
android:layout_marginLeft="20dp"
android:textSize="20sp" />
RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/image4"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_centerVertical="true"
android:layout_marginLeft="20dp"
android:layout_marginTop="20dp"
android:src="@mipmap/ic_launcher" />
<TextView
android:layout_centerVertical="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@id/image4"
android:text="第四个item"
android:textColor="#ffffff"
android:layout_marginLeft="20dp"
android:textSize="20sp" />
RelativeLayout>
LinearLayout>
RelativeLayout>
下面是activiy_main的Xml,其中view.SlidingMenu是一个自定义的HorizontalScrollView。
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<view.SlidingMenu
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="horizontal">
<include layout="@layout/leftmenu" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#34df45">
LinearLayout>
LinearLayout>
view.SlidingMenu>
RelativeLayout>
新建View包来自定义HorizontalScrollView类
package 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;
/**
* Created by Chase on 2016/11/7.
*/
public class SlidingMenu extends HorizontalScrollView {
//下面的属性匹配了activity_main替换掉的horizonalScrollView 因为这里是自定义的
private LinearLayout mWapper;
private ViewGroup mMenu;
private ViewGroup mContent;
private int mScreenWidth;
private int mMenuRightPadding = 50;//露出Content Page的宽度 也就是滑到菜单页时 内容页露出的宽度
private boolean once;//onMeasure方法用
private int mMenuWidth;
/**
* 未使用自定义属性调用
*/
public SlidingMenu(Context context, AttributeSet attrs) {
super(context, attrs);
//获取屏幕宽高
WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
DisplayMetrics outM = new DisplayMetrics();
wm.getDefaultDisplay().getMetrics(outM);
mScreenWidth = outM.widthPixels;
//转化50为像素值 把dp转化为px
mMenuRightPadding = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 50,
context.getResources().getDisplayMetrics());
}
/**
* 设置子view的宽高
* 设置自己的宽高
*自定义子View和前面Xml的布局有关
* @param widthMeasureSpec
* @param heightMeasureSpec
*/
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
if (!once) {
mWapper = (LinearLayout) getChildAt(0);//得到layout对象
mMenu = (ViewGroup) mWapper.getChildAt(0);//layout对象里的menu
mContent = (ViewGroup) mWapper.getChildAt(1);//layout对象里的内容
mMenuWidth = mMenu.getLayoutParams().width = mScreenWidth - mMenuRightPadding;
mContent.getLayoutParams().width = mScreenWidth;
once = true;//只调用一次 不要多次设置宽高
}
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
//效果是Content显示在内容区域 所以要有偏移量 通过设置偏移量 将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);
}
}
//触摸事件,只要考虑up的情况即可
@Override
public boolean onTouchEvent(MotionEvent ev) {
int action = ev.getAction();
switch (action){
case MotionEvent.ACTION_UP:
//如果滑动的多余菜单宽度的一半就显示菜单 少于就隐藏
int scrollX = getScrollX();//scrollX是隐藏在左边的宽度
if (scrollX >= mMenuWidth/2)
{
this.smoothScrollTo(mMenuWidth,0);
}else {
this.smoothScrollTo(0,0);
}
return true;
}
return super.onTouchEvent(ev);
}
}
以上写完,可以运行了,去掉titleBar更美观~
package com.chase.cn.demon;
import android.app.Activity;
import android.os.Bundle;
import android.view.Window;
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
}
}