Skip to content
Ider

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

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

Front Interface(界面构想)

2016-04-24
24 April
On April 24, 2016
In Article Collection(聚宝收藏), Front Interface(界面构想)

Chrome插件的Page Action的变化

前阵子更新了一下系统和软件,打开Chrome浏览器发现插件(Chrome Extension)的显示位置变了,原来显示在Omnibox里的Page Action突然跑到了Toolbar上跟Browser Action厮混在了一起。

于是开始在网上搜索原因才发现原来Chrome对插件的按钮显示做了改版(见”Introducing Chrome 48! “,” Upcoming UI Change“,”What happened with pageAction “),将它们都归到了Toolbar上并且可以隐藏到Menu中。

chrome-extension-menu

我以前也一直觉得Browser Action和Page Action是那么的相似,在Browser Action的监听事件中也能获得当前页面的信息,何必要分成两种让开发者做选择呢。现在Google也是有意要将两者归并,甚至可能在未来淘汰其中一个来简化冗余界面对用户造成的困惑。因为在新的设计下,对Page Action进行hide不会像以前那样将图标真的隐藏,而转为变灰表示其不可用。这在但这API显然不能真实反映其效果,很有可能会为了统一而淘汰它们的使用。

另一些变化是即使插件不用Browser Action和Page Action,也会在Toolbar上显示灰色的图标已表示其被安装使用着。这样可以更明显的提醒用户在浏览器上现在都有哪些插件,来防止恶意插件被用户忽略。

Chrome的插件也只能使用Browser Action和Page Action之一,如果在manifest里同时定义了两者,就会得到“Only one of ‘browser_action’, ‘page_action’, and ‘app’ can be specified.”的错误。

哎,以前写的关于Chrome插件开发的文章就这么被过时了,好在基本的结构和方式没有大的变化。

2016-03-30
30 March
On March 30, 2016
In Front Interface(界面构想), IT Products(数码产品), Special Tricks(奇技妙招)

实用Mac的Dictionary应用程序

dictionary学习英文最需要的是一本字典来查看单词的意思。在电脑上虽然可以上网来搜单词,但是被网速约束总是会让人烦躁,让英文阅读变得不流畅,所以就更希望能够有电子字典可以直接使用。以前使用Window PC的时候有很多英汉汉英字典可以选用,但到了Mac电脑上就没有什么功能和界面都比较完善的应用。

其实Mac自带的Dictionary应用就已经非常强大:庞大词库,准确释义;离线查询,在线Wiki;屏幕选词,原生结合;清爽界面,稳定流畅。而且在最新的系统中,字典库还包含了牛津英汉和牛津汉英字典,就不用在网上到处找中英字典安装。
Read More →

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的源码中找到过哪些彩蛋,欢迎分享。

2015-04-16
16 April
On April 16, 2015
In Design Patterns(设计模式), Front Interface(界面构想), Knowledge Base(心得笔库), Mobile Development(移动开发)

RecyclerView体验简介

前些日子,组里为了在目前的Android程序里实现基于ListView子项的动画效果,希望将最新的RecyclerView引入到程序中,于是我便花了一些时间研究了一下RecyclerView的基本情况。本文算是对这些日子里了解的内容做一些汇总。

在网上关于RecyclerView的基本使用方式已经有了比较详细介绍,而且其设计结构也类似于ListView,所以本文将不重点介绍如何使用,在文末的引用中都可以相关内容。这里主要是介绍RecyclerView的基本功能、设计理念,以及系统提供API的情况。

什么是RecyclerView

RecyclerView是在Android L(也就是后来的Lollipop)中新加入的一种ViewGroup。但因为它使以support-v7库的形式加入到Android系统中,所以不仅仅是Lollipop版本以后的Android系统可以使用,只要系开发项目中引入这个库就在任意API级别中使用。不过查阅其文档,可以感受到RecyclerView是如此的强烈的“还在完善中”的感觉,因为对它的介绍只有短短的一句话:

A flexible view for providing a limited window into a large data set.

单看这句话,其实已经被经常使用的ListView和GridView基本也是满足这句描述的。而且从单呈现效果来看RecyclerView和ListView、GridView并没有大多的差别。

不过它的“flexible”并不单单指它可以在ListView和GridView之间随意互相切换,更在于它可以创造出更多的复杂的可滚动的视图,比如水平方向的ListView,或者是Web上很流行的瀑布流式布局(Masonry)。只是大部分布局系统都没有提供,必须由开发者自己实现。

所以RecyclerView的“flexible”:什么都可以做,但什么都要自己做。
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-06-24
24 June
On June 24, 2014
In Front Interface(界面构想), IT Products(数码产品), Mobile Development(移动开发)

Amazon的Fire Phone之于Android开发者

在上周Amazon也耐不住加入了手机竞争行列之中,发布了自己的Fire Phone,于是Android家族又多了一位变种成员,Android系统的碎片化程度也进一步加剧。因为工作的关系,我有幸在上个月就得到了一部工程机为其做提前开发,不过因为政策原因所以到现在才能来谈谈对这部新手机的看法。

对于Fire Phone的功能以及外观,官方网站和各家技术网站都有了详尽的介绍和报道,再者因为我拿到的是工程机,无法体现到完备的功能展现,因此本篇文章谈的主要是Fire Phone对于开发者而言所要面对的问题和状况。
Read More →

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-08-31
31 August
On August 31, 2013
In Front Interface(界面构想), Language Tips(语言初试)

JavaScript操作SVG的一些知识

前阵子学习了一下SVG(Scalable Vector Graphics),希望能借此弥补自己在图形艺术上的不足,当然最后也没有得到什么提高,不过也扩充了一些网页前段技术知识。通过做了一些小的设计项目,也发现SVG可以弥补一些HTML元素的不足,比如倾斜、弧线、动画、复用等等。

虽然SVG和HTML一样都属于XML的一种方言,一些基本的JavaScript对HTML的DOM操作都适用于SVG,但是在实际运用中还是因为这样那样的细微区别遇到了不大不小的麻烦。所以通过此篇文章记录下遇到的问题和解决的方法。
Read More →

2013-06-13
13 June
On June 13, 2013
In Front Interface(界面构想), IT Products(数码产品), Mobile Development(移动开发)

iOS,你真的越来越像Android了

1-ios7-beta周一的苹果开发者大会上,Apple介绍了iOS 7的各种新的特性,虽然真正发布要到今年秋季,但是作为程序员的我们还是可以下载开发版本来亲身体验一番的。本来想下载更新到四代的iPod Touch上,但是似乎没有提供,所以只能跟同事借来一部iPone 5测试机更新到iOS 7。如果没有去年底对《Android 4.2新特性体验》,看到这一些新特性我一定会感到欣喜,但是现在体验的结果就跟看Keynote时是一样的:长得越来越像Android了。只能说有些东西就是先入为主了,做什么都应该抢个先(鲜)才行。
Read More →

Posts pagination

1 2 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.