让 Android 支持下拉刷新(Pull Refresh)

Posted on 07/11/2011 by icyleaf

曾几何时，自 Android 发布之后一直以来就被管以 Geek 的玩具，而不太注重界面设计和用户交互设计，这让 Android 开发者也顺其自然的接受了这个不好的头衔，但我一度认为这只是不思进取的行为，谁说 Android 就不能像 iPhone 的界面那样设计，我认为只有用心，没神马不能实现的。说回正题，第一次看到 Android 有这项功能的莫过于改版后的 Twitter，我认为它绝对是一个标榜性的 App（同时也包括已开源许久的 Foursquare）。于是全世界的开发者就开始寻思这个效果 Twitter 是如何实现的，于是就有了...

这是由 johannilsson 以及众位其好友的研究成果，并已 Apache 2.0 协议开源托管在 Github：https://github.com/johannilsson/android-pulltorefresh

大概看了一下源码，发现和我初步的想法类似，除了需要集成系统的 ListView 之外，只能在 HeaderView 上面做文章，外加配合 onTouchEvent， onScroll 事件可以捕捉用户下拉和上滑的事件监听。

用法：

Layout

^?View Code XML

<!--
  The PullToRefreshListView replaces a standard ListView widget.
-->
<com.markupartist.android.widget.PullToRefreshListView
    android:id="@+id/android:list"
    android:layout_height="fill_parent"
    android:layout_width="fill_parent"
    />

Activity

^?View Code JAVA

// Set a listener to be invoked when the list should be refreshed.
((PullToRefreshListView) getListView()).setOnRefreshListener(new OnRefreshListener() {
    @Override
    public void onRefresh() {
        // Do work to refresh the list here.
        new GetDataTask().execute();
    }
});
 
private class GetDataTask extends AsyncTask<Void, Void, String[]> {
    ...
    @Override
    protected void onPostExecute(String[] result) {
        mListItems.addFirst("Added after refresh...");
        // Call onRefreshComplete when the list has been refreshed.
        ((PullToRefreshListView) getListView()).onRefreshComplete();
        super.onPostExecute(result);
    }
}

仓库里除了实现类外，还有一个实例，看看人家够意思吧。

如何让 iOS 和 Android 支持自定义字体

Posted on 07/06/2011 by icyleaf

本篇教程的目前源于我们团队设计师一直询问，iOS(iPhone/iPad) 和 Android 两个平台是否支持自定义字体的问题，恰巧前不久唐茶计划出了一个关于在中文阅读新体验的电子书应用：失控。里面提到中文的显示采用了香港字体设计室的全新中文黑体字：信黑体。于是我就在想看来 iOS 是可以支持自定义字体的。通过搜索和研究整理如下，供自己备份和大家参考

iOS

iOS 对字体以样式的支持是非常有限的(内嵌默认字库列表)，尤其说对于用习惯了 HTML + CSS，就觉得 iOS 对字体的扩展真是逊到渣了，当然高人们已经准备为大众造福，出现了轻巧的 FontLable，TTTAttributedLabel 开源库到怪兽级别 Three20 开源框架。但假如仅仅是想加载自定义字体来说，对于 iOS 4 版本还是比较简单的：

添加自定义字体文件做资源文件添加到 XCode 项目之中
在 info.plist 中新增一个名为 UIAppFonts 的 Key，类型是数组（array）
把新增的字体的文件名（包括后缀）依次填入 UIAppFonts 数组（注意区分大小写）
保存 info.plist（废话）。准备工作完毕，下面是编码部分

^?View Code OBJECTIVE-C

@implementation CustomFontLabel
 
- (id)initWithCoder:(NSCoder *)decoder
{
    if (self = [super initWithCoder: decoder])
    {
        [self setFont: [UIFont fontWithName: @"Custom Font Name" size: self.font.pointSize]];
        // 这里 Custom Font Name 并不是字体的文件名，而且系统注册显示的字体标准名称，比如
        // 比如，微软雅黑，最好就用 Microsoft YaHei （不过这个会存在版权问题把 XD）
        // 另外，注意区分大小写
    }
    return self;
}
 
@end

这里还有更完整的关于 iOS 不同平台支持自定义字体的问答。

Android

Android 默认支持 Droid Sans，Droid Sans Mono 和 Droid Serif 三种字体，其实对于中文的显示还是很不错的，有些类似于微软雅黑字体（区别）。假如只是对默认的字体进行更换，最简单的方法就是配置 layout 文件：

