《Android应用程序开发》教案.docx

教案课程名称：Android应用程序开发课程性质：必修课限选课任选课学时学分：学分4学时68开课部门：设计与艺术分院课程从属专业（学科）：计算机应用技术专业开课学期：2017-2018学年第一学期教师姓名：教师职称：讲师授课对象：15计算机应用技术教案设计规范要求1.教案是教师为有效开展教学活动，根据培养方案、课程标准、学生学情等具体情况，以一次课或一个教学单元（含:一个课题、一个项目、一个任务、一个案例等）为对象，进行教学设计的重要教学文件。2.一个完整的教案应包括:教学目标、教学内容（含重难点）、教学方法、教学媒介、教学过程及学生课外任务等设计，并包括授课对象的学情分析及教师课后教学反思等要素。3.教案设计应注重科学性、有效性、针对性、创新性和可操作性，并体现规范性。（存档时，封面及本页请正反面打印）教案序号：.课题SideMenu授课形式理论理实一体口实训（验）其它：学时安排本单元总学时：4（其中：理论2学时、实践2学时）教学内容及目标掌握SideMenU的使用：与Fragment、动画的配合：教学重点及难点重点和难点：掌握与Fragment、动画的配合使用。授课对象学情分析Fragment课时比较多，掌握情况会相对好一点，但动画课时较少，实用起来有点困难。教学媒介多媒体教学场所机房。3414课后任务；完成课堂案例。教学后记:AndrofdSideMenu侧滑菜单的实现新课导入：前面学习了AndrOid的Fragment,今天让我们在来学习一个在实战中使用广泛的控件，SideMenU侧滑菜单。课程实施：SideMenu侧滑菜单的实现，自定义的Animation效果，先看看实现的效果。ROCKCONCERTS总体来说也并不复杂，下面给大家看下整个项目的结构：Eisrc亡1mainjavaElCom.Ialsidemenu&fragmentj&ContentFragmentC¾MainActivityCares<>AndroidManifest-XmI目.gitignoreJapp.iml0build.gradleTproguard-rules.proDgradleDalibrarybuildQlibs口SrCDandroidTestDmainDjavaE:ComJaiJibraryEanimationsc)FIipAnimationBinterfacesResourceble>ScreenShortabIe巨modelc)¾SIideMenuitemEutilsc¾ViewAnimationUtiIsArsresoAndroidManifest1XmI以下是实现的源码及详细步骤：新建androidstudio项目我这边就不讲述了说一下androidstudio关联library项目，很简单，我贴几张图片大家就知道了，File->SideMenu-D:javaasworkSideMenu-app-.appsrcmainjavacomaisidemenuMainActiviiFileEditViewNavigateCodeAnalyzeRefactorBuildRunToolsVCSNew>NewProjectImportProject.ProjectfromVersionControl>0RCpen.eopenProjectloseProjectNewModule.¥Settings.Ctrl+Alt+S匣ProjectStructure.Ctrl+Alt+Shift+SImportModule.ImportSample.OtherSettingsModuleImportSettings.ExportSettings.<>Androidresourcefile口Androidresourcedirectory目SaveAllCtrl+SGSynchronizeCtrl+Alt+Y目File口DirectoryInvalidateCaches/Restart.sC+ClassExporttoHTML.,Print.«CC+SourceFile»CC+HeaderFileAddtoFavorites>FileEncodingwImageAsset'vVectorAssetLineSeparatorsMakeFileRead-only>rAIDL>'W*ActivityPowerSaveMode>wAndroidAuto>ExitwFolder>然后。* e -+ -SDK Location Project Developer Ser AdsAnalytics Authentication Cloud Notificationsapp X C ConteiGi libraryScopeinclude=*.jarr dir=libsCompile EjUnitjUnit:4.12Test compile -mcom.android.$upport：dppcompat-v7:23.3.0Compile *E com.android.support:design:23.3.0Compile I口:Iibrary Compile mcom.google.android.gms:play-services-appindexing:8.1.0Compile *m com.github.ozcirukhCircularReveakl.0.4Compile *2U 3 ModUledePenderKylHluk 4E1 Library dependency 2 FiledependencyCancelicn_clos;BUHdRUnIcIndowHeIPL>hflL84?1*ProjectStntue)mIaisi(这样就可以了。首先看下ViewAnimationUtiIs类packagecom.lai.library.utils;importandroid.app.Activity;importandroid.os.Handler;importandroid.support.v4.widgetDrawerLayout;importandroid.view.View;importandroid.view.animation.AccelerateInterpolator;importandroid.view.animation.Animation;importandroid.widgetlmageView;importcom.lai.library.animations.FlipAnimation;importcom.lai.Iibraryjnterfaces-Resourceble;importcomJai.Iibraryjnterfaces-ScreenShortabIe;importjava.util.ArrayList;importjava.util.List;importstaticcom.Iai.sidemenu.RJayout;*Createdbyhenryon2016/5/11.*自定义的动画效果VpublicclassViewAnimationUtils<TextendsResourceble>*切换隐藏与显示的效果7privatefinalintANIMATION_DURATION=10;publicstaticfinalintCIRCULAR_REVEAL_ANIMATION_DURATION=20;privateActivityactivity;privateList<T>list;privateList<View>ViewList=newArrayList<View>();/View集合privateScreenShortabIeSCreenShOrtabIe;获取图片privateDrawerLayoutdrawerLayout;privateViewAnimatorListenerVieWAnimatorLiStener;实现定义接口*构造器VpublicViewAnimationUtils(Activityactivity,List<T>list,ScreenShortabIeScreenShortabIefDrawerLayoutdrawerLayoutrViewAnimatorListenerViewAnimatorListener)this.activity=activity;this.list=list;this.screenShortable=ScreenShortabIe;this.drawerLayout=JrawerLayout;this.viewAnimatorListener=ViewAnimatorListener;*显示菜单的数量publicvoidshowMenCount()SetVieWSCliCkable(false);刚显示个数时view是出于false的状态VieWLiStdear();清空组件doublesize=list.size();for(inti=0;i<size;i+÷)ViewViewMenu=activity.getLayoutInflater().inflate(layout.menuJist-itemrnull);finalintfinall=i;/比*view的点击事件7viewMenu.setOClickListener(newView-OnCIickListenerO(©OverridepublicvoidonClick(Viewv)intIocaltion=0,0;用数组坐标记录位置v.getLoCatiOne)nScreen(loCaItion);/垂直switchltem(listget(finall),localtionl+v.getHeight()/2);"点击后调用switchitem隐藏);得到资源并设置(ImageView)viewMenu.findViewById(comJai-Sidemenu.R.id.menuJtemJmage).setImageResource(listget(i).getImageRes();viewMenu.setvisibility(View.GONE);viewMenu.setEnabled(false);VieWLiSt.add(viewMenu);添加list中VieWAnimatorLiStener.addViewToContainer(viewMenu);添加到动画接口中finaldoubleposition=i;finaldoubledelay=3*ANIMATION.DURATION*(position/size);*耗时操作7newHandler().postDelayed(newRunnable()©Overridepublicvoidrun()if(position<viewList.size()animateView(int)position);if(position=viewList.size()-1)screenShortable.takeScreenShort();setViewsClickable(true);,(long)delay);*设置View7privatevoidanimateView(intposition)finalViewview=viewList.get(position);VieW.SetvisibiIity(ViewVlSlBLE);/何见FIipAnimationrotation=newFlipAnimation(90,O,O.Of,view.getHeightO/2.0f);设置动画效果rotation.setDuration(ANIMATION_DURAHON);rotation.setFillAfter(true);rotation.setlnterpolator(newAccelerateInterpoIatorO);动画监听rotation.setAnimationListener(newAnimation-AnimationListenerO0VerridepublicvoidonAnimationStart(Animationanimation)OVerridepublicvoidonAnimationEnd(Animationanimation)VieWclearAnimation();结束后清除动画效果©OverridepublicvoidonAnimationRepeat(Animationanimation)；*点击的ItemprivatevoidswitchItem(ResourcebleSlideMenuItemzinttopPosition)this.screenShortable=viewAnimatorListener.onSwitch(slideMenuItem,ScreenShortabIertopPosition);点击后隐藏ViewListhideMenuContent();*隐藏menu/privatevoidhideMenuContent()setViewsClickable(false);doublesize=list.size();隐藏全部for(inti=list.size();i>=0;i)finaldoubleposition=i;记录在VieWLiSt中点击的position作为头部,添加动画效果finaldoubledelay=3*ANIMATION.DRATION*(position/size);线程时间(其实这一步没必要，线程的时间可以直接写死)耗时操作应放在handler里面操作newHandIerQ.postDelayed(newRunnabIeQ©Overridepublicvoidrun()if(position<viewList.size()设置隐藏时的动画animateHideView(int)position);,long)delay);*设置VieW隐藏时的动画7privatevoidanimateHideView(finalintposition)finalViewview=VieWLiSt.get(position);得到点击的view/0表示正在处于的状态为0。,90为操作后的度数，OQf表示起始精确位置,CenterY为view高度的二分之一FIipAnimationrotation=newFlipAnimation(0,90,0.0f,view.getHeightO/2.0f);设置动画rotation.setDuration(ANIMATION_DURATION);/设置动画时间rotation.setFillAfter(true);rotation.setlnterpolator(newAccelerateInterpoIatorO);rotation.setAnimationListener(newAnimation-AnimationListenerO©OverridepublicvoidonAnimationStart(Animationanimation)*结束时*paramanimation7©OverridepublicvoidonAnimationEnd(Animationanimation)ViewxIearAnimationO;VieW.Setvisibility(ViewlNVISIBLE);隐藏VieWif(position=viewList.size()-1)/防止越界ViewAnimatorListenerenabIeHomeButtonO;drawerLayout.cl。SeDraWerS();关闭drawers©OverridepublicvoidonAnimationRepeat(Animationanimation);VieW.StartAnimationTOtation);开始动画*设置控件是否可用privatevoidsetViewsClickable(booleanclickable)"点击以后view不可再重新点击ViewAnimatorListenecdisabIeHomeButtonO;*点击第几个VieW7for(Viewview:viewList)View-SetEnabIed(ClickabIe);l*定义接口publicinterfaceViewAnimatorListener点击MenuitempublicScreenShortabIeonSwitch(ResourcebleSlideMenuItem,ScreenShortabIeScreenShortabIe,intposition);publicvoiddisableHomeButton();publicvoidenableHomeButton();publicvoidaddViewToContainer(Viewview);上面的注释写的非常详细了，一目了然。下面是FIipAnimation类，自定义的动画效果，代码量很少，更容易理解！packagecom.lai.library.animations;*Createdbyhenryon2016/5/1Limportandroid.graphics<Camera;importandroid.graphics.Matrix;importandroid.view.animation.Animation;importandroid.view.animation.Transformation;*自定义动画效果publicclassFlipAnimationextendsAnimationprivatefinalfloatRiFromDegrees;/起始的度数privatefinalfloatmToDegrees;要到达的度数privatefinalfloatmCenterX;/水平方向X轴的位置privatefinalfloatmCenterY;/Y轴的位置privateCameramCamera;*构造器*paramfromDegrees*paramtoDegrees*paramcenterX*paramcenterYpublicFlipAniation(floatfromDegrees,floattoDegrees,floatcenterX,floatcenterY)this.mFromDegrees=fromDegrees;this.mToDegrees=toDegrees;this.mCenterX=centerX;this÷mCenterY=centerY;*初始化屏幕宽度创建Cameraparamwidth*paramheight*paramparentwidth*paramparentHeightpublicvoidinitialize(intwidth,intheight,intparentwidth,intparentHeight)(suer.initialize(width,height,parentwidth,parentHeight);mCamera=newCamera();*动画效果publicvoidapplyTransformation(floatinterpolatedTime,Transformationtransformation)finalfloatfromDegrees=OiFromDegrees;floatdegrees=fromDegrees+(mTDegreesfromDegrees)*interpolatedTime)度数*获取值finalfloatcenterX=mCenterX;finalfloatcenterY=mCenterY;finalCameracamera=mCamera;*对图片进行处理*Translate平移变换Rotate旋转变换Scale缩放变换Skew错切变换finalMatrixmatrix=transformation.getMatrix();camera.save();"保存当前状态，与restore是成对出现的caera.rotateY(degrees)Y轴旋转CanleragetMatrix(matrix);/得到设置后的matrixCamera.restore。;/回复当前状态*下面两句标识以动画中心点为中央部分matrix.preTranslate(-centerX.-centerY);matrix.postTranslate(centerX,centerY);写完关联的library以后，接下来就是我们实际操作的页面了。我们只需要在MainActivity里面嵌套一个Fragment就行了，然后再实现完ViewAnimationUtiIs的四个接口，马上开始。第一步写一个Fragment类packagecom.lai.sidemen.fragment;importandroid.app.Fragment;importandroid.graphics.Bitmap;importandroid.graphics.Canvas;importandroid.os.Bundle;importandroid.support.annotation.Nullable;importandroid.view.Layoutlnflater;importandroid.view.View;importandroid.view.ViewGroup;importandroid.widget.ImageView;importcomJaiJibraryJnterfaces.ScreenShortabIe;importcomJai.sidemenu.R;*Createdbyhenryon2016/5/11.7publicclassContentFragmentextendsFragmentimplementsScreenShortabIe*点击图片需要切换的选项value7publicstaticfinalStringCLOSE="关闭"publicstaticfinalStringBUILDING=“创建"publicstaticfinalStringBOOK=书本"；publicstaticfinalStringPAINT=交点'；publicstaticfinalStringCASE="案例"publicstaticfinalStringSHOP="商品"；publicstaticfinalStringPARTY=派对，;publicstaticfinalStringMOVIE=”电影privateViewrootView;privateImageViewmlmageView;privateintres;privateBitmapbitmap;publicstaticContentFragmentnewlnstance(intresid)ContentFragmentContentFragment=newContentFragmentO;Bundlebundle=newBundle();bundle.putInt(Integer.class.getName(),resid);contentFragment.setArguments(bundle);/ig®ArgumentsreturnContentFragment;©OverridepublicvoidOnViewCreated(Viewview,BundleSavedInstanceState)super.onViewCreated(viewfSavedInstanceState);this.rootView=view.findViewById(RJd.container);©OverridepublicvoidonCreate(BundleSavedlnstanceState)SupeconCreate(SavedInstanceState);res=getArguments().getInt(Integer.class.getName();/®?Arguments的值©Nullable©OverridepublicViewoCreateView(LayoutInflaterinflatesViewGroupcontainer,BundleSavedInstanceState)Viewview=inflater.inflate(R.layoutfragment_main,null);mlmageView=(ImageView)view.findViewById(R.id.image_content);mImageView.setClickable(true);mImageView.setFocusable(true);mImageView.setImageResource(res);returnview;)*设置bitm叩*耗作*/©OverridepublicvoidtakeScreenShort()Threadthread=newThread()Overridepublicvoidrun()Bitmapbitmap=Bitmap.createBitmap(rootView.getWidth(),rootView.getHeight()zBitmap.Config.ARGB_8888);Canvascanvas=newCanvas(bitmap);rootView.draw(canvas);ContentFragmentthis.bitmap=bitmap;；thread.start();©OverridepublicBitmapgetBitmap()returnbitmap;课程小结：SideMenu这个控件在实战中，经常使用。但这个控件经常跟Fragment以及动画一起使用，所以在使用过程中需要大家结合以前的知识。通过多做案例，来综合掌握该控件。