现在让我们来用刚学会的Responsive技巧来制作一个blog前端。

一切从导航开始,例子的Demo大概是这样的:点击查看例子 请尝试拖拽窗口大小,查看响应式效果。

第一步:HTML和CSS实现导航

index.html:

从导航开始

注意:index.css 的宽度要用百分比来计算,这样在页面大小变化的时候,整个框架也会按比例放缩。

.container{ width:90%; height: auto; margin:0 auto; margin-top:20px; background-color: #fff; -webkit-box-shadow: 0 0 10px rgba( 0, 0, 0, .1 ); -moz-box-shadow: 0 0 10px rgba( 0, 0, 0, .1 ); box-shadow: 0 0 10px rgba( 0, 0, 0, .1 ); } div#logo{ float: left; padding-top: 7px; width:25%; } div.navigation{ height: 80px; } div#nav{ width: 75%; float:right; } #nav ul{ margin-top:25px; list-style: none; } #nav ul li{ float: left; width:20%; text-align: center; font-size:1.5rem; }

第二步:实现Responsive.css:

要实现响应式的布局,就要监测当屏幕大小变化时,重新调整一些元素的位置,大小,样式。

而在这个例子中,我们需要:

  1. 重新调整Logo位置,使其居中。
  2. 重新调整导航位置,使其在下行占满。
  3. 取消掉logo和ul > li的浮动,防止页面出现错误。

@media screen and (max-width: 480px){ div#logo{ width: 100%; text-align: center; margin-left: 0; padding-left: 0; } div#nav{ width: 100%; } div#nav ul{ float:none; margin-left: 0; padding-left: 0; width: 100%; } div#nav ul li{ float: none; width: 100%; margin-right: 0; margin-left: 0; padding-top:10px; padding-bottom: 10px; background-color: #fff; } }

首先不得不说,ADT22就是个大坑,一旦更新,过去稍不符合规定的代码,统统会现出原形来。(其实就是ADT22变得严格了)

FATAL EXCEPTION: main java.lang.IllegalStateException: The application’s PagerAdapter changed the adapter’s contents without calling PagerAdapter#notifyDataSetChanged! 

出这个错,是因为你的PagerAdapter中的数据变了,但是没有调用adapter.notifyDataSetChanged方法。

如果你的代码逻辑是这样的:

class XXX extends asynctask

doInBackground(…){

1、获取数据

2、添加到数据池

3、publicProgress()

}

onPublicProgress(…){

4、调用adapter的notifydatasetchanged方法

}

在ADT22中,上面的代码肯定会报错的。为什么?

看下官方文档对 support/v4/view/PagerAdapter 的一个解释:

PagerAdapter supports data set changes. Data set changes must occur on the main thread and must end with a call to <a href="http://developer.android.com/reference/android/support/v4/view/PagerAdapter.html#notifyDataSetChanged()">notifyDataSetChanged()</a> similar to AdapterView adapters derived from <a href="http://developer.android.com/reference/android/widget/BaseAdapter.html">BaseAdapter</a>.

出错原因:数据更新必须在main thread进行更新!!结束前还得调用 notifyDataSetChanged() !!

也就是说,必须得把上面的2步骤,移动到onPublicProgress中才正常。

之前一直在Eclipse上开发小熊词典,Google I/O上推出Android Studio后,就转到Studio上了,但是项目依赖的文件太多,配置总是失败(因为尝试的Git方式管理),就打算重新在Eclipse上配置好再导入到Android Studio中。但是…Eclipse编译通过了,当在手机上运行的时候就出问题了。问题很传统,就是ClassNotFound,这种问题普遍是由于Android.manifest文件中的类名或者包名写错的原因。网上解决方案一大堆,我再三检查根本不是这个问题,我还总是不相信自己的眼睛,删掉ANdorid:name 认真粘贴的路径。。。

但是,这种屌丝的作法根本不解决问题,依然爆出如下错误:(橘黄色是Warning 红色是Error)

  1. Unable to resolve superclass of Landroid/support/v4/app/Watson; (149)
  2. Link of class ‘Landroid/support/v4/app/Watson;’ failed
  3. Unable to resolve superclass of Lcom/actionbarsherlock/app/SherlockFragmentActivity; (161)

….直到最后:

  1.  java.lang.RuntimeException: Unable to instantiate activity ComponentInfo  java.lang.ClassNotFoundException

连续搜索了很多此 Unable to instantiate activity ComponentInfo ClassNotFoundException (因为总觉得Warning是不足轻重的!)… 看了一堆stackoverflow的帖子,都类似类名出错….最后看到那个warning抱着试一试的态度搜了一下 Unable to resolve superclass of Landroid/support/v4/app/WatsonGitHub的ActionBarSherlock的issue中终于找到了答案,而后百感交集啊。。。总结如下:

问题原因:更新到了SDK 22    具体看此处: GoogleCode GitHub Issue

问题解决:

  1. 右键项目,选择属性
  2. Java Build Path – > Order and Export
  3. 选中 Android Private Libraries

教训:不要忽略warning!