当今的android应用设计中,一种主流的设计方式就是会拥有一个侧滑菜单, 以图为证:
实现这样的侧滑效果,在5.0以前我们用的最多的就是SlidingMenu这个开源框架,而5.0之后,google推出了自己的侧滑实现库,那就是DrawerLayout,它的用法比SlidingMenu更简单,而且因为是google的亲生儿子,所以现在人们更倾向于使用DrawerLayout,但是再怎么说,这些都是别人实现好的东西,我们只是拿来用用而已,对于内部的原理,很多程序员却不怎么明白,在接下来的文章中我会通过android中的一些基础控件来实现于此相似的效果,当然,也许还有很多种实现方式,但是基本的原理是类似的。
首先,我们会用到一个控件:HorizontalScrollView 从名字我们就可以了解到,这是一种水平滑动的控件,也就是当内容大于屏幕的宽度的时候,可以左右滑动来使超出屏幕的内容显示在屏幕上。
第一步:把菜单的布局简单的写出来
<span style="font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:14px;"><?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="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_centerInParent="true"
>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<ImageView
android:id="@+id/img1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_launcher"
/>
<TextView
android:id="@+id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="item1"
android:layout_toRightOf="@id/img1"
android:layout_centerVertical="true"
/>
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<ImageView
android:id="@+id/img2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_launcher"
/>
<TextView
android:id="@+id/text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="item1"
android:layout_toRightOf="@id/img2"
android:layout_centerVertical="true"
/>
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<ImageView
android:id="@+id/img3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_launcher"
/>
<TextView
android:id="@+id/text3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="item1"
android:layout_toRightOf="@id/img3"
android:layout_centerVertical="true"
/>
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<ImageView
android:id="@+id/img4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_launcher"
/>
<TextView
android:id="@+id/text4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="item1"
android:layout_toRightOf="@id/img4"
android:layout_centerVertical="true"
/>
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<ImageView
android:id="@+id/img5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_launcher"
/>
<TextView
android:id="@+id/text5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="item1"
android:layout_toRightOf="@id/img5"
android:layout_centerVertical="true"
/>
</RelativeLayout>
</LinearLayout>
</RelativeLayout></span></span>
第二步:写出整体布局
<span style="font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:14px;"><?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<googleplay.xiaokai.com.qq.SlidMenu
android:id="@+id/horscrview"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="@drawable/img_frame_background"
android:scrollbars="none"
>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="horizontal"
>
<include layout="@layout/left_menulayout"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/qq"
>
</LinearLayout>
</LinearLayout>
</googleplay.xiaokai.com.qq.SlidMenu>
</LinearLayout></span>
</span>
注意:此时的googplay.xiaokai.com.qq.SlidMenu就是我们要实现的控件。
第三步:继承HorizontalScrollView实现自定义控件
<span style="font-size:18px;">package googleplay.xiaokai.com.qq;
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 孙晓凯 on 2016/3/27.
*/
public class SlidMenu extends HorizontalScrollView {
int mScreenWit;//屏幕宽度
int mRightWithScr;
LinearLayout mWrap;
ViewGroup mMenu;
ViewGroup mContent;
int mMenuWidth ;
private boolean flag;
public SlidMenu(Context context, AttributeSet attrs) {
super(context, attrs);
//得到屏幕的宽度
WindowManager winmana = (WindowManager) context.getSystemService(context.WINDOW_SERVICE);
DisplayMetrics metris = new DisplayMetrics();
winmana.getDefaultDisplay().getMetrics(metris);
mScreenWit = metris.widthPixels;//得到的是像素
//把50dp转换成像素
mRightWithScr = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 50, context.getResources().getDisplayMetrics());
}
public SlidMenu(Context context) {
super(context);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
if (!flag) {
mWrap = (LinearLayout) getChildAt(0);//得到此空间中的第一个子控件
mMenu = (ViewGroup) mWrap.getChildAt(0);//得到menu
mContent = (ViewGroup) mWrap.getChildAt(1);//得到内容控件
mMenuWidth = mMenu.getLayoutParams().width = mScreenWit - mRightWithScr;//侧滑菜单的宽度为屏幕宽度减去50dp
mContent.getLayoutParams().width = mScreenWit;//设置内容控件宽度
flag = true;
}
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
/*
实现的功能是将menu隐藏,通过设置偏移量
*/
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
if(changed) {
this.scrollTo(mMenuWidth, 0);//向左移动
}
super.onLayout(changed, l, t, r, b);
}
@Override
public boolean onTouchEvent(MotionEvent ev) {
int action = ev.getAction();
switch (action){
case MotionEvent.ACTION_UP:
int scx = getScrollX(); //就是当前view的左上角相对于母视图的左上角的X轴偏移量
if(scx>=mMenuWidth/2){
this.smoothScrollTo(mMenuWidth,0);
}else{
this.smoothScrollTo(0,0);
}
return true;
}
return super.onTouchEvent(ev);
}
}</span>
此时程序还不够灵活,比如如果想让让菜单距离屏幕右边的距离是可以自己调控的,应该怎么办呢? 此时我们可以自定义一个属性。
自定义属性第一步: 在values文件夹中创建一个attr.xml文件;
第二步:在文件中定义属性
<span style="font-size:18px;"><?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="SlidMenu">
<attr name="RithtPadding" format="dimension">
</attr>
</declare-styleable>
</resources>
RithtPadding就是自定义的属性的名称;
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:my="http://schemas.android.com/apk/res-auto" <!--注意,要使用自己的命名空间--!>
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<googleplay.xiaokai.com.qq.SlidMenu
android:id="@+id/horscrview"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="@drawable/img_frame_background"
android:scrollbars="none"
my:RithtPadding="100dp" <!--自定义的控件--!>
>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="horizontal"
>
<include layout="@layout/left_menulayout"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/qq"
>
</LinearLayout>
</LinearLayout>
</googleplay.xiaokai.com.qq.SlidMenu>
</LinearLayout></span>
第三步:在代码中得到布局文件中的属性的值,并进行相应的操作
<span style="font-size:18px;">public SlidMenu(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
//得到屏幕的宽度
WindowManager winmana = (WindowManager) context.getSystemService(context.WINDOW_SERVICE);
DisplayMetrics metris = new DisplayMetrics();
winmana.getDefaultDisplay().getMetrics(metris);
mScreenWit = metris.widthPixels;//得到的是像素
<span style="color:#3366ff;">TypedArray array = context.getTheme().obtainStyledAttributes(attrs,R.styleable.SlidMenu,defStyleAttr,0);
int n = array.getIndexCount();
for(int i=0;i<n;i++){
int attr = array.getIndex(i);
switch (attr){
case R.styleable.SlidMenu_RithtPadding:
mRightWithScr = array.getDimensionPixelSize(attr,(int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 50, context.getResources().getDisplayMetrics()));
break;
}
}
array.recycle();//</span>
}</span>
嗯,这次好像比较完美了,诶?不对,人家的侧滑都是在左上角有一个点击按钮的,一点,菜单就可以出来,再一点,菜单就会进去,好吧,我们来实现它! 只需要两步即可:
第一步:在自定义控件中添加以下三个方法:
<span style="font-size:18px;">/*
打开菜单
*/
public void openMenu(){
if(isOpen)return;
else {
this.smoothScrollTo(0,0);//打开
isOpen = true;
}
}
/*
关闭菜单
*/
public void closeMenu(){
if(!isOpen){
return ;
}else{
this.smoothScrollTo(mMenuWidth,0);
isOpen = false;
}
}
/*
切换菜单
*/
public void toggle(){
if(isOpen){
closeMenu();
}else{
openMenu();
}
}</span>
第二步:在布局文件中定义一个按钮(这个都会,我就不贴代码了),然后在使用控件的时候在点击方法中直接调用即可
<span style="font-size:18px;">public class MainActivity extends AppCompatActivity {
private SlidMenu slidmenu;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
supportRequestWindowFeature(Window.FEATURE_NO_TITLE);<span style="font-family: Arial, Helvetica, sans-serif;">//</span><span style="font-family: Arial, Helvetica, sans-serif;">如果继承的是ActionBarActivity或者是AppCompatActivity就会报错,</span><span style="font-family: Arial, Helvetica, sans-serif;">如果你执意要用这个方法,请继承Activity。</span>
// 如果你继承的是AppCompatActivity或ActionBarActivity请调用下面的方法代替上面的方法
// supportRequestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
slidmenu = (SlidMenu) findViewById(R.id.horscrview);
}
public void toggle(View view){
slidmenu.toggle();
}
}
</span>
OK,大功告成,这次总可以了吧! 嗯,看似还行,但是我们还可以做成更绚丽的效果!
实现这种效果也很简单,主要通过属性动画来实现,在自定义控件中添加如下代码:
<span style="font-size:18px;">/**
* 滚动发生时
*/
@Override
protected void onScrollChanged(int l, int t, int oldl, int oldt)
{
super.onScrollChanged(l, t, oldl, oldt);
/**
* 区别1:内容区域1.0~0.7 缩放的效果 scale : 1.0~0.0 0.7 + 0.3 * scale
*
* 区别2:菜单的偏移量需要修改
*
* 区别3:菜单的显示时有缩放以及透明度变化 缩放:0.7 ~1.0 1.0 - scale * 0.3 透明度 0.6 ~ 1.0
* 0.6+ 0.4 * (1- scale) ;
*
*/
float rightScale = 0.7f + 0.3f * scale;
float leftScale = 1.0f - scale * 0.3f;
float leftAlpha = 0.6f + 0.4f * (1 - scale);
// 调用属性动画,设置TranslationX
ViewHelper.setTranslationX(mMenu, mMenuWidth * scale * 0.8f);
ViewHelper.setScaleX(mMenu, leftScale);
ViewHelper.setScaleY(mMenu, leftScale);
ViewHelper.setAlpha(mMenu, leftAlpha);
// 设置content的缩放的中心点
ViewHelper.setPivotX(mContent, 0);
ViewHelper.setPivotY(mContent, mContent.getHeight() / 2);
ViewHelper.setScaleX(mContent, rightScale);
ViewHelper.setScaleY(mContent, rightScale);
}</span>
嗯,这次才是大功告成!
图:
想要源码的同学,这是源码地址:https://github.com/anxiaokai/seslidmenu.git
参考资料:慕课网