自己实现android侧滑菜单
投稿于 被查看 41554 次 评论:3
自己实现android侧滑菜单
当今的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;"><!--{cke_protected}{C}%3C!%2D%2D%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%2D%2D%3E--> <relativelayout android:layout_height="match_parent" android:layout_width="match_parent" xmlns:android="http://schemas.android.com/apk/res/android"> <linearlayout android:layout_centerinparent="true" android:layout_height="match_parent" android:layout_width="match_parent" android:orientation="vertical"> <relativelayout android:layout_height="wrap_content" android:layout_width="wrap_content"> <imageview android:id="@+id/img1" android:layout_height="wrap_content" android:layout_width="wrap_content" android:src="@drawable/ic_launcher"> <textview android:id="@+id/text1" android:layout_centervertical="true" android:layout_height="wrap_content" android:layout_torightof="@id/img1" android:layout_width="wrap_content" android:text="item1"> </textview></imageview></relativelayout> <relativelayout android:layout_height="wrap_content" android:layout_width="wrap_content"> <imageview android:id="@+id/img2" android:layout_height="wrap_content" android:layout_width="wrap_content" android:src="@drawable/ic_launcher"> <textview android:id="@+id/text2" android:layout_centervertical="true" android:layout_height="wrap_content" android:layout_torightof="@id/img2" android:layout_width="wrap_content" android:text="item1"> </textview></imageview></relativelayout> <relativelayout android:layout_height="wrap_content" android:layout_width="wrap_content"> <imageview android:id="@+id/img3" android:layout_height="wrap_content" android:layout_width="wrap_content" android:src="@drawable/ic_launcher"> <textview android:id="@+id/text3" android:layout_centervertical="true" android:layout_height="wrap_content" android:layout_torightof="@id/img3" android:layout_width="wrap_content" android:text="item1"> </textview></imageview></relativelayout> <relativelayout android:layout_height="wrap_content" android:layout_width="wrap_content"> <imageview android:id="@+id/img4" android:layout_height="wrap_content" android:layout_width="wrap_content" android:src="@drawable/ic_launcher"> <textview android:id="@+id/text4" android:layout_centervertical="true" android:layout_height="wrap_content" android:layout_torightof="@id/img4" android:layout_width="wrap_content" android:text="item1"> </textview></imageview></relativelayout> <relativelayout android:layout_height="wrap_content" android:layout_width="wrap_content"> <imageview android:id="@+id/img5" android:layout_height="wrap_content" android:layout_width="wrap_content" android:src="@drawable/ic_launcher"> <textview android:id="@+id/text5" android:layout_centervertical="true" android:layout_height="wrap_content" android:layout_torightof="@id/img5" android:layout_width="wrap_content" android:text="item1"> </textview></imageview></relativelayout> </linearlayout> </relativelayout></span></span>
第二步:写出整体布局
<span style="font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:14px;"><!--{cke_protected}{C}%3C!%2D%2D%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%2D%2D%3E--> <linearlayout android:layout_height="match_parent" android:layout_width="match_parent" android:orientation="vertical" xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools"> <googleplay.xiaokai.com.qq.slidmenu android:background="@drawable/img_frame_background" android:id="@+id/horscrview" android:layout_height="match_parent" android:layout_width="wrap_content" android:scrollbars="none"> <linearlayout android:layout_height="match_parent" android:layout_width="wrap_content" android:orientation="horizontal"> <include layout="@layout/left_menulayout"> <linearlayout android:background="@drawable/qq" android:layout_height="match_parent" android:layout_width="match_parent"> </linearlayout> </include></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;"><!--{cke_protected}{C}%3C!%2D%2D%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%2D%2D%3E--> <resources> <declare-styleable name="SlidMenu"> <attr format="dimension" name="RithtPadding"> </attr> </declare-styleable> </resources> RithtPadding就是自定义的属性的名称; <!--{cke_protected}{C}%3C!%2D%2D%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%2D%2D%3E--> <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:background="@drawable/img_frame_background" android:id="@+id/horscrview" android:layout_height="match_parent" android:layout_width="wrap_content" android:scrollbars="none" my:rithtpadding="100dp"> > <linearlayout android:layout_height="match_parent" android:layout_width="wrap_content" android:orientation="horizontal"> <include layout="@layout/left_menulayout"> <linearlayout android:background="@drawable/qq" android:layout_height="match_parent" android:layout_width="match_parent"> </linearlayout> </include></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++){ attr="array.getIndex(i);" case="" int="" mrightwithscr="array.getDimensionPixelSize(attr,(int)" r.styleable.slidmenu_rithtpadding:="" span="" switch=""> }</n;i++){></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>
嗯,这次才是大功告成!
图:
用户评论