智慧北京01_splash界面_新手引导界面_slidingMenu框架_.主界面结构

智慧北京重点是练习ui框架的搭建

1,闪屏页(splash)开发:

观察可知,这个闪屏界面有

旋转动画

缩放动画

透明度渐变动画

参考结果

 

注意:是没有标题和状态栏的

桌面图标和名称的修改

清单文件中配置application节点下的icon和label

动画实现:拿到根布局做动画即可

旋转动画:0-360,基于自身,保持动画结束状态

缩放动画:从0-1

Alpha动画:0-1 //比别的动画多执行1秒,效果更好

//运行的时候,动画集合

AnimationSet as = new XXXX(插补器(抖动效果,是否共享加速度)true);

2,闪屏页跳转页面

2.0 动画结束监听器,结束之后才跳转页面

通过sp获取状态,是否进入新手引导页

额外:封装sp,创建包utils,创建类PreUtils(参考类名)

这个工具类,可以获取boolean类型的值,也可以设置boolean类型的值(内部封装sp对象)

String,int,double,都可以封装

2.1新手引导页(第一次进来),参考样式

主页面(不是第一次进入)

3,新手引导页面的开发与填充,参考ui

 

这里的新手引导界面是一个ViewPager

先做最复杂的,最后一个ViewPager上面有一个Button(其实一直存在,不过到最后一个View上面才显示),另外下面三个小圆点就是一个悬浮在ViewPager上的LinearLayout

Button的ID通用做法是用btn_xxx表示

①PagerAdapter的方法

getCount()//返回ViewPager显示的总条目

isViewFromObject(view,object) //判断当前返回的object是不是一个View对象view==object

instantiateItem()//初始化一个item对象

destoryItem()//销毁一个item对象,container.remove((view)object)//这里的 super可删掉

②初始化数据

创建一个新手引导图片的数组,遍历它创建ImageView

然后添加到一个集合中mImageViewList

getCount()就可以返回这个集合的长度

instantiateItem()中获取到对应索引的ImageView,返回这个ImageView中即可

③三个小灰点

在初始化ImageViewe数组的时候,也初始化小圆点

创建ImageView,创建XML文件(做一个小圆点shape=oval属性)

指定宽高size(这里也可以不指定,通过params属性指定也可以)

从第二个小圆点开始设置左边距

这里的布局参数一般用父控件的参数LinearLayout.LayoutParams params =new XXX(包裹内容,-2)

param.leftMargin = xxx;//设置左边距

④红色的小圆点,随着引导界面的移动而移动到下一个点

创建一个XML文件,定义一个小红点(大小跟小灰点一致)

因为这个小红点需要压在小灰点上面(在小灰点的LinearLayout上面包裹一个RelativeLayout)

默认压在第一个小灰点上面

3.2 页面指示器小红点的移动

当用户手指滑动的时候,希望小红点跟随手指的移动进行移动(移动距离与ViewPager有关)

参数混乱,未绑定源码(eclipse在javaBuildPath中,删掉Libraries下对应的包(因为在Dependencies中不让绑定源码,然后再手动的addJar,Order and Export页面下勾选上,不勾选也没事,但有时候会报错))

mViewPager.setOnPageChangeListener(new onPageChangeListener){

onPageSelected()//当一个页面被选中的时候调用

onPageScrolled(){//页面滑动过程中调用

参数:position 当前位置

positionOffset 移动偏移百分比!(可以直接拿来做动画的进度)

更新小红点的距离:

 小红点移动距离 =( 小红点的左边距到下一个小灰点的左边距差值 )X偏移百分比

计算两个圆点的距离

通过小圆点的父容器getChildAt(0)(1)获取left的值,相减得到小红点移动的距离

但是直接获取到的是0,因为这时候页面可能没有绘制完

Measure>>layout>>ondraw(这三个方法只有当activity的onCreate()方法执行完了才调用)

解决方法:监听layout方法结束的事件,位置确定好了之后再调用获取圆点间距

小红点.getViewTreeObserver()//获取视图树观察者  

.addOnGloballLayoutListener()//全局的Layout监听器,

重写的方法里,是layout方法执行结束的回调

在这里获取距离就行

这个方法有可能会执行多次

获取完后getViewTreeObserver().removeGloXXX(this)//自己移除自己

这个方法已经被移除(api16,因为命名不规范)

Sdk>>Tools>>hierarchyviewer.bat//可以看到视图树

打开之后,选中包名,点击load Vie Hierarchy可以看到视图树

视图树上面的红绿点代表三个方法(measure,layout,ondraw方法)时候顺畅(执行速度)

}

onPageScrolledStateChange()//页面状态发生改变时调用

});

拿到距离之后就让距离*百分比,得到小红点需要移动的距离

拿到小红点的布局参数(父容器.layoutParams)

params.leftMargin = 移动的距离 + posintion * 间距

3.4 开始体验按钮逻辑

在前两个页面把按钮隐藏起来,最后一个页面再显示,通过ViewPager的回调进行动态的判断

按钮也要有状态选择器

按钮文字也要有状态选择器(设置文本颜色的时候,也可以设置对应的颜色选择器)

颜色选择器放到Color文件夹下

点击体验按钮的时候更新sp中的信息

4.主界面结构

参考结果图包含侧边栏和内容页

4.1>>>库项目 Library

①创建项目的时候可以标记为库

库项目和普通项目的区别

在projcet.properties中多了一行android.library = true;//如果为false就是普通项目

②用法

在库项目中的功能可以在别的项目中使用(添加库项目到别的项目的引用)

就可以使用它了(eclipse中右键别的项目的properties>>android>>add library)

与jar包的区别,不仅可以访问java文件,还可以访问资源文件

注意:所引入的库项目需要和当前项目在同一个盘符下

4.2 SlidingMenu开源项目介绍

①注意事项

导入example实例代码的时候报错,是因为缺乏一个Library(ABS开发ActionBar的标题栏,4.0以后才加入,2.X版本没有,所以第三方的开源框架就可以向下兼容,这里删掉就可以)

把实例代码里关于ActionBar有关的代码删掉就是

②使用方式:

引入库

继承的时候用SlidingActivity

如果既要侧拉框又要Fragement就继承SlidingFragmentActivity

onCreate()方法改成public的

设置侧边栏

setBehindContentView((布局文件)id);

设置右侧边栏

slidingMenu = getSlidingMenu()拿到SlidingMenu对象,

slidingMenu.setSecondaryMenu(布局文件);

slidingMenu.setMode(SlidingXXX.Left_RIGHT);//设置模式,左右都有侧边栏

设置全局触摸

slidingMenu.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);

设置宽度

slidingMenu.setBehindOffset(200);//设置屏幕预留的宽度(并不是侧边栏宽度)

4.3项目使用侧边栏

①引入库

②设置好各种参数

supportV4包冲突问题:引入的库中有一个supportV4,自己的项目中也有一个v4包,所以冲突了,删除掉自己项目中的就可以了.

项目出现红色感叹号问题,java build path的问题,把出现X的地方删掉就行.