^?View Code XML

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="fill_parent"
              android:layout_height="fill_parent"
        >
    <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="This is a 'sans' demo!"
            android:typeface="sans"
            />
     <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="This is a 'serif' demo!"
            android:typeface="serif"
            android:textStyle="italic"
            />
     <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="This is a 'monospace' demo!"
            android:typeface="monospace"
            android:textStyle="bold"
            />
</LinearLayout>

但是这样肯定不能满足大家对于字体排版高一级的要求，下面是支持自定义字体的步骤：

首先，添加自定义字体文件放在项目的 assets/fonts 目录下面（目录可能需要自己创建）。

其次，编辑 layout 文件（这里做一个示范）

^?View Code XML

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="fill_parent"
              android:layout_height="fill_parent"
        >
    <TextView android:id="@+id/textview"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="This is a 'Microsoft YaHei' demo!"
            />
    <Button android:id="@+id/button"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="This is a 'Microsoft YaHei' button!"
            />
</LinearLayout>

最后，在代码部分实现自定义字体（和 iOS 类似）

^?View Code JAVA

public void onCreate(Bundle savedInstanceState)
{
       super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
 
        TextView textView = null;
        Button button = null;
 
        setFont(textView, "fonts/YaHei.ttf", R.id.text_view);
        setFont(button, "fonts/YaHei.ttf", R.id.button);
}
 
void setFont(TextView name, String path, int res)
{
    	name = (TextView) findViewById(res);
        Typeface font = Typeface.createFromAsset(this.getAssets(), path); 
        name.setTypeface(font); 
}

扩展阅读 [1] [2]

话说，为什么 Android 到现在都没有更多的开源的库和框架呢？

Chrome 扩展: URL to QR-Code

Posted on 06/16/2011 by icyleaf

URL to QR-Code 是一个 Chrome 扩展,适用于 Chrome 浏览页面的同时希望把在手机设备(当然手机得支持 QR-Code 的扫描)也能访问.我总结可以适用于以下情景:

这个网页必须使用手机设备访问

这个网页是一个手机应用的安装链接(AppStore/Google Market),用手机访问可以直接安装

我就是想用手机浏览此网页,怎么着

好吧,基于以上情景,我做了一个 Chrome 扩展,恩,没错,只适用于 Chrome,也许会有人说,这个东西网上已经有了,为什么你还要重造轮子.我的理由是,虽然我的功能非常简单,鉴于目前现有的一些应用,都会把功能显示在 Chrome 的 Tab 上面,其实这个功能用的几率并不多,放在 Tab 实在是浪费了太大的空间,我的 Tab 的 Icons 已经负载过多了(大家可参考我之前分享的我常用的 Chrome 扩展集合),因此我决定把 Icon 丢在地址栏的右侧,这里相对于的利用空间更小.点击之后直接弹出 QR-Code,方便手机扫描.

安装地址: http://icyleaf.googlecode.com/svn/javascript/Chrome/url_to_qr_code_v0.1.crx

--------------需要更新的分割线----------------

发现 Google Chart API 居然提供支持 QR-Code ,文档在此后面准备更换生成QR-Code的服务接口支持选文字生成和文字链的原始链接的生成.这里算是埋下一个坑,大家可以提醒我来填满。。。

文档地址：http://code.google.com/apis/chart/image/docs/gallery/qr_codes.html

个人常用 Chrome 扩展集合

Posted on 06/11/2011 by icyleaf

Google Chrome 最近更新的厉害，几天之间更新数次，加上扩展安装，更新，卸载都非常的方便，今天刚刚有发现了一些好的扩展，随兴一起列以下:

AdBlock
最受欢迎的Google 浏览器扩充功能，拥有超过150 万位使用者！阻挡网路上所有的广告。

Android SDK Reference Search
Adds an 'ad' omnibox command and view source links for the Android SDK class and XML references.

ChromYQLip
Quickly clip any information from a page & ignore the noise. Targeting web developers for YQL scrapping.

GitHub Feed Filter
Enables filtering out GitHub feeds by projects, commits, comments and issues

GitHub Gist
Paste and share your Gist CodeSnippets from your Browser Window.

Gitmarks
Keep track of your github projects.

