您的位置:首页 > 移动开发 > Android开发

android 侧滑菜单的简单实现

2015-01-25 16:16 405 查看
先定义出菜单的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" >

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_centerVertical="true"
>

<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_marginLeft="20dp"
android:layout_marginTop="20dp"
android:layout_centerVertical="true"
android:src="@drawable/b" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@id/id_img1"
android:textSize="20sp"
android:layout_centerVertical="true"
android:text="第一个Item"
android:textColor="#ff0000"
/>
</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_marginLeft="20dp"
android:layout_marginTop="20dp"
android:layout_centerVertical="true"
android:src="@drawable/b" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@id/id_img2"
android:textSize="20sp"
android:layout_centerVertical="true"
android:text="第二个Item"
android:textColor="#ff0000"
/>
</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_marginLeft="20dp"
android:layout_marginTop="20dp"
android:layout_centerVertical="true"
android:src="@drawable/b" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@id/id_img3"
android:textSize="20sp"
android:layout_centerVertical="true"
android:text="第三个Item"
android:textColor="#ff0000"
/>
</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_marginLeft="20dp"
android:layout_marginTop="20dp"
android:layout_centerVertical="true"
android:src="@drawable/b" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@id/id_img4"
android:textSize="20sp"
android:layout_centerVertical="true"
android:text="第四个Item"
android:textColor="#ff0000"
/>
</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_marginLeft="20dp"
android:layout_marginTop="20dp"
android:layout_centerVertical="true"
android:src="@drawable/b" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@id/id_img5"
android:textSize="20sp"
android:layout_centerVertical="true"
android:text="第五个Item"
android:textColor="#ff0000"
/>
</RelativeLayout>
</LinearLayout>

</RelativeLayout>


再定义出主界面的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" >

<com.baoxiu123.view.SlidingMenu
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="none"
>

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="horizontal" >

<include layout="@layout/left_meun" />

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/q"
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.baixou123.findscore.MainActivity" >

<TextView
android:id="@+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="@+id/editText2"
android:layout_alignLeft="@+id/textView2"
android:text="@string/pwd" />

<EditText
android:id="@+id/editText2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/editText1"
android:layout_below="@+id/editText1"
android:layout_marginTop="26dp"
android:background="@drawable/shape"
android:ems="10"
android:hint="@string/psdPlease"
android:inputType="textPassword"
android:textColor="#f06" />

<TextView
android:id="@+id/textview1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/textView2"
android:layout_alignParentTop="true"
android:layout_marginTop="15dp"
android:text="@string/hello_world"
android:textColor="#6c3"
android:textSize="20dip" />

<TextView
android:id="@+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="16dp"
android:text="@string/passlab" />

<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="@+id/editText1"
android:layout_toLeftOf="@+id/editText1"
android:text="@string/labStuNum" />

<EditText
android:id="@+id/editText1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/textView4"
android:layout_below="@+id/textview1"
android:layout_marginTop="102dp"
android:background="@drawable/shape"
android:ems="10"
android:hint="@string/stunumPlease"
android:inputType="number"
android:text="@string/stunum"
android:textColor="#f06" >

<requestFocus />
</EditText>

<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@+id/textView4"
android:layout_centerHorizontal="true"
android:layout_marginBottom="36dp"
android:background="@drawable/login1" />
</RelativeLayout>
</LinearLayout>
</com.baoxiu123.view.SlidingMenu>

</RelativeLayout>


上面代码中倒数第二个RelativeLayout的布局是主界面的布局

然后是自定义的侧滑控件类

package com.baoxiu123.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;

public class SlidingMenu extends HorizontalScrollView {
private LinearLayout mWapper;
private ViewGroup mMenu;
private ViewGroup mContent;
private int mScreenWidth;
// private int mScreenHeight;

private int mMenuWidth;

// 这里的单位是50dp
private int mMenuRightPadding = 50;

private boolean once;

private boolean isOpen = false;

public SlidingMenu(Context context, AttributeSet attrs) {
super(context, attrs);

WindowManager wm = (WindowManager) context
.getSystemService(Context.WINDOW_SERVICE);
DisplayMetrics outMetrics = new DisplayMetrics();
wm.getDefaultDisplay().getMetrics(outMetrics);
mScreenWidth = outMetrics.widthPixels;
// mScreenHeight = outMetrics.heightPixels;

// 把dp转化为px
mMenuRightPadding = (int) TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_DIP, 50, context.getResources()
.getDisplayMetrics());

}

@Override
protected void onMeasure(int widthMeasureSpec, int 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;
}

// mWapper.getLayoutParams().width = mScreenWidth;
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}

/**
*
*/
@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);
}

}
@Override
public boolean onTouchEvent(MotionEvent ev) {
int action = ev.getAction();
switch(action){
case MotionEvent.ACTION_UP:
//左边的宽度
//这里是判断手指抬起时,是否该显示菜单
int scrollX =getScrollX();

if(scrollX>=mMenuWidth/2)
{
this.smoothScrollTo(mMenuWidth, 0);
isOpen = false;
}else{
this.smoothScrollTo(0, 0);
isOpen = true;
}
return true;

}

return super.onTouchEvent(ev);
}

//打开菜单
public void openMenu(){
if(isOpen)return;
this.smoothScrollTo(0, 0);
}

//关闭菜单
public void closeMeun(){
if(!isOpen)return;
this.smoothScrollTo(mMenuWidth,0);
isOpen = false;
}
//切换菜单
public void toggle(){
if(isOpen){
closeMeun();
}else
{
openMenu();
}
}
}


就这样,就可以实现了
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