Android5.0多种侧滑栏效果实例代码

1.普通侧滑

效果图：

 

思路：通过自定义view继承horizontalscrollview，然后重写onmeasure(),onlayout(),ontouchevent()

方法并设置menu(通过动画使menu开始时处于隐藏状态)布局和content布局。(注意：使用viewhelper类需要导入nineoldandroids-2.4.0.jar包)

menu(left_menu)布局代码:

<?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="wrap_content"
android:orientation="vertical"
android:layout_centerinparent="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="@mipmap/img_1"/>
<textview
android:id="@+id/iv_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="第一个item"
android:textsize="21sp"
android:textcolor="#ffffff"
android:layout_torightof="@+id/id_img1"
android:layout_marginleft="20dp"
android:layout_centervertical="true"/>
</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="@mipmap/img_2"/>
<textview
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="第二个item"
android:textsize="21sp"
android:textcolor="#ffffff"
android:layout_torightof="@+id/id_img2"
android:layout_marginleft="20dp"
android:layout_centervertical="true"/>
</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="@mipmap/img_3"/>
<textview
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="第三个item"
android:textsize="21sp"
android:textcolor="#ffffff"
android:layout_torightof="@+id/id_img3"
android:layout_marginleft="20dp"
android:layout_centervertical="true"/>
</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="@mipmap/img_4"/>
<textview
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="第四个item"
android:textsize="21sp"
android:textcolor="#ffffff"
android:layout_torightof="@+id/id_img4"
android:layout_marginleft="20dp"
android:layout_centervertical="true"/>
</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="@mipmap/img_5"/>
<textview
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="第五个item"
android:textsize="21sp"
android:textcolor="#ffffff"
android:layout_torightof="@+id/id_img5"
android:layout_marginleft="20dp"
android:layout_centervertical="true"/>
</relativelayout>
</linearlayout>
</relativelayout>

content(activity_main)布局代码：

<?xml version="1.0" encoding="utf-8"?>
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:hyname="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@mipmap/img_frame_background">
<com.imooc.view.slidingmenu
android:id="@+id/id_menu"
android:layout_width="match_parent"
android:layout_height="match_parent"
hyname:rightpadding="100dp">
<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:orientation="vertical"
android:background="@mipmap/qq">
<button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="切换菜单"
android:onclick="tooglemenu"
android:textsize="21sp"/>
</linearlayout>
</linearlayout>
</com.imooc.view.slidingmenu>
</linearlayout>

自定义attr.xml文件代码：

<?xml version="1.0" encoding="utf-8"?>
<resources>
<attr name="rightpadding" format="dimension"/>
<declare-styleable name="slidingmenu">
<attr name="rightpadding"></attr>
</declare-styleable>
</resources>

自定义slidingmenu代码：

public class slidingmenu extends horizontalscrollview {
private linearlayout mwapper;
private viewgroup mmenu;//菜单布局
private viewgroup mcontent;//内容布局
private int mscreenwidth;//屏幕宽度
private int mmenurightpadding=50;
private boolean once;
private int mmenuwidth;
private boolean isopen;
public slidingmenu(context context) {
this(context, null);
}
/**
* 未使用自定义属性时，调用
* @param context
* @param attrs
*/
public slidingmenu(context context, attributeset attrs) {
this(context, attrs,0);
}
/**
* 自定义了属性且使用时，调用次构造方法
* @param context
* @param attrs
* @param defstyleattr
*/
public slidingmenu(context context, attributeset attrs, int defstyleattr) {
super(context, attrs, defstyleattr);
//获取定义的属性的数组
typedarray typedvalue=context.gettheme().obtainstyledattributes(attrs, r.styleable.slidingmenu, defstyleattr, 0);
int n=typedvalue.getindexcount();
for (int i=0;i<n;i++){
int attr=typedvalue.getindex(i);
switch (attr){
case r.styleable.slidingmenu_rightpadding:
mmenurightpadding=typedvalue.getdimensionpixelsize(attr,(int) typedvalue.applydimension(typedvalue.complex_unit_dip,50,context.getresources().getdisplaymetrics()));
break;
}
}
typedvalue.recycle();
windowmanager mg= (windowmanager) context.getsystemservice(context.window_service);
//初始化屏幕信息对象
displaymetrics outmetrics=new displaymetrics();
//把屏幕的信息存储到displaymetrics中
mg.getdefaultdisplay().getmetrics(outmetrics);
//获取屏幕宽度赋值给mscreenwidth
mscreenwidth=outmetrics.widthpixels;
}
/**
* 设置子view的宽和高
* 设置自己的宽和高
* @param widthmeasurespec
* @param heightmeasurespec
*/
@override
protected void onmeasure(int widthmeasurespec, int heightmeasurespec) {
if(!once){
//获取slidingmenu中的linearlayout布局
mwapper= (linearlayout) getchildat(0);
//获取linearlayout中的menu布局
mmenu= (viewgroup) mwapper.getchildat(0);
//获取linearlayout中的content布局
mcontent= (viewgroup) mwapper.getchildat(1);
//获取menu宽度
mmenuwidth= mmenu.getlayoutparams().width=mscreenwidth-mmenurightpadding;
//设置content的宽度
mcontent.getlayoutparams().width=mscreenwidth;
mwapper.getlayoutparams().width=mscreenwidth;
once=true;
}
super.onmeasure(widthmeasurespec, heightmeasurespec);
}
/**
* 通过设置偏移量，将menu隐藏
* @param changed
* @param l
* @param t
* @param r
* @param b
*/
@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) {
switch (ev.getaction()){
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);
isopen=true;
}
public void closemenu(){
if(!isopen)return;
this.smoothscrollto(mmenuwidth,0);
isopen=false;
}
//切换菜单
public void toggle(){
if(isopen){
closemenu();
}else {
openmenu();
}
}
}

