《Android项目式案例开发》课件-CORE-04

模块一新闻模块项目二新闻天下学习目标1了解Toolbar控件的使用2学习侧滑菜单实现方法4掌握编写自定义控件的技能3

熟悉下拉刷新实现功能学习路径任务描述功能描述本模块将实现本项目中的条形码扫描模块使用JSON数据获取新闻资讯使用Fragment实现导航切换使用NavigationView实现侧滑菜单实现下拉加载新闻实现新闻详情预览任务描述基本框架加载新闻页面框架图侧滑菜单页面框架图新闻列表框架图新闻详情页面框架图任务描述实现效果图加载新闻页面滑动菜单效果图新闻列表页面新闻详情页面Zxing使用方法

谷歌在2014年推出一套全新的界面设计语言——MaterialDesign，MaterialDesign有着完整的交互和视觉设计风格，包含视觉效果、运动元素、互动效果等特性。在2015年GoogleI/O大会上谷歌推出了DesignSupport库，将MaterialDesign中的一些控件和效果进行了封装。任务技能MatericalDesignToolbar简介

Toolbar不仅继承了ActionBar的所有功能，而且使用更加灵活，可以自由的添加子控件，不像ActionBar那么固定，还可以配合其他控件完成MatericalDesign的效果，显示的各种效果是通过相应的属性方法实现的。任务技能技能点一ToolbarToolbar属性Toolbar元素导航按钮。项目的logo。标题和子标题。若干个自定义View。动作菜单。任务技能技能点一ToolbarToolbar实现步骤1、打开res/values/styles.xml文件，在android：theme属性更改一个不带ActionBar的主题任务技能技能点一Toolbar2、在布局中定义一个Toolbar控件3、使用Toolbar来替代ActionBarDrawerLayout简介

DrawerLayout是V4包下提供的一种左/右滑抽屉布局效果，是MaterialDesign中最常见的效果之一。DrawerLayout分为侧边菜单NavigationView和主内容区两部分，侧边菜单NavigationView可以根据手势展开与隐藏，主内容区的内容可以随着菜单的点击而变化。任务技能技能点二DrawerLayoutNavigationView简介

NavigationView是一个导航View。一般用它和DrawerLayout实现抽屉式导航设计，可以在滑动菜单页面定制任意的布局，这个菜单整体上分为两部分，上部分叫做HeaderLayout，用于显示头布局，下部分点击项menu用于建立MenuItem选项的菜单。DrawerLayout属性任务技能技能点二DrawerLayoutDrawerLayout实现步骤1、在budil.gradle中需要引用DesignSupport库任务技能技能点二DrawerLayout2、在res下创建一个menu包。3、添加header布局，放置头像，用户名DrawerLayout实现步骤4、DrawerLayout是一个布局控件，只要按照DrawerLayout的规定布局方式写完布局，就能有侧滑的效果任务技能技能点二DrawerLayoutDrawerLayout实现步骤5、实现滑屏功能任务技能技能点二DrawerLayoutTabLayout简介

自2014年I/O结束后，Google在SupportDesign包中发布了一系列新的控件，其中就包括TabLayout。在写项目时通常在ViewPager的上方，都会放一个标签指示器与ViewPager进行联动。Tab标签可以使用自定义View，配合着ViewPager和Fragment的使用，TabLayout可以帮助开发者即时打造一个滑动标签页。任务技能技能点三TabLayoutTabLayout属性任务技能技能点三TabLayoutTabLayout实现步骤任务技能技能点三TabLayout1、在应用的build.gradle中添加support.design支持库（注意：必须和v7包的版本相同）2、创建布局文件activity_short_tab,在布局文件中添加TabLayout及ViewPager。3、定义一个FragmentFactory工厂类，生产Fragment对象提高应用4、定义一个Fragment的父类BaseFragment5、arrays.xml中显示第一行数据6、ShortTabActivity类，实现TabLayout和ViewPager的业务逻辑任务实施实施步骤4321侧滑菜单的布局设计实现侧滑菜单功能对mNavigationView设置监听，实现了切换选项卡的效果创建四个Fragment来实现四个不同的页面且可以跳转到主界面通过以上技能点的学习，掌握如何使用DrawerLayout实现侧滑菜单以及其他自定义控件的学习。实现侧滑菜单效果和新闻的预览。以下是实现侧滑菜单效果的具体步骤。任务实施实施步骤8765新闻界面的主要布局与服务器进行连接并获取数据，具体代码详见物料排序手持段项目。这里需要添加okhttp3.2.0.jar和okio-1.6.jar两个jar包。下载地址：（http://square.github.io/okhttp/）。在主界面中嵌套了FragmentList布局在FragmentList中获取数据11109点击或滑动Viewpager时跳转到Fragment点击Listview后跳转到的界面，将数据重新排列设计新闻主页面及控件位置CollapsingToolbarLayout简介

