Skip to content
Ider

沉淀我所学习,累积我所见闻,分享我所体验

Primary Navigation Menu
Menu
  • Home
  • About Ider
    • Who Ider?
    • Why Ider?
    • How Ider?
    • Where Ider?
    • What Ider?

Article Collection(聚宝收藏) (Page 2)

2015-07-31
31 July
On July 31, 2015
In Article Collection(聚宝收藏), Front Interface(界面构想)

一闪一闪的Android视图

在创建Android的布局文件时会用到各种标签来定义视图,对于这些标签总能项目代码或者Android的源码中找到对应的类定义。如果标签是包含了整个包(package)路径,那么就可以直接对应到该视图类上;假如标签只是个简单的类名,那么系统就会以下边的前缀列表依次去寻找该类。
[codesyntax lang=”java” lines=”normal”]

private static final String[] sClassPrefixList = {
    "android.widget.",
    "android.webkit.",
    "android.app."
};

[/codesyntax]

万一类不存在,那就说明这个布局文件将无法正常地被LayoutInflater填充成视图层次结构。不过也有几个标签是没有对应的类定义的,但它们在Android开发文档中有被介绍,比如<include/>和<merge/>标签。它们作为视图优化的功能标签,并不生成实际的视图呈现在页面上。对这两个标签的具体处理方式,可以在LayoutInflater的源码中找到答案。

在源码中会可能会看到一些其他特殊的标签定义,本文就是要来介绍其中的<blink/>标签。这个标签并没有在文档中做任何介绍,实际上只是Android 4.0(Ice Cream Sandwich, ICS)带进来的一个菜单而已。使用这个标签包裹其他视图,可以让其不停地闪烁:

[codesyntax lang=”xml” lines=”normal”]

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
             android:layout_width="match_parent"
             android:layout_height="match_parent">

    <blink android:layout_gravity="center"
           android:layout_width="match_parent"
           android:layout_height="wrap_content">

        <TextView android:layout_gravity="center"
                  android:textSize="21sp"
                  android:layout_width="wrap_content"
                  android:layout_height="wrap_content"
                  android:text="http://blog.iderzheng.com"/>

    </blink>

</FrameLayout>

[/codesyntax]

blink标签效果

http://blog.iderzheng.com/wp-content/uploads/2015/07/android-blink-tag.webm

blink标签其实也是又对应的类定义的,而且它就定义在LayoutInflater里。从源码中可以看出它只是一个FrameLayout然后间隔地在页面上绘制视图。

[codesyntax lang=”java” lines=”normal”]

private static class BlinkLayout extends FrameLayout {
    private static final int MESSAGE_BLINK = 0x42;
    private static final int BLINK_DELAY = 500;
    
    private boolean mBlink;
    private boolean mBlinkState;
    private final Handler mHandler;
    
    public BlinkLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        mHandler = new Handler(new Handler.Callback() {
            @Override
            public boolean handleMessage(Message msg) {
                if (msg.what == MESSAGE_BLINK) {
                    if (mBlink) {
                        mBlinkState = !mBlinkState;
                        makeBlink();
                    }
                    invalidate();
                    return true;
                }
                return false;
            }
        });
    }
    
    private void makeBlink() {
        Message message = mHandler.obtainMessage(MESSAGE_BLINK);
        mHandler.sendMessageDelayed(message, BLINK_DELAY);
    }
    
    @Override
    protected void onAttachedToWindow() {
        super.onAttachedToWindow();
        
        mBlink = true;
        mBlinkState = true;
        
        makeBlink();
    }
    
    @Override
    protected void onDetachedFromWindow() {
        super.onDetachedFromWindow();
        
        mBlink = false;
        mBlinkState = true;
        
        mHandler.removeMessages(MESSAGE_BLINK);
    }
    
    @Override
    protected void dispatchDraw(Canvas canvas) {
        if (mBlinkState) {
            super.dispatchDraw(canvas);
        }
    }
}

[/codesyntax]

不知道大家在Android的源码中找到过哪些彩蛋,欢迎分享。

