仿QQ60主页面侧滑效果Word文档格式.docx
- 文档编号:16623085
- 上传时间:2022-11-24
- 格式:DOCX
- 页数:17
- 大小:234.73KB
仿QQ60主页面侧滑效果Word文档格式.docx
《仿QQ60主页面侧滑效果Word文档格式.docx》由会员分享,可在线阅读,更多相关《仿QQ60主页面侧滑效果Word文档格式.docx(17页珍藏版)》请在冰豆网上搜索。
*Version:
1.0
*/
publicclassSlidingMenuextendsHorizontalScrollView{
publicSlidingMenu(Contextcontext){
super(context);
}
publicSlidingMenu(Contextcontext,AttributeSetattrs){
super(context,attrs);
publicSlidingMenu(Contextcontext,AttributeSetattrs,intdefStyleAttr){
super(context,attrs,defStyleAttr);
}
2.4.运行起来之后发现布局不对,完全乱了明明都是match_parent可是就是不行那么我们就需要用代码指定菜单和内容的宽度:
菜单的宽度=屏幕的宽度-自定义的右边留出的宽度
内容的宽度=屏幕的宽度
privateViewmMenuView;
privateViewmContentView;
privateintmMenuWidth;
this(context,null);
this(context,attrs,0);
//获取自定义的右边留出的宽度
TypedArrayarray=context.obtainStyledAttributes(attrs,R.styleable.SlidingMenu);
floatrightPadding=array.getDimension(
R.styleable.SlidingMenu_rightPadding,dip2px(50));
//计算菜单的宽度=屏幕的宽度-自定义右边留出的宽度
mMenuWidth=(int)(getScreenWidth()-rightPadding);
array.recycle();
/**
*把dip转成像素
privatefloatdip2px(intdip){
returnTypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_DIP,dip,getResources().getDisplayMetrics());
@Override
protectedvoidonFinishInflate(){
super.onFinishInflate();
//1.获取根View也就是外层的LinearLayout
ViewGroupcontainer=(ViewGroup)this.getChildAt(0);
intcontainerChildCount=container.getChildCount();
if(containerChildCount>
2){
//里面只允许放置两个布局一个是Menu(菜单布局)一个是Content(主页内容布局)
thrownewIllegalStateException("
SlidingMenu根布局LinearLayout下面只允许两个布局,菜单布局和主页内容布局"
);
//2.获取菜单和内容布局
mMenuView=container.getChildAt(0);
mContentView=container.getChildAt
(1);
//3.指定内容和菜单布局的宽度
//3.1菜单的宽度=屏幕的宽度-自定义的右边留出的宽度
mMenuView.getLayoutParams().width=mMenuWidth;
//3.2内容的宽度=屏幕的宽度
mContentView.getLayoutParams().width=getScreenWidth();
*获取屏幕的宽度
publicintgetScreenWidth(){
Resourcesresources=this.getResources();
DisplayMetricsdm=resources.getDisplayMetrics();
returndm.widthPixels;
2.5接下来一开始就让菜单滑动到关闭状态,手指滑动抬起判断菜单打开和关闭并做相应的处理onLayout()onTouch()smoothScrollTo(),当手指快速的时候切换菜单的状态利用GestureDetector手势处理类:
//手势处理类主要用来处理手势快速滑动
privateGestureDetectormGestureDetector;
//菜单是否打开
privatebooleanmMenuIsOpen=false;
TypedArrayarray=context.obtainStyledAttributes(attrs,R.styleable.SlidingMenu);
R.styleable.SlidingMenu_rightPadding,dip2px(50));
//实例化手势处理类
mGestureDetector=newGestureDetector(context,newGestureListener());
TypedValue.COMPLEX_UNIT_DIP,dip,getResources().getDisplayMetrics());
if(containerChildCount>
2){
publicbooleanonTouchEvent(MotionEventev){
//处理手指快速滑动
if(mGestureDetector.onTouchEvent(ev)){
returnmGestureDetector.onTouchEvent(ev);
switch(ev.getAction()){
caseMotionEvent.ACTION_UP:
//手指抬起获取滚动的位置
intcurrentScrollX=getScrollX();
if(currentScrollX>
mMenuWidth/2){
//关闭菜单
closeMenu();
}else{
//打开菜单
openMenu();
returnfalse;
returnsuper.onTouchEvent(ev);
*打开菜单
privatevoidopenMenu(){
smoothScrollTo(0,0);
mMenuIsOpen=true;
*关闭菜单
privatevoidcloseMenu(){
smoothScrollTo(mMenuWidth,0);
mMenuIsOpen=false;
protectedvoidonLayout(booleanchanged,intl,intt,intr,intb){
super.onLayout(changed,l,t,r,b);
//布局指定后会从新摆放子布局,当其摆放完毕后,让菜单滚动到不可见状态
if(changed){
scrollTo(mMenuWidth,0);
privateclassGestureListenerextendsGestureDetector.SimpleOnGestureListener{
publicbooleanonFling(MotionEvente1,MotionEvente2,floatvelocityX,floatvelocityY){
//当手指快速滑动时候回调的方法
Log.e("
TAG"
velocityX+"
"
//如果菜单打开并且是向左快速滑动切换菜单的状态
if(mMenuIsOpen){
if(velocityX<
-500){
toggleMenu();
returntrue;
}else{
//如果菜单关闭并且是向右快速滑动切换菜单的状态
if(velocityX>
500){
*切换菜单的状态
privatevoidtoggleMenu(){
2.6.实现菜单左边抽屉样式的动画效果,监听滚动回调的方法onScrollChanged()这个就非常简单了一句话就搞定,效果就不看了一起看终极效果吧
@Override
protectedvoidonScrollChanged(intl,intt,intoldl,intoldt){
super.onScrollChanged(l,t,oldl,oldt);
//l是当前滚动的x距离在滚动的时候会不断反复的回调这个方法
Log.e(TAG,l+"
mMenuView.setTranslationX(l*0.8f);
2.7.实现菜单右边菜单的阴影透明度效果,这个打算在主页面内容布局上面加一层阴影,用ImageView即可,那么我们的内容View就需要换了
privatestaticfinalStringTAG="
HorizontalScrollView"
;
privateContextmContext;
//4.给菜单和内容View指定宽高-左边菜单View
//4.给菜单和内容View指定宽高-菜单的宽度
//5.3手势处理类主要用来处理手势快速滑动
//5.3菜单是否打开
//7(4).主页面内容View的布局包括阴影ImageView
privateViewGroupmContentView;
//7.给内容添加阴影效果-阴影的ImageView
privateImageViewmShadowIv;
//4.1计算左边菜单的宽度
//4.1.1获取自定义的右边留出的宽度
//4.1.2计算菜单的宽度=屏幕的宽度-自定义右边留出的宽度
//5.3实例化手势处理类
this.mContext=context;
//4.2指定菜单和内容View的宽度
//4.2.1.获取根View也就是外层的LinearLayout
//4.2.2.获取菜单和内容布局
//7.给内容添加阴影效果
//7.1先new一个主内容布局用来放阴影和LinearLayout原来的内容布局
mContentView=newFrameLout(mContext);
ViewGroup.LayoutParamscontentParams=newViewGroup.LayoutParams(
ViewGroup.LayoutParams.MATCH_PARENT,ViewGroup.LayoutParams.MATCH_PARENT);
//7.2获取原来的内容布局,并把原来的内容布局从LinearLayout中异常
ViewoldContentView=container.getChildAt
(1);
container.removeView(oldContentView);
//7.3把原来的内容View和阴影加到我们新创建的内容布局中
mContentView.addView(oldContentView);
//7.3.1创建阴影ImageView
mShadowIv=newImageView(mContext);
mShadowIv.setBackgroundColor(Color.parseColor("
#99000000"
));
mContentView.addView(mShadowIv);
//7.4把包含阴影的新的内容View添加到LinearLayout中
container.addView(mContentView);
//4.2.3.指定内容和菜单布局的宽度
//4.2.3.1菜单的宽度=屏幕的宽度-自定义的右边留出的宽度
//4.2.3.2内容的宽度=屏幕的宽度
*5.处理手指抬起和快速滑动切换菜单
publicbooleanonTouchE
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- QQ60 主页 面侧滑 效果