主文件代码：

public class mainactivity extends appcompatactivity {
private slidingmenu mleftmenu;
private textview textview;
@override
protected void oncreate(bundle savedinstancestate) {
super.oncreate(savedinstancestate);
setcontentview(r.layout.activity_main);
mleftmenu= (slidingmenu) findviewbyid(r.id.id_menu);
textview= (textview) findviewbyid(r.id.iv_text);
//menu的第一个item的点击事件，可不写
textview.setonclicklistener(new view.onclicklistener() {
@override
public void onclick(view view) {
mleftmenu.toggle();
}
});
}
public void tooglemenu(view view){
mleftmenu.toggle();
}
}

2.抽屉式侧滑(一)

效果图：

 

思路：在原来的基础上，在自定义view文件中重写onscrollchanged()方法

添加代码：

/**
* 滚动时发生
* @param l
* @param t
* @param oldl
* @param oldt
*/
@override
protected void onscrollchanged(int l, int t, int oldl, int oldt) {
super.onscrollchanged(l, t, oldl, oldt);
//调用属性动画，设置translatex,l值为menu隐藏的宽度,menu由完全隐藏变为完全可见，变化梯度 scale由1~0,menu偏移量由大到小；
float scale=l*1.0f/mmenuwidth; //1~0
viewhelper.settranslationx(mmenu, mmenuwidth * scale);
}

3.抽屉式侧滑(二)

效果图：

 

思路：在一的基础上通过设置menu的缩放效果，content的缩放效果和缩放中心实现。

实现代码：

/**
* 滚动发生
* @param l
* @param t
* @param oldl
* @param oldt
*/
@override
protected void onscrollchanged(int l, int t, int oldl, int oldt) {
super.onscrollchanged(l, t, oldl, oldt);
//调用属性动画，设置translatex,l值为menu隐藏的宽度,menu由完全隐藏变为完全可见，变化梯度scale由1~0,menu偏移量由大到小；
float scale=l*1.0f/mmenuwidth; //1~0
// viewhelper.settranslationx(mmenu, mmenuwidth * scale);
float leftscale=1.0f-scale*0.3f; //0.7~1.0
float leftalpha=0.6f+0.4f*(1-scale); //0.6~1.0
float rightscale=0.7f+0.3f*scale; //1.0~0.7
//缩放动画0.7~1.0
viewhelper.setscalex(mmenu, leftscale);
viewhelper.setscaley(mmenu, leftscale);
//透明度变化0.6~1.0
viewhelper.setalpha(mmenu, leftalpha);
viewhelper.settranslationx(mmenu, mmenuwidth * scale * 0.7f);
viewhelper.setpivotx(mcontent, 0);
viewhelper.setpivoty(mcontent, mcontent.getheight() / 2);
//缩放动画1.0~0.7
viewhelper.setscalex(mcontent, rightscale);
viewhelper.setscaley(mcontent,rightscale);
}

以上所述是小编给大家介绍的android5.0多种侧滑栏效果实例代码，希望对大家有所帮助