CollapsingToolbarLayout是作用于Toolbar基础之上的布局，是由DesignSupport库提供的。CollapsingToolbarLayout可以让Toolbar的效果变得更加丰富，不仅展现一个标题栏，而是能够实现非常华丽的效果。CollapsingToolbarLayout是不能独立存在的。CollapsingToolbarLayout一般作为CoordinatorLayout的子元素出现，另外一个控件AppBarLayout也是Design库的控件，作用是把其所有子元素当做一个AppBar来使用。课外扩展

CollapsingToolbarLayoutCollapsingToolbarLayout属性CollapsingToolbarLayout效果图任务技能

CollapsingToolbarLayoutCollapsingToolbarLayout

实现步骤1、在budil.gradle中需要添加DesignSupport库和Cardview库任务技能CollapsingToolbarLayout2、使用CoordinatorLayout来作为最外层的布局实现标题栏部分CollapsingToolbarLayout

实现步骤3、在AppBarLayout中嵌套一个CollapsingToolbarLayou，定义标题栏的具体内容，设置收缩时标题的颜色和展开时标题的颜色等任务技能CollapsingToolbarLayoutCollapsingToolbarLayout

实现步骤4、使用NestedScrollView滚动的方式来实现内容详情的部分任务技能CollapsingToolbarLayoutCollapsingToolbarLayout

实现步骤5、填充界面上的内容，调用setTitle()方法将名字设置成当前界面的标题任务技能CollapsingToolbarLayoutPrimary

主Design设计Action

行动Subtitle小标题Logo

商标Gravity重力Mode

模式Scrollable滚动Collapsing折叠

Duration持续时间英语角选择题1.下列关于Toolbar描述正确的选项是（A）。AToolbar不仅继承了ActionBar的所有功能，而且使用更加灵活，可以自由的添加子控件

BToolbar继承了ActionBar的少部分功能，而且使用更加灵活，可以自由的添加子控件CActionBar不仅继承了Toolbar的所有功能，而且使用更加灵活，可以自由的添加子控件DToolbar虽然继承了ActionBar的所有功能，而且使用更加灵活，但是不能自由的添加子控件2.关于Toolbar属性描述不正确的是（D）。AcolorPrimaryDark：状态栏的颜色（可用来实现沉浸效果）Bandroid:textColorPrimary：Toolbar中文字的颜色CcolorPrimary：Toolbar的背景颜色Dapp:navigationIcon：Toobar中的小标题3.下列不是Toolbar元素的选项是（B）。A导航按钮B导航窗格C标题和子标题D若干个自定义View4.“对齐方式，可选fill和center”描述的是TabLayout的哪一个属性（A）。Aapp:tabGravityBapp:tabModeCsetTabTextColorsDsetTabGravity5.关于CollapsingToolbarLayout描述正确的是（A）。ACollapsingToolbarLayout是作用于Toolbar基础之上的布局，是由DesignSupport库提供的

BCollapsingToolbarLayout是作用于TabLayout基础之上的布局，是由DesignSupport库提供的CCollapsingToolbarLayout仅可以添加一个标题栏

DCollapsingToolbarLayout可以独立存在任务习题填空题1.Toolbar不仅继承了

的所有功能，而且使用更加灵活，可以自由的添加

。2.Toolbar包含的元素有

、