2014-12-31
31 December
On December 31, 2014
In Article Collection(聚宝收藏), Design Patterns(设计模式), Knowledge Base(心得笔库)

Chrome扩展程序各结构间交互方式

在之前的文章里介绍了很多关于开发Chrome扩展程序时会用到的各部件,对每个部件的功能和用途做了比较详细的描述。不过单单知道怎么使用各个部件还不够,前面有提到每个部件的优缺点:Browser Action和Page Action不能长期保留数据状态;Background Page和Event Page没有用户界面;Content Scripts无法触发DOM原本的事件。所以就需要让这些部件能够联系在一起使用,用其优势不足其它的劣势。

通过阅读网上关于Chrome扩展程序的文档和文章,以及自身的试验和实践,对于Chrome扩展程序中所用到的交互方式主要可以分为三类:调用接口(Interface),消息传送(Message),脚本注入(Injection)。

下图展示了各个部件直接交互的方式和会使用到的API方法:
Chrome-Extension-Interaction

话说回来其实三种方式都是调用Chrome扩展开发中直接提供的API,只是API的设计结构、使用方式、作用对象以及安全性等有些许差别,所以我才臆想成三类不同方式。

而从上图的分布,还可以看出我对于Chrome扩展程序各部件的分类可以归为:“近扩展(Close to Extension)”和“近页面(Close to Page)”。也就是一类主要作用在扩展程序上,另一类主要作用在页面本身。
Read More →

2014-11-08
08 November
On November 8, 2014
In Article Collection(聚宝收藏), Design Patterns(设计模式), Front Interface(界面构想), Knowledge Base(心得笔库)

Chrome扩展程序开发基础介绍

虽然现在的工作主要是Android平台的开发,但是对于Web的兴趣总是无法割舍。只可惜因为不是日常工作的一部分,许多Web技术其实学得都不精湛,也常常会淡忘了解过的知识。好在有了Chrome这个强大的前端神器,观察页面布局、学习脚本源码、调试代码样式都变得异常自如,也让学习Web变得方便很多。

前阵子为了完成一些功能,学习了一下Chrome扩展程序(Chrome Extensions)开发的基本内容和步骤,觉得为自己的Web技术找到了新的用武之地。不用再纠结和苦恼如果设计发开出功能全面界面吸引人的应用或系统;做出一些插件来扩展喝补强当前页面功能也是很有意义的。比如常看一些网页被旁边的广告栏打扰了,可以写个插件把display设成none;如果在线看一些文档,也可以做个插件用来标记哪些内容比较重要然后呈现时做个高亮显示。

开发Chrome扩展程序也非常容易上手,只要会HTML,CSS和JavaScript就可以开始了。不需要学习新的语言,也不需要了解新的布局方式,也不用知道新的IDE,还不用编译。当然Chrome扩展程序的基本架构和组成结构还是需要额外了解的,这样才能知道每个部分要如何实现,保证扩展程序能流畅运行。

Chrome扩展程序的官方文档让人感觉有点凌乱,可能是扩展程序开发算不上热门内容,也可能是Chrome的版本升级太频繁,所以没有很好地整理文档。本文就来总结这些知识内容与大家分享,也方便自己以后回顾。

入门准备和基础概念

