Android-Studio移动应用开发任务教程(微课版)教案(3).docx

教学单元：移动应用开发（4）授课班级：授课时间：4教学地点:教学目的：应知：1、了解Adapter的工作原理；2、了解ListView> Spinner等控件的使用应会：1、 会使用基本的适配器；会使用ListView、Spinner等显示控件；2、 能完成简单Android程序的开发教学重点、难点：1. Adapter的工作原理和使用方法2. ListView> Spinner等显示控件的使用教学方法：根据本堂课教学内容的重点与难点，教学过程中主要采用以下教学方法：1. 在理论教学上，主要在钉钉平台上进行，以讲授和教学演示为主，通过提问引导学生发现问题、分析问题，掌握Android软件开发的基本概念和流程。2. 在实践教学上，采用“实例引导，工程驱动”的方式讲授。通过实现相关实例，在实例基础上改造拓宽，真正实现“学以致用”。钉钉和QQ相结合，采 用演示、实践和讨论相结合的模式。3. 注重教学整体过程设计，依托网络平台，将课前预习、课中讲授与演练和课后练习与讨论答疑有机结合，不断摸索提高教学效果。1 .课程设计(1)回顾上一章的内容，通过QQ联系人界面，引出ExpandableListView(2)介绍 ExpandableListView 控件。(3)在包 cn. edu. szpt. qqdemov2 中，新建 Activity,命名为“QQContactActivity"，完成QQ联系人界面搭建Component Tree!* N ConstraintLayout* ConstraintLayoutB imgLoginlcon GmageView)Ab tv_AddBtn fTextView) - $trincAb tvTitle CTextView) - string/tit=exIvContact (ExpandableListView)(4)请学生截图发到群里，了解学生进度(5) 实现组布局，item_contact_groupComponent Tree* 0 I- N ConstraintLayoutAb tv.grouptitle (TextView)Ab tv.groupcount (TextView)(6)请学生截图发到群里，了解学生进度(7)实现子布局，item_contact_chi 1 dComponent Tree* HN ConstraintLayout5 imglcon QmageView)Ab tvName fTextView) - -TextView"Ab tv.OnlineMode (TextView) - -TextViAb tv_Action (TextView) - -TextView"(8)请学生截图发到群里，了解学生进度(9)通过界面分析，设计数据的实体类。public class QQContactBean private String name; private int img;private String onlinemode; private String newaction;o o o o(10)请学生代码截图发到群里，了解学生进度(11 ) 自 定义类QQContact Adapt er ， 继承自BaseExpandab1eListAdapterprivate List<String> groupdata;private Map<String, List<QQContactBean>> childdata;private Context context;public QQContactAdapter(List<String> groupdata,Map<String, List<QQContact>> childdata, Context context) super ();this, groupdata = groupdata;this, childdata = childdata;this.context = context;(12)请学生代码截图发到群里，了解学生进度(13)在 QQContactAdapter 中，重写 getGroupView 方法static class GroupHolderTextView tv_grouptitle;TextView tv_groupcount;) "public View getGroupView(int groupPosition, boolean isExpanded, View convertView, ViewGroup parent) GroupHolder holder;if (convcrtVicw 二二 null) convertView二Layoutlnflater, from(context). inflate(R. layout. item_contact_group, parent, false);holder=new GroupHolder ();holder. tv_grouptitle 二(TextView) convertView. findViewByld(R. id. tv_grouptitle);holder. tv_groupcount=(TextView)convertView. findViewById(R. id. tv_groupcount);convertView. setTag(holder); elseholder二(GroupHolder) convertView. getTagO ;)holder. tv_grouptitle. setText(groupdata. get(groupPosition);holder. tv_groupcount. setText(childdata, get(groupdata.get (groupP osition). size () + )；return convertView;(14) 了解学生进度(15)在 QQContactAdapter 中，重写 getGroupView 方法static class ChildHolderImageView imglcon;TextView tvName;TextView tvOnlineMode;TextView tvAction;)©Overridepublic View getChildView(int groupPosition, int childPosition, boolean isLastChild, View convertView, ViewGroup parent) ChildHolder holder;if (convertView = null) convertView=Layoutlnflater, from(context). inflate(R. layout. item_contact_child, parent, false);holder=new ChildHolder();holder. imglcon= (ImageView)convertView. findViewByld(R. id. imglcon);holder. tvNamc=(TextView)convertView. findViewByld(R. id. tvName);holder.tvOnlineMode=(TextView)convertView. findViewByld(R. id. tv_OnlineMode);holder.tvAction= (TextView)convertView. findViewById(R. id. tv_Action);convertView. setTag(holder); else holder= (ChildHolder) convertView. getTagO ;QQContactBeancontactBean=chiIddata. get(groupdata. get(groupPosition). get(childPo sition);holder, imglcon. setlmageResource (contactBean. getlmgO);holder. tvName. setText(contactBean. getName ();holder. tvOnlineMode. setText( +contactBean. getOnlinemode () + );holder. tvAction. setText(contactBean. getNewaction();return convertView;(16) 了解学生进度(17)在QQ联系人Activity中，添加生成联系人列表的代码private ExpandableListView lv;private QQContactAdapter adapter;private String countries = new String “蜀，魏，吴 );private String names = new String口 刘备，关羽，张飞，赵云，黄忠，魏延,曹操，许褚，张辽,孙权,鲁肃，吕蒙 )；private int icons =new int R. drawable, liubei, R. drawable, guanyu,R. drawable, zhangfei, R. drawable, zhaoyun,R. drawable, huangzhong, R. drawable, weiyan,R. drawable, caocao, R. drawable, xuchu, R. drawable, zhangliao,R. drawable, sunquan, R. drawable, lusu,R. drawable. Ivmeng)；private List<String>groupData;private Map<String, List<QQContactBean>>childData;private void initialDataO for (int i = 0; i <countries.length; i+) groupData. add (countriesi);List<QQContactBean> list=new ArrayList<QQContactBean> ();for (int j = 0; j <namesi. length; j+) QQContactBean p = new QQContactBean(namesij, iconsij, 4G 在线，天天向上)；list, add(p); childData. put (countries i,list);)(18) 了解学生进度(19)结束本次课程讲练局部，进入讨论答疑环节。(20)总结上次课的内容，讲解易错点，说明本次练习课的安排和要求。(21)练习及答疑课，完成练习课工程作业：相关习题教学单元：移动应用开发（6）授课班级：授课时间：2教学地点：教学目的：应知：1、了解Android应用的基本结构；2、了解 Fragment 和 ViewPager应会：7、 会使用 Fragment 和 ViewPager；会使用Android Studio集成开发环境；8、 能完成侧滑效果教学重点、难点：4 .Android的基本框架结构5 . Fragment 和 ViewPager教学方法：根据本堂课教学内容的重点与难点，教学过程中主要采用以下教学方法：7. 在理论教学上，主要在钉钉平台上进行，以讲授和教学演示为主，通过提问引导学生发现问题、分析问题，掌握Android软件开发的基本概念和流程。8. 在实践教学上，采用“实例引导，工程驱动”的方式讲授。通过实现相关实例，在实例基础上改造拓宽，真正实现“学以致用”。钉钉和QQ相结合， 采用演示、实践和讨论相结合的模式。9. 注重教学整体过程设计，依托网络平台，将课前预习、课中讲授与演练和课后练习与讨论答疑有机结合，不断摸索提高教学效果。教学过程设计：备注:1 .课程设计(1)回顾上一节的内容，提出将多个界面集成在一起的问题(2)介绍Fragment、ViewPager和相关的适配器。(3)实现集成主界面，activity_main. xmlComponent TreeN ConstraintLayoutradioGroup2 (norizo ital) rbMessage (RadioButton) ® rbContact (RadioButton) ® rbPulgin (RadioButton)% viewPager(4) 了解学生进度(5)新建三个selector文件tab_contact_selector, xml<?xml version="1.0 encoding="utf-8?><selector ><item android: state_checked=，/true，zandroid: drawable=z，drawable/tab_icon_contact_selected/z></item> <item android:drawable=/drawable/tab icon contact normal，z></item> </selector>tab_message_selector, xml<?xml version=1. 0 encoding=utf-8?> <selector ><item android:state_checked=，/true，zandroid: drawab 1 e=/，drawab 1 e/tab_icon_conversation_selected，></item><itemandroid:drawable=z/drawable/tab icon conversation normal，X/item> </selector>tab_pulgin_selector, xml<?xml version=1.0 encoding二utf-8？><selector xmlns:android=z/, android, com/apk/res/android/z><item android:state_checked=/true，zandr o i d: drawab 1 e=/，dr awab 1 e/tab_icon_plugin_selected/z></item><item android:drawable=zzdrawable/1ab_icon_p 1 ugin_norma 1zz></item> </selector>(6) 了解学生进度(7)新建包“cn. edu. szpt. qqdemov2. fragments”。在该包中新建QQMessageFragment 和 QQContactFragment,继承自 v4 包中的Fragmento参照相应Activity中的代码进行改写，注意，Activity中 onCreate方法中的代码要对应到Fragment中的onCreateView方法 中。(8) 了解学生进度(9)在包 cn. edu. szpt. qqdemov2. adapters v 下，新建类，命名为 QQFragmentPagerAdapter,继承自 v4 包中的 FragmentPagerAdaptero 重 写 QQFragmentPagerAdapter 中的相关方法public class QQFragmentPagerAdapter extends FragmentPagerAdapter private List<Fragment>mFragments;public QQFragmentPagerAdapter(FragmentManager fm, List<Fragment> mFragments) super (fm);this. mFragments = mFragments;©Overridepublic Fragment getltem(int position) return mFragments. get (position);)©Overridepublic int getCount () return mFragments. size(); | )(10) 了解学生进度(11 )切换到MainActivity. java文件，修改相应代码，创立QQFragmentPagerAdapter对象，并将其设置到ViewPager中，并编写 getFragmentsList ()方法vp= (ViewPager) findViewByld(R. id. viewPager);QQFragmentPagerAdapter adapter = new QQFragmentPagerAdapter ( getSupportFragmentManager (), getFragmentsList ();vp. setAdapter(adapter);oooooooooooooooooooooooprivate List<Fragment> getFragmentsList()QQMessageFragment fl=new QQMessageFragment ();QQContactFragment f2=new QQContactFragment ();List<Fragment> data=new ArrayList<Fragment>();data, add (fl);data, add (f2); return data ;(12) 了解学生进度(13)修改LoginActivity. java的代码，当用户点击“登录”按钮后, 跳转到MainActivity窗口。此时，滑动功能正常,但Fragment切换后, 下方的按钮不能同步显示状态，而且，点击相应的单项选择按钮，不能切换 到相应的界面。滑动时，自动修改RadioButton的状态vp. addOnPageChangeListenet(new ViewPager. OnPageChangeListener () ©Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) )©Overridepublic void onPageSelected(int position) switch (position) case 0:rbMessage. setChecked (true);break;case 1:rbContact. setChecked (true);break;©Overridepublic void onPageScrolIStateChanged(int state) )；点击单项选择按钮时，切换显示的界面radioGroup. setOnCheckedChangeListener(newRadioGroup. OnCheckedChangeListener () ©Overridepublic void onCheckedChanged(RadioGroup group, IdRes int checkedld) switch (checkedld) case R. id. rbMessage:vp. setCurrentItem(0);break;case R. id. rbContact:vp. setCurrentItem(l);break;I )；(14) 了解学生进度(15)结束本次课程讲练局部，进入讨论答疑环节。作业：课后练习(1) (2)相关习题教学单元：移动应用开发（7）授课班级：授课时间：2教学地点：教学过程设计:备注:教学目的：应知：1、了解Android应用的基本结构；2、了解自定义控件的设计过程应会：10、会自定义控件；11、会设计自定义的属性；12、能完成圆形头像的功能教学重点、难点：6. Android的基本框架结构7. 自定义控件教学方法：根据本堂课教学内容的重点与难点，教学过程中主要采用以下教学方法：10. 在理论教学上，主要在钉钉平台上进行，以讲授和教学演示为主，通过提问引 导学生发现问题、分析问题，掌握Android软件开发的基本概念和流程。11. 在实践教学上，采用“实例引导，工程驱动”的方式讲授。通过实现相关实例, 在实例基础上改造拓宽，真正实现“学以致用二钉钉和QQ相结合，采用演 示、实践和讨论相结合的模式。12. 注重教学整体过程设计，依托网络平台，将课前预习、课中讲授与演练和课后 练习与讨论答疑有机结合，不断摸索提高教学效果。备注:教学过程设计:1.课程设计(1)回顾上一节的内容，提出更换用户头像框的问题(2)分析实现圆形头像的方法，即把两张图形重叠起来， 形成蒙版的效果。一个圆形和一个原始图像。如何混合一paint. setXfermode () 参数为 PorterDuffXfermodeo展示16种混合模式，并讨论应该选择 哪种模式DST_IN(3 )新建类 MyCirclelmageView ,继承自 AppCompatImageView,添加成员变量并实现构造器方法，注 意，这里我们需要在布局文件中使用我们的自定义控件，所 以，需要使用带两个参数的构造器方法private Context mContext;private Bitmap mask;private Paint paint;private int mBorderWidth = 10;private int mBorderColor = Color. parseColor (/z#f2f2f2/z);public MyCirclelmageView(Context context, AttributeSet attrs) super (context, attrs);this. mContext = context;paint = new Paint ();paint. setAntiAlias (true);paint. setFilterBitmap(true);paint. setXfermode(newPorterDuffXfermode(PorterDuff. Mode. DST_IN);)(4) 了解学生进度(5)编写createOvalBitmap方法，用来生成圆形的蒙版private Bitmap createOvalBitmap(int width, int height) ARGB分别为8位，总共32位Bitmap. Config localConfig = Bitmap. Config. ARGB 8888;Bitmap localBitmap = Bitmap. createBitmap(width, height, localConfig); Canvas localCanvas = new Canvas(localBitmap);Paint localPaint = new Paint ();RectF localRectF = new RectF(0, 0, width ,height );localPaint. setStyle(Paint. Style, FILL);localCanvas. drawOva1(localRectF, localPaint); return localBitmap;(6) 了解学生进度(7)编写drawBorder方法，用来绘制头像框的边框private void drawBorder(Canvas canvas, final int width, final int height) if (mBorderWidth = 0) return; final Paint mBorderPaint = new Paint();mBorderPaint. setStyle(Paint. Style. STROKE);mBorderPaint. setAntiAlias(true);mBorderPaint. setColor (mBorderColor);mBorderPaint. setStrokeWidth(mBorderWidth);圆心x, y的坐标，半径和画笔，半径*2+边框宽度二图形宽度canvas. drawCircle(width /2, height /2, (width -mBorderWidth)/2, mBorderPaint);canvas = null;)(8) 了解学生进度(9)重写onDraw方法，实现将原图与圆形蒙版混合，并绘制边框protected void onDraw(Canvas canvas) / 通过 getDrawable 得到 ImageView 的 drawable 的属性 Drawable drawable = getDrawable();if (drawable 二二 null) return; int width = getWidthO ;int height = getHeight ();保存到栈中，并在该层上绘制，作为DSTint layer = canvas. saveLayer(0. OF, 0. OF, width, height, null);drawable. setBounds(0, 0, width, height);drawable, draw(canvas);生成蒙版层，作为SRCif (this, mask = null) | | (this. mask. isRecycledO) this, mask = createOvalBitmap (width, height);)采用DST_IN模式，将SRC与DST进行混合canvas. drawBitmap(this, mask, 0, 0, paint);把这个layer绘制到canvas默认的layer上去 canvas. restoreToCount (layer);绘制边框 drawBorder(canvas, width, height);)(10)翻开布局文件 activity_qqmessage. xml,将其中的 ImageView 替换为 MyCirclelmageViewo(ID 了解学生进度(12)提出问题，如何给自定义的控件添加属性。(13)首先要在valuse文件夹下创立：attrs. xml文件，定义属性<?xml version=1. 0 encoding二utf-8”?>resourcesdeclare-styleable name=z/MyCircleImageAttr，><attr name=/，border_width/， format="dimension” /><attr name=，border_color “ format="color” /></declare-styleable></resources>(14) 了解学生进度(15)在布局文件activity_qqmessage. xml中,设置属性<cn. edu. szpt. qqdemov2. widgets. lyCirclelmageViewimlnsyimage ' ：/schemas, android, com/apk/rcs/jcn. edu. szpt. qqdemov2f' android：i d="+i d/i mgEogimyimage：border_width="3dp” myimage:border_color="#ffOOOO1 andtoldi layout_taldth="50df>" android：layout_height=，50dp/android：layout.marginBottom= ' 8dp android： layout_marginLeft=/z16dp，z android： layout _mar ginStar t=/16dp/ android：layout_marginTop=/8dp/ app：1ayout_constraintBottom_toBottomOf="parentz app ： layout_constraintLeft_toLeftOf=，parent，/ app：1ayout_constraintTop_toTopOf= parent app：srcCompat=，©drawable/guanyu/z />(16)修改MyCirclelmageView. java文件中的构造器方法的相关代码/*通过指定的attr的id数组，在工程的AttributeSet中找到获取相应属性及其属性 值，放入到TypedArray对象a中TypedA"ay主要有两个作用，第一是内部去转换attrid和属性值数组的关系；第二是 提供了一些类型的自动转化，比方我们getString时，如果你是通过string/hello这种方式设置的，TypedArray会自动去将Resid对应的 string从资源文件中读出来。*/TypedArray a 二context.obtainStyledAttributes(attrs, R. styleable. MyImageViewAttr);mBorderColor=a. getColor (R. styleable. MyImageViewAttr_border_color, Color. parseColor (，#f2f2f2，/);mBorderWidth 二 a.getDimensionPixelSize (R. styleable. MyCirc1eImageAttr border width, 10);a. recycle ();(17)演示在属性中设置10dp,为什么比代码中设置10要宽，引出px,dp和sp的概念(18)修改计算边框宽度的代码TypedArray a = context. obtainStyledAttributes(attrs, R.styleable. MyCircleImageAttr);mBorderColor = a. getColor(R. styleable. MyCircleImageAttr_border_color, Color. parseColor (，#f2f2f2/);获取屏幕密度值，160dpi时，该值为1, 320dpi时为2float density=context. getResourcesO. getDisplayMetrics(). density;/10* density 为 lOdp 对应的 px 值mBorderWidth=a. getDimensionPixelSize(R. styleable. MylmageViewAttr border width, (int) (10 * density);a. recycle ();(19)结束本次课程，布置课后作业，进入讨论答疑环节。作业：1、完成界面中所有头像框的替换，并上传运行截图和工程代码。相关习题教学单元：移动应用开发（8）授课班级：授课时间：2教学地点：教学目的:应知：1、了解Android应用的基本结构；2、了解菜单和对话框的使用应会：13、会使用菜单和对话框；14、会使用Android Studio集成开发环境;15、能完成简单Android程序的开发教学重点、难点：8. Android的基本框架结构9. 菜单、对话框教学方法：根据本堂课教学内容的重点与难点，教学过程中主要采用以下教学方法：13. 在理论教学上，主要在钉钉平台上进行，以讲授和教学演示为主，通过提问引 导学生发现问题、分析问题，掌握Android软件开发的基本概念和流程。14. 在实践教学上，采用“实例引导，工程驱动”的方式讲授。通过实现相关实例, 在实例基础上改造拓宽，真正实现“学以致用二钉钉和QQ相结合，采用演 示、实践和讨论相结合的模式。15. 注重教学整体过程设计，依托网络平台，将课前预习、课中讲授与演练和课后 练习与讨论答疑有机结合，不断摸索提高教学效果。教学过程设计：备注:1 .课程设计(1)回顾上次课的内容，提出Android中的菜单及对话框问 题(2)简单介绍菜单的分类：选项菜单和上下文菜单。(3)以在LoginActivity中创立选项菜单为例，讲解选项菜 单的创立方式。在res/values/文件夹下的strings, xml中添 加文字信息string name=menuiteni_about>关于/string>< string name="menuitem exit>退出/string在res/menu/文件夹下新建munu_login. xml文件item andro i d: i d=，/+i d/menu item About”android:title=string/menuitem_about />item android: id=，+id/menuitem_Exit，/android: title=，string/menuitem exitz，/>重写 LoginActivity 中的 onCr eat eOpt i onsMenu 方法，注意, 如果返回值为false,那么不显示选项菜单©Overridepublic boolean onCreateOptionsMenu(Menu menu) getMenuInflater(). inflate(R. menu. menu_login, menu); return true;)(4) 了解学生进度