Github improved
Adds in-page changeset unfolding, shows branch and tag names, and some other niceties for github's Commit History view.

Github Search
Integrated Github Searching.

JSONView for Chrome™
JSONView for chrome is an extension that helps you to parse and view JSON documents

MultiSwitch
Switch between development, test and productive application.

PHP Console
Display PHP errors/debugs in Google Chrome console or by notification popups

Dribbble
The unofficial Dribbble extension for Google Chrome by Stu Greenham of DesignWoop.com.

Edit This Cookie
Edit This Cookie is a cookie manager. You can add, delete, edit, search, protect and block cookies!

Regular Expression Checker
Regular Expression Testing Tool

cREST Client
RESTful service testing using xhr made easy!

REST Console
'REST Console' is a REST Client for Google Chrome to visualize and construct custom HTTP requests to test with any web service.

XV — XML Viewer
Powerful XML viewer for Google Chrome

Zen-Coding Textarea Extension
This extension is able to use the Zen-Coding for all textareas. This is using Zen-Coding Textarea plugin.

Halo Word Dictionary
精巧易用的英汉字典，界面简洁舒适。包含单词表、划词查询、右键查询等功能。Enjoy!

Instachrome
Save your URLs to Instapaper

iReader
View news stories and other articles in a very easy to read, clutter-free, scrollable display.

Readability
Readability is a web and mobile app that zaps clutter and saves web articles in a comfortable reading view.

Proxy Switchy!
Manage and switch between multiple proxies quickly and easily.

Shoyu RSS/Atom Feed Preview
Simple feed preview and subscribe.

Smooth Gestures
拥有鼠标手势，可以更加便捷地通过鼠标或键盘浏览网页。

豆瓣用户邀请辅助工具
豆瓣用户邀请全选/反选辅助工具

豆瓣助手 Douban Helper For Chrome
Make Douban better 为豆瓣增加各种人性化功能

加入卓越亚马逊心愿单
将任意网站的商品添加到你的卓越亚马逊心愿单

截图快手: 截屏, 批注, 分享 (仅限于 OSX 可用）
截取网页可见部分或者整个页面，像画图软件那样用直线、箭头、圆圈、文字做出标识。方便的通过链接分享。

下载助手（由Google提供）
使用快车、迷你快车、迅雷、迷你迅雷、QQ旋风、电驴、Orbit、Internet Download Manager或Free Download Manager下载网页链接。

迅雷、快车、旋风专用链自动破解
自动把页面里的迅雷,快车Flashget,旋风链接替换为真实地址,使用你自己喜欢的下载方式来下载.

暂存
保存窗口，顷刻收纳，轻松还原

=====华丽的分割线==========

博客分享也比较方便，进入扩展管理界面，全选，复制，粘贴，稍微编辑下就ok了，假如 Google 提供一个自用扩展或者收藏分享的服务就好了

Colors: Mac 开发颜色辅助利器

Posted on 05/22/2011 by icyleaf

Colors 是一个简单的颜色取色器，简单的有可能你都没有听说过它，虽然它对于平面设计师以及 Web 设计师不太看中，但它可是程序员中的一个实用利器，为什么这样说呢，看下面截图，除了基本的颜色取值外，还包括了 Mac 和 iOS（iPhone/iPad）对于类的取值。

等等，你说的不对，我下载了发现并没有 UIColor 的值，坑爹这不是，哈哈，非也，这个应用的最大好处在于可以自定义输出值。默认程序并没有 UIColor 这值。其实添加也很简单，在设置里（Command+逗号），添加一个名为 UIColor 的选项，其中只需要设置 GRB 的输出值和 Alpha 一样即可（Short Decimal over 1），输出格式使用 UIColor 的 RGBA 格式：

^?View Code OBJECTIVE-C

[UIColor colorWithRed:%r green:%g blue:%b alpha:%a]

后来发现这个应用是开源项目，且最后更新时间为 2009 年，难怪没有 UIColor 的输出值，有兴趣的朋友可以 Fork ：https://github.com/13bold/Colors

.::灵狼天::.

icyleaf's blog - 心外无理，心外无物，心外无事

让 Android 支持下拉刷新(Pull Refresh)

如何让 iOS 和 Android 支持自定义字体

iOS

Android

Chrome 扩展: URL to QR-Code

个人常用 Chrome 扩展集合

Colors: Mac 开发颜色辅助利器