既然是开发Chrome扩展程序,自然需要Chrome浏览器,然后下载一些示例程序。一般的Chrome扩展程序是.crx文件,但实质上它只是一个压缩文件,随时可以以zip格式来解压查看里面的内容。但是为了开发方便,Chrome也支持直接上传文件夹,但是要先打开”开发模式”。启用方式很简单,只要开打Chrome浏览器,在Extensions窗口下(可通过菜单开打,也可以在地址栏里输入chrome://extensions来进入)勾选Develop mode就可以了:
Developer-Mode

这样就可以直接上传文件夹来安装在开发中的扩展程序了。如果开发完成也通过这里进行打包然后发布到Chrome商店上,不过这部分不在本文中介绍。

对比直接上传的和从商店上安装的扩展程序,可以发现几个明显的不同:
Unpacked

以文件夹格式上传的,会显示Loaded from项来指示扩展程序在文件系统中的位置,另外还可以通过刷新或者点击Reload链接按钮来更新修改过的扩展程序。而安装的则无法这么简单的来更新和升级了。

当然其他的内容都是一样的:名字、版本号这些接下来会介绍如何定义;权限(Permissions)的内容比较多本文也不会涉及,可以在官方文档中了解。还有ID这一项,它是Chrome指定给每个扩展程序的唯一标示,可以用它在Chrome浏览器中通过链接chrome-extension://<extensionID>/<pathToFile>打开扩展程序中的任意文件。比如Evernote的选项页面就是:chrome-extension://pioclpoplcdbaefihamjohnefbikjilc/options.html
Evernote-Options

对于没有打包成.crx文件的扩展程序,Chrome会根据文件夹所在位置来指定生成ID;在第一次打包扩展程序时,Chrome会生成一个Private Key文件,之后就可以用同样的Key来标示同一个程序的版本升级,Chrome也就会赋予它同样的ID。之后也会介绍这个ID还有其他的用处。
Pack-Extension
Read More →

2014-10-26
26 October
On October 26, 2014
In Article Collection(聚宝收藏), Front Interface(界面构想), IT Products(数码产品)

HyperDock,让Mac的窗口飞

三年前写了一篇文章,介绍了Windows 7下的Aero效果,其实最终是想引出来写Mac OS上能产生类似功能的HyperDock应用程序,可惜这一拖,就拖到连Windows 10都快要发布了。没有关心Windows是否有延续着非常华丽又实用的功能,毕竟过去4年里,Mac才是工作和日常中一直使用的电脑,能在Mac上找到实用的软件和工具来提高效率才有实际意义。对于Windows的怀念也只剩下Visual Studio和Viso,但每样东西都总能找到一个相近的代替品。
hyperdock

虽然过去了很长的时间,但是在这几年中HyperDock也有了更多的提升,而且还没有步入像消息通知软件Growl、支持多tab的TotalFinder等那样命运,在Mac系统的数次升级中被集成到系统之中,让用户觉得安装这些程序变得多余。虽然很多其它免费的或者稍便宜的程序也能呈现Aero的效果,但是都不及HyperDock全面和实用。所以虽然HyperDock收费$9.99,依然觉得值得拥有。

HyperDock官方只介绍了很简单的功能和基本的操作,其实它能做的远比其列出来的多得多。经过了这些年的使用,让我对HyperDock的功能更加得多。所以来完成之这么多未完成的文章,来分享HyperDock给Mac用户们,特别是开发者们希望它也能带给大家带来高效的开发体验。
Read More →

2014-07-19
19 July
On July 19, 2014
In Article Collection(聚宝收藏), Knowledge Base(心得笔库), Mobile Development(移动开发)

开发Android必知的工具

tools程序开发有时候非常依赖使用的开发工具,好的完备的开发工具可以让开发人员的工作效率有大幅度的提高。开发Android也是如此,大家可能都离不开Eclipse或Android Studio这些工具,但他们其实是集成开发环境(Integrated development environment, IDE),把很多工具集成在一个里面,配合可视化界面和键盘快捷键,方面寻找和使用。

不过有时候工具集成太多了,往往让人感到迷惑容易遗忘某个工具的存在。本文就谈谈Android开发和Debug时可使用的一些工具,这些工具都可以在安装了Android SDK的Eclipse或Android Studio找到相应的菜单和按钮来打开使用。但考虑到IDE很多时候打开速度实在太慢了,还是考虑直接使用指令在终端单独开打它们吧。

如果安装了Android Studio,这些工具可以在其安装包中找到,比如在Mac下它们就保存在/Applications/Android Studio.app/sdk/tools路径下。如果是使用Eclipse,那么就需要手动下载Stand-alone Android SDK,解压之后也能在其下的tools文件夹里找到。
Read More →

2014-06-13
13 June
On June 13, 2014
In Article Collection(聚宝收藏), IT Products(数码产品), Mobile Development(移动开发)

关闭Android File Transfer的自动启动功能

作为一个Mac和Android的深度用户,Android File Transfer可以说是电脑上必备的应用程序。虽然我的大部分的Android设备都已经开启了开发者模式,所以基本的设备与电脑间的文件传输功能都可以用adb pull和adb push指令完成。但是Android File Transfer的可视化界面和自然的拖拽还是显得更加的方便。而且当设备连接上电脑时,程序就会自动启动,也非常的直接和实用。

android-file-transfer

不过这个自动启动功能,最近还是带来了不少的麻烦。因为每天都在做Android开发测试,所以会频繁的连接和断开设备,于是Android File Transfer就反复的起来打扰我,而且不知道为什么经常出现死机的状态:鼠标无法移动,按键盘也没有任何响应。虽然在重新断开再连接,反复几次之后电脑也会回复正常,但是不停碰到这样的情况也是非常恼火的。所以就找了一下关闭其自启动功能的方法,分享在此。
Read More →

2014-01-17
17 January
On January 17, 2014
In Article Collection(聚宝收藏), English Posts(英文写作), Language Tips(语言初试)

Redis Command Reference

Redis is really awesome key-value storage. Not only because it is very fast on data get/set as all data are stored in memory, but also it is very simple to setup even from source code, it has multiple data structures that can be used in practice, and it is well documented, many useful resources can be found in Redis.io.

The most valuable thing of Redis should be the commands that communicate with Redis server to operate on data. On Redis.io, there is page fully explained the functionality of each commands, it also provides some interactive page to try each command and know them well.

Here I restyle the commands page, so that they could be print out in two papers, and also highlighted them with different color according to their type. You can download the PDF file here as well.

2013-12-02
02 December
On December 2, 2013
In Article Collection(聚宝收藏), Front Interface(界面构想), Special Tricks(奇技妙招)

CSS3实现关闭按钮

作为一名程序员,可以说有着较强的逻辑思维来编写程序代码,但是在界面设计上却常常因欠缺艺术思维而缺乏美观。在于前段开发的时候往往会碰到这样的窘境:能够用JavaScript实现功能、用CSS做好布局,但是在配色方面却显得无从下手。想要做Photoshop做一些效果图,却又不熟悉软件的使用,网上寻找到素材不是不能完全满足要求,就是有版权需要付费。作为一个公司可以聘请专业的美工人员来帮助完成这些需求,但是作为个人就只能自己想办法了。

幸好随着HTML5和CSS3标准化的一步步推进,各个浏览器对这些标准更加全面的支持和实现,许多以前靠依靠图片才能实现的效果,现在都可以通过CSS3的属性来实现。比如:让按钮看起来有立体感的阴影效果和渐变效果,以前只能放置背景图来实现,现在则可以用box-shadow和gradient来设置;以前想设计圆角边框,也得使用图片做背景,现在用border-radius就搞定了还能四个角区别设置。

在本文中将分享用CSS3设计出来的样式来呈现出关闭按钮的样子,这样以后想设计简单的对话框,就不需要求美工来帮忙画按钮的图片了。先来看看样式:

[codesyntax lang=”css” lines=”normal”]

/* basic style */
.close {
    /* still bad on picking color */
    background: orange;
    color: red;
    /* make a round button */
    border-radius: 12px;
    /* center text */
    line-height: 20px;
    text-align: center;
    height: 20px;
    width: 20px;
    font-size: 18px;
    padding: 1px;
}
/* use cross as close button */
.close::before {
    content: "\2716";
}
/* place the button on top-right */
.close {
    top: -10px;
    right: -10px;
    position: absolute;
}

[/codesyntax]Read More →

2013-06-06
06 June
On June 6, 2013
In Article Collection(聚宝收藏), Knowledge Base(心得笔库), Language Tips(语言初试)

小心程序运算符的陷阱

每一门程序语言都会提供各种运算符(Operator),每个运算符都会有特定的含义和规则,去完成指定操作最后给出相应的结果。有些运算符会普遍出现在各种语言中,比如加减乘除这些算数运算符;有些运算符则为某些语言特有,比如取地址运算符和反引用运算符只在C/C++中用到而Java,C#这类不能直接访问地址的程序语言就不具有;有些运算符因为特定的需要,还会改变其一般的含义,比如加法运算符在很多语言都被作为字符串拼接的操作符。学习一门程序语句,除了学习其语法以外还要了解其所拥有的运算符,但是因为各个语言运算符的相似性,常常让人简单略过对它们的了解。

运算符最主要有两个特性:优先级(Precedence)和结合律(Associativity)。在很早以前我的《两年半大学总结》讲到过自己对运算符, 特别是优先级的问题上的一些理解。在之后的学习和编写程序的过程中,我常常发现原来运算符的这两个特性会给代码带来隐形的意想不到的陷阱。所以我将实际中碰到的一些关于运算符的问题罗列于此,希望能对这些问题提高警惕以免跌入陷阱。
Read More →

2013-02-28
28 February
On February 28, 2013
In Article Collection(聚宝收藏), Mobile Development(移动开发)

iOS开发官方文档汇总

程序员的学习过程是无止境的,程序员学习的途径是多样的。可以从视频教程中领悟,也可以从他人的代码中理解。但当我们专注于某一个平台在开发的时候,对于某个API使用或者功能实现有疑问,通常简单的测试可以让我们知道可能的效果,异或网上搜索一下别人的经验,不过最好的途径应该还是阅读官方的文档解释。常常可以更全面,具体的了解。当然也不排除有时候官方文档说了跟没说似地,或者根本说得文不对题。

半年多里一直从事Mobile游戏的开发,Android和iOS平台都有接触,不过还是以iOS为主,为了解决问题也查阅了不少的文档资料。就像以前学.NET一定会去MSDN,iOS上的问题就会先去查阅Apple Developer。总得感觉Library的文档还是MSDN做得比较好,说明详细例子也比较多。而Apple Developer上对于API的注释都不够详细,而且没有例子告之该如何使用。

apple-pdf不过Apple的文档也有它独有的好处,比如绝大部分的文档都有相应的PDF格式文件提供下载,对于离线阅读十分的方便,而且还可以在PDF做一些相应的笔记,针对某几页进行打印等等。

另外,Apple还会给出该API所对应的框架结构使用的文档,其中会有一些代码例子。但是其实那些例子依然不够,还是需要到其它地方寻找。但是这些讲述结构的文档却是体现出API设计的来源,所以十分值得阅读,只是需要花时间了理解和消化。Read More →

Posts pagination

Previous 1 2 3 Next
Facebook
Twitter
LinkedIn
RSS
ZhiHu

Recent Posts

  • 三年居家工作感受
  • Pixel Watch智能手表和Pixel 5, 6 Pro 及 7 Pro手机
  • 我拥有过的无线耳机
  • 毕业工作一个月,我差点被开除
  • 我拥有过的移动硬盘
  • ProtoBuf 2.0 method count optimization for android development
  • 面过100场行为面试后

Categories

  • Algorithm Analysis(算法分析)
  • Article Collection(聚宝收藏)
  • Data Structures(数据结构)
  • Design Patterns(设计模式)
  • English Posts(英文写作)
  • Front Interface(界面构想)
  • IT Products(数码产品)
  • Knowledge Base(心得笔库)
  • Language Tips(语言初试)
  • Mathematical Theory(数学理论)
  • Mobile Development(移动开发)
  • Programming Life(程序人生)
  • Reading Notes(阅而后知)
  • Software Engineering(软件工程)
  • Special Tricks(奇技妙招)
  • Tangential Speech(漫话杂谈)

Tags

Aero Android API Bash Binary Search Bitwise Operation Book C/C++ Career Chrome Conference CSS Debug Device DOM Extension Framework Game Gradle Hearthstone HTML Initialization Intellij Interview iOS Java JavaScript jQuery Keyword Language Issues Mac Microsoft Mobile Modifier Objective-C PHP Principle Reference Regular Expression Static String Tools Tutorial UI XML

Blogroll

  • Ahmed's Blog
  • Gert Lombard's Blog
  • Gordon Luk
  • Jack & Allison
  • 开发部落

Archives

Designed using Chromatic. Powered by WordPress.