search.xml

<?xml version="1.0" encoding="utf-8"?>
<search>
  
  
    
    <entry>
      <title><![CDATA[C++对象内存布局初探（1）]]></title>
      <url>http://nightn.com/2018/08/05/cpp-object-memory-1/</url>
      <content type="html"><![CDATA[<p>C++ 对象内存布局是一个深入而有趣的话题。<code>sizeof</code> 可以返回对象占用的内存大小，那具体存每个字节的是什么呢？对象的哪些成员会直接放到对象中，哪些不会？每个成员的排布顺序是怎么样的？当发生继承或复合时，子类对象的内存布局又是怎样的？虚函数的实现机制是什么？动态绑定在内存中是怎么体现？如何避免重复继承？「C++对象内存布局初探」系列便尝试着从内存布局的角度去回答这些问题，这是本系列的第一篇。</p>
<a id="more"></a>
<p>在本篇文章中，我将对 5 类不同情况下的对象布局进行较为详细的介绍，通过 <strong>代码 + UML 图 + 实际内存布局 + 结论分析</strong> 的流程对每一种情况进行讨论。这 5 种情况包括：</p>
<ul>
<li>没有继承的情况</li>
<li>单一继承（不包含 <code>virtual function</code>）</li>
<li>单一继承（包含 <code>virtual function</code>）</li>
<li>多重继承</li>
<li>虚继承</li>
</ul>
<p>示例代码的运行环境：</p>
<ul>
<li>操作系统： win10 专业版</li>
<li>编译器：GCC4.9</li>
</ul>
<h2 id="一、-最简单情况：没有继承"><a href="#一、-最简单情况：没有继承" class="headerlink" title="一、 最简单情况：没有继承"></a>一、 最简单情况：没有继承</h2><h3 id="1-代码及-UML-图"><a href="#1-代码及-UML-图" class="headerlink" title="1. 代码及 UML 图"></a>1. 代码及 UML 图</h3><pre class=" language-c++"><code class="language-c++">class Point2d {
public:
    // constructor(s)
    // operators
    // access functions
private:
    long long x = 0x11;
    long long y = 0x22;
};

class Point3d {
public:
    // constructor(s)
    // operators
    // access functions
private:
    long long x = 0x1111;
    long long y = 0x2222;
    long long z = 0x3333;
};
</code></pre>
<p><img src="/img/uml-no-inheritance.png" alt="1533467905287"></p>
<h3 id="2-内存布局"><a href="#2-内存布局" class="headerlink" title="2. 内存布局"></a>2. 内存布局</h3><p><img src="/img/model-no-inheritance.png" alt="1533467946831"></p>
<h3 id="3-结论"><a href="#3-结论" class="headerlink" title="3. 结论"></a>3. 结论</h3><p><code>Point2d</code> 和 <code>Point3d</code> 是两个独立的类，它们实例化出来的对象仅包含 <code>non-static data member</code> 。对于各个数据成员在内存中的排列顺序，C++标准并没有强制规定。但大部分编译器实现中，都<strong>按照数据成员声明顺序来进行对象的内存布局</strong> （如上图所示）。</p>
<h2 id="二、单一继承不含-virtual-function"><a href="#二、单一继承不含-virtual-function" class="headerlink" title="二、单一继承不含 virtual function"></a>二、单一继承不含 virtual function</h2><p><code>Point3d</code> 公开继承 <code>Point2d</code> ，并且两个类中都没有 <code>virtual function</code> 。</p>
<h3 id="1-代码及-UML-图-1"><a href="#1-代码及-UML-图-1" class="headerlink" title="1. 代码及 UML 图"></a>1. 代码及 UML 图</h3><pre class=" language-c++"><code class="language-c++">class Point2d {
public:
    long long get_x() const { return x; }
    long long get_y() const { return y; }
private:
    long long x = 0x11;
    long long y = 0x22;
};

class Point3d: public Point2d {
public:
    long long get_z() const { return z; }
private:
    long long z = 0x3333;
};
</code></pre>
<p><img src="/img/uml-single-inheri-no-virtual.png" alt="1533468789392"></p>
<h3 id="2-内存布局-1"><a href="#2-内存布局-1" class="headerlink" title="2. 内存布局"></a>2. 内存布局</h3><p><img src="/img/model-single-inheri-no-virtual.png" alt="1533468881218"></p>
<h3 id="3-结论-1"><a href="#3-结论-1" class="headerlink" title="3. 结论"></a>3. 结论</h3><p>在继承体系中，子类对象包含了父类实体部分（subobject），而且 subobject 位于前面，而后是子类中的成员。</p>
<h2 id="三、单一继承并含-virtual-function"><a href="#三、单一继承并含-virtual-function" class="headerlink" title="三、单一继承并含 virtual function"></a>三、单一继承并含 virtual function</h2><p>假如我们现在要对点进行绘制，显然无论是 <code>Point2d</code> 还是 <code>Point3d</code> 都需要可以绘制，但它们绘制的实现不同。因此，我们在 <code>Point2d</code> 中定义名为 <code>draw</code>  的 <code>virtual function</code> 。另外，我们单独在 <code>Point3d</code> 单独定义一个名为 <code>rotate3d</code> 的 <code>virtual function</code> 。</p>
<h3 id="1-代码及-UML-图-2"><a href="#1-代码及-UML-图-2" class="headerlink" title="1. 代码及 UML 图"></a>1. 代码及 UML 图</h3><pre class=" language-c++"><code class="language-c++">class Point2d {
public:
    long long get_x() const { return x; }
    long long get_y() const { return y; }
    virtual void draw() { cout << "Point2d::draw()" << endl; }
private:
    long long x = 0x11;
    long long y = 0x22;
};

class Point3d: public Point2d {
public:
    long long get_z() const { return z; }
    void draw() override { cout << "Point3d::draw()" << endl; }
    virtual void rotate3d() { cout << "Point3d::draw()" << endl; }
private:
    long long z = 0x3333;
};
</code></pre>
<p><img src="/img/uml-single-inheri-virtual.png" alt="1533471900774"></p>
<h3 id="2-内存布局-2"><a href="#2-内存布局-2" class="headerlink" title="2. 内存布局"></a>2. 内存布局</h3><p><img src="/img/model-single-inheri-virtual.png" alt=""></p>
<h3 id="3-结论-2"><a href="#3-结论-2" class="headerlink" title="3. 结论"></a>3. 结论</h3><p>上面的内存布局图咋看之下有点复杂，不用怕，容我慢慢道来。上图分为上下两部分，上半部分是与 <code>p2</code> 对象相关的内存布局，下半部分是与 <code>p3</code> 对象相关的内存布局。每个部分又包括了对象本身和 <code>vtbl</code> 。什么是 <code>vtbl</code> ，什么又是 <code>vptr</code> ，为什么多了虚函数，对象的内存布局就变得这么复杂了呢。我先简单的解释一下。</p>
<p>考虑一个简单的继承体系：<code>Base</code> 为父类，<code>Derived1</code> 和 <code>Derived2</code> 都公开继承 <code>Base</code> 。且 <code>Base</code> 类中定义了虚函数，子类们可以重写（override）父类定义的虚函数。虚函数是 C++ 用来支持多态的一种函数，所谓多态，是通过动态绑定实现的。当我们通过一个父类指针（如 <code>Base* pb</code>）或引用去调用虚函数时，便会发生动态绑定，即静态类型为 <code>Base</code> ，动态类型由运行时 <code>pb</code> 所绑定的对象决定，绑定不同类型的对象，所调用的虚函数版本也不同，看起来父类指针具有多种状态，具体是什么状态需要等到运行时进行动态绑定，这就是多态。多态就是通过虚函数表 <code>vtbl</code> 实现的。</p>
<p>每一个带有虚函数的类，它所实例出来的对象，除了包含自身的 <code>data member</code> 外，还有一个指针 <code>vptr</code> ，全称是 <code>virtual function table pointer</code> ，即虚函数表指针，顾名思义，它里面存放了这个类的虚函数表的地址。如上图所示，<code>p2</code> 对象的内存布局中，除了包含 <code>p2.x</code> 和 <code>p2.y</code> ，还包含了一个 <code>vptr</code> ，其值为 <code>00 00 00 00 00 49 15 b0</code> ，它是 <code>Point2d</code> 虚函数表的地址，我们顺着这个地址找到了对应的虚函数表，即图中的 <code>vptr of Point2d</code> ，这个虚表存放的便是 <code>Point2d</code> 所有的虚函数。同理，<code>p3</code> 对象的内存布局也是类似的，不同的是，<code>Point3d</code> 的虚函数表包含了两个虚函数：<code>draw()</code> 和 <code>rotate3d()</code> 。非常重要的一点，<code>Point3d</code> 虚函数表中的第一个虚函数是 <code>Point3d::draw()</code> ，而不是父类版本的 <code>draw()</code> ，这是由于子类重写了父类的虚函数。关于虚函数表，还有几个细节值得注意：</p>
<ul>
<li><strong>虚函数表的结尾标志</strong>。从上图可以看到，虚函数表的结尾标志是一个值为 0，大小为 8 bytes 的一个块。GCC 是这样的，但是，并不是每一个编译器都是如此。</li>
<li><strong>虚表的 -1 位置</strong>。细心的读者可能会发现，虚表第一个虚函数的上面还有一个地址，它其实指向的是这个类的 <code>type_info</code> 对象，<code>type_info</code> 对象描述了类的简要信息（如 name, hash_code 等），用以支持 <code>RTTI(runtime type identification)</code> 。我们使用的 <code>typeid</code> 运算符，应该就是通过访问 <code>type_info</code> 对象实现的。</li>
<li><strong>虚表是类层面上的，而不是对象层面上的</strong>。即同一个类的不同对象，共享同一个虚表。</li>
</ul>
<p>以下通过一个简单的例子，结合上面的内存布局图，解释对象是如何与虚表进行交互，实现多态的。</p>
<pre class=" language-c++"><code class="language-c++">Point2d p2;
Point3d p3;
Point2d* ptr = &p2;
ptr->draw();   // 调用 Point2d::draw()
ptr = &p3;
ptr->draw();   // 调用 Point3d::draw()
</code></pre>
<p>同样是 <code>ptr-&gt;draw()</code> ，为什么每次调用的版本不一样呢？首先，定义了 <code>p2</code> 和 <code>p3</code> 对象，如上图所示，这两个对象的地址分别为 <code>0x6ffe30</code> 和 <code>0x6ffe10</code> 。<code>ptr</code> 是一个指向父类 <code>Point2d</code> 的指针。一开始，将 <code>p2</code> 的地址初始化 <code>ptr</code> ，即当前 <code>ptr</code> 指向 <code>p2</code> 对象，当执行到 <code>ptr-&gt;draw()</code> 时，由于 <code>draw()</code> 是虚函数，因此会去 <code>p2</code> 对象中的 <code>vptr</code> 所指的虚表中查找，虚表地址为 <code>0x4915b0</code> ，所以调用的是父类的虚函数。然后，将 <code>ptr</code> 重新赋值为 <code>p3</code> 的地址，此时再执行 <code>ptr-&gt;draw()</code> 时，会去 <code>p3</code> 对象中的 <code>vptr</code> 所指虚表中查找，虚表地址为 <code>0x4915d0</code>，所以调用的是子类的虚函数。</p>
<p>虚函数表的引入实现了高弹性的多态，但也引入了额外的负担。</p>
<ul>
<li>对象要增加一个 slot 作为 <code>vtpr</code> ，这样才能确保对象能够找到 <code>vtbl</code> 。</li>
<li>带有虚函数的类都需要有一个关联的 <code>vtbl</code> ，存放了所有虚函数的指针，以及再提供必要的 slot 作为分隔符，以及支持 <code>RTTI</code> 。</li>
<li>构造函数需要扩展。对象新增了一个 <code>vptr</code> 隐式成员，显然，它也需要初始化，编译器在合成默认构造函数或扩展现有构造函数的时候，必定会添加初始化 <code>vptr</code> 的代码。</li>
<li>析构函数需要扩展。也是为了处理额外的 <code>vptr</code> 隐式成员。</li>
</ul>
<h2 id="四、多重继承"><a href="#四、多重继承" class="headerlink" title="四、多重继承"></a>四、多重继承</h2><h3 id="1-代码及-UML-图-3"><a href="#1-代码及-UML-图-3" class="headerlink" title="1. 代码及 UML 图"></a>1. 代码及 UML 图</h3><pre class=" language-c++"><code class="language-c++">class Base1 {
public:
    long long x = 0x1111;
    virtual void f1() { cout << "Base1::f1()" << endl; }
    virtual void g1() { cout << "Base1::g1()" << endl; }
};

class Base2 {
    long long x = 0x2222;
    void f2() { cout << "Base2::f2()" << endl; }
};

class Base3 {
    long long x = 0x3333;
    virtual void f3() { cout << "Base3::f3()" << endl; }
};

class Derived: public Base1, public Base2, public Base3 {
    long long x = 0x8888;
    void f1() override { cout << "Derived::f1()" << endl; }
    virtual hello() { cout << "Derived::hello()" << endl; }
    virtual bye() { cout << "Derived::hello()" << endl; }
};
</code></pre>
<p><img src="/img/uml-multi-inheritance.png" alt="1533477298831"></p>
<h3 id="2-内存布局-3"><a href="#2-内存布局-3" class="headerlink" title="2. 内存布局"></a>2. 内存布局</h3><p><img src="/img/model-multi-inheritance.png" alt=""></p>
<h3 id="3-结论-3"><a href="#3-结论-3" class="headerlink" title="3. 结论"></a>3. 结论</h3><p>由内存布局图，可以得出以下结论：</p>
<ul>
<li>多重继承体系中的子类，每多继承一个带有虚函数的父类，就会在子类对象中多一个 <code>vptr</code> 。上图中，<code>Base1</code> 和 <code>Base3</code> 都带有虚函数，因此在子类的 <code>Base1 subobject</code> 和 <code>Base3 subobject</code> 各有一个 <code>vptr</code> ，为了后面叙述方便，我将它们分别记作 <code>vptr1</code> 和 <code>vptr2</code> ，它们所指向的虚函数表分别记作 <code>vtbl1</code> 和 <code>vtbl2</code> 。由于 <code>Base2</code> 不带有虚函数，所以 <code>Base2 subobject</code> 仅包含数据成员 <code>Base2::x</code> 。 </li>
<li>多重继承体系中的子类，其对象中各个 subobject 中的顺序与继承声明列表的顺序一致。上图中子类对象的内存布局从上到下分别为：<code>Base1 subobject</code>, <code>Base2 subobject</code>, <code>Base3 subobject</code> 以及 <code>Derived self part</code>。</li>
<li>如果子类继承了多个带有虚函数的父类，且子类中也有专属于自己的虚函数（如 <code>Derived::hello()</code> 和 <code>Derived::bye()</code>），那么，专属子类的虚函数会附加在继承列表中第一个带有虚函数父类的虚函数表中。如图中所示，<code>Derived::hello()</code> 和 <code>Derived::bye()</code> 都位于 <code>vtbl1</code> 中。</li>
<li>如果子类重写了父类的虚函数，则子类版本的虚函数会将虚表中父类版本的虚函数替换掉。如图所示，<code>vtbl1</code> 中的虚函数顺序，一开始我们可以想象成这样：<code>Base1::f1()</code>, <code>Base1::g1()</code>, <code>Derived::hello()</code>, <code>Derived::bye()</code> 。子类定义了重写了 <code>f1()</code> ，所以 <code>vtbl1</code> 的顺序变成了现在这样：<code>Derived::f1()</code>, <code>Base1::g1()</code>, <code>Derived::hello()</code>, <code>Derived::bye()</code> 。这便是子类重写父类虚函数的内在原理。</li>
<li>每一个虚表的 -1 位置都带有 <code>type_info</code> 对象的指针，GCC 中，多个父类的虚表是连续存储的，最后一个虚表末尾是 <code>0</code> ，倒数第二个虚表末尾是 <code>-8</code> ，然后是 <code>-16</code> , <code>-24</code> … 以此类推。</li>
</ul>
<blockquote>
<p>TODO: 虚继承</p>
</blockquote>
]]></content>
      
        <categories>
            
            <category> C++ </category>
            
        </categories>
        
        
        <tags>
            
            <tag> C++ </tag>
            
            <tag> 对象模型 </tag>
            
        </tags>
        
    </entry>
    
    <entry>
      <title><![CDATA[Gulp for beginners(译)]]></title>
      <url>http://nightn.com/2018/01/18/gulp-for-beginners/</url>
      <content type="html"><![CDATA[<p>Gulp 是优化项目、提高开发效率的一个非常有用的工具，尤其适用于前端领域。它有非常多的插件，可以实现很多自动化的功能，如创建本地 web 服务器、开发过程中文件修改实时刷新浏览器、对 Sass 或 LESS 进行实时编译、优化资源文件（如拼接压缩 CSS, JS 文件，压缩图片等）。本文翻译自 Zell Liew 的 <a href="https://css-tricks.com/gulp-for-beginners/" target="_blank" rel="external">Gulp for Beginners</a> 一文，原文为英文，采用意译，部分有改动。文章略长，但对快速了解如何使用 Gulp 非常有帮助。</p>
<a id="more"></a>
<p>Gulp 常用于管理 web 开发过程中的多个任务，经常用在以下这些前端任务：</p>
<ul>
<li>创建 web 服务器</li>
<li>当源码文件保存时，自动刷新浏览器</li>
<li>使用诸如 Sass 或 LESS 的预编译器</li>
<li>优化资源文件，如 CSS, JavaScript 和图片</li>
</ul>
<p>以上只是 Gulp 的一部分。如果你深入了解，甚至可以用 Gulp 构建一个静态网站生成器。总之，Gulp 非常强大，如果你想创建一套自定义的构建流程，那么你必须学会如何使用 Gulp。</p>
<p>这篇文件介绍了 Gulp 的基础知识，看完之后你就可以更深入的探索 Gulp。</p>
<p>在我们详细介绍如何使用 Gulp 之前，我们先聊一聊相比于其他类似的工具，为什么我们会选择 Gulp。</p>
<h3 id="为什么使用-Gulp"><a href="#为什么使用-Gulp" class="headerlink" title="为什么使用 Gulp"></a>为什么使用 Gulp</h3><p>诸如 Gulp 的工具都被称为「构建工具」，因为它们可以运行多个任务来构建一个网站。目前最流行的构建工具就是 Gulp 和 Grunt。当然，除此之外还有其他的构建工具，如 Broccoli 致力于资源文件的编译。</p>
<p>已经有非常多的文件阐述了 Grunt 和 Gulp 的区别，以及解释为什么用这个而不是那个。最大的不同是你如何用它们来配置你的工作流。比起 Grunt，Gulp 的配置更加短小和简单，并且 Gulp 运行得更快。</p>
<p>现在让我们开始用 Gulp 来构建工作流吧。</p>
<h3 id="总体概述"><a href="#总体概述" class="headerlink" title="总体概述"></a>总体概述</h3><p>通过跟着这篇文章进行操作，最后你将自己完成一个工作流的构建，主要包括以下任务：</p>
<ul>
<li>创建 web 服务器</li>
<li>将 Sass 编译为 CSS</li>
<li>保存源码文件的同时刷新浏览器</li>
<li>优化生产环境下的资源文件，如 CSS, JS, fonts, images</li>
</ul>
<p>你也会学到如何将多个不同的任务链接成一个容易理解和执行的简短命令。</p>
<p>首先在你的电脑上安装 Gulp</p>
<h3 id="安装-Gulp"><a href="#安装-Gulp" class="headerlink" title="安装 Gulp"></a>安装 Gulp</h3><p>安装 Gulp 之前，确保你的电脑已经安装好了 Node.js。如果还没有安装 Node.js，到 <a href="https://nodejs.org/" target="_blank" rel="external">Node 官网</a> 上下载并安装。</p>
<p>装好 Node.js 后，就可以在命令行中通过以下命令安装 Gulp。</p>
<pre class=" language-shell"><code class="language-shell">npm install gulp -g
</code></pre>
<h3 id="创建-Gulp-项目"><a href="#创建-Gulp-项目" class="headerlink" title="创建 Gulp 项目"></a>创建 Gulp 项目</h3><p>首先创建一个名为 <code>project</code> 的文件夹作为我们项目的根目录，并在命令行中跳转到该目录下，执行 <code>npm init</code> 命令来初始化项目。</p>
<pre class=" language-shell"><code class="language-shell">npm init
</code></pre>
<p>运行以上命令后，要求输入项目的基本参数，如项目名称、版本、描述、主入口、测试脚本、作者、许可等，我们可以暂时默认，因为这些参数最终可以在生成的 <code>package.json</code> 中进行配置，执行结果如下图：</p>
<p><img src="./img/npm-init.png" alt=""></p>
<blockquote>
<p><code>package.json</code> 是所有 npm 项目的配置文件，它描述了项目的基本信息，更重要的是，它还记录了该项目依赖的第三方模块，我们在 github 上下载的其他人的项目，我们必须要执行 <code>npm install</code> 命令后才能正常运行项目，其实这个命令就是根据当前项目的 <code>package.js</code> ，下载所有的依赖模块，放到 <code>/node_modules</code> 中，有了这些依赖模块，项目才能正常运行。</p>
</blockquote>
<p>自动创建好 <code>package.json</code> 后，就可以安装项目的依赖包了，既然这是一个 Gulp 项目，那首先要安装 Gulp 到项目（之前安装的是全局环境）。执行以下命令：</p>
<pre class=" language-shell"><code class="language-shell">npm install gulp --save-dev
</code></pre>
<p>安装完后，你会发现在项目根目录中会出现一个 <code>node_modules</code> 文件夹，这个文件夹就存放着我们项目依赖的所有第三方模块（包括刚刚装好的 gulp）。另外你还会发现 <code>package.jsaon</code> 也发生了变化，在 <code>devDependencies</code> 属性中，出现了 <code>gulp</code> 及其版本。如下图所示：</p>
<p><img src="./img/install-gulp.png" alt=""></p>
<blockquote>
<p>有人可能会奇怪，为什么我只是安装了 <code>gulp</code> ，而 node_modules 文件夹中会出现那么多第三方模块。其实这并不奇怪，<code>gulp</code> 也是一个 npm 项目，它也有它的 <code>package.json</code> 文件，里面记录着 <code>gulp</code> 所依赖的第三方模块，为了使用 <code>gulp</code> 当然也需要这些模块了。那 <code>gulp</code> 所依赖的第三方包又依赖其他的包呢？答案是 npm 会递归地下载所有的依赖模块。这就是 node_modules 文件夹中有这么多依赖包的原因。</p>
</blockquote>
<p>以上就准备好 Gulp 项目的基本内容，下面让我们定义文件的目录结构。</p>
<h3 id="定义文件目录结构"><a href="#定义文件目录结构" class="headerlink" title="定义文件目录结构"></a>定义文件目录结构</h3><p>Gulp 非常的灵活，因此可以用在任何目录结构。本文使用的目录结构如下图所示：</p>
<p><img src="./img/project-structure.png" alt=""></p>
<p><code>app</code> 目录用于存放开发环境下的文件，我们开发时所有的代码文件和资源文件都放在 <code>app</code> 目录，<code>dist</code> 目录用于存放将在生成环境下使用的优化过的文件。<code>gulpfile.js</code> 就是 Gulp 的配置文件，接下来我们将在这个配置文件中创建 Gulp 任务。</p>
<h3 id="创建第一个-Gulp-任务"><a href="#创建第一个-Gulp-任务" class="headerlink" title="创建第一个 Gulp 任务"></a>创建第一个 Gulp 任务</h3><p>首先使用 <code>require</code> 引入 Gulp 依赖，以便在之后的代码中使用。</p>
<pre class=" language-javascript"><code class="language-javascript"><span class="token keyword">var</span> gulp <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'gulp'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<blockquote>
<p><code>require</code> 语句告诉 Node，去 <code>node_modules</code> 目录中搜索名为 <code>gulp</code> 的包。一旦找到了，我们将包导出的内容赋值给变量 <code>gulp</code> 。</p>
</blockquote>
<p>接下来用变量 <code>gulp</code> 编写一个 Gulp 任务，结构如下：</p>
<pre class=" language-javascript"><code class="language-javascript">gulp<span class="token punctuation">.</span><span class="token function">task</span><span class="token punctuation">(</span><span class="token string">'task-name'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
   <span class="token comment" spellcheck="true">// Stuff here </span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p><code>task-name</code> 指定了任务的名称，有了这个名称之后，就可以在命令行中运行该任务，运行的命令为 <code>gulp task-name</code>。</p>
<p>为了测试，我们创建一个 <code>hello</code> 任务吧，这个任务只是简单的打印 <code>Hello Gulp</code>。</p>
<pre class=" language-javascript"><code class="language-javascript">gulp<span class="token punctuation">.</span><span class="token function">task</span><span class="token punctuation">(</span><span class="token string">'hello'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Hello Gulp'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>我们在命令行执行 <code>gulp hello</code> 来测试一下</p>
<pre class=" language-shell"><code class="language-shell">gulp hello
</code></pre>
<p>运行结果如下，命令行中打印了 <code>Hello Gulp</code> 。</p>
<p><img src="./img/gulp-hello.png" alt=""></p>
<p>以上只是一个简单的测试，真正的 Gulp 任务比这复杂得多，它常常包含两个额外的 Gulp 方法，以及很多 Gulp 插件。一个真正的 Gulp 任务看起来可能是这样的：</p>
<pre class=" language-javascript"><code class="language-javascript">gulp<span class="token punctuation">.</span><span class="token function">task</span><span class="token punctuation">(</span><span class="token string">'task-name'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> gulp<span class="token punctuation">.</span><span class="token function">src</span><span class="token punctuation">(</span><span class="token string">'source-files'</span><span class="token punctuation">)</span>  <span class="token comment" spellcheck="true">// 利用 gulp.src 获取源文件</span>
        <span class="token punctuation">.</span><span class="token function">pipe</span><span class="token punctuation">(</span><span class="token function">aGulpPlugin</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>  <span class="token comment" spellcheck="true">// 将它发送给一个 gulp 插件</span>
        <span class="token punctuation">.</span><span class="token function">pipe</span><span class="token punctuation">(</span>gulp<span class="token punctuation">.</span><span class="token function">dest</span><span class="token punctuation">(</span><span class="token string">'destination'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment" spellcheck="true">// 将处理后的文件输出到目标文件夹</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>如你所见，一个真正的 gulp 任务包含两个额外的方法：<code>gulp.src</code> 和 <code>gulp.dest</code> 。<code>gulp.src</code> 告诉 Gulp ，任务所需要的文件从哪里来；而 <code>gulp.dest</code> 告诉 Gulp ，任务完成之后输出文件放到哪去。</p>
<p>下面让我构建一个将 Sass 文件编译为 CSS 文件的任务吧。</p>
<h3 id="利用-Gulp-来预编译"><a href="#利用-Gulp-来预编译" class="headerlink" title="利用 Gulp 来预编译"></a>利用 Gulp 来预编译</h3><p>为了将 Sass 编译为 CSS，我们需要借助名为 <code>gulp-sass</code> 的插件，通过以下命令将 <code>gulp-sass</code> 插件安装到项目中。</p>
<pre class=" language-shell"><code class="language-shell">npm install gulp-sass --save-dev
</code></pre>
<p>安装好 <code>gulp-sass</code> 之后，我们修改 <code>gulpfile.js</code> ，首先引入 <code>gulp-sass</code> ：</p>
<pre class=" language-javascript"><code class="language-javascript"><span class="token keyword">var</span> sass <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'gulp-sass'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>然后我们创建一个名为 <code>sass</code> 的 Gulp 任务：</p>
<pre class=" language-javascript"><code class="language-javascript">gulp<span class="token punctuation">.</span><span class="token function">task</span><span class="token punctuation">(</span><span class="token string">'sass'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> gulp<span class="token punctuation">.</span><span class="token function">src</span><span class="token punctuation">(</span><span class="token string">'app/scss/styles.scss'</span><span class="token punctuation">)</span>
        <span class="token punctuation">.</span><span class="token function">pipe</span><span class="token punctuation">(</span><span class="token function">sass</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>  <span class="token comment" spellcheck="true">// 利用 gulp-sass 将 Sass 转为 CSS</span>
        <span class="token punctuation">.</span><span class="token function">pipe</span><span class="token punctuation">(</span>gulp<span class="token punctuation">.</span><span class="token function">dest</span><span class="token punctuation">(</span><span class="token string">'app/css'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>styles.scss 是我们在 app/scss 新建的测试文件，下面我们在 styles.scss 添加一些 Sass 代码，看看我们这个 Gulp  任务能不能成功转换。在 styles.scss 添加如下代码：</p>
<pre class=" language-scss"><code class="language-scss"><span class="token comment" spellcheck="true">// styles.scss</span>
<span class="token selector">.testing </span><span class="token punctuation">{</span>
    <span class="token property">width</span><span class="token punctuation">:</span> <span class="token function">percentage</span><span class="token punctuation">(</span><span class="token number">5</span> <span class="token operator">/</span> <span class="token number">7</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<p>在命令行中运行 <code>gulp sass</code> 。任务执行完后，你将会发现在 app/css 目录下多了一个 <code>styles.css</code> 文件，其内容如下：</p>
<pre class=" language-css"><code class="language-css"><span class="token selector"><span class="token class">.testing</span> </span><span class="token punctuation">{</span>
  <span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">71.42857%</span><span class="token punctuation">;</span> <span class="token punctuation">}</span>
</code></pre>
<p>可见我们的 <code>sass</code> 任务成功完成了使命。</p>
<blockquote>
<p><code>gulp-sass</code> 使用了 LibSass 将 Sass 转换为 CSS，它比基于 Ruby 的方法更快。不过，如果你仍然想用基础 Ruby 的方法，你可以试试 <code>gulp-ruby-sass</code> 或 <code>gulp-compass</code> 插件。</p>
</blockquote>
<p>有时候我们需要同时将多个 <code>.scss</code> 文件编译成 CSS 文件，这个时候我们可以借助 Node globs 来实现。</p>
<h3 id="Globbing-in-Node"><a href="#Globbing-in-Node" class="headerlink" title="Globbing in Node"></a>Globbing in Node</h3><p>Globs 是一个匹配模型，它允许你将多个文件添加进 <code>gulp.src</code> 。就像正则表达式，但 glob 只能用于文件路径。</p>
<p>常用的 4 中 globbing 模式有：</p>
<ul>
<li><code>*.scss</code> ： <code>*</code> 是一个通配符，表示匹配根目录下所有后缀名为 <code>.scss</code> 的文件。</li>
<li><code>**/*.scss</code> ： 匹配根目录以其子目录中所有后缀名为 <code>.scss</code> 的文件。</li>
<li><code>!not-me.scss</code> ：排除指定文件。</li>
<li><code>*.+(scss|sass)</code> ： 允许多个匹配模式。本例中，匹配根目录下所有后缀名为 <code>.scss</code> 和 <code>.sass</code> 的文件。</li>
</ul>
<p>下面我们修改 <code>gulpfile.js</code> 中的 <code>sass</code> 任务：</p>
<pre class=" language-javascript"><code class="language-javascript">gulp<span class="token punctuation">.</span><span class="token function">task</span><span class="token punctuation">(</span><span class="token string">'sass'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> gulp<span class="token punctuation">.</span><span class="token function">src</span><span class="token punctuation">(</span><span class="token string">'app/scss/**/*.scss'</span><span class="token punctuation">)</span>
        <span class="token punctuation">.</span><span class="token function">pipe</span><span class="token punctuation">(</span><span class="token function">sass</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>  <span class="token comment" spellcheck="true">// 利用 gulp-sass 将 Sass 转为 CSS</span>
        <span class="token punctuation">.</span><span class="token function">pipe</span><span class="token punctuation">(</span>gulp<span class="token punctuation">.</span><span class="token function">dest</span><span class="token punctuation">(</span><span class="token string">'app/css'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>现在，任何位于 app/scss 及其子目录的后缀名为 <code>.scss</code> 的文件，都会自动被添加进 <code>gulp.src</code> 。如我们在 app/scss 目录中额外添加了一个 <code>print.scss</code> 文件。然后执行 <code>gulp sass</code> ，会发现 app/css 目录下多了一个 <code>print.css</code> ，说明该任务同时对多个文件进行了转换。</p>
<p><img src="./img/gulp-sass.png" alt=""></p>
<p>现在，我们可以通过运行 <code>gulp sass</code> 同时实现对多个 scss 文件的转换。问题是，每次修改了 scss 文件，都得运行一次 <code>gulp sass</code> 命令来将其转换为 CSS 文件，这个过程非常繁琐的。</p>
<p>幸运的是，我们可以通过 <code>watch</code> 方法来自动运行 <code>sass</code> 任务。</p>
<h3 id="观察（Watching）-sass-文件的变化"><a href="#观察（Watching）-sass-文件的变化" class="headerlink" title="观察（Watching） sass 文件的变化"></a>观察（Watching） sass 文件的变化</h3><p>Gulp 提供了一个 <code>watch</code> 方法用来检查文件是否被保存，它的基本语法是这样的：</p>
<pre class=" language-javascript"><code class="language-javascript"><span class="token comment" spellcheck="true">// Gulp watch syntax</span>
gulp<span class="token punctuation">.</span><span class="token function">watch</span><span class="token punctuation">(</span><span class="token string">'files-to-watch'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'tasks'</span><span class="token punctuation">,</span> <span class="token string">'to'</span><span class="token punctuation">,</span> <span class="token string">'run'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>对于我们的项目，可以这么写：</p>
<pre class=" language-javascript"><code class="language-javascript"><span class="token comment" spellcheck="true">// Gulp watch syntax</span>
gulp<span class="token punctuation">.</span><span class="token function">watch</span><span class="token punctuation">(</span><span class="token string">'app/scss/**/*.scss'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'sass'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>更多的时候，我们想 watch 不同类型的文件，因此我们可以把多个 watch 封装到一个 <code>watch</code> 任务。</p>
<pre class=" language-javascript"><code class="language-javascript">gulp<span class="token punctuation">.</span><span class="token function">task</span><span class="token punctuation">(</span><span class="token string">'watch'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    gulp<span class="token punctuation">.</span><span class="token function">watch</span><span class="token punctuation">(</span><span class="token string">'app/scss/**/*.scss'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'sass'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment" spellcheck="true">// Other watchers</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>现在运行 <code>gulpt watch</code> ，开启 watch 任务。现在我们修改并保存匹配的文件后，将立即执行指定的任务，如下图所示：</p>
<p><img src="./img/gulp-watch.gif" alt=""></p>
<h3 id="通过-Browser-Sync-实现浏览器同步刷新"><a href="#通过-Browser-Sync-实现浏览器同步刷新" class="headerlink" title="通过 Browser Sync 实现浏览器同步刷新"></a>通过 Browser Sync 实现浏览器同步刷新</h3><p>Browser Sync 通过创建一个 web 服务器，使 web 开发更加快捷。</p>
<p>首先我们将 Browser Sync 安装到项目。</p>
<pre class=" language-shell"><code class="language-shell">npm install browser-sync --save-dev
</code></pre>
<p>安装好后，在 <code>gulpfile.js</code> 引入。</p>
<pre class=" language-shell"><code class="language-shell">var browserSync = require('browser-sync').create();
</code></pre>
<p>接下来，我们创建一个 <code>browserSync</code> 任务，该任务利用 Browser Sync 来让 Gulp 创建一个服务器。</p>
<pre class=" language-javascript"><code class="language-javascript">gulp<span class="token punctuation">.</span><span class="token function">task</span><span class="token punctuation">(</span><span class="token string">'browserSync'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    browserSync<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        server<span class="token punctuation">:</span> <span class="token punctuation">{</span>
            baseDir<span class="token punctuation">:</span> <span class="token string">'app'</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>baseDir 指定了 server 的根目录。</p>
<p>另外我们还需要修改 <code>sass</code> 任务的代码，确保当 <code>sass</code> 任务运行的时候，将更新过的样式注入到浏览器。</p>
<pre class=" language-javascript"><code class="language-javascript">gulp<span class="token punctuation">.</span><span class="token function">task</span><span class="token punctuation">(</span><span class="token string">'sass'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> gulp<span class="token punctuation">.</span><span class="token function">src</span><span class="token punctuation">(</span><span class="token string">'app/scss/**/*.scss'</span><span class="token punctuation">)</span>
        <span class="token punctuation">.</span><span class="token function">pipe</span><span class="token punctuation">(</span><span class="token function">sass</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>  <span class="token comment" spellcheck="true">// 利用 gulp-sass 将 Sass 转为 CSS</span>
        <span class="token punctuation">.</span><span class="token function">pipe</span><span class="token punctuation">(</span>gulp<span class="token punctuation">.</span><span class="token function">dest</span><span class="token punctuation">(</span><span class="token string">'app/css'</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
        <span class="token punctuation">.</span><span class="token function">pipe</span><span class="token punctuation">(</span>browserSync<span class="token punctuation">.</span><span class="token function">reload</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
            stream<span class="token punctuation">:</span> <span class="token boolean">true</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>为了执行 <code>watch</code> 之前，先执行一次 <code>browserSync</code> 和 <code>sass</code> 任务，我们修改 <code>watch</code> 任务的代码，如下：</p>
<pre class=" language-javascript"><code class="language-javascript">gulp<span class="token punctuation">.</span><span class="token function">task</span><span class="token punctuation">(</span><span class="token string">'watch'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'sass'</span><span class="token punctuation">,</span> <span class="token string">'browserSync'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    gulp<span class="token punctuation">.</span><span class="token function">watch</span><span class="token punctuation">(</span><span class="token string">'app/scss/**/*.scss'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'sass'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment" spellcheck="true">// Other watchers</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>这样一来，<code>watch</code> 任务执行之前，会先执行 <code>sass</code> 和 <code>browserSync</code> ，然后通过监听 <code>sass</code> 任务的执行来刷新浏览器视图。效果如下图：</p>
<p><img src="./img/browser-sync.gif" alt=""></p>
<p>除了监听 sass 文件的保存之后，我们还可以监听 html 和 js 文件的保存，实现只要文件一保存，就更新浏览器视图。因此，更新 <code>watch</code> 任务代码如下：</p>
<pre class=" language-javascript"><code class="language-javascript">gulp<span class="token punctuation">.</span><span class="token function">task</span><span class="token punctuation">(</span><span class="token string">'watch'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'sass'</span><span class="token punctuation">,</span> <span class="token string">'browserSync'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    gulp<span class="token punctuation">.</span><span class="token function">watch</span><span class="token punctuation">(</span><span class="token string">'app/scss/**/*.scss'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'sass'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment" spellcheck="true">// 当 HTML 或 JS 文件发生变化时，重新载入浏览器</span>
    gulp<span class="token punctuation">.</span><span class="token function">watch</span><span class="token punctuation">(</span><span class="token string">'app/*.html'</span><span class="token punctuation">,</span> browserSync<span class="token punctuation">.</span>reload<span class="token punctuation">)</span><span class="token punctuation">;</span>
    gulp<span class="token punctuation">.</span><span class="token function">watch</span><span class="token punctuation">(</span><span class="token string">'app/js/**/*.js'</span><span class="token punctuation">,</span> browserSync<span class="token punctuation">.</span>reload<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>到目前为止，我们已经通过 Gulp 实现了三个功能：</p>
<ul>
<li>创建一个用于开发的服务器</li>
<li>使用 Sass 预编译器</li>
<li>当文件发生变化时，同步刷新浏览器</li>
</ul>
<p>以下的部分将会讨论如何通过 Gulp 来优化资源文件，先从优化 CSS 和 JavaScript 文件说起。</p>
<h3 id="优化-CSS-和-JavaScript-文件"><a href="#优化-CSS-和-JavaScript-文件" class="headerlink" title="优化 CSS 和 JavaScript 文件"></a>优化 CSS 和 JavaScript 文件</h3><p>优化包括两个方面：压缩和拼接。</p>
<p>开发者常常面临的问题是，很难按正确的顺序拼接脚本文件。</p>
<p>比如我们在 <code>index.html</code> 中引入了 3 个脚本文件：</p>
<pre class=" language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>js/lib/a-library.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>js/lib/another-library.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>js/main.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">></span></span>
</code></pre>
<p>这些脚本文件位于不同的目录，我们很难利用传统的插件（如 <code>gulp-concatenate</code>）将它们正确的拼接。</p>
<p>所幸，一个叫做 <code>gulp-useref</code> 的插件解决了这个问题。</p>
<p><code>gulp-useref</code> 能将任何数量的 CSS 和 JavaScript 文件拼接成一个单独的文件。它通过查找以 <code>&lt;!--build:</code> 开头，以 <code>&lt;!--endbuild--&gt;</code> 结尾的代码块来实现的。标记语法如下：</p>
<pre class=" language-html"><code class="language-html"><span class="token comment" spellcheck="true">&lt;!-- build:&lt;type> &lt;path> --></span>
... HTML Markup, list of script / link tags
<span class="token comment" spellcheck="true">&lt;!--endbuild--></span>
</code></pre>
<p><code>&lt;type&gt;</code> 可以是 <code>js</code>, <code>css</code> , <code>remove</code> 。最好将 <code>&lt;type&gt;</code> 设置为你想拼接文件的类型。如果你把 <code>type</code> 设置为 <code>remove</code> ，Gulp 将会忽略这个 build block。</p>
<p><code>&lt;path&gt;</code> 是拼接后的文件存放的路径。</p>
<p>举个例子，比如我们想将以下 3 个 JS 文件拼接，并把拼接好的文件存放到 <code>js</code> 目录，名为 <code>main.min.js</code> 。我们可以这么写：</p>
<pre class=" language-html"><code class="language-html"><span class="token comment" spellcheck="true">&lt;!-- build:js js/main/min.js --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>js/lib/a-library.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>js/lib/another-library.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>js/main.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>
<span class="token comment" spellcheck="true">&lt;!-- endbuild --></span>
</code></pre>
<p>好了，熟悉了 <code>gulp-useref</code> 的基本标记语法，让我们来实战以下吧。先将 <code>gulp-useref</code> 安装到项目目录，并在 <code>gulpfile.js</code> 文件中引入：</p>
<pre class=" language-shell"><code class="language-shell">npm install gulp-useref --save-dev
</code></pre>
<pre class=" language-shell"><code class="language-shell">var useref = require('gulp-useref');
</code></pre>
<p>创建 <code>useref</code> 任务：</p>
<pre class=" language-javascript"><code class="language-javascript">gulp<span class="token punctuation">.</span><span class="token function">task</span><span class="token punctuation">(</span><span class="token string">'useref'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> gulp<span class="token punctuation">.</span><span class="token function">src</span><span class="token punctuation">(</span><span class="token string">'app/*.html'</span><span class="token punctuation">)</span>
        <span class="token punctuation">.</span><span class="token function">pipe</span><span class="token punctuation">(</span><span class="token function">useref</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
        <span class="token punctuation">.</span><span class="token function">pipe</span><span class="token punctuation">(</span>gulp<span class="token punctuation">.</span><span class="token function">dest</span><span class="token punctuation">(</span><span class="token string">'dist'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>然后在命令行执行 <code>gulp useref</code> ，你会发现三个脚本文件会合并为一个 <code>main.min.js</code> ，并且 html 中引用脚本的代码也自动修改了。</p>
<p>拼接完之后还需要对 JS 文件进行压缩。我们采用 <code>gulp-uglify</code> 插件来压缩 JS 文件，另外我们还需要一个 <code>gulp-if</code> 插件来保证我们只对 JS 文件进行压缩。</p>
<p>安装 <code>gulp-uglify</code> 和 <code>gulp-if</code>：</p>
<pre class=" language-shell"><code class="language-shell">npm install gulp-uglify --save-dev
npm install gulp-if --save-dev
</code></pre>
<p>在 <code>gulpfile.js</code> 中引入 <code>gulp-uglify</code> 和 <code>gulp-if</code> ：</p>
<pre class=" language-javascript"><code class="language-javascript"><span class="token keyword">var</span> uglify <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'gulp-uglify'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> gulpIf <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'gulp-if'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>修改 <code>useref</code> 任务的代码：</p>
<pre class=" language-javascript"><code class="language-javascript">gulp<span class="token punctuation">.</span><span class="token function">task</span><span class="token punctuation">(</span><span class="token string">'useref'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> gulp<span class="token punctuation">.</span><span class="token function">src</span><span class="token punctuation">(</span><span class="token string">'app/*.html'</span><span class="token punctuation">)</span>
        <span class="token punctuation">.</span><span class="token function">pipe</span><span class="token punctuation">(</span><span class="token function">useref</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
        <span class="token punctuation">.</span><span class="token function">pipe</span><span class="token punctuation">(</span><span class="token function">gulpIf</span><span class="token punctuation">(</span><span class="token string">'*.js'</span><span class="token punctuation">,</span> <span class="token function">uglify</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
        <span class="token punctuation">.</span><span class="token function">pipe</span><span class="token punctuation">(</span>gulp<span class="token punctuation">.</span><span class="token function">dest</span><span class="token punctuation">(</span><span class="token string">'dist'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>再次执行 <code>gulp useref</code>， 发现 <code>main.min.js</code> 中的代码已经是压缩过了的了。</p>
<p>我们可以用相同的方法拼接 CSS 文件，对样式的引用标签进行标记：</p>
<pre class=" language-html"><code class="language-html"><span class="token comment" spellcheck="true">&lt;!-- build:css css/styles.min.css --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>css/styles.css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>css/another-stylesheet.css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token comment" spellcheck="true">&lt;!-- endbuild --></span>
</code></pre>
<p>另外，我们再安装一个 CSS 文件的压缩插件，叫做 <code>gulp-cssnano</code> ：</p>
<pre class=" language-shell"><code class="language-shell">npm install gulp-cssnano --save-dev
</code></pre>
<p>引入 <code>gulp-cssnano</code> 并修改 <code>useref</code> 任务：</p>
<pre class=" language-javascript"><code class="language-javascript">gulp<span class="token punctuation">.</span><span class="token function">task</span><span class="token punctuation">(</span><span class="token string">'useref'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> gulp<span class="token punctuation">.</span><span class="token function">src</span><span class="token punctuation">(</span><span class="token string">'app/*.html'</span><span class="token punctuation">)</span>
        <span class="token punctuation">.</span><span class="token function">pipe</span><span class="token punctuation">(</span><span class="token function">useref</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
        <span class="token punctuation">.</span><span class="token function">pipe</span><span class="token punctuation">(</span><span class="token function">gulpIf</span><span class="token punctuation">(</span><span class="token string">'*.js'</span><span class="token punctuation">,</span> <span class="token function">uglify</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
        <span class="token punctuation">.</span><span class="token function">pipe</span><span class="token punctuation">(</span><span class="token function">gulpIf</span><span class="token punctuation">(</span><span class="token string">'*.css'</span><span class="token punctuation">,</span> <span class="token function">cssnano</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
        <span class="token punctuation">.</span><span class="token function">pipe</span><span class="token punctuation">(</span>gulp<span class="token punctuation">.</span><span class="token function">dest</span><span class="token punctuation">(</span><span class="token string">'dist'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>在命令行运行 <code>gulp useref</code> 之后，可以看到 CSS 文件也被拼接和压缩了。</p>
<p>现在通过 <code>useref</code> 任务，可以同时拼接压缩 CSS 文件和 JS 文件了。接下来让我们看看怎么优化图片吧。</p>
<h3 id="优化图片"><a href="#优化图片" class="headerlink" title="优化图片"></a>优化图片</h3><p>你可能猜到了，我们又需要安装插件了。没错，这次我们需要安装 <code>gulp-imagemin</code> 插件，专门用来压缩图片的。</p>
<p>安装并引入：</p>
<pre class=" language-shell"><code class="language-shell">npm install gulp-imagemin --save-dev
</code></pre>
<pre class=" language-javascript"><code class="language-javascript"><span class="token keyword">var</span> imagemin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'gulp-imagemin'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>我们将对 <code>png</code> , <code>jpg</code> , <code>gif</code> 和 ·<code>svg</code> 格式的图片都进行压缩，新增 <code>images</code> 任务，代码如下：</p>
<pre class=" language-javascript"><code class="language-javascript">gulp<span class="token punctuation">.</span><span class="token function">task</span><span class="token punctuation">(</span><span class="token string">'images'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> gulp<span class="token punctuation">.</span><span class="token function">src</span><span class="token punctuation">(</span><span class="token string">'app/images/**/*.+(png|jpg|gif|svg)'</span><span class="token punctuation">)</span>
        <span class="token punctuation">.</span><span class="token function">pipe</span><span class="token punctuation">(</span><span class="token function">imagemin</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
        <span class="token punctuation">.</span><span class="token function">pipe</span><span class="token punctuation">(</span>gulp<span class="token punctuation">.</span><span class="token function">dest</span><span class="token punctuation">(</span><span class="token string">'dist/images'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>不同类型的图片可以进行不同的优化，例如，你可以通过将 <code>interlaced</code> 字段设置为 <code>true</code> ，来生成 interlaced GIFs。代码如下：</p>
<pre class=" language-javascript"><code class="language-javascript">gulp<span class="token punctuation">.</span><span class="token function">task</span><span class="token punctuation">(</span><span class="token string">'images'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> gulp<span class="token punctuation">.</span><span class="token function">src</span><span class="token punctuation">(</span><span class="token string">'app/images/**/*.+(png|jpg|gif|svg)'</span><span class="token punctuation">)</span>
        <span class="token punctuation">.</span><span class="token function">pipe</span><span class="token punctuation">(</span><span class="token function">imagemin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
            <span class="token comment" spellcheck="true">// Setting interlaced to true</span>
            interlaced<span class="token punctuation">:</span> <span class="token boolean">true</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
        <span class="token punctuation">.</span><span class="token function">pipe</span><span class="token punctuation">(</span>gulp<span class="token punctuation">.</span><span class="token function">dest</span><span class="token punctuation">(</span><span class="token string">'dist/images'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>压缩图片是非常耗时的过程，为了避免没有必要的重复处理，我们使用 <code>gulp-cache</code> 插件，安装并引入：</p>
<pre class=" language-shell"><code class="language-shell">npm install gulp-cache --save-dev
</code></pre>
<pre class=" language-shell"><code class="language-shell">var cache = require('gulp-cache');
</code></pre>
<p>改进 <code>images</code> 任务的代码：</p>
<pre class=" language-javascript"><code class="language-javascript">gulp<span class="token punctuation">.</span><span class="token function">task</span><span class="token punctuation">(</span><span class="token string">'images'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> gulp<span class="token punctuation">.</span><span class="token function">src</span><span class="token punctuation">(</span><span class="token string">'app/images/**/*.+(png|jpg|gif|svg)'</span><span class="token punctuation">)</span>
        <span class="token punctuation">.</span><span class="token function">pipe</span><span class="token punctuation">(</span><span class="token function">cache</span><span class="token punctuation">(</span><span class="token function">imagemin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
            <span class="token comment" spellcheck="true">// Setting interlaced to true</span>
            interlaced<span class="token punctuation">:</span> <span class="token boolean">true</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
        <span class="token punctuation">.</span><span class="token function">pipe</span><span class="token punctuation">(</span>gulp<span class="token punctuation">.</span><span class="token function">dest</span><span class="token punctuation">(</span><span class="token string">'dist/images'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>以上便是图片的优化过程。接下来我们来处理字体目录。</p>
<h3 id="复制字体目录到-dist"><a href="#复制字体目录到-dist" class="headerlink" title="复制字体目录到 dist"></a>复制字体目录到 dist</h3><p>因为字体文件已经是优化过了的，因此我们只要将字体文件夹复制到 dist 目录即可，这个非常简单，看一下代码：</p>
<pre class=" language-javascript"><code class="language-javascript">gulp<span class="token punctuation">.</span><span class="token function">task</span><span class="token punctuation">(</span><span class="token string">'fonts'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> gulp<span class="token punctuation">.</span><span class="token function">src</span><span class="token punctuation">(</span><span class="token string">'app/fonts/**/*'</span><span class="token punctuation">)</span>
        <span class="token punctuation">.</span><span class="token function">pipe</span><span class="token punctuation">(</span>gulp<span class="token punctuation">.</span><span class="token function">dest</span><span class="token punctuation">(</span><span class="token string">'dist/fonts'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>到目前为止，我们一共有 6 个任务，它们分别是：</p>
<ul>
<li><code>sass</code> - 将 Sass 转换为 CSS</li>
<li><code>watch</code> - 监听文件的变化，实时刷新浏览器</li>
<li><code>browserSync</code> - 创建本地 web 服务器</li>
<li><code>useref</code> - 拼接并压缩 JS 和 CSS 文件</li>
<li><code>images</code> - 压缩图片资源</li>
<li><code>fonts</code> - 复制字体文件夹</li>
</ul>
<p>每一个任务我们都得单独用不同的命令调用，因此我们想把所有任务整合到一个命令。在我们这么做之前，让我们先看看如何自动清除生成的文件。</p>
<h3 id="自动清除生成的文件"><a href="#自动清除生成的文件" class="headerlink" title="自动清除生成的文件"></a>自动清除生成的文件</h3><p>前面我们已经学会了如何自动生成文件，那么当我们不需要某些文件时，如何自动清除它们呢。我们使用 <code>del</code> 来帮助我们完成清除。首先，在项目中安装 <code>del</code> 。</p>
<pre class=" language-shell"><code class="language-shell">npm install del --save-dev
</code></pre>
<p>在 <code>gulpfile.js</code> 中引入：</p>
<pre class=" language-javascript"><code class="language-javascript"><span class="token keyword">var</span> del <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'del'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>添加 <code>clean:dist</code> 任务：</p>
<pre class=" language-javascript"><code class="language-javascript">gulp<span class="token punctuation">.</span><span class="token function">task</span><span class="token punctuation">(</span><span class="token string">'clean:dist'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> del<span class="token punctuation">.</span><span class="token function">sync</span><span class="token punctuation">(</span><span class="token string">'dist'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>另外，如果我们想清除缓存，再创建一个 <code>cache:clear</code> 任务：</p>
<pre class=" language-javascript"><code class="language-javascript">gulp<span class="token punctuation">.</span><span class="token function">task</span><span class="token punctuation">(</span><span class="token string">'cache:clear'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> cache<span class="token punctuation">.</span><span class="token function">clearAll</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>OK! 现在我们来将多个任务整合到一起吧！</p>
<h3 id="整合-Gulp-任务"><a href="#整合-Gulp-任务" class="headerlink" title="整合 Gulp 任务"></a>整合 Gulp 任务</h3><p>到目前为止我们所有的任务可以分为两类：</p>
<ul>
<li>第一类是开发过程中的任务。包括将 Sass 编译为 CSS，监听源文件变化并重新刷新浏览器</li>
<li>第二类是优化过程中的任务。包括优化资源文件 CSS，JavaScript 和图片，以及将字体文件夹从 <code>app</code> 复制到 <code>dist</code> </li>
</ul>
<p>我们已经将第一类任务整合为一个简单的 <code>gulp watch</code> 命令。</p>
<p>第二类的任务包括 <code>clean:dist</code> , <code>sass</code> , <code>useref</code> , <code>images</code> , <code>fonts</code> ，我们通过创建一个 <code>build</code> 任务将它们整合到一起。</p>
<pre class=" language-javascript"><code class="language-javascript">gulp<span class="token punctuation">.</span><span class="token function">task</span><span class="token punctuation">(</span><span class="token string">'build'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'clean:dist'</span><span class="token punctuation">,</span> <span class="token string">'sass'</span><span class="token punctuation">,</span> <span class="token string">'useref'</span><span class="token punctuation">,</span> <span class="token string">'images'</span><span class="token punctuation">,</span> <span class="token string">'fonts'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Building files'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>然后，上述代码是有问题的。有可能 <code>clean:dist</code> 任务还没有完成，<code>sass</code> ， <code>useref</code> ，甚至 <code>images</code> 都执行完了，这会导致新生成的文件都会被 <code>clean:dist</code> 删除。</p>
<p>为了保证任务的执行顺序，我们需要安装一个额外的插件 <code>run-sequence</code> 。</p>
<pre class=" language-shell"><code class="language-shell">npm install run-sequence --save-dev
</code></pre>
<p>引入 <code>run-sequence</code> ，并更新 <code>build</code> 任务：</p>
<pre class=" language-javascript"><code class="language-javascript"><span class="token keyword">var</span> runSequence <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'run-sequence'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">function</span> <span class="token function">onBuild</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Build successfully'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

gulp<span class="token punctuation">.</span><span class="token function">task</span><span class="token punctuation">(</span><span class="token string">'build'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span>onBuild<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token function">runSequence</span><span class="token punctuation">(</span><span class="token string">'clean:dist'</span><span class="token punctuation">,</span>
        <span class="token punctuation">[</span><span class="token string">'sass'</span><span class="token punctuation">,</span> <span class="token string">'useref'</span><span class="token punctuation">,</span> <span class="token string">'images'</span><span class="token punctuation">,</span> <span class="token string">'fonts'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
        onBuild
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>以上代码确保了 <code>clean:dist</code> 任务首先执行，等它执行完成后，才开始执行后续的任务，后续这些任务的执行顺序无关紧要，所以将它们放到同一个数组中。全部任务执行完之后，调用我们自定义的回调函数 <code>onBuild</code> 。</p>
<p>为了保证前后一致，我们将前面定义的 <code>watch</code> 任务也用 <code>run-sequence</code> 来实现。</p>
<pre class=" language-javascript"><code class="language-javascript">gulp<span class="token punctuation">.</span><span class="token function">task</span><span class="token punctuation">(</span><span class="token string">'watch'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    gulp<span class="token punctuation">.</span><span class="token function">watch</span><span class="token punctuation">(</span><span class="token string">'app/scss/**/*.scss'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'sass'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment" spellcheck="true">// 当 HTML 或 JS 文件发生变化时，重新载入浏览器</span>
    gulp<span class="token punctuation">.</span><span class="token function">watch</span><span class="token punctuation">(</span><span class="token string">'app/*.html'</span><span class="token punctuation">,</span> browserSync<span class="token punctuation">.</span>reload<span class="token punctuation">)</span><span class="token punctuation">;</span>
    gulp<span class="token punctuation">.</span><span class="token function">watch</span><span class="token punctuation">(</span><span class="token string">'app/js/**/*.js'</span><span class="token punctuation">,</span> browserSync<span class="token punctuation">.</span>reload<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

gulp<span class="token punctuation">.</span><span class="token function">task</span><span class="token punctuation">(</span><span class="token string">'default'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token function">runSequence</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'sass'</span><span class="token punctuation">,</span> <span class="token string">'browserSync'</span><span class="token punctuation">,</span> <span class="token string">'watch'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>注意到，我们去掉了 <code>watch</code> 原先的第二个参数，而是把 <code>sass</code> , <code>broserSync</code> 和 <code>watch</code> 任务通过 <code>run-sequence</code> 整合到了一个 <code>default</code> 任务。为什么要命名为 <code>default</code> 呢？因此这样我们只要简单的在命令行运行 <code>gulp</code> ，就可以很方便的执行这个任务了。</p>
]]></content>
      
        <categories>
            
            <category> Front End </category>
            
        </categories>
        
        
        <tags>
            
            <tag> Gulp </tag>
            
            <tag> 前端工程化 </tag>
            
            <tag> Node.js </tag>
            
        </tags>
        
    </entry>
    
    <entry>
      <title><![CDATA[从地图类型切换控件谈JS代码优化]]></title>
      <url>http://nightn.com/2017/11/28/js-optimize-maptype-demo/</url>
      <content type="html"><![CDATA[<p>本文以 JavaScript 开发自定义百度地图类型切换控件为主线，记录了控件从实现到一步步优化过程中的思考与总结，其中不少关于 JavaScript 代码优化的 tip 在很多场合都很实用。主要知识点包括：HTML 与 CSS 之间的松耦合、JS 的事件委托、HTML 自定义特性、DOM 节点访问及遍历、JQuery 常用方法的使用及百度地图 API 的调用等。这些都是比较基础的知识点，在此尽可能完整的记录，以便今后查阅及完善。</p>
<a id="more"></a>
<h2 id="一、实现"><a href="#一、实现" class="headerlink" title="一、实现"></a>一、实现</h2><h3 id="1-百度-API-内部实现"><a href="#1-百度-API-内部实现" class="headerlink" title="1. 百度 API 内部实现"></a>1. 百度 API 内部实现</h3><p>百度地图 JS 版本 API 引入及地图初始化可以参考<a href="http://developer.baidu.com/map/jsdemo.htm#a1_2" target="_blank" rel="external">百度地图API示例</a> ，在此不再赘述，给出基本的地图展示及内置地图类型切换控件的代码，如下：</p>
<pre class=" language-javascript"><code class="language-javascript"><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment" spellcheck="true">// 地图初始化</span>
  <span class="token keyword">var</span> map <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">BMap<span class="token punctuation">.</span>Map</span><span class="token punctuation">(</span><span class="token string">'map'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  map<span class="token punctuation">.</span><span class="token function">centerAndZoom</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">BMap<span class="token punctuation">.</span>Point</span><span class="token punctuation">(</span><span class="token number">116.404</span><span class="token punctuation">,</span> <span class="token number">39.915</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token number">13</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token comment" spellcheck="true">// 添加地图切换控件</span>
  map<span class="token punctuation">.</span><span class="token function">addControl</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">BMap<span class="token punctuation">.</span>MapTypeControl</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    mapTypes<span class="token punctuation">:</span> <span class="token punctuation">[</span>
      BMAP_NORMAL_MAP<span class="token punctuation">,</span>
      BMAP_HYBRID_MAP
    <span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>实现效果如下：</p>
<p><img src="http://on2kkr82s.bkt.clouddn.com/17-11-28/42778500.jpg" width="400"></p>
<p>虽然可以实现基本的地图类型切换，但关于自定义样式和控件显示位置上有很多限制，因此以下提供地图类型切换控件的自定义实现。</p>
<h3 id="2-自定义实现"><a href="#2-自定义实现" class="headerlink" title="2. 自定义实现"></a>2. 自定义实现</h3><p>自定义实现将新增一个 div 控件元素，并将其添加到地图之上，自定义控件包括「地图」、「卫星」、「混合」三种地图类型的切换。</p>
<p>HTML 代码：</p>
<pre class=" language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>map-control<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ctrl1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>地图<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ctrl2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>卫星<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ctrl3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>混合<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
</code></pre>
<p>CSS 样式：</p>
<pre class=" language-css"><code class="language-css"><span class="token selector"><span class="token id">#map-control</span> </span><span class="token punctuation">{</span>
  <span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">120</span>px<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">30</span>px<span class="token punctuation">;</span>
  <span class="token property">line-height</span><span class="token punctuation">:</span> <span class="token number">30</span>px<span class="token punctuation">;</span>
  <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
  <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
  <span class="token property">top</span><span class="token punctuation">:</span> <span class="token number">10</span>px<span class="token punctuation">;</span>
  <span class="token property">right</span><span class="token punctuation">:</span> <span class="token number">10</span>px<span class="token punctuation">;</span>
  <span class="token property">border</span><span class="token punctuation">:</span> <span class="token number">1</span>px solid <span class="token hexcode">#8EA8E0</span><span class="token punctuation">;</span>
  <span class="token property">border-radius</span><span class="token punctuation">:</span> <span class="token number">4</span>px<span class="token punctuation">;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token hexcode">#FFF</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector"><span class="token id">#map-control</span> > div </span><span class="token punctuation">{</span>
  <span class="token property">flex</span><span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">;</span>
  <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector"><span class="token id">#ctrl1</span> </span><span class="token punctuation">{</span>
  <span class="token property">color</span><span class="token punctuation">:</span> <span class="token hexcode">#FFF</span><span class="token punctuation">;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token hexcode">#8EA8E0</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<p>map-control 采用 flext 的布局，让三个子 div 横向均匀分布；另外，position 属性采用 absolute，使其位于地图上方。在此，将 ctrl1 块的样式初始化为激活状态。<strong>第 1 版的 JS 代码如下</strong>：</p>
<pre class=" language-javascript"><code class="language-javascript"><span class="token keyword">var</span> ctrl1 <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'ctrl1'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> ctrl2 <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'ctrl2'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> ctrl3 <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'ctrl3'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment" spellcheck="true">/**
* Version 1
* 为三个子元素分别添加 DOM2 级事件处理程序，处理样式及地图切换
*/</span>
ctrl1<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment" spellcheck="true">// 去除其他两个子元素的激活样式</span>
  ctrl2<span class="token punctuation">.</span>style<span class="token punctuation">.</span>color <span class="token operator">=</span> <span class="token string">'#000'</span><span class="token punctuation">;</span>
  ctrl2<span class="token punctuation">.</span>style<span class="token punctuation">.</span>backgroundColor <span class="token operator">=</span> <span class="token string">'#FFF'</span><span class="token punctuation">;</span>
  ctrl3<span class="token punctuation">.</span>style<span class="token punctuation">.</span>color <span class="token operator">=</span> <span class="token string">'#000'</span><span class="token punctuation">;</span>
  ctrl3<span class="token punctuation">.</span>style<span class="token punctuation">.</span>backgroundColor <span class="token operator">=</span> <span class="token string">'#FFF'</span><span class="token punctuation">;</span>
  <span class="token comment" spellcheck="true">// 为当前元素添加激活样式</span>
  ctrl1<span class="token punctuation">.</span>style<span class="token punctuation">.</span>color <span class="token operator">=</span> <span class="token string">'#FFF'</span><span class="token punctuation">;</span>
  ctrl1<span class="token punctuation">.</span>style<span class="token punctuation">.</span>backgroundColor <span class="token operator">=</span> <span class="token string">'#8EA8E0'</span><span class="token punctuation">;</span>
  <span class="token comment" spellcheck="true">// 地图类型切换</span>
  map<span class="token punctuation">.</span><span class="token function">setMapType</span><span class="token punctuation">(</span>BMAP_NORMAL_MAP<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

ctrl2<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment" spellcheck="true">// 去除其他两个子元素的激活样式</span>
  ctrl1<span class="token punctuation">.</span>style<span class="token punctuation">.</span>color <span class="token operator">=</span> <span class="token string">'#000'</span><span class="token punctuation">;</span>
  ctrl1<span class="token punctuation">.</span>style<span class="token punctuation">.</span>backgroundColor <span class="token operator">=</span> <span class="token string">'#FFF'</span><span class="token punctuation">;</span>
  ctrl3<span class="token punctuation">.</span>style<span class="token punctuation">.</span>color <span class="token operator">=</span> <span class="token string">'#000'</span><span class="token punctuation">;</span>
  ctrl3<span class="token punctuation">.</span>style<span class="token punctuation">.</span>backgroundColor <span class="token operator">=</span> <span class="token string">'#FFF'</span><span class="token punctuation">;</span>
  <span class="token comment" spellcheck="true">// 为当前元素添加激活样式</span>
  ctrl2<span class="token punctuation">.</span>style<span class="token punctuation">.</span>color <span class="token operator">=</span> <span class="token string">'#FFF'</span><span class="token punctuation">;</span>
  ctrl2<span class="token punctuation">.</span>style<span class="token punctuation">.</span>backgroundColor <span class="token operator">=</span> <span class="token string">'#8EA8E0'</span><span class="token punctuation">;</span>
  <span class="token comment" spellcheck="true">// 地图类型切换</span>
  map<span class="token punctuation">.</span><span class="token function">setMapType</span><span class="token punctuation">(</span>BMAP_SATELLITE_MAP<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

ctrl3<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment" spellcheck="true">// 去除其他两个子元素的激活样式</span>
  ctrl1<span class="token punctuation">.</span>style<span class="token punctuation">.</span>color <span class="token operator">=</span> <span class="token string">'#000'</span><span class="token punctuation">;</span>
  ctrl1<span class="token punctuation">.</span>style<span class="token punctuation">.</span>backgroundColor <span class="token operator">=</span> <span class="token string">'#FFF'</span><span class="token punctuation">;</span>
  ctrl2<span class="token punctuation">.</span>style<span class="token punctuation">.</span>color <span class="token operator">=</span> <span class="token string">'#000'</span><span class="token punctuation">;</span>
  ctrl2<span class="token punctuation">.</span>style<span class="token punctuation">.</span>backgroundColor <span class="token operator">=</span> <span class="token string">'#FFF'</span><span class="token punctuation">;</span>
  <span class="token comment" spellcheck="true">// 为当前元素添加激活样式</span>
  ctrl3<span class="token punctuation">.</span>style<span class="token punctuation">.</span>color <span class="token operator">=</span> <span class="token string">'#FFF'</span><span class="token punctuation">;</span>
  ctrl3<span class="token punctuation">.</span>style<span class="token punctuation">.</span>backgroundColor <span class="token operator">=</span> <span class="token string">'#8EA8E0'</span><span class="token punctuation">;</span>
  <span class="token comment" spellcheck="true">// 地图类型切换</span>
  map<span class="token punctuation">.</span><span class="token function">setMapType</span><span class="token punctuation">(</span>BMAP_HYBRID_MAP<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>上述程序完全能够实现地图类型的切换效果，但是存在很多问题：</p>
<ul>
<li><strong>HTML 与 CSS 耦合严重</strong>。利用 JS 对每个元素的样式进行直接修改是很不可取的，一方面导致代码冗余，另一方面如果有一处需要修改，那其余地方都得修改。（如现在需要将元素激活时的背景元素从蓝色改变为绿色，那么就得修改三个事件处理程序的语句）。</li>
<li><strong>事件处理程序繁多，扩展性差</strong>。可以看到，上述每一个子元素都添加了一个事件处理程序，代码复用性差的同时，也提高了程序运行时的内存占用。</li>
<li>其他问题下文论述。</li>
</ul>
<p>针对以上实现存在的问题，以下提出逐步改进方案。</p>
<h2 id="二、改进"><a href="#二、改进" class="headerlink" title="二、改进"></a>二、改进</h2><h3 id="1-降低-HTML-与-CSS-的耦合"><a href="#1-降低-HTML-与-CSS-的耦合" class="headerlink" title="1. 降低 HTML 与 CSS 的耦合"></a>1. 降低 HTML 与 CSS 的耦合</h3><p>低耦合是软件设计的基本原则，为了降低 HTML  和 CSS 的耦合，我们引入一个新的 CSS 类：current，它表示当前选中元素的样式：</p>
<pre class=" language-css"><code class="language-css"><span class="token selector"><span class="token id">#map-control</span> <span class="token class">.current</span> </span><span class="token punctuation">{</span>
  <span class="token property">color</span><span class="token punctuation">:</span> <span class="token hexcode">#FFF</span><span class="token punctuation">;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token hexcode">#8EA8E0</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<p><strong>第 2 版 JS 代码如下</strong>：</p>
<pre class=" language-javascript"><code class="language-javascript"><span class="token comment" spellcheck="true">/**
* Version 2
* 利用 current 样式类，降低 HTML 和 CSS 的耦合
*/</span>
ctrl1<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  ctrl2<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span><span class="token string">'current'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  ctrl3<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span><span class="token string">'current'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  ctrl1<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'current'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  map<span class="token punctuation">.</span><span class="token function">setMapType</span><span class="token punctuation">(</span>BMAP_NORMAL_MAP<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

ctrl2<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  ctrl1<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span><span class="token string">'current'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  ctrl3<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span><span class="token string">'current'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  ctrl2<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'current'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  map<span class="token punctuation">.</span><span class="token function">setMapType</span><span class="token punctuation">(</span>BMAP_SATELLITE_MAP<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

ctrl3<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  ctrl1<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span><span class="token string">'current'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  ctrl2<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span><span class="token string">'current'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  ctrl3<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'current'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  map<span class="token punctuation">.</span><span class="token function">setMapType</span><span class="token punctuation">(</span>BMAP_HYBRID_MAP<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>通过以上改进，我们将样式与元素相分离，若要修改激活元素的样式，只需要修改 current 样式类即可。</p>
<blockquote>
<p><strong>Tip 1 解耦 HTML/CSS</strong></p>
<p>在使用 JavaScript 修改元素样式的时候，尽量修改元素的样式类，而不是直接修改样式本身。</p>
</blockquote>
<h3 id="2-使用事件委托"><a href="#2-使用事件委托" class="headerlink" title="2. 使用事件委托"></a>2. 使用事件委托</h3><p>以上代码还可以进一步改进。我们知道在 DOM 事件冒泡的过程中，事件的触发是从当前元素逐级往上传递，因此当我们需要监听很多子元素事件的时候，实际上只监听其父元素的事件即可，当然需要在父元素的事件处理程序中对当前点击的子元素进行具体的判断。这样一来可以减少事件处理程序的数量，提供代码复用和内存利用率。这种方法就叫作事件委托。</p>
<p><strong>第 3 版 js 代码如下</strong>：</p>
<pre class=" language-javascript"><code class="language-javascript"><span class="token comment" spellcheck="true">/**
* Version 3
* 使用事件委托，减少事件处理程序数目
*/</span>
<span class="token keyword">var</span> mapControl <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'map-control'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
mapControl<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span>event<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">var</span> child <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>firstElementChild<span class="token punctuation">;</span>
  <span class="token keyword">while</span><span class="token punctuation">(</span>child <span class="token operator">!==</span> <span class="token keyword">this</span><span class="token punctuation">.</span>lastElementChild<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    child<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span><span class="token string">'current'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    child <span class="token operator">=</span> child<span class="token punctuation">.</span>nextElementSibling<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  child<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span><span class="token string">'current'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  event<span class="token punctuation">.</span>target<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'current'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">switch</span><span class="token punctuation">(</span>event<span class="token punctuation">.</span>target<span class="token punctuation">.</span>id<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">case</span> <span class="token string">'ctrl1'</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
      map<span class="token punctuation">.</span><span class="token function">setMapType</span><span class="token punctuation">(</span>BMAP_NORMAL_MAP<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">break</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">case</span> <span class="token string">'ctrl2'</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
      map<span class="token punctuation">.</span><span class="token function">setMapType</span><span class="token punctuation">(</span>BMAP_SATELLITE_MAP<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">break</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">case</span> <span class="token string">'ctrl3'</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
      map<span class="token punctuation">.</span><span class="token function">setMapType</span><span class="token punctuation">(</span>BMAP_HYBRID_MAP<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">break</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>第 3 版代码看起来比第 2 版还要复杂，但它的思路是非常简单的。在父元素 mapControl 添加一个事件处理函数，该函数有一个事件对象 event，它记录当前被点击元素的一些属性以及本次事件的一些属性，利用我们可以通过 event.target 获取到当前点击的元素。在事件处理函数内部，我们首先遍历了 mapControl 的子元素，并将它们的样式类 current 都移除掉（原生 JS 遍历确实有点麻烦，在这里用 do-while 循环应该更好），然后通过 event.target 获取当前点击的元素，并将样式类 current 添加到该元素，以上完成了点击时的样式切换。</p>
<p>接下来是点击后的地图类型切换了，在此利用 event.target.id 属性确定当前点击的是哪一个元素，然后再设置对应的地图类型。总的来说，利用事件委托可以将事件处理程序的数目降到最少，提高代码复用。</p>
<blockquote>
<p><strong>Tip 2 使用事件委托</strong></p>
<p>如果要为多个并列的元素分别添加类似的事件处理程序，可以考虑利用事件委托，将事件处理程序添加到这些并列元素的父元素上。</p>
</blockquote>
<h3 id="3-自定义-HTML-特性"><a href="#3-自定义-HTML-特性" class="headerlink" title="3. 自定义 HTML 特性"></a>3. 自定义 HTML 特性</h3><p>以上 switch 语句看起来很不优雅，代码量很大，看起来很尴尬。为此我们引入一个 mapTypeArr 的数组，并为 mapControl 元素下的每一个 div 添加一个自定义属性，从而不再需要 id 属性。</p>
<p>更新后的 HTML 代码如下：</p>
<pre class=" language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>map-control<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">data-maptype</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>current<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>地图<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">data-maptype</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>卫星<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">data-maptype</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>混合<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
</code></pre>
<p><strong>第 4 版 js 代码如下</strong>：</p>
<pre class=" language-javascript"><code class="language-javascript"><span class="token comment" spellcheck="true">/**
* Version 4
* 利用 HTML 自定义特性，避免 switch
 */</span>
<span class="token keyword">var</span> mapControl <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'map-control'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> mapTypeArr <span class="token operator">=</span> <span class="token punctuation">[</span>BMAP_NORMAL_MAP<span class="token punctuation">,</span> BMAP_SATELLITE_MAP<span class="token punctuation">,</span> BMAP_HYBRID_MAP<span class="token punctuation">]</span><span class="token punctuation">;</span>
mapControl<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span>event<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">var</span> child <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>firstElementChild<span class="token punctuation">;</span>
  <span class="token keyword">var</span> target <span class="token operator">=</span> event<span class="token punctuation">.</span>target<span class="token punctuation">;</span>
  <span class="token keyword">while</span><span class="token punctuation">(</span>child <span class="token operator">!==</span> <span class="token keyword">this</span><span class="token punctuation">.</span>lastElementChild<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    child<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span><span class="token string">'current'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    child <span class="token operator">=</span> child<span class="token punctuation">.</span>nextElementSibling<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  child<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span><span class="token string">'current'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  target<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'current'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  map<span class="token punctuation">.</span><span class="token function">setMapType</span><span class="token punctuation">(</span>mapTypeArr<span class="token punctuation">[</span><span class="token function">parseInt</span><span class="token punctuation">(</span>target<span class="token punctuation">.</span><span class="token function">getAttribute</span><span class="token punctuation">(</span><span class="token string">'data-maptype'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>第 4 版代码同第 3 版相比，通过自定义的 HTML 特性和一个 mapTypeArr 数组，优化了 setMapType() 相关语句。</p>
<blockquote>
<p><strong>Tip3 HTML 自定义特性</strong></p>
<p>我们可以自定义 HTML 元素的特性，自定义的特性一般以 data- 开头，统一采用小写。原生 DOM 元素的 getAttribute() 方法也能获取元素的自定义特性。</p>
</blockquote>
<p>另外可以注意到一个细节，event.target 使用了多次，为了提高程序性能，我们用了一个局部变量 target 将 event.target 保存起来，避免属性的全局查找。</p>
<blockquote>
<p><strong>Tip4 避免属性的全局查找</strong></p>
<p>如果经常需要用到元素的某一个属性，为了避免每一次调用时都进行一次查找，可以用一个局部变量将该属性进行缓存。避免使用 with，因为 with 会加长作用域链，使得属性的查找变慢。</p>
</blockquote>
<h3 id="4-使用-JQuery-改进元素查找"><a href="#4-使用-JQuery-改进元素查找" class="headerlink" title="4. 使用 JQuery 改进元素查找"></a>4. 使用 JQuery 改进元素查找</h3><p>从第 4 版 js 代码可以看到，程序依然比较冗长的原因主要是在元素的遍历部分。为此，我们使用 JQuery 改进元素的查找。</p>
<p><strong>第 5 版 js 代码如下</strong>：</p>
<pre class=" language-javascript"><code class="language-javascript"><span class="token comment" spellcheck="true">/**
* Version 5
* 使用 jquery 改进元素查找
*/</span>
<span class="token keyword">var</span> $mapControl <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#map-control'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> mapTypeArr <span class="token operator">=</span> <span class="token punctuation">[</span>BMAP_NORMAL_MAP<span class="token punctuation">,</span> BMAP_SATELLITE_MAP<span class="token punctuation">,</span> BMAP_HYBRID_MAP<span class="token punctuation">]</span><span class="token punctuation">;</span>
$mapControl<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span>event<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">var</span> $target <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span>event<span class="token punctuation">.</span>target<span class="token punctuation">)</span><span class="token punctuation">;</span>
  $target<span class="token punctuation">.</span><span class="token function">addClass</span><span class="token punctuation">(</span><span class="token string">'current'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">siblings</span><span class="token punctuation">(</span><span class="token string">'div'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">removeClass</span><span class="token punctuation">(</span><span class="token string">'current'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  map<span class="token punctuation">.</span><span class="token function">setMapType</span><span class="token punctuation">(</span>mapTypeArr<span class="token punctuation">[</span>$target<span class="token punctuation">.</span><span class="token function">attr</span><span class="token punctuation">(</span><span class="token string">'data-maptype'</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>使用了 JQuery 后，地图类型切换控件的实现变得非常的精简。通过事件对象 event 获取当前当前的元素，并将其转换为 JQuery 元素对象，并利用 JQuery 的链式编程方法，用一条语句激活当前元素的样式，并去除其他元素的样式。最后设置地图类型。虽然 JQuery 性能不一定比得上原生 JS，但可以极大的简化代码量，这在很多场合是非常用帮助的。</p>
<blockquote>
<p><strong>Tip5 合理使用 JQuery 可以极大精简你的代码</strong></p>
</blockquote>
<h2 id="三、总结"><a href="#三、总结" class="headerlink" title="三、总结"></a>三、总结</h2><p>以上便是「从地图类型切换控件谈 JS 代码优化」的全部内容，后续如果有更加简单高效的实现方式，再进行补充，也欢迎大家提出自己的思路。以下将优化过程中用到的 Tip 进行总结：</p>
<ul>
<li><p>Tip 1 解耦 HTML/CSS</p>
<p>在使用 JavaScript 修改元素样式的时候，尽量修改元素的样式类，而不是直接修改样式本身。</p>
</li>
<li><p>Tip 2 使用事件委托</p>
<p>如果要为多个并列的元素分别添加类似的事件处理程序，可以考虑利用事件委托，将事件处理程序添加到这些并列元素的父元素上。</p>
</li>
<li><p>Tip3 HTML 自定义特性</p>
<p>我们可以自定义 HTML 元素的特性，自定义的特性一般以 data- 开头，统一采用小写。原生 DOM 元素的 getAttribute() 方法也能获取元素的自定义特性。</p>
</li>
<li><p>Tip4 避免属性的全局查找</p>
<p>如果经常需要用到元素的某一个属性，为了避免每一次调用时都进行一次查找，可以用一个局部变量将该属性进行缓存。避免使用 with，因为 with 会加长作用域链，使得属性的查找变慢。</p>
</li>
<li><p>Tip5 合理使用 JQuery 可以极大精简你的代码</p>
</li>
</ul>
<hr>
<p>原文地址：<a href="http://nightn.com/2017/11/28/js-optimize-maptype-demo">http://nightn.com/2017/11/28/js-optimize-maptype-demo</a></p>
]]></content>
      
        <categories>
            
            <category> JavaScript </category>
            
        </categories>
        
        
        <tags>
            
            <tag> JavaScript </tag>
            
            <tag> 百度地图 </tag>
            
            <tag> JS事件 </tag>
            
            <tag> JQuery </tag>
            
        </tags>
        
    </entry>
    
    <entry>
      <title><![CDATA[数据结构学习笔记：排序算法]]></title>
      <url>http://nightn.com/2017/06/07/DSA-sorting/</url>
      <content type="html"><![CDATA[<p>本文对常见排序算法进行了总结，如插入排序、希尔排序、桶排序、快速排序等。对于每个排序算法，给出它的概述、简单实现及复杂度分析。</p>
<a id="more"></a>
<h2 id="1-插入排序"><a href="#1-插入排序" class="headerlink" title="1. 插入排序"></a>1. 插入排序</h2><h3 id="1-1-插入排序概述"><a href="#1-1-插入排序概述" class="headerlink" title="1.1 插入排序概述"></a>1.1 插入排序概述</h3><p><strong>插入排序（Insertion Sort）</strong>是一种非常简单的排序方法，对于大小为 N 的数组，考虑初始状态为单独的第一个元素，之后每次插入一个元素，使得子数组总处于排序好的状态，这样，经过 N-1 次插入，整个数组将处于有序状态。下表以一个简单的例子来描述插入排序的过程。</p>
<table>
<thead>
<tr>
<th></th>
<th style="text-align:center">A[0]</th>
<th style="text-align:center">A[1]</th>
<th style="text-align:center">A[2]</th>
<th style="text-align:center">A[3]</th>
<th style="text-align:center">A[4]</th>
<th style="text-align:center">移动次数</th>
</tr>
</thead>
<tbody>
<tr>
<td>原始序列</td>
<td style="text-align:center"><strong>42</strong></td>
<td style="text-align:center">31</td>
<td style="text-align:center">50</td>
<td style="text-align:center">17</td>
<td style="text-align:center">20</td>
<td style="text-align:center">/</td>
</tr>
<tr>
<td>第 1 次插入</td>
<td style="text-align:center"><strong>31</strong></td>
<td style="text-align:center"><strong>42</strong></td>
<td style="text-align:center">50</td>
<td style="text-align:center">17</td>
<td style="text-align:center">20</td>
<td style="text-align:center">1</td>
</tr>
<tr>
<td>第 2 次插入</td>
<td style="text-align:center"><strong>31</strong></td>
<td style="text-align:center"><strong>42</strong></td>
<td style="text-align:center"><strong>50</strong></td>
<td style="text-align:center">17</td>
<td style="text-align:center">20</td>
<td style="text-align:center">0</td>
</tr>
<tr>
<td>第 3 次插入</td>
<td style="text-align:center"><strong>17</strong></td>
<td style="text-align:center"><strong>31</strong></td>
<td style="text-align:center"><strong>42</strong></td>
<td style="text-align:center"><strong>50</strong></td>
<td style="text-align:center">20</td>
<td style="text-align:center">3</td>
</tr>
<tr>
<td>第 4 次插入</td>
<td style="text-align:center"><strong>17</strong></td>
<td style="text-align:center"><strong>20</strong></td>
<td style="text-align:center"><strong>31</strong></td>
<td style="text-align:center"><strong>42</strong></td>
<td style="text-align:center"><strong>50</strong></td>
<td style="text-align:center">3</td>
</tr>
</tbody>
</table>
<p>表中对一个大小 N = 5 的数组进行插入排序，初始状态认为只有第一个元素 42 处于排序好的状态，第 1 次将 31 插入子序列，由于插入后，子序列将不再处于有序状态，因此需要进行元素交换，在此交换 1 次即可；然后进行第 2 次，第 3 次插入，每次都对当前子序列进行排序（表中粗体部分表示当前已经排序好的序列），以此类推，直到第 N - 1 次（在此是第 4 次）插入，整个序列都将排好序。</p>
<h3 id="1-2-插入排序实现"><a href="#1-2-插入排序实现" class="headerlink" title="1.2 插入排序实现"></a>1.2 插入排序实现</h3><p>插入排序的实现也非常简单，在此以 C 语言为例，对大小为 N 的数组进行排序，代码如下。</p>
<pre class=" language-c"><code class="language-c"><span class="token keyword">void</span> <span class="token function">InsertionSort_swap</span><span class="token punctuation">(</span><span class="token keyword">int</span> A<span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token keyword">int</span> N<span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">int</span> i <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> N<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">int</span> j <span class="token operator">=</span> i<span class="token punctuation">;</span> j <span class="token operator">></span> <span class="token number">0</span> <span class="token operator">&amp;&amp;</span> A<span class="token punctuation">[</span>j<span class="token punctuation">]</span> <span class="token operator">&lt;</span> A<span class="token punctuation">[</span>j <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">;</span> j<span class="token operator">--</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
            <span class="token keyword">int</span> temp <span class="token operator">=</span> A<span class="token punctuation">[</span>j<span class="token punctuation">]</span><span class="token punctuation">;</span>
            A<span class="token punctuation">[</span>j<span class="token punctuation">]</span> <span class="token operator">=</span> A<span class="token punctuation">[</span>j <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
            A<span class="token punctuation">[</span>j <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">]</span> <span class="token operator">=</span> temp<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre>
<p>外层 for 循环表示从第 1 次到 第 N-1 次插入，内层 for 循环表示对于每一次插入，都将新元素与原有元素进行比较，如果前者较小，则往前移动一位，直至达到有序状态。</p>
<p>上述实现虽然简单易懂，但只要仔细观察，就能发现仍有改进的余地。内层 for 循环我们通过 3 次赋值来实现相邻元素的交换，而事实上，对于新插入的元素，我们只是把当做一个比较的基准，我们不应该在每一次比较后都对这一基准进行移动，以避免显示的元素交换。因此，我们有了如下的实现。</p>
<pre class=" language-c"><code class="language-c"><span class="token keyword">void</span> <span class="token function">InsertionSort</span><span class="token punctuation">(</span><span class="token keyword">int</span> A<span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token keyword">int</span> N<span class="token punctuation">)</span><span class="token punctuation">{</span>
      <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">int</span> i <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> N<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
          <span class="token keyword">int</span> temp <span class="token operator">=</span> A<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">;</span>
          <span class="token keyword">int</span> j<span class="token punctuation">;</span>
          <span class="token keyword">for</span><span class="token punctuation">(</span>j <span class="token operator">=</span> i<span class="token punctuation">;</span> j <span class="token operator">></span> <span class="token number">0</span> <span class="token operator">&amp;&amp;</span> temp <span class="token operator">&lt;</span> A<span class="token punctuation">[</span>j <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">;</span> j<span class="token operator">--</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
              A<span class="token punctuation">[</span>j<span class="token punctuation">]</span> <span class="token operator">=</span> A<span class="token punctuation">[</span>j <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
          <span class="token punctuation">}</span>
          A<span class="token punctuation">[</span>j<span class="token punctuation">]</span> <span class="token operator">=</span> temp<span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre>
<p>改进之后，避免了繁琐的元素交换。在本机测试中，算法的性能也得到提升。</p>
<table>
<thead>
<tr>
<th style="text-align:center">Algorithm</th>
<th style="text-align:center">InsertionSort_swap</th>
<th style="text-align:center">InsertionSort</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:center">N = 20000</td>
<td style="text-align:center">0.410 s</td>
<td style="text-align:center">0.269 s</td>
</tr>
<tr>
<td style="text-align:center">N = 50000</td>
<td style="text-align:center">2.443 s</td>
<td style="text-align:center">1.570 s</td>
</tr>
<tr>
<td style="text-align:center">N = 100000</td>
<td style="text-align:center">9.675 s</td>
<td style="text-align:center">6.123 s</td>
</tr>
</tbody>
</table>
<h3 id="1-3-插入排序分析"><a href="#1-3-插入排序分析" class="headerlink" title="1.3 插入排序分析"></a>1.3 插入排序分析</h3><p>从 <strong>InsertionSort_swap</strong> 和 <strong>InsertionSort</strong> 的对比中，可以看到不使用显示交换时，算法性能的提升。另外还可以看到，随着 N 的增加，算法耗时并不是线性增长的，基本上是呈现 $N^2$ 的增长趋势（如：N 从 50000 到 100000，规模变成原来的 2 倍，而耗时变成原来的 6.123 / 1.570 = 3.9 倍）。<strong>而事实上，插入排序的时间复杂度的确是 $O(N^2)$，</strong> 以下进行简单分析。</p>
<ul>
<li><p><strong>Worst-case</strong></p>
<p>对于 <strong>InsertionSort</strong> ，需要插入 N - 1 次，<strong>考虑最坏情况（即逆序列）</strong>，第 $i$ 次插入需要进行 $i+1$ 次赋值，因此总赋值次数为：</p>
<p>$$\sum_{i=2}^Ni=2+3+4+…+N=\Theta(N^2)$$</p>
</li>
</ul>
<ul>
<li><p><strong>Best-case</strong></p>
<p>对于<strong>最优情况</strong>（即排好序的序列），每次插入都不需要移动元素，即不会进入内层 for 循环，因此<strong>其时间复杂度为 $O(N)$</strong>。</p>
</li>
<li><p><strong>Average-case</strong></p>
<p>而一般情况下，<strong>插入排序的平均时间复杂度为 $\Theta(N^2)$</strong>。为什么呢？在此直接引用几个结论来简单证明一下。我们注意到，对于越倾向于无序的序列，插入排序耗时越长，这二者是相关联的。那么，我们如何衡量一个序列的无序程度呢？其实就是看这个序列的<strong>逆序数的对数</strong>，逆序数的定义是：对一对数 (i, j)，i &lt; j 但是 A[i] &gt; A[j]，则称 (i, j) 是一对逆序数。</p>
<p><strong>设一个序列的逆序数是 $I$，那么用插入排序算法对这一序列排序的时间复杂度为 $O(I+N)$</strong>。那么<strong>插入排序平均时间复杂度的问题</strong>，就转变为<strong>序列的平均逆序数对数的问题</strong>。经证明，<strong>一个大小为 N 的序列，其平均逆序数为 $N\times(N-1)/4$</strong> （证明略）。由此推出，插入排序的平均时间复杂度为 $O(N^2)$，更一般地，对于任何仅交换相邻元素的排序算法，$N^2$ 是一个下界。</p>
</li>
</ul>
<p>因此，对于基本有序的输入，插入排序算法的执行效率较快；而倾向于无序的输入，插入排序并不令人满意。</p>
<h2 id="2-希尔排序"><a href="#2-希尔排序" class="headerlink" title="2. 希尔排序"></a>2. 希尔排序</h2><p>未完待续……</p>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}
});
</script>

<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>

]]></content>
      
        <categories>
            
            <category> DSA </category>
            
        </categories>
        
        
        <tags>
            
            <tag> Date Structure </tag>
            
            <tag> Sorting </tag>
            
        </tags>
        
    </entry>
    
    <entry>
      <title><![CDATA[数据结构学习笔记：不相交集]]></title>
      <url>http://nightn.com/2017/05/09/DSA-disjoint-set/</url>
      <content type="html"><![CDATA[<p>不相交集（Disjoint Set）是一种用于解决等价问题的非常有效的数据结构，具有性能优越、实现简单等特点。本文介绍了等价问题、不相交集等概念，并叙述了 Union/Find 算法的实现与优化。</p>
<a id="more"></a>
<h2 id="1-等价关系"><a href="#1-等价关系" class="headerlink" title="1. 等价关系"></a>1. 等价关系</h2><p>等价关系必须满足 3 个条件：</p>
<ul>
<li><code>自反性</code>：a 属于 S 集，a 与其本身等价；</li>
<li><code>对称性</code>：a 等价 b，那么 b 等价 a；</li>
<li><code>传递性</code>：a 等价 b， b 等价 c，那么 a 等价 c。</li>
</ul>
<p>如<code>电路连通</code> 是一种等价关系；而 <code>≥</code>  不是等价关系，因为它满足自反性和传递性，但不满足对称性。</p>
<h2 id="2-动态等价问题"><a href="#2-动态等价问题" class="headerlink" title="2. 动态等价问题"></a>2. 动态等价问题</h2><p>问题来了，我们如何用数据结构表示一个等价问题？</p>
<p>最容易想到的是<strong>二维数组</strong>，N 个元素的集，就需要 N X N 大小的二维数组来存放元素之间的等价关系，虽然这样在访问某两个元素是否等价的时候，通过常数时间即可完成。但我们考虑一个简单的例子，一个存放了 5 个元素的集 {a1, a2, a3, a4, a5}，为了表示这个集中各元素的等价关系，我们就需要构建一个 5 X 5 大小的二维数组，且不说这 O($N^2$) 的空间复杂度，这种表示法很难直接表示出等价关系的传递性，什么意思呢？假如 a1~a2, a3~a4, a5~a1, a4~a2, 根据等价性可以很直观的看出，这个集中的所有元素两两等价，但如果将这种等价关系存储在二维数组中，还能够这么直观的表示出来吗？</p>
<h4 id="2-1-基础知识"><a href="#2-1-基础知识" class="headerlink" title="2.1 基础知识"></a>2.1 基础知识</h4><p>在等价问题中，二维数组是不可行的。因此引入<strong>等价类</strong>的概念。</p>
<p><code>等价类</code> ：等价类是全集 S 的一个子集，一个等价类中的所有元素都满足等价关系。</p>
<p>有了等价类的概念，我们不需要再用二维数组表示元素之间是否等价了，而是<strong>通过判断两个元素是否属于同一个等价类，来判断它们是否等价</strong>。 假设全集 S 中包含 N 个元素，且一开始这 N 个元素相互之间都不等价，即每一个元素都单独属于一个等价类。对于任意等价类 $S_i$ 和 $S_j$，都有 $S_i \bigcap S_j = \emptyset$，因此称整个 S 集为<strong>不相交集（Disjoint Set）</strong>。不相交集中允许两种运算：Find 和 Union。</p>
<ul>
<li><p><strong>Find</strong></p>
<p>Find 接收一个给定的元素，返回该元素所属的等价类的名字。</p>
</li>
<li><p><strong>Union</strong></p>
<p>Union 是添加等价关系，比如添加等价关系 a~b，<strong>由等价关系的传递性可知，一旦添加了 a~b，那么 a, b所属等价类的所有元素都满足等价关系。即 a 所属的等价类和 b 所属的等价类合二为一</strong>。因此， Union 接收两个元素，首先分别找到这两个元素所属的等价类，若属于同一等价类，即 a 和 b 已经具有等价关系了，那么就不操作；若属于不同等价类，则将两个等价类合并为一个等价类。合并的方式有 Union-by-size 和 Union-by-height (rank) ，具体将在下文展开。</p>
</li>
</ul>
<p>在前文中，我们引入了不相交集中等价类的概念，又介绍了不相交集中的两种运算 Find 和 Union，此外，我们还观察到：</p>
<ol>
<li>判断两个元素是否等价，是根据它们是否属于同一个等价类，而不是比较它们的值。我们并不关心元素的值是什么（它仅仅起到区分元素的作用），因此，将不相交集中的所有元素编号 1 到 N，并按需排列。</li>
<li>等价类的名字不重要，重要的是能够进行比较即可。“等价类1”==“等价类1” 和 “阿猫等价类”==“阿猫等价类” 本质上没有任何区别。</li>
</ol>
<h4 id="2-2-一维数组"><a href="#2-2-一维数组" class="headerlink" title="2.2 一维数组"></a>2.2 一维数组</h4><p>有了上面的基础知识后，是时候考虑用什么样的数据结构来实现不相交集了。首先想到的是一维数组，对于一个包含 N 个元素的不相交集 S，用一个大小为 N 的一维数组表示，数组的下标表示是哪一个元素，而存放的内容是该元素所属的等价类的名称。这样一来，Find 就是根据下标找数组存放的内容，时间复杂度为 $O(1)$，但是将两个等价类进行 Union 的话，则需要遍历整个数组，将对应的等价类名称进行修改，时间复杂度为 $O(N)$。</p>
<h4 id="2-3-单链表"><a href="#2-3-单链表" class="headerlink" title="2.3 单链表"></a>2.3 单链表</h4><p>考虑将每一个等价类单独存放在一个链表中，这样一来，Union 就只需要将两个链表合并，Union 的时间复杂度为 $O(1)$，但是每次 Find 的话，就需要遍历所有链表。</p>
<h2 id="3-最基本的实现"><a href="#3-最基本的实现" class="headerlink" title="3. 最基本的实现"></a>3. 最基本的实现</h2><p>我们将每一个等价类表示为一颗树，树的每个元素有相同的根，根就可以用来命名等价类。树中的每个元素都需要一个父指针，指向其父节点，指向 0 表示该元素就是根。用一维数组来表示不相交集。</p>
<pre class=" language-c"><code class="language-c"><span class="token macro property">#<span class="token directive keyword">define</span> NumSets 128</span>
<span class="token keyword">typedef</span> <span class="token keyword">int</span> DisjSet<span class="token punctuation">[</span>NumSets <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">typedef</span> <span class="token keyword">int</span> SetType<span class="token punctuation">;</span>
<span class="token keyword">typedef</span> <span class="token keyword">int</span> ElementType<span class="token punctuation">;</span>

<span class="token keyword">void</span> <span class="token function">Initialize</span><span class="token punctuation">(</span>DisjSet S<span class="token punctuation">)</span><span class="token punctuation">;</span>
SetType <span class="token function">Find</span><span class="token punctuation">(</span>ElementType X<span class="token punctuation">,</span> DisjSet S<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">void</span> <span class="token function">SetUnion</span><span class="token punctuation">(</span>DisjSet S<span class="token punctuation">,</span> SetType root1<span class="token punctuation">,</span> SetType root2<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment" spellcheck="true">//初始化不相交集</span>
<span class="token keyword">void</span> <span class="token function">Initialize</span><span class="token punctuation">(</span>DisjSet S<span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">int</span> i <span class="token operator">=</span> NumSets<span class="token punctuation">;</span> i <span class="token operator">></span> <span class="token number">0</span><span class="token punctuation">;</span> i<span class="token operator">--</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        S<span class="token punctuation">[</span>i<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre>
<p>初始化时，另所有的元素都指向 0，即每个元素都是根，并单独构成一棵树。Union 非常简单，只需要把一个树根作为另一个树根的根即可，在此，我们将 root2 连接到 root1 上：</p>
<pre class=" language-c"><code class="language-c"><span class="token comment" spellcheck="true">// Stupid</span>
<span class="token keyword">void</span> <span class="token function">SetUnion</span><span class="token punctuation">(</span>DisjSet S<span class="token punctuation">,</span> SetType root1<span class="token punctuation">,</span> SetType root2<span class="token punctuation">)</span><span class="token punctuation">{</span>
    S<span class="token punctuation">[</span>root2<span class="token punctuation">]</span> <span class="token operator">=</span> root1<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<p>至于 Find，给定一个元素，每次寻找它的父节点，直到找到该元素的根，即该元素所属的等价类，Find 可以用递归和迭代两种方式实现。</p>
<pre class=" language-c"><code class="language-c"><span class="token comment" spellcheck="true">// Find by iteration</span>
SetType <span class="token function">Find</span><span class="token punctuation">(</span>ElementType X<span class="token punctuation">,</span> DisjSet S<span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">while</span> <span class="token punctuation">(</span>S<span class="token punctuation">[</span>X<span class="token punctuation">]</span> <span class="token operator">></span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        X <span class="token operator">=</span> S<span class="token punctuation">[</span>X<span class="token punctuation">]</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">return</span> X<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<p>以上是不相交集的最基本实现。Find 的时间复杂度是 $O(h)$，其中 h 是树的深度，按照上述 Union，最坏情况树的深度会达到 N-1，即最坏情况下，Find 的时间复杂度是 $O(N)$。以下分别从 Union 和 Find 两个角度来改进基本实现。</p>
<h2 id="4-改进-Union"><a href="#4-改进-Union" class="headerlink" title="4. 改进 Union"></a>4. 改进 Union</h2><p>之前的 Union 非常笨拙，每次都是将 root2 作为 root1 的子树，考虑如下代码：</p>
<pre class=" language-c"><code class="language-c"><span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">int</span> i <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> NumSets<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token function">SetUnion</span><span class="token punctuation">(</span>S<span class="token punctuation">,</span> <span class="token function">Find</span><span class="token punctuation">(</span>i <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">,</span> S<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">Find</span><span class="token punctuation">(</span>i<span class="token punctuation">,</span> S<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
</code></pre>
<p>通过一系列的 SetUnion，S 变成了一棵深度为 N-1 的树，最坏情况下，单次 Find 的时间复杂度为 $O(N)$。为了优化这一问题，提出 <strong>Union-by-size</strong>，即不再是简单的将后一棵树连到前一棵树，而是<strong>总将尺寸更小的树作为子树</strong>。为了追踪树的尺寸（即树包含的元素的个数），不再将树根的值设置为 0，而是将其<strong>设置为 -size</strong>。同样执行上述 Union 代码，改进前后 Union 对比：</p>
<p><img src="http://on2kkr82s.bkt.clouddn.com/17-5-9/31641600-file_1494333521106_6e4b.png" width="500"></p>
<p>实现代码如下：</p>
<pre class=" language-c"><code class="language-c"><span class="token comment" spellcheck="true">//初始化不相交集</span>
<span class="token keyword">void</span> <span class="token function">Initialize</span><span class="token punctuation">(</span>DisjSet S<span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">int</span> i <span class="token operator">=</span> NumSets<span class="token punctuation">;</span> i <span class="token operator">></span> <span class="token number">0</span><span class="token punctuation">;</span> i<span class="token operator">--</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        S<span class="token punctuation">[</span>i<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true">// 初始化为-1，表示一开始每棵树都只有一个元素</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token comment" spellcheck="true">// Smart Union: Union-by-size</span>
<span class="token keyword">void</span> <span class="token function">SetUnion</span><span class="token punctuation">(</span>DisjSet S<span class="token punctuation">,</span> SetType root1<span class="token punctuation">,</span> SetType root2<span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>root1 <span class="token operator">></span> root2<span class="token punctuation">)</span><span class="token punctuation">{</span>        <span class="token comment" spellcheck="true">//root1作为子树</span>
        S<span class="token punctuation">[</span>root2<span class="token punctuation">]</span> <span class="token operator">+</span><span class="token operator">=</span> S<span class="token punctuation">[</span>root1<span class="token punctuation">]</span><span class="token punctuation">;</span>  <span class="token comment" spellcheck="true">//更新父树的size</span>
        S<span class="token punctuation">[</span>root1<span class="token punctuation">]</span> <span class="token operator">=</span> root2<span class="token punctuation">;</span> 
    <span class="token punctuation">}</span>
    <span class="token keyword">else</span><span class="token punctuation">{</span>                      <span class="token comment" spellcheck="true">//root2作为子树</span>
        S<span class="token punctuation">[</span>root1<span class="token punctuation">]</span> <span class="token operator">+</span><span class="token operator">=</span> S<span class="token punctuation">[</span>root2<span class="token punctuation">]</span><span class="token punctuation">;</span>  <span class="token comment" spellcheck="true">//更新父树的size</span>
        S<span class="token punctuation">[</span>root2<span class="token punctuation">]</span> <span class="token operator">=</span> root1<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre>
<p>这样一来，所有树的深度都不会超过 $log N$，Find 的时间复杂度为 $O(log N)$ 。</p>
<p>另一种是 <strong>Union-by-height</strong>，只是对 Union-by-size 的简单修改，<strong>每次 Union 都将高度更小的树作为子树</strong>，同理，树根存放的是树高 height 的负值，实现代码也比较简单，便不再详述。</p>
<h2 id="5-改进-Find-—-路径压缩"><a href="#5-改进-Find-—-路径压缩" class="headerlink" title="5. 改进 Find — 路径压缩"></a>5. 改进 Find — 路径压缩</h2><p>虽然机智地改进了 Union 的算法，但是最坏情况还是很容易发生。一方面，我们还想要进一步优化 Union/Find 算法，另一方面，Union 已经没有改进余地了，那怎么办？当然是改进 Find 了！限制算法性能的最大瓶颈是：在 Union 的过程中，树的平衡性很容易被打破。这样一来，树就很快倾向于最糟糕的情况，既然如此，那我们就在每次 Find 的时候调整树的平衡性，这种聪明的调整叫做<strong>路径压缩（Path Compression）</strong>。</p>
<p>假如我们执行 Find(X)，路径压缩的效果就是，从 X 到根节点这一路径上的每一个节点，我们都将它的父节点设置为根节点。修改 Find 函数如下：</p>
<pre class=" language-c"><code class="language-c"><span class="token comment" spellcheck="true">// Find by recursion with path compression</span>
SetType <span class="token function">Find2</span><span class="token punctuation">(</span>ElementType X<span class="token punctuation">,</span> DisjSet S<span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>S<span class="token punctuation">[</span>X<span class="token punctuation">]</span> <span class="token operator">&lt;=</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">return</span> X<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">else</span><span class="token punctuation">{</span>
        <span class="token keyword">return</span> S<span class="token punctuation">[</span>X<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">Find</span><span class="token punctuation">(</span>S<span class="token punctuation">[</span>X<span class="token punctuation">]</span><span class="token punctuation">,</span> S<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre>
<p>值得注意的是，Path compression 和 Union-by-height 并不兼容，因为路径压缩会改变树的高度，这样导致每次重新计算树的高度都很麻烦，一个解决方案是，不去重新计算它。这样一来，每棵树存储的就不是它实际的高度了，而是估计的高度，我们称之为秩（Rank），这样一来，当你一看到 Union-by-rank ，就知道是怎么一回事了吧。</p>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}
});
</script>

<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>



]]></content>
      
        <categories>
            
            <category> DSA </category>
            
        </categories>
        
        
        <tags>
            
            <tag> Date Structure </tag>
            
            <tag> Disjoint Set </tag>
            
        </tags>
        
    </entry>
    
    <entry>
      <title><![CDATA[CloudViewer]]></title>
      <url>http://nightn.com/2017/04/15/cloudviewer/</url>
      <content type="html"><![CDATA[<h2 id="CloudViewer-简介"><a href="#CloudViewer-简介" class="headerlink" title="CloudViewer 简介"></a>CloudViewer 简介</h2><p>CloudViewer （点云可视化软件）是一款面向三维点云数据处理、点云开发专业人员及爱好者的三维点云可视化软件，该软件具备以下功能：</p>
<a id="more"></a>
<ol>
<li><p><strong>点云 IO</strong>。常见点云格式文件（如 ply, pcd 和 obj）的读取、保存、删除清空及可视化。</p>
</li>
<li><p><strong>点云的基本操作</strong>。设置点云颜色，合并多个点云，点云格式转换等。</p>
</li>
<li><p><strong>可视化的基本操作</strong>。设置视图窗口背景颜色，设置点云的可视化尺寸，设置坐标系的显示，设置视图方位（Main view, Left view, Top view），网格面片显示，网格线框显示等。</p>
</li>
<li><p><strong>模型生成</strong>。生成简单立方排布的点云以及基本三维模型，该功能主要用于测试。</p>
</li>
<li><p><strong>软件界面基本功能</strong>。软件由: [1] 菜单栏、[2] 工具栏、[3] 资源管理树、[4] 属性管理器、[5] 输出窗口、[6] 状态栏、[7] 视图窗口以及 [8] RGB 窗口组成。其中部分都是停靠窗口，可以在菜单栏的视图选项设置是否显示，方便用户自定义软件界面。软件还提供 Windows 和 Darcula 两大主题，其中 Darcula 主题为默认主题，仿照 Visual Studio 和 Android Studio 相应暗系主题设计，极具极客风范。不过为了适应大部分用户，本手册中的示例都是在 Windows 主题下操作的。</p>
<p><img src="img/界面介绍带标号.png" width="750"></p>
</li>
</ol>
<h2 id="CloudViewer-下载及声明"><a href="#CloudViewer-下载及声明" class="headerlink" title="CloudViewer 下载及声明"></a>CloudViewer 下载及声明</h2><ol>
<li><strong>软件下载</strong>：<a href="http://on2kkr82s.bkt.clouddn.com/CloudViewer.rar" target="_blank" rel="external">CloudViewer 下载</a> （软件大小 23.7 MB，目前仅支持 Windows 系统)。</li>
<li><strong>Github 源码</strong>：<a href="https://github.com/nightn/CloudViewer" target="_blank" rel="external">https://github.com/nightn/CloudViewer</a> （欢迎 Star 和 Fork）</li>
<li><strong>使用手册</strong>：<a href="http://nightn.com/2017/04/15/cloudviewer">http://nightn.com/2017/04/15/cloudviewer</a></li>
<li><strong>开发环境</strong>：CloudViewer 是用 Windows 10 (64 位) 系统下的 Mircosoft Visual Studio Professional 2013，结合使用 Qt 5.7.0 (64 位) 及 PCL 1.8.0 (64 位) 等开源库进行开发的。</li>
<li><strong>资源使用</strong>：软件所使用的图片资源均来源于 <a href="http://www.easyicon.net" target="_blank" rel="external">www.easyicon.net</a>。</li>
<li><strong>声明</strong>：本软件用作分享与学习，若转载请注明出处，勿作任何商业用途。</li>
</ol>
<h2 id="CloudViewer-使用"><a href="#CloudViewer-使用" class="headerlink" title="CloudViewer 使用"></a>CloudViewer 使用</h2><h3 id="1-点云-IO"><a href="#1-点云-IO" class="headerlink" title="1. 点云 IO"></a>1. 点云 IO</h3><p>点云 IO 操作主要包括 <code>Open</code>, <code>Add</code>, <code>Save</code>, <code>Clear</code> 和 <code>Change</code> 等。</p>
<h4 id="1-1-打开点云"><a href="#1-1-打开点云" class="headerlink" title="1.1 打开点云"></a>1.1 打开点云</h4><p><strong>[重要说明] 点云存放路径不能有中文字符，否则点云不能正常打开！</strong></p>
<p>点云是由很多个具有三维坐标 x, y, z 的点组成的数据格式，除了位置信息外，点云还可以包含颜色信息（点云的 RGB 值）、透明信息、法线信息等。目前常用的点云格式有 pcd, ply 以及 obj 格式。打开这三种格式的点云主要通过 Qt 库的文件对话框和 PCL 库中载入点云数据的相关 API 实现。</p>
<p>点云 IO 的常用操作可以在 <code>File</code> 菜单及工具栏中找到：</p>
<p><img src="img/File 菜单和工具栏.png" width="500"></p>
<p>打开动作 <code>Open</code> 的实现效果如下图，支持多选进行批量打开。</p>
<p><img src="img/打开点云NEW.png" width="650"></p>
<h4 id="1-2-添加点云"><a href="#1-2-添加点云" class="headerlink" title="1.2 添加点云"></a>1.2 添加点云</h4><p>点云处理中，有时需要同时对多个点云在同一视图窗口进行可视化和处理。添加点云 <code>Add</code> 每次可以添加一个或多个点云文件，而不会清空后台已经缓存的点云数据，也不会清空视图窗口已经显示的点云模型。理论上，添加点云的数量没有限制。<code>Add</code> 实现效果如下图（为了便于区分，将点云设置成了不同颜色）：</p>
<p><img src="img/打开多个点云NEW.png" width="650"></p>
<h4 id="1-3-保存点云"><a href="#1-3-保存点云" class="headerlink" title="1.3 保存点云"></a>1.3 保存点云</h4><p>保存点云 <code>Save</code> 有两个特点：</p>
<ul>
<li><p><strong>多类型保存</strong>。<code>Open</code> 可以实现对 pcd, ply 和 obj 等格式文件的多类型打开，<code>Save</code> 也可以将文件保存成 pcd, ply 等多种类型，这样也就实现了点云的格式转换功能：</p>
<p><img src="img/open_save.png" width="300"></p>
</li>
</ul>
<ul>
<li><strong>多文件保存</strong>。CloudViewer 还能将视图窗口显示的所有点云保存为同一个文件，实现了多文件的合并保存。</li>
</ul>
<h4 id="1-4-清空点云"><a href="#1-4-清空点云" class="headerlink" title="1.4 清空点云"></a>1.4 清空点云</h4><p>清空点云 <code>Clear</code> 可将视图窗口中的所有点云模型及后台缓存数据清空。</p>
<h4 id="1-5-点云格式转换"><a href="#1-5-点云格式转换" class="headerlink" title="1.5 点云格式转换"></a>1.5 点云格式转换</h4><p>格式转换 <code>Change</code>  暂时未做实现。因为通过 <code>Open</code> 和 <code>Save</code> 就可以完成点云格式转换。  </p>
<h3 id="2-点云基本操作"><a href="#2-点云基本操作" class="headerlink" title="2. 点云基本操作"></a>2. 点云基本操作</h3><p>点云基本操作会直接影响点云文件的内容，基本功能包括<strong>改变点云颜色</strong>、<strong>点云格式转换</strong>、<strong>点云合并</strong>等。</p>
<h4 id="2-1-改变点云颜色"><a href="#2-1-改变点云颜色" class="headerlink" title="2.1 改变点云颜色"></a>2.1 改变点云颜色</h4><p>点云中的点不但具有三维信息（x, y, z 坐标），还具有颜色信息（R, G, B），为了更形象地描述点云模型，抑或是为了区分不同点云模型，出于这样的目的，我们需要对点云模型的颜色进行修改。具体包括的功能为：</p>
<ul>
<li><p>调整RGB值改变单一点云文件颜色。</p>
<p><img src="img/改变点云颜色-演示.png" width="600"></p>
</li>
<li><p>在多个点云同时显示时，通过在资源管理树的item进行选择，实现对某一个选定的点云进行颜色变换。</p>
</li>
<li><p>既可以通过滑块控件设置RGB，又可以通过颜色对话框来选择具体颜色。</p>
</li>
<li><p>随机上色功能。</p>
<p><img src="img/随机颜色-演示.png" width="600"></p>
</li>
</ul>
<h4 id="2-2-点云格式转换"><a href="#2-2-点云格式转换" class="headerlink" title="2.2 点云格式转换"></a>2.2 点云格式转换</h4><p>点云文件的格式种类非常多，常见的能用 PCL 库直接处理的包括 ply, pcd 等，三维扫描仪保存的 wrl 格式。我们往往需要对点云格式进行转换，但是目前存在的主流点云软件，如 Geomagic Studio，Rapidform，MeshLab 等对点云格式转换的支持并不令人满意（比如 Geomagic Studio 能够导入ply文件并对其进行操作，但却不能保存为 ply，只能保存为 wrl。然后需要利用 MeshLab 将 wrl 转换为 ply，最后还需要利用自己写的程序将 ply 转为 pcd，过程非常麻烦！）</p>
<p>CloudViewer 目前实现了多种点云格式的相互转换（wrl文件的转换还有待进一步开发），通过打开并另存为即可实现三种不同点云格式之间的相互转换，打开和保存的实现可以参见上述部分。如下图：</p>
<p><img src="img/open_save.png" width="300"></p>
<h4 id="2-3-合并点云"><a href="#2-3-合并点云" class="headerlink" title="2.3 合并点云"></a>2.3 合并点云</h4><p>点云合并 = “多点云打开” + “多点云保存”。上述打开和保存功能已经实现了点云合并功能，在此不再赘述。</p>
<h3 id="3-可视化基本操作"><a href="#3-可视化基本操作" class="headerlink" title="3. 可视化基本操作"></a>3. 可视化基本操作</h3><p>可视化基本操作主要包括<strong>设置背景颜色</strong>，<strong>设置点云的可视化尺寸</strong>，<strong>设置视图方位</strong>（Main view, Left view, Top view），<strong>网格面片显示</strong>以及<strong>网格线框显示</strong>等。</p>
<h4 id="3-1-设置背景颜色"><a href="#3-1-设置背景颜色" class="headerlink" title="3.1 设置背景颜色"></a>3.1 设置背景颜色</h4><p>视图窗口中的点云颜色可以更改，背景颜色亦然，效果如下：</p>
<p><img src="img/设置背景颜色-演示.png" width="600"></p>
<h4 id="3-2-设置点云可视化尺寸"><a href="#3-2-设置点云可视化尺寸" class="headerlink" title="3.2 设置点云可视化尺寸"></a>3.2 设置点云可视化尺寸</h4><p>点云由很多点构成，每个点本身具有颜色信息，但是没有尺寸大小的信息。但需要以不同大小进行显示，这是可视化的任务，不涉及对点云本身的修改。设置点云可视化尺寸功能效果如下，分别对应size = 1, 2, 3时点云的大小，为了不影响点云操作，允许的最大尺寸为10（因为点的尺寸越大，渲染速度越慢，对点云的操作也不方便）。</p>
<p><img src="img/尺寸设置-演示2.png" width="600"></p>
<h4 id="3-3-设置视图方位"><a href="#3-3-设置视图方位" class="headerlink" title="3.3 设置视图方位"></a>3.3 设置视图方位</h4><p>设置可视化的视图方位提供了三种不同的视图，主视图（Main View），左视图（Left View）和俯视图（Top View），通过选择相应的视图方位，实现对点云更加快捷的操作。设置视图方位效果如下：</p>
<p><img src="img/设置视图方位.png"></p>
<h4 id="3-4-网格面片显示及网格线框显示"><a href="#3-4-网格面片显示及网格线框显示" class="headerlink" title="3.4 网格面片显示及网格线框显示"></a>3.4 网格面片显示及网格线框显示</h4><p>PCL库中提供了非常强大的点云处理功能。在CloudViewer中，实现了点云的网格面片显示和网格线框显示，实现分为三步：点云法线估计，曲面重建和网格显示。显示效果如下：</p>
<ul>
<li><p>网格面片显示：</p>
<p><img src="img/网格面片显示.png" width="600"></p>
</li>
<li><p>网格线框显示：</p>
<p><img src="img/网格线框显示.png" width="600"></p>
</li>
</ul>
<h3 id="4-模型生成"><a href="#4-模型生成" class="headerlink" title="4. 模型生成"></a>4. 模型生成</h3><h4 id="4-1-立方点云生成"><a href="#4-1-立方点云生成" class="headerlink" title="4.1 立方点云生成"></a>4.1 立方点云生成</h4><p>这是一个非常简单但很实用的功能，当你没有点云数据时，可以通过这个功能，生成一个由50000个点随机排布成的立方，如下图所示：</p>
<p><img src="img/cube生成.png" width="600"></p>
<h4 id="4-2-基本三维模型生成"><a href="#4-2-基本三维模型生成" class="headerlink" title="4.2 基本三维模型生成"></a>4.2 基本三维模型生成</h4><p>仅实现了球体的生成。球体生成效果如下图所示：</p>
<p><img src="img/创建球体.png" width="600"></p>
<h3 id="5-其他功能"><a href="#5-其他功能" class="headerlink" title="5. 其他功能"></a>5. 其他功能</h3><h4 id="5-1-停靠窗口的显示与隐藏"><a href="#5-1-停靠窗口的显示与隐藏" class="headerlink" title="5.1 停靠窗口的显示与隐藏"></a>5.1 停靠窗口的显示与隐藏</h4><p>CloudViewer 包含四个停靠窗口：资源管理树（Data Manager）、属性管理器（Property Manager）、输出窗口（Console）以及RGB窗口（RGB Manager）。通过 View 菜单的选项可以实现停靠窗口的显示及隐藏。</p>
<p><img src="img/停靠.png" width="300"></p>
<h4 id="5-2-Console-窗口"><a href="#5-2-Console-窗口" class="headerlink" title="5.2 Console 窗口"></a>5.2 Console 窗口</h4><p>输出窗口提供了记录你的操作日志，方便查看，通过右击选择 <code>Clear</code> 可以进行清空，如果你觉得输出窗口没有必要，也可以通过右击选择 <code>Disable console</code> 和 <code>Enable console</code> 来禁用或使用输出窗口。</p>
<p><img src="img/console.png" width="700"></p>
<h4 id="5-3-资源管理树"><a href="#5-3-资源管理树" class="headerlink" title="5.3 资源管理树"></a>5.3 资源管理树</h4><p>资源管理树显示了当前打开的所有点云，可以通过单选或多选，然后右键，进行点云的隐藏、显示、删除设置颜色等操作，非常快捷。</p>
<p><img src="img/资源管理树.png"></p>
<h4 id="5-4-属性管理器"><a href="#5-4-属性管理器" class="headerlink" title="5.4 属性管理器"></a>5.4 属性管理器</h4><p>属性管理器记录了选中点云的一些属性：选中点云的点的数量、RGB 信息，还包括打开的点云的总个数，及所有点云点的数量等。</p>
<p><img src="img/属性管理器.png"></p>
<h4 id="5-5-关于"><a href="#5-5-关于" class="headerlink" title="5.5 关于"></a>5.5 关于</h4><p>通过 <code>Help</code> 可以访问我的博客，查看 CloudViewer 的使用手册（后续会出开发手册）。<code>About</code> 界面记录了 CloudViewer 的版本信息和开发者信息。</p>
<p><img src="img/关于窗口.png" width="350"></p>
<h2 id="CloudViewer-总结"><a href="#CloudViewer-总结" class="headerlink" title="CloudViewer 总结"></a>CloudViewer 总结</h2><p>CloudViewer 作为一款点云可视化软件，提供了多点云类型，多文件的读取和写入，并实现了点云类型的转换及点云模型的合并。在此基础上，还提供了丰富的可视化操作，如设置点云颜色及尺寸，设置显示背景颜色，点云的网格面片显示，点云的网格线框显示等；此外，还提供了简单的模型生成及绘制功能，如生成立方随机排布的点云模型，绘制基本三维模型如球体和圆柱体等。在界面上，综合运用了 VTK 显示窗口，停靠窗口，文件树窗口，列表窗口，菜单栏，工具栏，状态栏等一系列 Qt 控件，并建立了功能丰富的多种信号槽联系。</p>
<p>在实际测试中，点云的读取和处理速度也非常快，在本机打开包含 50000 个点的点云文件，耗时不超过1秒，打开包含 170000 个点的点云文件，耗时 3 秒左右。而且在程序设计中，综合考虑了各种用户可能会执行的违规操作，为了防止软件崩溃，对多种错误操作进行了合理反馈。</p>
<p>CloudViewer 还有进一步提升的空间。作为一款点云可视化软件，在后期开发中应该会加入少量三维点云处理的功能，如多角度拍摄的点云进行拼接，点云三角化及光学渲染等。最后，比较重要的一点是，软硬件结合，由于实验室常用微软的 Kinect2.0 获取点云数据，但是微软自带的 SDK 采集到的数据不能很好的反应点云的颜色信息（颜色是根据深度信息来确定的，而不是物体的实际颜色），因此，还可以考虑增加 CloudViewer 与 Kinect 连接及实时可视化的功能。相信随着更多功能的添加，CloudViewer 能够更加胜任在实际实验中的点云获取，点云可视化和点云处理的方方面面。</p>
]]></content>
      
        <categories>
            
            <category> Qt </category>
            
        </categories>
        
        
        <tags>
            
            <tag> CloudViewer </tag>
            
            <tag> Qt </tag>
            
            <tag> PCL </tag>
            
            <tag> 点云 </tag>
            
        </tags>
        
    </entry>
    
    <entry>
      <title><![CDATA[Android 开发小作：Minofo(2)]]></title>
      <url>http://nightn.com/2017/04/02/Android-develop-minofo-2/</url>
      <content type="html"><![CDATA[<p>本文作为 Minofo 开发的第二篇文章，详细介绍了 高德地图 API 的使用，包括地图 SDK 和定位 SDK 的用法，实现了 Minofo 的地图模块。另外还介绍了用车面板的实现以及利用 OkHttp 从服务器获取数据的方法，进而完成 Minofo 的开发。本文提供 <a href="http://on2kkr82s.bkt.clouddn.com/Minofo%282%29.pdf" target="_blank" rel="external">PDF 版本</a>可供查阅及下载。<br><a id="more"></a></p>
<p><a href="http://nightn.com/2017/04/01/Android-develop-minofo-1/">Android 开发小作：Minofo(1)</a></p>
<p><a href="http://nightn.com/2017/04/02/Android-develop-minofo-2/">Android 开发小作：Minofo(2)</a></p>
<p>本文接着上一篇博客：<a href="http://nightn.com/2017/04/01/Android-develop-minofo-1/">Android 开发小作：Minofo(1)</a> ，继续记录 Minofo 的开发过程。在上一篇博客中，我们实现了主界面大部分功能的开发，包括标题栏、导航栏和悬浮按钮，实现效果如下：</p>
<p><img src="http://on2kkr82s.bkt.clouddn.com/17-4-1/9165962-file_1491059740994_c666.png" width="600"></p>
<p>在本篇博客中，将继续完善主界面，在主界面中添加地图模块。另外还有开发用车界面，用车界面还包括了整个软件的核心功能，即根据输入的车票号，获取对应密码。在此，我们在服务器端建立简单的模拟数据库，然后在 App 中通过网络库获取相应的密码，并显示在用车界面。让我们先从地图模块开始吧。</p>
<h2 id="一、主界面嵌入高德地图"><a href="#一、主界面嵌入高德地图" class="headerlink" title="一、主界面嵌入高德地图"></a><strong>一、主界面嵌入高德地图</strong></h2><p>ofo 共享单车的地图模块具有显示当前区域地图、实时定位以及显示周边小黄车分布的功能，其中最后一个功能是 4 月份刚增加上去的，我不打算去实现（事实上，没有原始数据，想实现也实现不了）。因此，地图模块需要实现的功能包括地图显示和实时定位，这个比较简单，调用第三方地图 API 可以实现。纵观各大地图 API 产商：谷歌地图、百度地图、高德地图和腾讯地图等等。谷歌地图国内不能用，网上推荐百度地图和高德地图的比较多，而且郭霖老师在《第二行代码》中用的也是百度地图 API。因此一开始用百度地图 API，申请了 Key，下好了依赖库，但是出现了一堆问题，搜索了很久也没能解决，而且百度地图 API 文档也说得不清不楚，真的怀疑这些文档都是让实习生写的。折腾了一个晚上加一个上午还是没能解决，最终决定用高德地图的 API，下面总结一下使用高德地图 API 的流程吧。</p>
<h3 id="1-下载并安装高德地图开发包"><a href="#1-下载并安装高德地图开发包" class="headerlink" title="1. 下载并安装高德地图开发包"></a><strong>1. 下载并安装高德地图开发包</strong></h3><p>首先需要下载并安装高德地图开发包，进入<a href="https://lbs.amap.com/" target="_blank" rel="external">高德开放平台</a>注册一个个人开发者用户。由于我们既需要地图功能有需要定位功能，因此我们要下载两个 SDK：<code>Android 地图 SDK</code> 和 <code>Android 定位 SDK</code>。下载入口在首页的「开发与支持」菜单下面，如下图所示：</p>
<p><img src="http://on2kkr82s.bkt.clouddn.com/17-4-2/39311616-file_1491109531523_10f35.jpg" width="480"></p>
<p>进入下载界面后，都选择「一键下载」，然后我们获得了两个 zip 压缩包，接下来从压缩包取出我们需要的东西。定位 SDK 比较简单，只需要定位的 jar 依赖库就可以了；地图 SDK 包含了很多功能： 2D 地图、3D 地图和搜索功能，我们只需要 3D 地图模块就可以了，3D 地图中除了包含 jar 包以外，还有很多针对不同平台的 so 文件，这些都是我们需要的。最后我们得到了<strong>两个 jar 包</strong>和<strong>一堆 so 文件</strong> ，如下图所示（当然如果你需要用到 2D 地图或者搜索功能，也可以将相应的开发包取出来）。</p>
<p><img src="http://on2kkr82s.bkt.clouddn.com/17-4-2/58652916-file_1491110197283_146e4.png" width="412"></p>
<p>开发包都准备好了，现在将它们添加到项目里吧。将 jar 包复制到项目的 app/libs 目录。并在 app/src/main 目录下新建 jniLibs 文件夹，将之前提取出的 so 文件复制到 jniLibs 文件夹内，最终效果如下：</p>
<p><img src="http://on2kkr82s.bkt.clouddn.com/17-4-2/36622865-file_1491110723218_11158.jpg" width="360"></p>
<p>最后同步一下项目，使 Android Studio 意识到我们导入了新的包了，点击同步按钮即可：</p>
<p><img src="http://on2kkr82s.bkt.clouddn.com/17-4-2/61507718-file_1491110962145_5073.jpg"></p>
<h3 id="2-获取高德-Key"><a href="#2-获取高德-Key" class="headerlink" title="2. 获取高德 Key"></a><strong>2. 获取高德 Key</strong></h3><p>有了高德的 SDK 还是不够的，还需要获取高德 Key 并配置好项目才能真正的使用高德地图 API。进入高德控制台界面，创建新应用。</p>
<p><img src="http://on2kkr82s.bkt.clouddn.com/17-4-2/90016116-file_1491111319844_82d8.png" width="400"></p>
<p>创建好应用之后，需要为它添加 Key，在添加 Key 界面，<strong>注意 PackageName 要与你项目的包名对应才行</strong>。</p>
<p><img src="http://on2kkr82s.bkt.clouddn.com/17-4-2/72511001-file_1491111884907_11fbc.png" width="550"></p>
<p>另外还需要填写 App 发布版和调试版的安全码 SHA1，为了简单起见，我们在这里只去获取调试版的 SHA1，然后将两个 SHA1 都填写成调试版的 SHA1，如果之后想修改发布版的 SHA1 也是可以的（发布版的 SHA1 获取方法可以<a href="http://lbs.amap.com/faq/top/hot-questions/249" target="_blank" rel="external">参考这里</a>）。</p>
<p>下面开始获取调试版 SHA1，这个非常简单。在 Android Studio 界面右上角点击 Gradle，然后在跳出的 Gradle projects 面板中双击 :app/Tasks/android/signingReport，如下图所示：</p>
<p><img src="http://on2kkr82s.bkt.clouddn.com/17-4-2/22654-file_1491112346524_6353.png" width="300"></p>
<p>然后在输出窗口便可以看到调试版的 SHA1 了，用这个 SHA1 便可以获得高德地图的 Key 了。</p>
<p><img src="http://on2kkr82s.bkt.clouddn.com/17-4-2/92465191-file_1491112579070_f6fb.jpg" width="500"></p>
<h3 id="3-配置-AndroidManifest-xml"><a href="#3-配置-AndroidManifest-xml" class="headerlink" title="3. 配置 AndroidManifest.xml"></a><strong>3. 配置 AndroidManifest.xml</strong></h3><p>最后配置好 AndroidManifest.xml 文件。首先进行<strong>权限声明</strong>：</p>
<pre class=" language-xml"><code class="language-xml"><span class="token comment" spellcheck="true">&lt;!-- 用于进行网络定位 --></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>uses-permission</span> <span class="token attr-name"><span class="token namespace">android:</span>name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>android.permission.ACCESS_COARSE_LOCATION<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>
    <span class="token comment" spellcheck="true">&lt;!-- 用于访问GPS定位 --></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>uses-permission</span> <span class="token attr-name"><span class="token namespace">android:</span>name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>android.permission.ACCESS_FINE_LOCATION<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>
    <span class="token comment" spellcheck="true">&lt;!-- 用于获取运营商信息，用于支持提供运营商信息相关的接口 --></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>uses-permission</span> <span class="token attr-name"><span class="token namespace">android:</span>name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>android.permission.ACCESS_NETWORK_STATE<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>
    <span class="token comment" spellcheck="true">&lt;!-- 用于访问wifi网络信息，wifi信息会用于进行网络定位 --></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>uses-permission</span> <span class="token attr-name"><span class="token namespace">android:</span>name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>android.permission.ACCESS_WIFI_STATE<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>
    <span class="token comment" spellcheck="true">&lt;!-- 用于获取wifi的获取权限，wifi信息会用来进行网络定位 --></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>uses-permission</span> <span class="token attr-name"><span class="token namespace">android:</span>name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>android.permission.CHANGE_WIFI_STATE<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>
    <span class="token comment" spellcheck="true">&lt;!-- 用于访问网络，网络定位需要上网 --></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>uses-permission</span> <span class="token attr-name"><span class="token namespace">android:</span>name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>android.permission.INTERNET<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>
    <span class="token comment" spellcheck="true">&lt;!-- 用于读取手机当前的状态 --></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>uses-permission</span> <span class="token attr-name"><span class="token namespace">android:</span>name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>android.permission.READ_PHONE_STATE<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>
    <span class="token comment" spellcheck="true">&lt;!-- 用于写入缓存数据到扩展存储卡 --></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>uses-permission</span> <span class="token attr-name"><span class="token namespace">android:</span>name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>android.permission.WRITE_EXTERNAL_STORAGE<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>
    <span class="token comment" spellcheck="true">&lt;!-- 用于申请调用A-GPS模块 --></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>uses-permission</span> <span class="token attr-name"><span class="token namespace">android:</span>name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>android.permission.ACCESS_LOCATION_EXTRA_COMMANDS<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>
    <span class="token comment" spellcheck="true">&lt;!-- 用于申请获取蓝牙信息进行室内定位 --></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>uses-permission</span> <span class="token attr-name"><span class="token namespace">android:</span>name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>android.permission.BLUETOOTH<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>uses-permission</span> <span class="token attr-name"><span class="token namespace">android:</span>name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>android.permission.BLUETOOTH_ADMIN<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>uses-permission</span> <span class="token attr-name"><span class="token namespace">android:</span>name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>com.android.launcher.permission.READ_SETTINGS<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>uses-permission</span> <span class="token attr-name"><span class="token namespace">android:</span>name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>android.permission.ACCESS_COARSE_LOCATION<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>uses-permission</span> <span class="token attr-name"><span class="token namespace">android:</span>name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>android.permission.MOUNT_UNMOUNT_FILESYSTEMS<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>uses-permission</span> <span class="token attr-name"><span class="token namespace">android:</span>name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>android.permission.WAKE_LOCK<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>
</code></pre>
<p>然后在 applicaiton 标签中<strong>设置高德 Key</strong> 和<strong>定位服务</strong>：</p>
<pre class=" language-xml"><code class="language-xml"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta-data</span> <span class="token attr-name"><span class="token namespace">android:</span>name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>com.amap.api.v2.apikey<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">android:</span>value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>key<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
//此处的 key 就是之前你自己申请的那个
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>meta-data</span><span class="token punctuation">></span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>service</span> <span class="token attr-name"><span class="token namespace">android:</span>name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>com.amap.api.location.APSService<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>service</span><span class="token punctuation">></span></span>
</code></pre>
<p>好了，至此高德地图开发包的配置就已经完成了，下面就可以在项目中正常使用了。</p>
<h3 id="4-使用高德地图"><a href="#4-使用高德地图" class="headerlink" title="4. 使用高德地图"></a><strong>4. 使用高德地图</strong></h3><p>首先在主界面的布局文件中添加地图控件，打开 activity_main.xml，在之前定义的 FrameLayout 布局中加入如下代码：</p>
<pre class=" language-xml"><code class="language-xml"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>com.amap.api.maps.MapView</span>
            <span class="token attr-name"><span class="token namespace">android:</span>id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>@+id/map_view<span class="token punctuation">"</span></span>
            <span class="token attr-name"><span class="token namespace">android:</span>layout_width</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>match_parent<span class="token punctuation">"</span></span>
            <span class="token attr-name"><span class="token namespace">android:</span>layout_height</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>match_parent<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>
</code></pre>
<p>这就是一个高德地图的地图显示控件 MapView，然后在 MainActivity.java 中定义一个名为 mapView 的 MapView 对象，在 onCreate 方法中通过 findViewById 找到布局中的 MapView 控件，并调用 mapView.onCreate() 方法初始化地图。</p>
<pre class=" language-java"><code class="language-java"><span class="token comment" spellcheck="true">//高德地图</span>
mapView <span class="token operator">=</span> <span class="token punctuation">(</span>MapView<span class="token punctuation">)</span><span class="token function">findViewById</span><span class="token punctuation">(</span>R<span class="token punctuation">.</span>id<span class="token punctuation">.</span>map_view<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment" spellcheck="true">//在activity执行onCreate时执行mMapView.onCreate(saveInsatenceState)，创建地图</span>
mapView<span class="token punctuation">.</span><span class="token function">onCreate</span><span class="token punctuation">(</span>savedInstanceState<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>这样就成功在我们的 App 中添加并初始化了一个地图了，没错，就是这么简单。运行一下试试吧。<strong>注意！！引入高德地图之后如果还在模拟器里面调试，会出现闪退现象！</strong>这个问题我折腾了好久啊，一直以为是我自己的代码出了问题。因此在这里特别强调，<strong>引入高德地图之后，最好用真机调试</strong>。什么，你是 iPhone 用户，没有 Android 真机？那可能要尝试用不同的模拟器试试看了，有知道解决方案的同学可以在评论里和大家分享一下。我用的机型是荣耀 V8，项目完美运行：</p>
<p><img src="http://on2kkr82s.bkt.clouddn.com/17-4-2/863080-file_1491114787026_12f91.png" width="288"></p>
<p>由于只调用了一个 MapView.onCreate() 方法，因此创建出的地图默认是北京的地图，而且地图中定位蓝点也没有。为了让地图的功能更丰富，我们需要引入 AMap 类和 MyLocationStyle 类，AMap 类是地图控制器，用来管理地图的很多属性；而 MyLocationStyle 类是地图的定位风格属性，包括设置定位模式（连续定位还是单次定位）、连续定位的时间间隔、定位蓝点的样式等等。之后我们还要用到 UiSettings 类，它是用于控制地图界面小工具的显示隐藏的。为了可以更形象的理解高德地图中各个主要类是如何控制地图显示的，我将自己的理解表示成一张图，如下所示：</p>
<p><img src="http://on2kkr82s.bkt.clouddn.com/17-4-2/94701186-file_1491120235392_12e48.png" width="500"></p>
<p>其中，AMap 是管理地图各种属性的主要控制器，但它并不是直接管理的，而是通过它的下级（注意，不是子类）来管理具体的属性，就像人类社会一样，在代码中也能体现出明确的分工。图上只画出了 AMap 管理的 MyLocationStyle 类和 UiSettings 类，其中 MyLocationStyle 类是管理定位风格的，如定位模式，连续定位间隔、定位蓝点的样式等；而 UiSettings 是控制地图上小工具的显示的，如缩放按钮、指南针、比例尺的显示与隐藏，高德地图 logo 的位置（这个 logo　是不能隐藏的）以及地图是否可以旋转等。既然明确了它们之间的逻辑关系，那么就开始编写代码吧，修改 MainActivity.java，先定义一个名为 aMap 类型为 AMap 的全局变量，在 onCreate() 方法中添加如下代码：</p>
<pre class=" language-java"><code class="language-java">        <span class="token comment" spellcheck="true">//初始化地图控制器对象aMap</span>
        <span class="token keyword">if</span><span class="token punctuation">(</span>aMap <span class="token operator">==</span> null<span class="token punctuation">)</span><span class="token punctuation">{</span>
            aMap <span class="token operator">=</span> mapView<span class="token punctuation">.</span><span class="token function">getMap</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true">//将mapView交给地图控制器管理</span>
        <span class="token punctuation">}</span>

        MyLocationStyle myLocationStyle <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">MyLocationStyle</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        myLocationStyle<span class="token punctuation">.</span><span class="token function">myLocationType</span><span class="token punctuation">(</span>MyLocationStyle<span class="token punctuation">.</span>LOCATION_TYPE_LOCATE<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true">//设置定位模式</span>
        <span class="token comment" spellcheck="true">//设置定位点的图标</span>
      myLocationStyle<span class="token punctuation">.</span><span class="token function">myLocationIcon</span><span class="token punctuation">(</span>BitmapDescriptorFactory<span class="token punctuation">.</span><span class="token function">fromResource</span><span class="token punctuation">(</span>R<span class="token punctuation">.</span>drawable<span class="token punctuation">.</span>map_marker<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token comment" spellcheck="true">//定义精度圆样式</span>
        myLocationStyle<span class="token punctuation">.</span><span class="token function">strokeColor</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        myLocationStyle<span class="token punctuation">.</span><span class="token function">radiusFillColor</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

        <span class="token comment" spellcheck="true">//将定位风格设置传给地图控制器</span>
        aMap<span class="token punctuation">.</span><span class="token function">setMyLocationStyle</span><span class="token punctuation">(</span>myLocationStyle<span class="token punctuation">)</span><span class="token punctuation">;</span>
        aMap<span class="token punctuation">.</span><span class="token function">setMyLocationEnabled</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        aMap<span class="token punctuation">.</span><span class="token function">moveCamera</span><span class="token punctuation">(</span>CameraUpdateFactory<span class="token punctuation">.</span><span class="token function">zoomTo</span><span class="token punctuation">(</span><span class="token number">17</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true">//设置缩放级别为17</span>
        aMap<span class="token punctuation">.</span><span class="token function">showIndoorMap</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true">//显示室内地图</span>
</code></pre>
<p>首先判断 aMap 是否为空，如果为空则将地图显示控件 mapView 交由 aMap 管理。然后新建 MyLocationStyle 对象，设置定位模式为单次定位，之所以不设置成连续定位，是因为我们打算通过主界面左下角的那个定位刷新的悬浮按钮来刷新定位，如果设置成连续定位，那么我们不手动刷新，地图也会自己不停的定位，这是我们不愿意看到的，更是用户不愿意看到的（GPS 多费电啊~）。然后设置定位点的显示图标，由于 myLocationIcon 接收的是 BitmapDescriptor 类型的参数，因此这里不能直接传 R.drawable.map_marker，而是通过 BitmapDescriptorFactory 类的 fromResource 方法将其转换为 BitmapDescriptor 类型。之后的两条语句是设置精度圆的样式，什么是精度圆，这两句话有什么作用，看看下图你就知道了（下图是不加这两条语句时定位点的显示效果）：</p>
<p><img src="http://on2kkr82s.bkt.clouddn.com/17-4-2/17900221-file_1491122105579_10d2c.png" width="300"></p>
<p>定位蓝点周围那一圈紫色的区域便是精度圆，默认是带有精度圆的。但是 ofo 共享单车的点位蓝点是不带精度圆的，因此我们就是通过上述两条语句，将精度圆的边框颜色和圆形区域颜色都设置为透明，以达到 ofo 共享单车上的效果。设置好 MyLocationStyle 的属性之后，将其加载到 aMap 中，并设置为允许显示。最后将地图缩放级别定义为 17 级，设置允许使用室内地图（室内地图很强大）。</p>
<p>经过上述设置之后如果直接运行的话，你会发现<strong>你被定位到非洲尼日利亚西南部某片神秘的不知名的大西洋海域</strong>（别问我是怎么知道的，说多了都是泪啊）。我猜想这是由于 app 的权限不够，虽然在 AndroidManifest.xml 中声明了权限，但有些权限进行运行时权限处理的，因此我们需要在 onCreate() 方法中加入一段申请权限的代码，只有用户同意了这些权限，才能继续操作。</p>
<pre class=" language-java"><code class="language-java"><span class="token comment" spellcheck="true">//运行时权限</span>
        List<span class="token operator">&lt;</span>String<span class="token operator">></span> permissionList <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">ArrayList</span><span class="token operator">&lt;</span><span class="token operator">></span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">if</span><span class="token punctuation">(</span>ContextCompat<span class="token punctuation">.</span><span class="token function">checkSelfPermission</span><span class="token punctuation">(</span>MainActivity<span class="token punctuation">.</span><span class="token keyword">this</span><span class="token punctuation">,</span> Manifest<span class="token punctuation">.</span>
                permission<span class="token punctuation">.</span>ACCESS_FINE_LOCATION<span class="token punctuation">)</span> <span class="token operator">!=</span> PackageManager<span class="token punctuation">.</span>PERMISSION_GRANTED<span class="token punctuation">)</span><span class="token punctuation">{</span>
            permissionList<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span>Manifest<span class="token punctuation">.</span>permission<span class="token punctuation">.</span>ACCESS_FINE_LOCATION<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        <span class="token keyword">if</span><span class="token punctuation">(</span>ContextCompat<span class="token punctuation">.</span><span class="token function">checkSelfPermission</span><span class="token punctuation">(</span>MainActivity<span class="token punctuation">.</span><span class="token keyword">this</span><span class="token punctuation">,</span> Manifest<span class="token punctuation">.</span>
                permission<span class="token punctuation">.</span>READ_PHONE_STATE<span class="token punctuation">)</span> <span class="token operator">!=</span> PackageManager<span class="token punctuation">.</span>PERMISSION_GRANTED<span class="token punctuation">)</span><span class="token punctuation">{</span>
            permissionList<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span>Manifest<span class="token punctuation">.</span>permission<span class="token punctuation">.</span>READ_PHONE_STATE<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        <span class="token keyword">if</span><span class="token punctuation">(</span>ContextCompat<span class="token punctuation">.</span><span class="token function">checkSelfPermission</span><span class="token punctuation">(</span>MainActivity<span class="token punctuation">.</span><span class="token keyword">this</span><span class="token punctuation">,</span> Manifest<span class="token punctuation">.</span>
                permission<span class="token punctuation">.</span>WRITE_EXTERNAL_STORAGE<span class="token punctuation">)</span> <span class="token operator">!=</span> PackageManager<span class="token punctuation">.</span>PERMISSION_GRANTED<span class="token punctuation">)</span><span class="token punctuation">{</span>
            permissionList<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span>Manifest<span class="token punctuation">.</span>permission<span class="token punctuation">.</span>WRITE_EXTERNAL_STORAGE<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token operator">!</span>permissionList<span class="token punctuation">.</span><span class="token function">isEmpty</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
            String<span class="token punctuation">[</span><span class="token punctuation">]</span> permissions <span class="token operator">=</span> permissionList<span class="token punctuation">.</span><span class="token function">toArray</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">String</span><span class="token punctuation">[</span>permissionList<span class="token punctuation">.</span><span class="token function">size</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            ActivityCompat<span class="token punctuation">.</span><span class="token function">requestPermissions</span><span class="token punctuation">(</span>MainActivity<span class="token punctuation">.</span><span class="token keyword">this</span><span class="token punctuation">,</span> permissions<span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
</code></pre>
<p>现在我们再来运行一下，运行之后首先跳出申请权限对话框：</p>
<p><img src="http://on2kkr82s.bkt.clouddn.com/17-4-2/84891585-file_1491123447191_14795.png" width="400"></p>
<p>都点击允许之后便出现了主界面，此时可以看到，点位蓝点的位置就是你当前的定位，你可以移动、缩放地图，也可以查看室内地图。如下图所示，左图显示了我当前所处的位置，右图显示的是室内地图。</p>
<p><img src="http://on2kkr82s.bkt.clouddn.com/17-4-2/70293263-file_1491124150844_1507c.png" width="600"></p>
<p>虽然地图模块已经显示成功了，而且可以准确定位，但是这实现了单次定位，如果我们移动了位置，想再次定位就要重启启动软件才行。因此，需要像 ofo 共享单车一样，点击左下角的刷新按钮便能够更新点位，下面这一节就来讲述怎么实现这一功能吧。</p>
<h3 id="5-实现点击定位"><a href="#5-实现点击定位" class="headerlink" title="5. 实现点击定位"></a><strong>5. 实现点击定位</strong></h3><p>为了实现定位功能，我们需要使用两个类：AMapLocationClient 类和 AMapLocationClientOption 类。你可以把前者叫做定位客户端，后者叫做定位客户端设置，还需要一个 Marker 类，用于标记地图上的某个点。新建三个全局变量：</p>
<pre class=" language-java"><code class="language-java">AMapLocationClient mLocationClient <span class="token operator">=</span> null<span class="token punctuation">;</span>
AMapLocationClientOption mLocationOption <span class="token operator">=</span> null<span class="token punctuation">;</span>
Marker locationMarker <span class="token operator">=</span> null<span class="token punctuation">;</span>
</code></pre>
<p>然后在 onCrate() 方法中添加如下代码：</p>
<pre class=" language-java"><code class="language-java">mLocationClient <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">AMapLocationClient</span><span class="token punctuation">(</span><span class="token function">getApplicationContext</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        mLocationOption <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">AMapLocationClientOption</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        mLocationOption<span class="token punctuation">.</span><span class="token function">setOnceLocation</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true">//设置为单次定位模式</span>
        mLocationOption<span class="token punctuation">.</span><span class="token function">setNeedAddress</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true">//返回地址描述</span>
        mLocationOption<span class="token punctuation">.</span><span class="token function">setHttpTimeOut</span><span class="token punctuation">(</span><span class="token number">10000</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true">//设置请求超时时间</span>
        mLocationClient<span class="token punctuation">.</span><span class="token function">setLocationOption</span><span class="token punctuation">(</span>mLocationOption<span class="token punctuation">)</span><span class="token punctuation">;</span>

        <span class="token comment" spellcheck="true">//设置定位回调监听器</span>
        mLocationClient<span class="token punctuation">.</span><span class="token function">setLocationListener</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">AMapLocationListener</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token annotation punctuation">@Override</span>
            <span class="token keyword">public</span> <span class="token keyword">void</span> <span class="token function">onLocationChanged</span><span class="token punctuation">(</span>AMapLocation aMapLocation<span class="token punctuation">)</span> <span class="token punctuation">{</span>
                <span class="token keyword">if</span><span class="token punctuation">(</span>aMapLocation <span class="token operator">!=</span> null<span class="token punctuation">)</span><span class="token punctuation">{</span>
                    LatLng latLng <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">LatLng</span><span class="token punctuation">(</span>aMapLocation<span class="token punctuation">.</span><span class="token function">getLatitude</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> aMapLocation<span class="token punctuation">.</span><span class="token function">getLongitude</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                    <span class="token keyword">if</span><span class="token punctuation">(</span>locationMarker <span class="token operator">==</span> null<span class="token punctuation">)</span><span class="token punctuation">{</span>
                        locationMarker <span class="token operator">=</span> aMap<span class="token punctuation">.</span><span class="token function">addMarker</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">MarkerOptions</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
                                <span class="token punctuation">.</span><span class="token function">position</span><span class="token punctuation">(</span>latLng<span class="token punctuation">)</span>
                                <span class="token punctuation">.</span><span class="token function">icon</span><span class="token punctuation">(</span>BitmapDescriptorFactory<span class="token punctuation">.</span><span class="token function">fromResource</span><span class="token punctuation">(</span>R<span class="token punctuation">.</span>drawable<span class="token punctuation">.</span>center_marker2<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                    <span class="token punctuation">}</span><span class="token keyword">else</span><span class="token punctuation">{</span>
                        locationMarker<span class="token punctuation">.</span><span class="token function">setPosition</span><span class="token punctuation">(</span>latLng<span class="token punctuation">)</span><span class="token punctuation">;</span>
                    <span class="token punctuation">}</span>
                    <span class="token comment" spellcheck="true">//将标记移动到定位点，使用animateCamera就有动画效果</span>
                    aMap<span class="token punctuation">.</span><span class="token function">animateCamera</span><span class="token punctuation">(</span>CameraUpdateFactory<span class="token punctuation">.</span><span class="token function">newLatLngZoom</span><span class="token punctuation">(</span>latLng<span class="token punctuation">,</span> <span class="token number">17</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                <span class="token punctuation">}</span><span class="token keyword">else</span><span class="token punctuation">{</span>
                    Toast<span class="token punctuation">.</span><span class="token function">makeText</span><span class="token punctuation">(</span>MainActivity<span class="token punctuation">.</span><span class="token keyword">this</span><span class="token punctuation">,</span> <span class="token string">"定位失败"</span><span class="token punctuation">,</span> Toast<span class="token punctuation">.</span>LENGTH_SHORT<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">show</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                <span class="token punctuation">}</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>程序的逻辑比较简单，注释都标明了语句的具体作用。需要注意的是这里为定位客户端注册了一个定位监听器，在监听器执行的代码便是获取当前经纬度，并用一个 marker 表示当前经纬度，显示在地图上。那么如何触发这个监听器呢？这个问题问得好，下面这条语句就可以触发：</p>
<pre class=" language-java"><code class="language-java">mLocationClient<span class="token punctuation">.</span><span class="token function">startLocation</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>那么将这句代码放到哪里呢？当然是放到刷新按钮的点击事件的毁掉函数中呀，如下所示：</p>
<pre class=" language-java"><code class="language-java"><span class="token keyword">public</span> <span class="token keyword">void</span> <span class="token function">onClick</span><span class="token punctuation">(</span>View v<span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">switch</span><span class="token punctuation">(</span>v<span class="token punctuation">.</span><span class="token function">getId</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
            <span class="token comment" spellcheck="true">//...</span>
            <span class="token keyword">case</span> R<span class="token punctuation">.</span>id<span class="token punctuation">.</span>refresh<span class="token operator">:</span><span class="token punctuation">{</span>
                <span class="token comment" spellcheck="true">//TODO 刷新定位按钮点击事件</span>
                mLocationClient<span class="token punctuation">.</span><span class="token function">startLocation</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                <span class="token keyword">break</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
            <span class="token comment" spellcheck="true">//...</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
</code></pre>
<p>这样一来，便实现了点击定位功能了。不过在此要注意两个细节。</p>
<p><strong>（1）及时销毁对象</strong></p>
<p>之前定义的 mapView 和 mLocationClient 都没有在主活动结束时进行销毁，因此我们要重写活动的一些回调方法，最后一个方法是保存地图缓存。</p>
<pre class=" language-java"><code class="language-java"> <span class="token annotation punctuation">@Override</span>
    <span class="token keyword">protected</span> <span class="token keyword">void</span> <span class="token function">onDestroy</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">super</span><span class="token punctuation">.</span><span class="token function">onDestroy</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        mapView<span class="token punctuation">.</span><span class="token function">onDestroy</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        mLocationClient<span class="token punctuation">.</span><span class="token function">onDestroy</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment" spellcheck="true">//销毁定位客户端，同时销毁本地定位服务。</span>
    <span class="token punctuation">}</span>

    <span class="token annotation punctuation">@Override</span>
    <span class="token keyword">protected</span> <span class="token keyword">void</span> <span class="token function">onResume</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">super</span><span class="token punctuation">.</span><span class="token function">onResume</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        mapView<span class="token punctuation">.</span><span class="token function">onResume</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token annotation punctuation">@Override</span>
    <span class="token keyword">protected</span> <span class="token keyword">void</span> <span class="token function">onPause</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">super</span><span class="token punctuation">.</span><span class="token function">onPause</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        mapView<span class="token punctuation">.</span><span class="token function">onPause</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token annotation punctuation">@Override</span>
    <span class="token keyword">protected</span> <span class="token keyword">void</span> <span class="token function">onSaveInstanceState</span><span class="token punctuation">(</span>Bundle outState<span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">super</span><span class="token punctuation">.</span><span class="token function">onSaveInstanceState</span><span class="token punctuation">(</span>outState<span class="token punctuation">)</span><span class="token punctuation">;</span>
        mapView<span class="token punctuation">.</span><span class="token function">onSaveInstanceState</span><span class="token punctuation">(</span>outState<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
</code></pre>
<p><strong>（2）调整地图 UI</strong></p>
<p>在之前运行的结果中，可以发现地图界面右下角还保留着默认的缩放按钮，举报按钮就覆盖在它的上面，强迫症患者怎么能容忍这种事情发生呢，赶紧把缩放按钮隐藏掉。</p>
<p>怎么隐藏呢？还记得之前说过的 UiSettings 类吗，没错，就是用它来设置地图 UI 的。新建名为 mUiSettings 类型为 UiSettings 的对象，并在 onCreate() 中添加如下代码：</p>
<pre class=" language-java"><code class="language-java">       <span class="token comment" spellcheck="true">//控件交互</span>
        mUiSettings <span class="token operator">=</span> aMap<span class="token punctuation">.</span><span class="token function">getUiSettings</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        mUiSettings<span class="token punctuation">.</span><span class="token function">setZoomControlsEnabled</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true">//缩放按钮的显示与隐藏</span>
        mUiSettings<span class="token punctuation">.</span><span class="token function">setCompassEnabled</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true">//指南针的显示与隐藏</span>
        mUiSettings<span class="token punctuation">.</span><span class="token function">setScaleControlsEnabled</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true">//比例尺的显示与隐藏</span>
        mUiSettings<span class="token punctuation">.</span><span class="token function">setLogoPosition</span><span class="token punctuation">(</span>AMapOptions<span class="token punctuation">.</span>LOGO_POSITION_BOTTOM_LEFT<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true">//         设置LOGO位置</span>
        mUiSettings<span class="token punctuation">.</span><span class="token function">setRotateGesturesEnabled</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true">//禁止旋转</span>
</code></pre>
<p>代码比较简单，就不多加解析了，看注释吧。好了，地图模块大功告成，点击刷新按钮便可实现更新定位功能了。</p>
<h2 id="二、用车界面开发"><a href="#二、用车界面开发" class="headerlink" title="二、用车界面开发"></a><strong>二、用车界面开发</strong></h2><h3 id="1-Input-面板"><a href="#1-Input-面板" class="headerlink" title="1. Input 面板"></a><strong>1. Input 面板</strong></h3><p>地图功能实现之后，主界面的功能就已经都达到预期目标了，接下来开发用车界面。我们新建一个活动，叫作 UsebikeActivity，在生成的 activity_usebike.xml 中添加如下代码：</p>
<pre class=" language-xml"><code class="language-xml"><span class="token prolog">&lt;?xml version="1.0" encoding="utf-8"?></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>LinearLayout</span> <span class="token attr-name"><span class="token namespace">xmlns:</span>android</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>http://schemas.android.com/apk/res/android<span class="token punctuation">"</span></span>
              <span class="token attr-name"><span class="token namespace">xmlns:</span>app</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>http://schemas.android.com/apk/res-auto<span class="token punctuation">"</span></span>
              <span class="token attr-name"><span class="token namespace">android:</span>layout_width</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>match_parent<span class="token punctuation">"</span></span>
              <span class="token attr-name"><span class="token namespace">android:</span>layout_height</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>match_parent<span class="token punctuation">"</span></span>
              <span class="token attr-name"><span class="token namespace">android:</span>orientation</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vertical<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>

    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>android.support.v7.widget.Toolbar</span>
        <span class="token attr-name"><span class="token namespace">android:</span>id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>@+id/toolbar<span class="token punctuation">"</span></span>
        <span class="token attr-name"><span class="token namespace">android:</span>layout_width</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>match_parent<span class="token punctuation">"</span></span>
        <span class="token attr-name"><span class="token namespace">android:</span>layout_height</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>?attr/actionBarSize<span class="token punctuation">"</span></span>
        <span class="token attr-name"><span class="token namespace">android:</span>background</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>@drawable/bg_top<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ImageView</span>
            <span class="token attr-name"><span class="token namespace">android:</span>layout_width</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>wrap_content<span class="token punctuation">"</span></span>
            <span class="token attr-name"><span class="token namespace">android:</span>layout_height</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>wrap_content<span class="token punctuation">"</span></span>
            <span class="token attr-name"><span class="token namespace">android:</span>background</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>@drawable/actionbar_logo<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ImageView</span>
            <span class="token attr-name"><span class="token namespace">android:</span>id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>@+id/saoma<span class="token punctuation">"</span></span>
            <span class="token attr-name"><span class="token namespace">android:</span>layout_width</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>wrap_content<span class="token punctuation">"</span></span>
            <span class="token attr-name"><span class="token namespace">android:</span>layout_height</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>wrap_content<span class="token punctuation">"</span></span>
            <span class="token attr-name"><span class="token namespace">android:</span>layout_gravity</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>right<span class="token punctuation">"</span></span>
            <span class="token attr-name"><span class="token namespace">android:</span>layout_marginRight</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>10dp<span class="token punctuation">"</span></span>
            <span class="token attr-name"><span class="token namespace">android:</span>background</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>@drawable/saoma_logo<span class="token punctuation">"</span></span>
            <span class="token attr-name"><span class="token namespace">android:</span>visibility</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>visible<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>android.support.v7.widget.Toolbar</span><span class="token punctuation">></span></span>

    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>LinearLayout</span>
        <span class="token attr-name"><span class="token namespace">android:</span>layout_width</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>match_parent<span class="token punctuation">"</span></span>
        <span class="token attr-name"><span class="token namespace">android:</span>layout_height</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>wrap_content<span class="token punctuation">"</span></span>
        <span class="token attr-name"><span class="token namespace">android:</span>layout_margin</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>15dp<span class="token punctuation">"</span></span>
        <span class="token attr-name"><span class="token namespace">android:</span>background</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>@drawable/bg_usebike<span class="token punctuation">"</span></span>
        <span class="token attr-name"><span class="token namespace">android:</span>orientation</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vertical<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>

        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ImageView</span>
            <span class="token attr-name"><span class="token namespace">android:</span>id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>@+id/bg_bike<span class="token punctuation">"</span></span>
            <span class="token attr-name"><span class="token namespace">android:</span>layout_width</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>wrap_content<span class="token punctuation">"</span></span>
            <span class="token attr-name"><span class="token namespace">android:</span>layout_height</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>wrap_content<span class="token punctuation">"</span></span>
            <span class="token attr-name"><span class="token namespace">android:</span>layout_gravity</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>center<span class="token punctuation">"</span></span>
            <span class="token attr-name"><span class="token namespace">android:</span>src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>@drawable/bicycle_signal<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>

        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>TextView</span>
            <span class="token attr-name"><span class="token namespace">android:</span>id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>@+id/hint<span class="token punctuation">"</span></span>
            <span class="token attr-name"><span class="token namespace">android:</span>layout_width</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>wrap_content<span class="token punctuation">"</span></span>
            <span class="token attr-name"><span class="token namespace">android:</span>layout_height</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>wrap_content<span class="token punctuation">"</span></span>
            <span class="token attr-name"><span class="token namespace">android:</span>layout_gravity</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>center_horizontal<span class="token punctuation">"</span></span>
            <span class="token attr-name"><span class="token namespace">android:</span>layout_margin</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>10dp<span class="token punctuation">"</span></span>
            <span class="token attr-name"><span class="token namespace">android:</span>background</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>@drawable/bg_text1<span class="token punctuation">"</span></span>
            <span class="token attr-name"><span class="token namespace">android:</span>gravity</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>center_vertical<span class="token punctuation">"</span></span>
            <span class="token attr-name"><span class="token namespace">android:</span>text</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>包学期期间(7.31前)用车免费喔<span class="token punctuation">"</span></span>
            <span class="token attr-name"><span class="token namespace">android:</span>textColor</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#40320D<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>

        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>LinearLayout</span>
            <span class="token attr-name"><span class="token namespace">android:</span>id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>@+id/input_plate_linear<span class="token punctuation">"</span></span>
            <span class="token attr-name"><span class="token namespace">android:</span>layout_width</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>match_parent<span class="token punctuation">"</span></span>
            <span class="token attr-name"><span class="token namespace">android:</span>layout_height</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>wrap_content<span class="token punctuation">"</span></span>
            <span class="token attr-name"><span class="token namespace">android:</span>layout_marginLeft</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>20dp<span class="token punctuation">"</span></span>
            <span class="token attr-name"><span class="token namespace">android:</span>layout_marginRight</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>20dp<span class="token punctuation">"</span></span>
            <span class="token attr-name"><span class="token namespace">android:</span>gravity</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>center_vertical|center_horizontal<span class="token punctuation">"</span></span>
            <span class="token attr-name"><span class="token namespace">android:</span>visibility</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>visible<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>

            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>EditText</span>
                <span class="token attr-name"><span class="token namespace">android:</span>id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>@+id/code_edit<span class="token punctuation">"</span></span>
                <span class="token attr-name"><span class="token namespace">android:</span>layout_width</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>240dp<span class="token punctuation">"</span></span>
                <span class="token attr-name"><span class="token namespace">android:</span>layout_height</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>50dp<span class="token punctuation">"</span></span>
                <span class="token attr-name"><span class="token namespace">android:</span>layout_margin</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>10dp<span class="token punctuation">"</span></span>
                <span class="token attr-name"><span class="token namespace">android:</span>background</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>@drawable/bg_edit1<span class="token punctuation">"</span></span>
                <span class="token attr-name"><span class="token namespace">android:</span>gravity</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>center_vertical|center_horizontal<span class="token punctuation">"</span></span>
                <span class="token attr-name"><span class="token namespace">android:</span>inputType</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>number<span class="token punctuation">"</span></span>
                <span class="token attr-name"><span class="token namespace">android:</span>textColor</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#40320D<span class="token punctuation">"</span></span>
                <span class="token attr-name"><span class="token namespace">android:</span>textSize</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>30sp<span class="token punctuation">"</span></span>
                <span class="token attr-name"><span class="token namespace">android:</span>maxLength</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>8<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>

            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span>
                <span class="token attr-name"><span class="token namespace">android:</span>id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>@+id/check_code<span class="token punctuation">"</span></span>
                <span class="token attr-name"><span class="token namespace">android:</span>layout_width</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>50dp<span class="token punctuation">"</span></span>
                <span class="token attr-name"><span class="token namespace">android:</span>layout_height</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>50dp<span class="token punctuation">"</span></span>
                <span class="token attr-name"><span class="token namespace">android:</span>layout_margin</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>5dp<span class="token punctuation">"</span></span>
                <span class="token attr-name"><span class="token namespace">android:</span>background</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>@drawable/checkf<span class="token punctuation">"</span></span>
                <span class="token attr-name"><span class="token namespace">android:</span>clickable</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>false<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>LinearLayout</span><span class="token punctuation">></span></span>

        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>TextView</span>
            <span class="token attr-name"><span class="token namespace">android:</span>id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>@+id/code_hint<span class="token punctuation">"</span></span>
            <span class="token attr-name"><span class="token namespace">android:</span>layout_width</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>wrap_content<span class="token punctuation">"</span></span>
            <span class="token attr-name"><span class="token namespace">android:</span>layout_height</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>wrap_content<span class="token punctuation">"</span></span>
            <span class="token attr-name"><span class="token namespace">android:</span>layout_gravity</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>center<span class="token punctuation">"</span></span>
            <span class="token attr-name"><span class="token namespace">android:</span>layout_marginBottom</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>10dp<span class="token punctuation">"</span></span>
            <span class="token attr-name"><span class="token namespace">android:</span>text</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>请输入车牌号，获取解锁码<span class="token punctuation">"</span></span>
            <span class="token attr-name"><span class="token namespace">android:</span>textColor</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#40320D<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>LinearLayout</span><span class="token punctuation">></span></span>

    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>android.support.design.widget.FloatingActionButton</span>
        <span class="token attr-name"><span class="token namespace">android:</span>id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>@+id/light<span class="token punctuation">"</span></span>
        <span class="token attr-name"><span class="token namespace">android:</span>layout_width</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>wrap_content<span class="token punctuation">"</span></span>
        <span class="token attr-name"><span class="token namespace">android:</span>layout_height</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>wrap_content<span class="token punctuation">"</span></span>
        <span class="token attr-name"><span class="token namespace">android:</span>layout_gravity</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>center_horizontal<span class="token punctuation">"</span></span>
        <span class="token attr-name"><span class="token namespace">android:</span>src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>@drawable/light_off<span class="token punctuation">"</span></span>
        <span class="token attr-name"><span class="token namespace">app:</span>elevation</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>2dp<span class="token punctuation">"</span></span>
        <span class="token attr-name"><span class="token namespace">android:</span>scaleType</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>center<span class="token punctuation">"</span></span>
        <span class="token attr-name"><span class="token namespace">android:</span>visibility</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>visible<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span> 
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>LinearLayout</span><span class="token punctuation">></span></span>
</code></pre>
<p>别看上面的代码有 100 行，其实这种 xml 文件是非常好理解的，不过是各种控件搭积木式的拼凑而已。简单分析一下，最外层是一个线性布局，将之前定义的 toolbar 标题栏直接拿过来用就好了，然后主体又是一个线性布局，里面就是 TextView、ImageView、EditView 和 Button 的简单组合而已，最底下的手电筒按钮是一个简单的 FloatingActionButton，悬浮按钮的用法在上一篇博客讲过。预览一下效果：</p>
<p><img src="http://on2kkr82s.bkt.clouddn.com/17-4-2/9531359-file_1491128630463_f0f0.png" width="288"></p>
<p>下面建立「主活动」和「用车活动」的联系，点击用车按钮，便跳出用车界面。实现很简单，用显式 Intent 即可，修改用车按钮的点击事件回调函数：</p>
<pre class=" language-java"><code class="language-java"> <span class="token keyword">public</span> <span class="token keyword">void</span> <span class="token function">onClick</span><span class="token punctuation">(</span>View v<span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">switch</span><span class="token punctuation">(</span>v<span class="token punctuation">.</span><span class="token function">getId</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
            <span class="token keyword">case</span> R<span class="token punctuation">.</span>id<span class="token punctuation">.</span>begin<span class="token operator">:</span><span class="token punctuation">{</span>
                <span class="token comment" spellcheck="true">//TODO 开始按钮点击事件</span>
                <span class="token comment" spellcheck="true">//启动 UsebikeActivity</span>
                Intent intent <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Intent</span><span class="token punctuation">(</span>MainActivity<span class="token punctuation">.</span><span class="token keyword">this</span><span class="token punctuation">,</span> UsebikeActivity<span class="token punctuation">.</span><span class="token keyword">class</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                <span class="token function">startActivity</span><span class="token punctuation">(</span>intent<span class="token punctuation">)</span><span class="token punctuation">;</span>
                <span class="token keyword">break</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
            <span class="token comment" spellcheck="true">//...</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
</code></pre>
<p>非常简单，两句代码搞定。这样通过点击主界面的「立即用车」，就能跳转到用车界面了，不过还有些细节要注意。</p>
<p>在用车界面中，EditText 内容有变化时，底下的 TextView 提示和右边的 Button 也要发生相应变化。在 UsebikeActivity 中为 codeEdit （就是车牌的输入框）注册内容变化事件的监听器。其中 checkCode 是输入框右边的 Button，codeHint 是输入框下方的 TextView，用于密码提示（原谅我拙计的命名方式，连我自己都搞不清了）。这些控件都需要事先通过 findViewById()  从布局中找到，这些过程就省略了。</p>
<pre class=" language-java"><code class="language-java"><span class="token comment" spellcheck="true">//codeEdit输入发生变化的监听器</span>
        codeEdit<span class="token punctuation">.</span><span class="token function">addTextChangedListener</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">TextWatcher</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token annotation punctuation">@Override</span>
            <span class="token keyword">public</span> <span class="token keyword">void</span> <span class="token function">beforeTextChanged</span><span class="token punctuation">(</span>CharSequence s<span class="token punctuation">,</span> <span class="token keyword">int</span> start<span class="token punctuation">,</span> <span class="token keyword">int</span> count<span class="token punctuation">,</span> <span class="token keyword">int</span> after<span class="token punctuation">)</span> <span class="token punctuation">{</span>

            <span class="token punctuation">}</span>
            <span class="token annotation punctuation">@Override</span>
            <span class="token keyword">public</span> <span class="token keyword">void</span> <span class="token function">onTextChanged</span><span class="token punctuation">(</span>CharSequence s<span class="token punctuation">,</span> <span class="token keyword">int</span> start<span class="token punctuation">,</span> <span class="token keyword">int</span> before<span class="token punctuation">,</span> <span class="token keyword">int</span> count<span class="token punctuation">)</span> <span class="token punctuation">{</span>
                input <span class="token operator">=</span> codeEdit<span class="token punctuation">.</span><span class="token function">getText</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token operator">!</span>input<span class="token punctuation">.</span><span class="token function">isEmpty</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
                    checkCode<span class="token punctuation">.</span><span class="token function">setClickable</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                    checkCode<span class="token punctuation">.</span><span class="token function">setBackgroundResource</span><span class="token punctuation">(</span>R<span class="token punctuation">.</span>drawable<span class="token punctuation">.</span>checkt<span class="token punctuation">)</span><span class="token punctuation">;</span>
                    <span class="token keyword">if</span><span class="token punctuation">(</span>input<span class="token punctuation">.</span><span class="token function">length</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">&lt;</span> <span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
                        codeHint<span class="token punctuation">.</span><span class="token function">setText</span><span class="token punctuation">(</span><span class="token string">"车牌号一般为4-8位的数字"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                    <span class="token punctuation">}</span><span class="token keyword">else</span><span class="token punctuation">{</span>
                        codeHint<span class="token punctuation">.</span><span class="token function">setText</span><span class="token punctuation">(</span><span class="token string">"温馨提示：若输错车牌号，将无法打开车锁。"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                    <span class="token punctuation">}</span>
                <span class="token punctuation">}</span><span class="token keyword">else</span><span class="token punctuation">{</span>
                    checkCode<span class="token punctuation">.</span><span class="token function">setClickable</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                    checkCode<span class="token punctuation">.</span><span class="token function">setBackgroundResource</span><span class="token punctuation">(</span>R<span class="token punctuation">.</span>drawable<span class="token punctuation">.</span>checkf<span class="token punctuation">)</span><span class="token punctuation">;</span>
                <span class="token punctuation">}</span>
            <span class="token punctuation">}</span>
            <span class="token annotation punctuation">@Override</span>
            <span class="token keyword">public</span> <span class="token keyword">void</span> <span class="token function">afterTextChanged</span><span class="token punctuation">(</span>Editable s<span class="token punctuation">)</span> <span class="token punctuation">{</span>

            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>在回调函数中，先判断输入框是否为空，如果不为空，则改变按钮的样式；然后判断输入框字符长度，根据长度给出相应提示，最大长度为 8 位，效果如下图所示：</p>
<p><img src="http://on2kkr82s.bkt.clouddn.com/17-4-2/93288955-file_1491131253416_a479.png" width="600"></p>
<h3 id="2-Output-面板"><a href="#2-Output-面板" class="headerlink" title="2. Output 面板"></a><strong>2. Output 面板</strong></h3><p>用车界面的输入面板已经实现好了，下面要实现输入车牌之后，跳转到密码显示面板，即 Output 面板，这个面板要新建一个活动吗？当然不用，我们只要对 Input 面板进行适当修改，利用控件的 visibility 属性控制其可见性就能够实现了。通过在 activity_usebike.xml 中将输入框和按钮所对应的线性布局隐藏，以及隐藏小电筒按钮。用如下代码取而代之，即可实现 Output 面板。</p>
<pre class=" language-xml"><code class="language-xml"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>LinearLayout</span>
            <span class="token attr-name"><span class="token namespace">android:</span>id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>@+id/show_code_linear<span class="token punctuation">"</span></span>
            <span class="token attr-name"><span class="token namespace">android:</span>layout_width</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>match_parent<span class="token punctuation">"</span></span>
            <span class="token attr-name"><span class="token namespace">android:</span>layout_height</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>wrap_content<span class="token punctuation">"</span></span>
            <span class="token attr-name"><span class="token namespace">android:</span>layout_marginLeft</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>20dp<span class="token punctuation">"</span></span>
            <span class="token attr-name"><span class="token namespace">android:</span>layout_marginRight</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>20dp<span class="token punctuation">"</span></span>
            <span class="token attr-name"><span class="token namespace">android:</span>gravity</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>center_vertical|center_horizontal<span class="token punctuation">"</span></span>
            <span class="token attr-name"><span class="token namespace">android:</span>visibility</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>visible<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>

            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>TextView</span>
                <span class="token attr-name"><span class="token namespace">android:</span>id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>@+id/code1<span class="token punctuation">"</span></span>
                <span class="token attr-name"><span class="token namespace">android:</span>layout_width</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>50dp<span class="token punctuation">"</span></span>
                <span class="token attr-name"><span class="token namespace">android:</span>layout_height</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>50dp<span class="token punctuation">"</span></span>
                <span class="token attr-name"><span class="token namespace">android:</span>layout_margin</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>2dp<span class="token punctuation">"</span></span>
                <span class="token attr-name"><span class="token namespace">android:</span>background</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>@drawable/bg_code<span class="token punctuation">"</span></span>
                <span class="token attr-name"><span class="token namespace">android:</span>gravity</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>center_vertical|center_horizontal<span class="token punctuation">"</span></span>
                <span class="token attr-name"><span class="token namespace">android:</span>text</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>4<span class="token punctuation">"</span></span>
                <span class="token attr-name"><span class="token namespace">android:</span>textColor</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#40320D<span class="token punctuation">"</span></span>
                <span class="token attr-name"><span class="token namespace">android:</span>textSize</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>30sp<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>

            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>TextView</span>
                <span class="token attr-name"><span class="token namespace">android:</span>id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>@+id/code2<span class="token punctuation">"</span></span>
                <span class="token attr-name"><span class="token namespace">android:</span>layout_width</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>50dp<span class="token punctuation">"</span></span>
                <span class="token attr-name"><span class="token namespace">android:</span>layout_height</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>50dp<span class="token punctuation">"</span></span>
                <span class="token attr-name"><span class="token namespace">android:</span>layout_margin</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>2dp<span class="token punctuation">"</span></span>
                <span class="token attr-name"><span class="token namespace">android:</span>background</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>@drawable/bg_code<span class="token punctuation">"</span></span>
                <span class="token attr-name"><span class="token namespace">android:</span>gravity</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>center_vertical|center_horizontal<span class="token punctuation">"</span></span>
                <span class="token attr-name"><span class="token namespace">android:</span>text</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span>
                <span class="token attr-name"><span class="token namespace">android:</span>textColor</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#40320D<span class="token punctuation">"</span></span>
                <span class="token attr-name"><span class="token namespace">android:</span>textSize</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>30sp<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>

            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>TextView</span>
                <span class="token attr-name"><span class="token namespace">android:</span>id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>@+id/code3<span class="token punctuation">"</span></span>
                <span class="token attr-name"><span class="token namespace">android:</span>layout_width</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>50dp<span class="token punctuation">"</span></span>
                <span class="token attr-name"><span class="token namespace">android:</span>layout_height</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>50dp<span class="token punctuation">"</span></span>
                <span class="token attr-name"><span class="token namespace">android:</span>layout_margin</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>2dp<span class="token punctuation">"</span></span>
                <span class="token attr-name"><span class="token namespace">android:</span>background</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>@drawable/bg_code<span class="token punctuation">"</span></span>
                <span class="token attr-name"><span class="token namespace">android:</span>gravity</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>center_vertical|center_horizontal<span class="token punctuation">"</span></span>
                <span class="token attr-name"><span class="token namespace">android:</span>text</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>9<span class="token punctuation">"</span></span>
                <span class="token attr-name"><span class="token namespace">android:</span>textColor</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#40320D<span class="token punctuation">"</span></span>
                <span class="token attr-name"><span class="token namespace">android:</span>textSize</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>30sp<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>

            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>TextView</span>
                <span class="token attr-name"><span class="token namespace">android:</span>id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>@+id/code4<span class="token punctuation">"</span></span>
                <span class="token attr-name"><span class="token namespace">android:</span>layout_width</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>50dp<span class="token punctuation">"</span></span>
                <span class="token attr-name"><span class="token namespace">android:</span>layout_height</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>50dp<span class="token punctuation">"</span></span>
                <span class="token attr-name"><span class="token namespace">android:</span>layout_margin</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>2dp<span class="token punctuation">"</span></span>
                <span class="token attr-name"><span class="token namespace">android:</span>background</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>@drawable/bg_code<span class="token punctuation">"</span></span>
                <span class="token attr-name"><span class="token namespace">android:</span>gravity</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>center_vertical|center_horizontal<span class="token punctuation">"</span></span>
                <span class="token attr-name"><span class="token namespace">android:</span>text</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span>
                <span class="token attr-name"><span class="token namespace">android:</span>textColor</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#40320D<span class="token punctuation">"</span></span>
                <span class="token attr-name"><span class="token namespace">android:</span>textSize</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>30sp<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>LinearLayout</span><span class="token punctuation">></span></span>
</code></pre>
<p>预览效果如下：</p>
<p><img src="http://on2kkr82s.bkt.clouddn.com/17-4-2/26235861-file_1491131983827_1665d.png" width="300"></p>
<h2 id="三、用-OkHttp-获取服务器数据"><a href="#三、用-OkHttp-获取服务器数据" class="headerlink" title="三、用 OkHttp 获取服务器数据"></a><strong>三、用 OkHttp 获取服务器数据</strong></h2><p>用车界面制作完毕，下一步是根据用户在 Input 面板中输入的车牌，从服务器获取车牌对应的密码，然后显示在 Output 面板中。当然，这里的服务器可不是 ofo 共享单车的服务器，是我自己建的服务器，其实就是一个虚拟主机而已。可以事先在服务器端放置好模拟数据，这里我也不用什么 JSON 数据格式了，直接自定义数据格式为 <code>`密码</code>+<code>:</code>+<code>车牌号</code>+<code>;</code>。如下图所示：</p>
<p><img src="http://on2kkr82s.bkt.clouddn.com/17-4-2/70925715-file_1491135279665_9de3.jpg" width="400"></p>
<p>然后在 UsebikeActivity 中为 codeCheck 按钮注册点击事件监听器，另外在类中定义一个 copy() 方法，用于将字符串复制到剪切板。</p>
<pre class=" language-java"><code class="language-java"><span class="token comment" spellcheck="true">//确定按钮监听器</span>
        checkCode<span class="token punctuation">.</span><span class="token function">setOnClickListener</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">View<span class="token punctuation">.</span>OnClickListener</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
            <span class="token annotation punctuation">@Override</span>
            <span class="token keyword">public</span> <span class="token keyword">void</span> <span class="token function">onClick</span><span class="token punctuation">(</span>View v<span class="token punctuation">)</span><span class="token punctuation">{</span>
                input <span class="token operator">=</span> codeEdit<span class="token punctuation">.</span><span class="token function">getText</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                <span class="token keyword">if</span><span class="token punctuation">(</span>input<span class="token punctuation">.</span><span class="token function">length</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">&lt;</span> <span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
                    Toast<span class="token punctuation">.</span><span class="token function">makeText</span><span class="token punctuation">(</span>UsebikeActivity<span class="token punctuation">.</span><span class="token keyword">this</span><span class="token punctuation">,</span> <span class="token string">"请输入正确的车牌号！"</span><span class="token punctuation">,</span> Toast<span class="token punctuation">.</span>LENGTH_SHORT<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">show</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                    <span class="token keyword">return</span><span class="token punctuation">;</span>
                <span class="token punctuation">}</span>

                <span class="token comment" spellcheck="true">//TODO 访问远程数据库，检验是否匹配</span>
                String url <span class="token operator">=</span> <span class="token string">""</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true">//TODO 此处填写服务器端url</span>
                Utils<span class="token punctuation">.</span><span class="token function">sendOkHttpRequest</span><span class="token punctuation">(</span>url<span class="token punctuation">,</span> <span class="token keyword">new</span> <span class="token class-name">Callback</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                    <span class="token annotation punctuation">@Override</span>
                    <span class="token keyword">public</span> <span class="token keyword">void</span> <span class="token function">onFailure</span><span class="token punctuation">(</span>Call call<span class="token punctuation">,</span> IOException e<span class="token punctuation">)</span> <span class="token punctuation">{</span>
                        e<span class="token punctuation">.</span><span class="token function">printStackTrace</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                    <span class="token punctuation">}</span>

                    <span class="token annotation punctuation">@Override</span>
                    <span class="token keyword">public</span> <span class="token keyword">void</span> <span class="token function">onResponse</span><span class="token punctuation">(</span>Call call<span class="token punctuation">,</span> Response response<span class="token punctuation">)</span> <span class="token keyword">throws</span> IOException <span class="token punctuation">{</span>
                        <span class="token keyword">final</span> String temp <span class="token operator">=</span> response<span class="token punctuation">.</span><span class="token function">body</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">string</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true">//这句 final 很重要</span>
                        <span class="token function">runOnUiThread</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Runnable</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                            <span class="token annotation punctuation">@Override</span>
                            <span class="token keyword">public</span> <span class="token keyword">void</span> <span class="token function">run</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                                sql <span class="token operator">=</span> temp<span class="token punctuation">;</span>
                                <span class="token comment" spellcheck="true">//sql数据格式为：密码 + ":" + 车牌 + "分号"</span>
                                index <span class="token operator">=</span> sql<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span><span class="token string">":"</span> <span class="token operator">+</span> input<span class="token punctuation">)</span><span class="token punctuation">;</span>
                                <span class="token keyword">if</span><span class="token punctuation">(</span>index <span class="token operator">==</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
                                    <span class="token comment" spellcheck="true">//复制到剪贴板</span>
                                    <span class="token function">copy</span><span class="token punctuation">(</span>input<span class="token punctuation">,</span> UsebikeActivity<span class="token punctuation">.</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                                    <span class="token comment" spellcheck="true">//跳转至另一个APP的具体活动</span>
                                    Intent intent <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Intent</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                                    Toast<span class="token punctuation">.</span><span class="token function">makeText</span><span class="token punctuation">(</span>UsebikeActivity<span class="token punctuation">.</span><span class="token keyword">this</span><span class="token punctuation">,</span> <span class="token string">"已复制车牌号 "</span> <span class="token operator">+</span> input<span class="token punctuation">,</span> Toast<span class="token punctuation">.</span>LENGTH_SHORT<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">show</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                                    ComponentName cn <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">ComponentName</span><span class="token punctuation">(</span><span class="token string">"so.ofo.labofo"</span><span class="token punctuation">,</span> <span class="token string">"so.ofo.labofo.activities.EntryActivity"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                                    <span class="token keyword">try</span> <span class="token punctuation">{</span>
                                        intent<span class="token punctuation">.</span><span class="token function">setComponent</span><span class="token punctuation">(</span>cn<span class="token punctuation">)</span><span class="token punctuation">;</span>
                                        intent<span class="token punctuation">.</span><span class="token function">putExtra</span><span class="token punctuation">(</span><span class="token string">"车牌"</span><span class="token punctuation">,</span> input<span class="token punctuation">)</span><span class="token punctuation">;</span>
                                        <span class="token function">startActivity</span><span class="token punctuation">(</span>intent<span class="token punctuation">)</span><span class="token punctuation">;</span>
                                    <span class="token punctuation">}</span> <span class="token keyword">catch</span><span class="token punctuation">(</span>Exception e<span class="token punctuation">)</span> <span class="token punctuation">{</span>
                                        <span class="token comment" spellcheck="true">//TODO  可以在这里提示用户没有安装应用或找不到指定Activity，或者是做其他的操作</span>
                                        Toast<span class="token punctuation">.</span><span class="token function">makeText</span><span class="token punctuation">(</span>UsebikeActivity<span class="token punctuation">.</span><span class="token keyword">this</span><span class="token punctuation">,</span> <span class="token string">"未安装 ofo 共享单车"</span><span class="token punctuation">,</span> Toast<span class="token punctuation">.</span>LENGTH_SHORT<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">show</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                                        e<span class="token punctuation">.</span><span class="token function">printStackTrace</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                                    <span class="token punctuation">}</span>

                                <span class="token punctuation">}</span><span class="token keyword">else</span><span class="token punctuation">{</span>
                                    <span class="token comment" spellcheck="true">//TODO 这里验证 input 是否包含在云端数据库</span>
                                    <span class="token comment" spellcheck="true">//获取并设置密码</span>
                                    String code1 <span class="token operator">=</span> String<span class="token punctuation">.</span><span class="token function">valueOf</span><span class="token punctuation">(</span>sql<span class="token punctuation">.</span><span class="token function">charAt</span><span class="token punctuation">(</span>index<span class="token operator">-</span><span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                                    String code2 <span class="token operator">=</span> String<span class="token punctuation">.</span><span class="token function">valueOf</span><span class="token punctuation">(</span>sql<span class="token punctuation">.</span><span class="token function">charAt</span><span class="token punctuation">(</span>index<span class="token operator">-</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                                    String code3 <span class="token operator">=</span> String<span class="token punctuation">.</span><span class="token function">valueOf</span><span class="token punctuation">(</span>sql<span class="token punctuation">.</span><span class="token function">charAt</span><span class="token punctuation">(</span>index<span class="token operator">-</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                                    String code4 <span class="token operator">=</span> String<span class="token punctuation">.</span><span class="token function">valueOf</span><span class="token punctuation">(</span>sql<span class="token punctuation">.</span><span class="token function">charAt</span><span class="token punctuation">(</span>index<span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

                                    textCode1<span class="token punctuation">.</span><span class="token function">setText</span><span class="token punctuation">(</span>code1<span class="token punctuation">)</span><span class="token punctuation">;</span>
                                    textCode2<span class="token punctuation">.</span><span class="token function">setText</span><span class="token punctuation">(</span>code2<span class="token punctuation">)</span><span class="token punctuation">;</span>
                                    textCode3<span class="token punctuation">.</span><span class="token function">setText</span><span class="token punctuation">(</span>code3<span class="token punctuation">)</span><span class="token punctuation">;</span>
                                    textCode4<span class="token punctuation">.</span><span class="token function">setText</span><span class="token punctuation">(</span>code4<span class="token punctuation">)</span><span class="token punctuation">;</span>

                                    bgBike<span class="token punctuation">.</span><span class="token function">setImageResource</span><span class="token punctuation">(</span>R<span class="token punctuation">.</span>drawable<span class="token punctuation">.</span>unlock_bg_card<span class="token punctuation">)</span><span class="token punctuation">;</span>
                                    hint<span class="token punctuation">.</span><span class="token function">setText</span><span class="token punctuation">(</span><span class="token string">"车牌号 "</span> <span class="token operator">+</span> input <span class="token operator">+</span> <span class="token string">" 的解锁码"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                                    hint<span class="token punctuation">.</span><span class="token function">setTextSize</span><span class="token punctuation">(</span><span class="token number">20</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                                    hint<span class="token punctuation">.</span><span class="token function">setBackgroundResource</span><span class="token punctuation">(</span>R<span class="token punctuation">.</span>drawable<span class="token punctuation">.</span>bg_white<span class="token punctuation">)</span><span class="token punctuation">;</span>
                                    codeHint<span class="token punctuation">.</span><span class="token function">setText</span><span class="token punctuation">(</span><span class="token string">"骑行结束后，记得在手机上结束行程"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                                    inputLinear<span class="token punctuation">.</span><span class="token function">setVisibility</span><span class="token punctuation">(</span>View<span class="token punctuation">.</span>GONE<span class="token punctuation">)</span><span class="token punctuation">;</span>
                                    showLinear<span class="token punctuation">.</span><span class="token function">setVisibility</span><span class="token punctuation">(</span>View<span class="token punctuation">.</span>VISIBLE<span class="token punctuation">)</span><span class="token punctuation">;</span>
                                <span class="token punctuation">}</span>
                            <span class="token punctuation">}</span>
                        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                    <span class="token punctuation">}</span>
                <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<pre class=" language-java"><code class="language-java"><span class="token comment" spellcheck="true">//复制文字到剪贴板</span>
    <span class="token keyword">public</span> <span class="token keyword">static</span> <span class="token keyword">void</span> <span class="token function">copy</span><span class="token punctuation">(</span>String content<span class="token punctuation">,</span> Context context<span class="token punctuation">)</span>
    <span class="token punctuation">{</span>
        ClipboardManager clipboard <span class="token operator">=</span> <span class="token punctuation">(</span>ClipboardManager<span class="token punctuation">)</span>context<span class="token punctuation">.</span><span class="token function">getSystemService</span><span class="token punctuation">(</span>Context<span class="token punctuation">.</span>CLIPBOARD_SERVICE<span class="token punctuation">)</span><span class="token punctuation">;</span>
        ClipData clip <span class="token operator">=</span> ClipData<span class="token punctuation">.</span><span class="token function">newPlainText</span><span class="token punctuation">(</span><span class="token string">"label"</span><span class="token punctuation">,</span> content<span class="token punctuation">)</span><span class="token punctuation">;</span>
        clipboard<span class="token punctuation">.</span><span class="token function">setPrimaryClip</span><span class="token punctuation">(</span>clip<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
</code></pre>
<p>逻辑非常明了：若输入框中的字符个数小于 4，则跳出相应提示，并 return。否则，访问服务器获取数据，并在这些数据中寻找与输入车牌号相对应的密码，若找到，则显示到 Output 面板；若没有找到，则复制车牌号到剪贴板，并跳转至 ofo 共享单车（若手机上没有安装 ofo 共享单车，也会跳出相应提示）。最终实现效果：</p>
<p><img src="http://on2kkr82s.bkt.clouddn.com/17-4-1/28019592-file_1491061455901_17cb0.png" width="600"></p>
<p><img src="http://on2kkr82s.bkt.clouddn.com/17-4-1/62403252-file_1491061459270_17abc.png" width="600"></p>
<video src="http://on2kkr82s.bkt.clouddn.com/Minofo%E9%A2%84%E8%A7%88.mp4" width="288" height="512" controls="controls">Your browser does not support the video tag.</video>



<h2 id="四、下载及声明"><a href="#四、下载及声明" class="headerlink" title="四、下载及声明"></a><strong>四、下载及声明</strong></h2><p>1 <strong>Apk 下载</strong>：点击<a href="http://on2kkr82s.bkt.clouddn.com/Minofo%201.0.apk" target="_blank" rel="external">下载 apk</a> 或扫码下载：</p>
<p><img src="http://on2kkr82s.bkt.clouddn.com/1491063109.png" width="225"></p>
<p>2 <strong>Github 源码</strong>：<a href="https://github.com/nightn/minofo" target="_blank" rel="external">https://github.com/nightn/minofo</a></p>
<p>3 <strong>声明</strong>：本产品用作分享与学习，若转载请注明出处，勿作任何商业用途。</p>
]]></content>
      
        <categories>
            
            <category> Android </category>
            
        </categories>
        
        
        <tags>
            
            <tag> Android </tag>
            
            <tag> ofo </tag>
            
            <tag> 高德地图 </tag>
            
        </tags>
        
    </entry>
    
    <entry>
      <title><![CDATA[Android 开发小作：Minofo(1)]]></title>
      <url>http://nightn.com/2017/04/01/Android-develop-minofo-1/</url>
      <content type="html"><![CDATA[<p>记录了开发一个完整 Android 软件 Minofo 的整个过程，本系列博客包括两篇，本文是第一篇，主要内容包括如何解析一个 App，Toolbar 标题栏，NavigationView 导航栏以及悬浮按钮的实现，从而完成 Minofo 主界面的开发。本文提供 <a href="http://on2kkr82s.bkt.clouddn.com/Minofo%281%29.pdf" target="_blank" rel="external">PDF 版本</a>可供查阅及下载。<br><a id="more"></a></p>
<p><a href="http://nightn.com/2017/04/01/Android-develop-minofo-1/">Android 开发小作：Minofo(1)</a></p>
<p><a href="http://nightn.com/2017/04/02/Android-develop-minofo-2/">Android 开发小作：Minofo(2)</a></p>
<h2 id="一、简介"><a href="#一、简介" class="headerlink" title="一、简介"></a><strong>一、简介</strong></h2><p>学习 Android 开发已经一个月了，除了敲书本上的 demo，就只写过一个简易版的浏览器，为了巩固之前所学，我决定开发一个稍微完整点的具有 Material Design 风格的 App。浏览了手机上的 App，发现在 Material Design 风格的软件中，除了 Google 系列的 App，就只有印象笔记和 ofo 共享单车了（其他软件基本都是微信风格）。ofo 共享单车需要引入地图模块，实现起来更加有成就感，因此最终决定模仿 ofo 共享单车（主要是对界面的模仿）。</p>
<p>整个开发花了两天时间，期间遇到不少问题，以下便是对整个过程的梳理和总结，希望读者看完后能对 Android 开发有一个初步的认识，然后挥舞起键盘和本子，把灵感用代码一一实现。</p>
<p>话不多说，先看最终效果吧！</p>
<p><img src="http://on2kkr82s.bkt.clouddn.com/17-4-1/28019592-file_1491061455901_17cb0.png" width="600"></p>
<p><img src="http://on2kkr82s.bkt.clouddn.com/17-4-1/62403252-file_1491061459270_17abc.png" width="600"></p>
<p>视频预览效果：</p>
<video src="http://on2kkr82s.bkt.clouddn.com/Minofo%E9%A2%84%E8%A7%88.mp4" width="288" height="512" controls="controls">Your browser does not support the video tag.</video>

<ol>
<li><strong>Apk 下载</strong>：点击<a href="http://on2kkr82s.bkt.clouddn.com/Minofo%201.0.apk" target="_blank" rel="external">下载 apk</a> 或扫码下载</li>
</ol>
<p><img src="http://on2kkr82s.bkt.clouddn.com/1491063109.png" width="225"></p>
<ol>
<li><strong>Github 源码</strong>：<a href="https://github.com/nightn/minofo" target="_blank" rel="external">https://github.com/nightn/minofo</a></li>
<li><strong>声明</strong>：本产品用作分享与学习，若转载请注明出处，勿作任何商业用途。</li>
</ol>
<h2 id="二、如何解析一个-Apk"><a href="#二、如何解析一个-Apk" class="headerlink" title="二、如何解析一个 Apk"></a><strong>二、如何解析一个 Apk</strong></h2><p>开发环境搭建什么的在此不再赘述，我使用的 IDE 是 Android Studio 2.2.3，JDK 版本是 1.8.0。要模仿一个 App，首先需要获取这个 Apk 的一些资源，如图片、布局文件。这个很简单，把下载下来的 Apk 文件后缀名改成 zip直接打开，相当于直接解压，如下图所示。</p>
<p><img src="http://on2kkr82s.bkt.clouddn.com/17-4-1/8972296-file_1491025659408_2e55.png" width="416"></p>
<p>其中 res 目录存放的就是一个 App 所有的图片资源和布局文件了，找到其中需要的图片，放到 Android 项目的相应目录即可，下图便是我所选的部分图片资源。</p>
<p><img src="http://on2kkr82s.bkt.clouddn.com/17-4-1/17743548-file_1491025990799_35a4.png" width="552"></p>
<p>当然，如果深入解析，比如通过 ApkTool 工具，还能获取一个 apk 可读的 AndroidManifest.xml（通过 zip 得到的 AndroidManifest.xml 是乱码的），这样就能查看它的 package name、Activity 组件、所需要的权限等信息了。如果你觉得这些信息还不够用，甚至还可以通过 dex2jar 工具反编译 dex 文件，获得它的 java 源代码，听起来是不是很厉害，不过这些代码中的命名都是经过处理的，基本上也读不懂。如果你想更深入地了解 Android 反编译技术，你可以参考<a href="https://unclechen.github.io/2016/09/07/Android%E5%8F%8D%E7%BC%96%E8%AF%91%E6%8A%80%E6%9C%AF%E6%80%BB%E7%BB%93/" target="_blank" rel="external">这篇文章</a>。</p>
<p>言归正传，在我们这个项目中，主要用到的只是 apk 中的图片资源，下面就一起来开启开发之旅吧！</p>
<h2 id="三、主界面开发"><a href="#三、主界面开发" class="headerlink" title="三、主界面开发"></a><strong>三、主界面开发</strong></h2><p>先来观察一下 ofo 共享单车的主界面布局，在下图中，我们可以看到主界面包括三个部分，最上面的<strong>标题栏</strong>、中间的<strong>地图模块</strong>以及底下的三个<strong>悬浮按钮</strong>，非常的简洁明了。</p>
<p><img src="http://on2kkr82s.bkt.clouddn.com/17-4-1/39342242-file_1491026792466_94cc.png" width="288"></p>
<p>然后通过点击左上角的导航按钮或者在屏幕上左滑，会从侧边出现一个<strong>导航栏</strong>，如下图所示，导航栏又分为上下两个部分，上部是导航栏的标题，下部是导航栏的菜单，菜单中的每一项都是一个 item。</p>
<p><img src="http://on2kkr82s.bkt.clouddn.com/17-4-1/85026807-file_1491028277547_5193.png" width="288"></p>
<p>从上面的分析来看，可以将主界面分为四个部分：标题栏、导航栏、悬浮按钮以及地图模块。下面对每个部分的进行分析和实现。</p>
<h3 id="1-标题栏实现"><a href="#1-标题栏实现" class="headerlink" title="1. 标题栏实现"></a><strong>1. 标题栏实现</strong></h3><p>分析了这么多，从这开始就要真正动手写代码了。在 Android Studio 中新建项目，既然是精简版的 ofo，那就取名为 Minofo 吧，记得将之前解析 apk 包得到的图片资源拷贝到项目的 res/drawable-xxhdpi 目录下，准备好之后就可以编写 activity_main.xml 布局文件了。在此之前我们先分析一下 ofo 共享单车的标题栏。</p>
<p><img src="http://on2kkr82s.bkt.clouddn.com/17-4-1/22587366-file_1491038456776_11bf0.png" width="360"></p>
<p>可以看到标题栏和我们写 Android 程序常见的标题栏有很大区别，默认生成的标题栏是这样的：</p>
<p><img src="http://on2kkr82s.bkt.clouddn.com/17-4-1/50077240-file_1491038459222_126d0.png" width="360"></p>
<p>这差距有点大啊，没关系，我们慢慢来实现。ofo 共享单车的标题栏从左到右分别是导航栏入口按钮、标题和右侧的活动中心入口按钮。而目前我们的标题栏是默认是由 ActionBar 控件实现的，ActionBar 不能实现很多 Material Design 的效果，而且 Google 也不建议开发者使用 ActionBar 了。因此我们使用 Toolbar 来实现标题栏。为了修改掉默认的 ActionBar，我们需要更改主题，主题是在 AndroidManifest.xml 文件中指定的，打开该文件，可以看到，theme 现在的值是 AppTheme。</p>
<pre class=" language-xml"><code class="language-xml"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>application</span>
        <span class="token attr-name"><span class="token namespace">android:</span>allowBackup</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>true<span class="token punctuation">"</span></span>
        <span class="token attr-name"><span class="token namespace">android:</span>icon</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>@mipmap/ic_launcher<span class="token punctuation">"</span></span>
        <span class="token attr-name"><span class="token namespace">android:</span>label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>@string/app_name<span class="token punctuation">"</span></span>
        <span class="token attr-name"><span class="token namespace">android:</span>roundIcon</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>@mipmap/ic_launcher_round<span class="token punctuation">"</span></span>
        <span class="token attr-name"><span class="token namespace">android:</span>supportsRtl</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>true<span class="token punctuation">"</span></span>
        <span class="token attr-name"><span class="token namespace">android:</span>theme</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>@style/AppTheme<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
        ...
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>application</span><span class="token punctuation">></span></span>
</code></pre>
<p>AppTheme 只是主题的代号，我们要找到它所对应的定义。打开 res/values/styles.xml 文件：</p>
<pre class=" language-xml"><code class="language-xml"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>AppTheme<span class="token punctuation">"</span></span> <span class="token attr-name">parent</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Theme.AppCompat.Light.DarkActionBar<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token style language-css">
        <span class="token number">...</span>
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span>
</code></pre>
<p>在这里指定了 AppTheme 的 parent 是 Theme.AppCompat.Light.DarkActionBar，DarkActionBar 就是默认的深色 ActionBar 主题，我们准备用 Toolbar 取代 ActionBar，在这里不需要 ActionBar，</p>
<p>因此将 parent 指定为 <strong>Theme.AppCompat.Light.NoActionBar</strong> 。现在 ActionBar 不见了，我们开始添加 Toolbar，修改 activity_main.xml 如下：</p>
<pre class=" language-xml"><code class="language-xml"><span class="token prolog">&lt;?xml version="1.0" encoding="utf-8"?></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>FrameLayout</span> <span class="token attr-name"><span class="token namespace">xmlns:</span>android</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>http://schemas.android.com/apk/res/android<span class="token punctuation">"</span></span>
             <span class="token attr-name"><span class="token namespace">xmlns:</span>app</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>http://schemas.android.com/apk/res-auto<span class="token punctuation">"</span></span>
             <span class="token attr-name"><span class="token namespace">android:</span>layout_width</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>match_parent<span class="token punctuation">"</span></span>
             <span class="token attr-name"><span class="token namespace">android:</span>layout_height</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>match_parent<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>

    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>android.support.v7.widget.Toolbar</span>
        <span class="token attr-name"><span class="token namespace">android:</span>id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>@+id/toolbar<span class="token punctuation">"</span></span>
        <span class="token attr-name"><span class="token namespace">android:</span>layout_width</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>match_parent<span class="token punctuation">"</span></span>
        <span class="token attr-name"><span class="token namespace">android:</span>layout_height</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>?attr/actionBarSize<span class="token punctuation">"</span></span>
        <span class="token attr-name"><span class="token namespace">android:</span>background</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>@drawable/bg_top<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ImageView</span>
            <span class="token attr-name"><span class="token namespace">android:</span>layout_width</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>wrap_content<span class="token punctuation">"</span></span>
            <span class="token attr-name"><span class="token namespace">android:</span>layout_height</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>wrap_content<span class="token punctuation">"</span></span>
            <span class="token attr-name"><span class="token namespace">android:</span>background</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>@drawable/actionbar_logo<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>android.support.v7.widget.Toolbar</span><span class="token punctuation">></span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>FrameLayout</span><span class="token punctuation">></span></span>
</code></pre>
<p>简单分析一下上述 xml 代码，我们定义了一个帧布局 FrameLayout，在其中添加了一个 Toolbar 作为标题栏，由于 Toolbar 是由 appcompat-v7 提供的，不是自带的，因此我们需要使用它的全名，然后指定了这个 Toolbar 的 id 为 toolbar，宽度跟随父控件，高度定义为 ActionBar 的默认高度，并且指定了其背景，这里的 bg_top 是一张白底的图片，底部有一条阴影效果。然后在 Toolbar 里面，包含了一张图片，图片用 ImageView 显示，大小跟随图片的内容，这张图就是之前从 ofo 共享单车解析得到的标题栏图片。写完 toolbar 之后，还需要在 MainActivity.java 中的 onCreate() 方法中修改，如下：</p>
<pre class=" language-java"><code class="language-java"> <span class="token annotation punctuation">@Override</span>
    <span class="token keyword">protected</span> <span class="token keyword">void</span> <span class="token function">onCreate</span><span class="token punctuation">(</span>Bundle savedInstanceState<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">super</span><span class="token punctuation">.</span><span class="token function">onCreate</span><span class="token punctuation">(</span>savedInstanceState<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token function">setContentView</span><span class="token punctuation">(</span>R<span class="token punctuation">.</span>layout<span class="token punctuation">.</span>activity_main<span class="token punctuation">)</span><span class="token punctuation">;</span>

        Toolbar toolbar <span class="token operator">=</span> <span class="token punctuation">(</span>Toolbar<span class="token punctuation">)</span><span class="token function">findViewById</span><span class="token punctuation">(</span>R<span class="token punctuation">.</span>id<span class="token punctuation">.</span>toolbar<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token function">setSupportActionBar</span><span class="token punctuation">(</span>toolbar<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
</code></pre>
<p>通过 Toolbar 的 id 创建实例，然后将实例传入 setSupportActionBar() 方法，使得 toolbar 具有和 ActionBar 一样的功能。但这样一来，标题栏会多出一个应用的名称：Minofo，这不是我们想要的效果，因为我们已经用了一张图片作为标题栏的标题了。为此，需要在 onCreate() 方法的 setSupportActionBar(toolbar) 后面增加一条语句：（多亏了<a href="http://my.csdn.net/Monkey_LZL" target="_blank" rel="external">刘忠良</a>同学提供的思路。之前我的方法是将 app_name 设置成空字符串，这样虽然隐藏了标题，但 APP 的名字也没有了，所以不可取）</p>
<pre class=" language-java"><code class="language-java">        <span class="token function">getSupportActionBar</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">setTitle</span><span class="token punctuation">(</span><span class="token string">""</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true">//隐藏标题栏上的标题</span>
</code></pre>
<p>最后，我们来看看运行效果。</p>
<p><img src="http://on2kkr82s.bkt.clouddn.com/17-4-1/54140191-file_1491041589916_101f1.png" width="360"></p>
<p>效果还可以，不过标题栏上单单一个标题有点单调，下面把右侧的活动中心入口写写。右击 res 目录，选择 <code>New</code> — <code>Directory</code> 新建一个名为 menu 的目录，然后在 menu 目录添加一个 Menu resourse file， 名为 toolbar_action.xml，这个文件就是用来在 toolbar 上放置一些动作按钮的，当然在此我们只需要一个通知按钮就可以了，编写代码如下：</p>
<pre class=" language-xml"><code class="language-xml"><span class="token prolog">&lt;?xml version="1.0" encoding="utf-8"?></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>menu</span> <span class="token attr-name"><span class="token namespace">xmlns:</span>android</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>http://schemas.android.com/apk/res/android<span class="token punctuation">"</span></span>
    <span class="token attr-name"><span class="token namespace">xmlns:</span>app</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>http://schemas.android.com/apk/res-auto<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>item</span>
        <span class="token attr-name"><span class="token namespace">android:</span>id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>@+id/notification<span class="token punctuation">"</span></span>
        <span class="token attr-name"><span class="token namespace">android:</span>icon</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>@drawable/ic_notifications_active_black_24dp<span class="token punctuation">"</span></span>
        <span class="token attr-name"><span class="token namespace">android:</span>title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>活动中心<span class="token punctuation">"</span></span>
        <span class="token attr-name"><span class="token namespace">app:</span>showAsAction</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>always<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>menu</span><span class="token punctuation">></span></span>
</code></pre>
<p>menu 中只有一个 item，设置相应的 id，icon 和 title，此处 showAsAction 设置成 always 的意思是让该 item 一直显示在 Toolbar 中，而不会显示在菜单中，如果屏幕空间不够就隐藏掉（就算是隐藏掉也不显示在菜单中，就是这么刚烈）。接下来要重写菜单被创建时的回调方法 onCreateOptionsMenu()，然后定义菜单的响应事件，就是按下这个菜单后会执行什么。在 MainActivity.java 中的 MainActivity 类中添加如下两个方法：</p>
<pre class=" language-java"><code class="language-java"><span class="token comment" spellcheck="true">// 重写「菜单创建时的回调方法」</span>
<span class="token keyword">public</span> <span class="token keyword">boolean</span> <span class="token function">onCreateOptionsMenu</span><span class="token punctuation">(</span>Menu menu<span class="token punctuation">)</span><span class="token punctuation">{</span>
  <span class="token comment" spellcheck="true">// 通过布局文件tool_action.xml创建Menu对象</span>
  <span class="token function">getMenuInflater</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">inflate</span><span class="token punctuation">(</span>R<span class="token punctuation">.</span>menu<span class="token punctuation">.</span>toolbar_action<span class="token punctuation">,</span> menu<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">return</span> <span class="token boolean">true</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true">// 返回true表示允许创建的Menu对象显示</span>
<span class="token punctuation">}</span>

<span class="token comment" spellcheck="true">// 重写「菜单响应事件」</span>
<span class="token keyword">public</span> <span class="token keyword">boolean</span> <span class="token function">onOptionsItemSelected</span><span class="token punctuation">(</span>MenuItem item<span class="token punctuation">)</span><span class="token punctuation">{</span>
  <span class="token keyword">switch</span><span class="token punctuation">(</span>item<span class="token punctuation">.</span><span class="token function">getItemId</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">{</span>  <span class="token comment" spellcheck="true">// 获取被选中项的id</span>
    <span class="token keyword">case</span> R<span class="token punctuation">.</span>id<span class="token punctuation">.</span>notification<span class="token operator">:</span>
      <span class="token comment" spellcheck="true">// 跳出toast提示</span>
      Toast<span class="token punctuation">.</span><span class="token function">makeText</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">,</span> <span class="token string">"活动中心正在建设中"</span><span class="token punctuation">,</span> Toast<span class="token punctuation">.</span>LENGTH_SHORT<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">show</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">break</span><span class="token punctuation">;</span>
    <span class="token keyword">default</span><span class="token operator">:</span>
      <span class="token keyword">break</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token keyword">return</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<p>onCreateOptionsMenu() 会在菜单创建时调用，主要是让之前定义的菜单显示出来，onOptionsItemSelected() 在菜单的某一项被选中时调用，然后执行响应逻辑，比如跳转到另外一个活动、跳出一个对话框等。此处为简单起见，跳出一个 Toast 提示，来看一下运行效果：</p>
<p><img src="http://on2kkr82s.bkt.clouddn.com/17-4-1/26915667-file_1491049432391_869a.png" width="288"></p>
<p>相比之前，标题栏上多了通知按钮，并且点击该按钮，会提示“活动中心正在建设中”。这样一来我们的标题栏就实现了。什么，你说这一小节有点水？哦对，标题栏还有导航栏入口按钮还没加呢，不过别着急，我们在介绍导航栏部分时再添加。对了，我们先把 app 的图标设置成 ofo 共享单车的样子，在 AndroidManifest.xml 通过设置 icon 和 roundIcon 属性，将 app 的图标改掉。效果如下：</p>
<p><img src="http://on2kkr82s.bkt.clouddn.com/17-4-1/80804800-file_1491042178250_8a4b.png" width="160"></p>
<p>你问这图片资源哪里来的？当然是之前解析 apk 得到的。好了，标题栏部分叙述完毕，开始实现导航栏部分吧。</p>
<h3 id="2-导航栏实现"><a href="#2-导航栏实现" class="headerlink" title="2. 导航栏实现"></a><strong>2. 导航栏实现</strong></h3><p>导航栏是 Material Design 的一大特色，Google 开发的很多应用都有导航栏，比如最近比较火的<a href="https://play.google.com/store/apps/details?id=com.google.android.apps.translate&amp;hl=zh-CN" target="_blank" rel="external">谷歌翻译</a>：</p>
<p><img src="http://on2kkr82s.bkt.clouddn.com/17-4-1/82835733-file_1491044738927_11391.png" width="288"></p>
<p>再比如向来都不火的<a href="http://nightn.com">我的个人网站</a>：</p>
<p><img src="http://on2kkr82s.bkt.clouddn.com/17-4-1/66632090-file_1491044742768_17460.png" width="288"></p>
<p>它们无一不是采用了 Material 的设计风格，使得无论是 app 还是网站都更加出色。那下面我们就开始根据 ofo 共享单车，来实现一个 Material 风格的导航栏吧。</p>
<p>别看导航栏看起来好像很复杂，我们借助 Google 提供的工具，实现起来还是不难的，没错，就是用 Google 提供的 DrawerLayout 控件，DrawerLayout 作为一个布局，允许在其中放入两个子布局，第一个是主界面的内容，第二个就是可以滑动的导航栏菜单的内容，因此我们将之前的帧布局作为 DrawerLayout 的第一个子布局，另外，为了先预览一下 DrawerLayout 的效果，第二个子布局就用一个简单的 TextView 占个位，修改 activity_main.xml：</p>
<pre class=" language-xml"><code class="language-xml"><span class="token prolog">&lt;?xml version="1.0" encoding="utf-8"?></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>android.support.v4.widget.DrawerLayout</span>
    <span class="token attr-name"><span class="token namespace">xmlns:</span>android</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>http://schemas.android.com/apk/res/android<span class="token punctuation">"</span></span>
    <span class="token attr-name"><span class="token namespace">xmlns:</span>app</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>http://schemas.android.com/apk/res-auto<span class="token punctuation">"</span></span>
    <span class="token attr-name"><span class="token namespace">android:</span>id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>@+id/drawer_layout<span class="token punctuation">"</span></span>
    <span class="token attr-name"><span class="token namespace">android:</span>layout_width</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>match_parent<span class="token punctuation">"</span></span>
    <span class="token attr-name"><span class="token namespace">android:</span>layout_height</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>match_parent<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>

    &lt;FrameLayout
      ...
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>FrameLayout</span><span class="token punctuation">></span></span>

    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>TextView</span>
        <span class="token attr-name"><span class="token namespace">android:</span>layout_width</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>match_parent<span class="token punctuation">"</span></span>
        <span class="token attr-name"><span class="token namespace">android:</span>layout_height</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>match_parent<span class="token punctuation">"</span></span>
        <span class="token attr-name"><span class="token namespace">android:</span>layout_gravity</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>start<span class="token punctuation">"</span></span>
        <span class="token attr-name"><span class="token namespace">android:</span>background</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#FFF<span class="token punctuation">"</span></span>
        <span class="token attr-name"><span class="token namespace">android:</span>text</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>这是导航栏部分<span class="token punctuation">"</span></span>
        <span class="token attr-name"><span class="token namespace">android:</span>textSize</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>40dp<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>android.support.v4.widget.DrawerLayout</span><span class="token punctuation">></span></span>
</code></pre>
<p>可以看到，DrawerLayout 包含了两个控件，第一个 FrameLayout 就是之前所定义的，第二个是一个简单的文本显示控件。值得注意的地方是：（1）layout_gravity 属性必须要设置，它指定了导航栏出现的方式，如果未指定，那么导航栏就会直接把你的主界面覆盖掉，这里定义为 start 指的是根据系统语言（从左往右还是从右往左）判断导航栏菜单出现的方式，一般是从左往右出现。（2）background 的颜色设置为白色，如果不设置的话，默认是一种半透明的颜色。运行一下，看看 DrawerLayout 的效果：</p>
<p><img src="http://on2kkr82s.bkt.clouddn.com/17-4-1/38136287-file_1491051190569_6c01.gif" alt=""></p>
<p>通过从左往右滑动屏幕，即可调出导航栏。但是如果只有通过滑动屏幕才能调出导航栏的话，那么会出现很多用户根本不知道这个功能的现象，因此我们需要在 Toolbar 上加入一个导航栏入口按钮，这样就有两种方式调出导航栏了，修改 MainActivity.java 如下：</p>
<pre class=" language-java"><code class="language-java"><span class="token keyword">private</span> DrawerLayout mDrawerLayout<span class="token punctuation">;</span>

<span class="token annotation punctuation">@Override</span>
<span class="token keyword">protected</span> <span class="token keyword">void</span> <span class="token function">onCreate</span><span class="token punctuation">(</span>Bundle savedInstanceState<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment" spellcheck="true">//...</span>
  <span class="token comment" spellcheck="true">// 通过布局id找到DrawerLayout实例</span>
  mDrawerLayout <span class="token operator">=</span> <span class="token punctuation">(</span>DrawerLayout<span class="token punctuation">)</span><span class="token function">findViewById</span><span class="token punctuation">(</span>R<span class="token punctuation">.</span>id<span class="token punctuation">.</span>drawer_layout<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token comment" spellcheck="true">// 获取当前actionBar,这里的actionBar是我们之前由toolbar实现的</span>
  ActionBar actionBar <span class="token operator">=</span> <span class="token function">getSupportActionBar</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">if</span><span class="token punctuation">(</span>actionBar <span class="token operator">!=</span> null<span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token comment" spellcheck="true">// 让导航栏入口按钮显示出来</span>
    actionBar<span class="token punctuation">.</span><span class="token function">setDisplayHomeAsUpEnabled</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment" spellcheck="true">// 为导航栏入口按钮设置一个图标</span>
    actionBar<span class="token punctuation">.</span><span class="token function">setHomeAsUpIndicator</span><span class="token punctuation">(</span>R<span class="token punctuation">.</span>drawable<span class="token punctuation">.</span>ic_menu<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">public</span> <span class="token keyword">boolean</span> <span class="token function">onOptionsItemSelected</span><span class="token punctuation">(</span>MenuItem item<span class="token punctuation">)</span><span class="token punctuation">{</span>
  <span class="token keyword">switch</span><span class="token punctuation">(</span>item<span class="token punctuation">.</span><span class="token function">getItemId</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">{</span>  <span class="token comment" spellcheck="true">// 获取被选中项的id</span>
      <span class="token comment" spellcheck="true">//...</span>
    <span class="token keyword">case</span> android<span class="token punctuation">.</span>R<span class="token punctuation">.</span>id<span class="token punctuation">.</span>home<span class="token operator">:</span> <span class="token comment" spellcheck="true">// 导航栏入口按钮的响应事件</span>
      <span class="token comment" spellcheck="true">// 调出导航栏菜单</span>
      mDrawerLayout<span class="token punctuation">.</span><span class="token function">openDrawer</span><span class="token punctuation">(</span>GravityCompat<span class="token punctuation">.</span>START<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">break</span><span class="token punctuation">;</span>
      <span class="token comment" spellcheck="true">//...</span>
  <span class="token punctuation">}</span>
  <span class="token keyword">return</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<p>这样一来标题栏最左侧便多出了一个导航栏入口按钮了，通过点击该按钮也能调出导航栏。</p>
<p><img src="http://on2kkr82s.bkt.clouddn.com/17-4-1/94831995-file_1491052359504_bac9.png" width="360"></p>
<p>导航栏的功能已经实现，下面便是往里面添加具体内容了，观察 ofo 共享单车的导航栏，如下图所示.</p>
<p><img src="http://on2kkr82s.bkt.clouddn.com/17-4-1/51385252-file_1491052575357_f9ec.png" width="288"></p>
<p>这个部分可以通过 Design Support 库提供的 NavigationView 控件来实现，另外由于这里还出现了圆形的头像，因此还需要一个图片圆形化的工具：CircleImageView。为了使用这两个控件，我们需要添加依赖库，在 app/build.gradle 中的 dependencies 闭包中添加依赖库：</p>
<pre class=" language-gr"><code class="language-gr">dependencies{
  compile 'com.android.support:design:24.2.1'
  compile 'de.hdodenhof:circleimageview:2.1.0'
}
</code></pre>
<p>当然，support 的具体版本依据你的 appcompat-v7 的版本确定，第三方库你也可以去开原网站查看最新版本。添加好依赖库，同步成功后，就可以开始完善导航栏的内容了。</p>
<p>在 res/menu 目录下新建 menu resource file，命名为 nav.xml，作为导航栏的 body，修改 nav.xml 的内容如下：</p>
<pre class=" language-xml"><code class="language-xml"><span class="token prolog">&lt;?xml version="1.0" encoding="utf-8"?></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>menu</span> <span class="token attr-name"><span class="token namespace">xmlns:</span>android</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>http://schemas.android.com/apk/res/android<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>group</span> <span class="token attr-name"><span class="token namespace">android:</span>checkableBehavior</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>single<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>item</span>
            <span class="token attr-name"><span class="token namespace">android:</span>id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>@+id/nav_receipt<span class="token punctuation">"</span></span>
            <span class="token attr-name"><span class="token namespace">android:</span>icon</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>@drawable/ic_receipt_white_24dp<span class="token punctuation">"</span></span>
            <span class="token attr-name"><span class="token namespace">android:</span>title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>我的行程<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>item</span>
            <span class="token attr-name"><span class="token namespace">android:</span>id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>@+id/nav_wallet<span class="token punctuation">"</span></span>
            <span class="token attr-name"><span class="token namespace">android:</span>icon</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>@drawable/ic_account_balance_wallet_white_24dp<span class="token punctuation">"</span></span>
            <span class="token attr-name"><span class="token namespace">android:</span>title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>我的钱包<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>item</span>
            <span class="token attr-name"><span class="token namespace">android:</span>id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>@+id/nav_redeem<span class="token punctuation">"</span></span>
            <span class="token attr-name"><span class="token namespace">android:</span>icon</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>@drawable/redeem_icon<span class="token punctuation">"</span></span>
            <span class="token attr-name"><span class="token namespace">android:</span>title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>输入优惠码<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>item</span>
            <span class="token attr-name"><span class="token namespace">android:</span>id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>@+id/nav_invite<span class="token punctuation">"</span></span>
            <span class="token attr-name"><span class="token namespace">android:</span>icon</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>@drawable/ic_share_black_24dp<span class="token punctuation">"</span></span>
            <span class="token attr-name"><span class="token namespace">android:</span>title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>邀请赢奖<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>item</span>
            <span class="token attr-name"><span class="token namespace">android:</span>id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>@+id/nav_join<span class="token punctuation">"</span></span>
            <span class="token attr-name"><span class="token namespace">android:</span>icon</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>@drawable/ic_person_add_white_24dp<span class="token punctuation">"</span></span>
            <span class="token attr-name"><span class="token namespace">android:</span>title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>加入共享<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>item</span>
            <span class="token attr-name"><span class="token namespace">android:</span>id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>@+id/nav_help<span class="token punctuation">"</span></span>
            <span class="token attr-name"><span class="token namespace">android:</span>icon</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>@drawable/ic_help_white_24dp<span class="token punctuation">"</span></span>
            <span class="token attr-name"><span class="token namespace">android:</span>title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>使用指南<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>item</span>
            <span class="token attr-name"><span class="token namespace">android:</span>id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>@+id/nav_about<span class="token punctuation">"</span></span>
            <span class="token attr-name"><span class="token namespace">android:</span>icon</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>@drawable/ic_info_white_24dp<span class="token punctuation">"</span></span>
            <span class="token attr-name"><span class="token namespace">android:</span>title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>关于<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>group</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>menu</span><span class="token punctuation">></span></span>
</code></pre>
<p>然后添加导航栏的 header 部分，在 res/layout 目录下新建 layout resource file，命名为 header.xml，修改内容如下：</p>
<pre class=" language-xml"><code class="language-xml"><span class="token prolog">&lt;?xml version="1.0" encoding="utf-8"?></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>RelativeLayout</span> <span class="token attr-name"><span class="token namespace">xmlns:</span>android</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>http://schemas.android.com/apk/res/android<span class="token punctuation">"</span></span>
                <span class="token attr-name"><span class="token namespace">android:</span>layout_width</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>match_parent<span class="token punctuation">"</span></span>
                <span class="token attr-name"><span class="token namespace">android:</span>layout_height</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>100dp<span class="token punctuation">"</span></span>
                <span class="token attr-name"><span class="token namespace">android:</span>padding</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>10dp<span class="token punctuation">"</span></span>
                <span class="token attr-name"><span class="token namespace">android:</span>background</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>?attr/colorPrimary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>

    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>de.hdodenhof.circleimageview.CircleImageView</span>
        <span class="token attr-name"><span class="token namespace">android:</span>id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>@+id/icon_image<span class="token punctuation">"</span></span>
        <span class="token attr-name"><span class="token namespace">android:</span>layout_width</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>70dp<span class="token punctuation">"</span></span>
        <span class="token attr-name"><span class="token namespace">android:</span>layout_height</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>70dp<span class="token punctuation">"</span></span>
        <span class="token attr-name"><span class="token namespace">android:</span>src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>@drawable/default_avatar_fg<span class="token punctuation">"</span></span>
        <span class="token attr-name"><span class="token namespace">android:</span>layout_centerVertical</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>true<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>

    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>TextView</span>
        <span class="token attr-name"><span class="token namespace">android:</span>id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>@+id/username<span class="token punctuation">"</span></span>
        <span class="token attr-name"><span class="token namespace">android:</span>layout_width</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>wrap_content<span class="token punctuation">"</span></span>
        <span class="token attr-name"><span class="token namespace">android:</span>layout_height</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>wrap_content<span class="token punctuation">"</span></span>
        <span class="token attr-name"><span class="token namespace">android:</span>layout_marginLeft</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>30dp<span class="token punctuation">"</span></span>
        <span class="token attr-name"><span class="token namespace">android:</span>layout_toRightOf</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>@id/icon_image<span class="token punctuation">"</span></span>
        <span class="token attr-name"><span class="token namespace">android:</span>layout_centerVertical</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>true<span class="token punctuation">"</span></span>
        <span class="token attr-name"><span class="token namespace">android:</span>text</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ofo 新用户<span class="token punctuation">"</span></span>
        <span class="token attr-name"><span class="token namespace">android:</span>textColor</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#40320D<span class="token punctuation">"</span></span>
        <span class="token attr-name"><span class="token namespace">android:</span>textSize</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>20sp<span class="token punctuation">"</span></span>
        <span class="token punctuation">/></span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>RelativeLayout</span><span class="token punctuation">></span></span>
</code></pre>
<p>这部分用了一个相对布局，作为导航栏的 header，布局包括一个圆形头像，头像尺寸设为固定值；还包括一个昵称，设置好文字的内容，尺寸和颜色等信息。</p>
<p>导航栏的 body 和 header 都准备好，接下来将他们添加到 DrawerLayout 的第二个子布局，修改 activity_main.xml，用如下代码取代之前定义的 TextView。</p>
<pre class=" language-xml"><code class="language-xml"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>android.support.design.widget.NavigationView</span>
        <span class="token attr-name"><span class="token namespace">android:</span>id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>@+id/nav_view<span class="token punctuation">"</span></span>
        <span class="token attr-name"><span class="token namespace">android:</span>layout_width</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>match_parent<span class="token punctuation">"</span></span>
        <span class="token attr-name"><span class="token namespace">android:</span>layout_height</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>match_parent<span class="token punctuation">"</span></span>
        <span class="token attr-name"><span class="token namespace">android:</span>layout_gravity</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>start<span class="token punctuation">"</span></span>
        <span class="token attr-name"><span class="token namespace">app:</span>menu</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>@menu/nav<span class="token punctuation">"</span></span>
        <span class="token attr-name"><span class="token namespace">app:</span>headerLayout</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>@layout/header<span class="token punctuation">"</span></span>
        <span class="token attr-name"><span class="token namespace">android:</span>background</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>?attr/colorPrimary<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>
</code></pre>
<p>现在已经能够成功显示导航栏的内容了，效果如下图所示：</p>
<p><img src="http://on2kkr82s.bkt.clouddn.com/17-4-1/25792579-file_1491054292385_9671.png" width="288"></p>
<p>光有界面是不够的，导航栏里的 item 要能够点击并执行点什么才行。修改 MainActivity.java 中的代码，在 onCreate() 方法中加入以下代码：</p>
<pre class=" language-java"><code class="language-java">NavigationView navView <span class="token operator">=</span> <span class="token punctuation">(</span>NavigationView<span class="token punctuation">)</span><span class="token function">findViewById</span><span class="token punctuation">(</span>R<span class="token punctuation">.</span>id<span class="token punctuation">.</span>nav_view<span class="token punctuation">)</span><span class="token punctuation">;</span>
        navView<span class="token punctuation">.</span><span class="token function">setNavigationItemSelectedListener</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">NavigationView<span class="token punctuation">.</span>OnNavigationItemSelectedListener</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
            <span class="token annotation punctuation">@Override</span>
            <span class="token keyword">public</span> <span class="token keyword">boolean</span> <span class="token function">onNavigationItemSelected</span><span class="token punctuation">(</span>MenuItem item<span class="token punctuation">)</span><span class="token punctuation">{</span>
                mDrawerLayout<span class="token punctuation">.</span><span class="token function">closeDrawers</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                <span class="token keyword">return</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>简单分析一下上述代码，先根据布局 id 获取 NavigationView 实例，然后设置监听事件，任何一个按钮被点击，都会通过 closeDrawers() 方法关闭导航栏。至于对于点击具体 item 执行什么事件，这是后续讨论的事情了。至此，导航栏部分已经全部实现。接下来实现主界面的三个悬浮按钮。</p>
<h3 id="3-悬浮按钮实现"><a href="#3-悬浮按钮实现" class="headerlink" title="3. 悬浮按钮实现"></a><strong>3. 悬浮按钮实现</strong></h3><p>观察 ofo 共享单车主界面，底下有三个按钮，它们都是悬浮在地图上面的，我们称之为悬浮按钮，悬浮按钮可以通过 Design Support 库提供的 FloatingActionButton 实现，用于之前我们已经引入了 Design Support 依赖库，在此我们直接可以使用 FloatingActionButton。</p>
<p><img src="http://on2kkr82s.bkt.clouddn.com/17-4-1/44290926-file_1491054983229_14957.png" width="288"></p>
<p>修改 activity_main.xml 文件，在之前定义的 DrawerLayout 中的第一个子布局 FrameLayout 中加入 3 个 FloatingActionButton，代码如下：</p>
<pre class=" language-xml"><code class="language-xml">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>android.support.design.widget.FloatingActionButton</span>
            <span class="token attr-name"><span class="token namespace">android:</span>id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>@+id/fab<span class="token punctuation">"</span></span>
            <span class="token attr-name"><span class="token namespace">android:</span>layout_width</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>wrap_content<span class="token punctuation">"</span></span>
            <span class="token attr-name"><span class="token namespace">android:</span>layout_height</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>wrap_content<span class="token punctuation">"</span></span>
            <span class="token attr-name"><span class="token namespace">android:</span>layout_gravity</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>bottom|end<span class="token punctuation">"</span></span>
            <span class="token attr-name"><span class="token namespace">android:</span>layout_margin</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>16dp<span class="token punctuation">"</span></span>
            <span class="token attr-name"><span class="token namespace">android:</span>src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>@drawable/tiny_fab_right<span class="token punctuation">"</span></span>
            <span class="token attr-name"><span class="token namespace">app:</span>elevation</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>8dp<span class="token punctuation">"</span></span>
            <span class="token attr-name"><span class="token namespace">android:</span>scaleType</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>center<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>

        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>android.support.design.widget.FloatingActionButton</span>
            <span class="token attr-name"><span class="token namespace">android:</span>id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>@+id/refresh<span class="token punctuation">"</span></span>
            <span class="token attr-name"><span class="token namespace">android:</span>layout_width</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>wrap_content<span class="token punctuation">"</span></span>
            <span class="token attr-name"><span class="token namespace">android:</span>layout_height</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>wrap_content<span class="token punctuation">"</span></span>
            <span class="token attr-name"><span class="token namespace">android:</span>layout_gravity</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>bottom|start<span class="token punctuation">"</span></span>
            <span class="token attr-name"><span class="token namespace">android:</span>layout_margin</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>16dp<span class="token punctuation">"</span></span>
            <span class="token attr-name"><span class="token namespace">android:</span>src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>@drawable/homepage_refresh<span class="token punctuation">"</span></span>
            <span class="token attr-name"><span class="token namespace">app:</span>elevation</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>8dp<span class="token punctuation">"</span></span>
            <span class="token attr-name"><span class="token namespace">android:</span>scaleType</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>center<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>

        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>android.support.design.widget.FloatingActionButton</span>
            <span class="token attr-name"><span class="token namespace">android:</span>id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>@+id/begin<span class="token punctuation">"</span></span>
            <span class="token attr-name"><span class="token namespace">android:</span>layout_width</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>100dp<span class="token punctuation">"</span></span>
            <span class="token attr-name"><span class="token namespace">android:</span>layout_height</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>100dp<span class="token punctuation">"</span></span>
            <span class="token attr-name"><span class="token namespace">android:</span>layout_gravity</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>bottom|center<span class="token punctuation">"</span></span>
            <span class="token attr-name"><span class="token namespace">android:</span>layout_margin</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>16dp<span class="token punctuation">"</span></span>
            <span class="token attr-name"><span class="token namespace">android:</span>src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>@drawable/ridenow<span class="token punctuation">"</span></span>
            <span class="token attr-name"><span class="token namespace">app:</span>elevation</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>8dp<span class="token punctuation">"</span></span>
            <span class="token attr-name"><span class="token namespace">android:</span>scaleType</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>center<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>
</code></pre>
<p>除了用于设置布局位置的 layout_gravity 属性，三个悬浮按钮的属性基本差不多。另外需要注意到是 scaleType 属性需要设置为 center，这样才能保证图片将悬浮按钮铺满。然后我们为这三个悬浮按钮注册监听事件。由于按钮比较多，我们就不打算让每个按钮都去实现一遍监听事件，而是让 MainActivity 类实现 View.OnClickListener 接口，然后重写接口中的 onClick() 方法，在方法中通过判断按钮的 id 来设置对应按钮的点击事件。</p>
<p>在 onCreate() 方法中为三个悬浮按钮注册点击事件监听器：</p>
<pre class=" language-java"><code class="language-java">        <span class="token comment" spellcheck="true">// 悬浮按钮注册监听器</span>
        begin <span class="token operator">=</span> <span class="token punctuation">(</span>FloatingActionButton<span class="token punctuation">)</span><span class="token function">findViewById</span><span class="token punctuation">(</span>R<span class="token punctuation">.</span>id<span class="token punctuation">.</span>begin<span class="token punctuation">)</span><span class="token punctuation">;</span>
        refresh <span class="token operator">=</span> <span class="token punctuation">(</span>FloatingActionButton<span class="token punctuation">)</span><span class="token function">findViewById</span><span class="token punctuation">(</span>R<span class="token punctuation">.</span>id<span class="token punctuation">.</span>refresh<span class="token punctuation">)</span><span class="token punctuation">;</span>
        fab <span class="token operator">=</span> <span class="token punctuation">(</span>FloatingActionButton<span class="token punctuation">)</span><span class="token function">findViewById</span><span class="token punctuation">(</span>R<span class="token punctuation">.</span>id<span class="token punctuation">.</span>fab<span class="token punctuation">)</span><span class="token punctuation">;</span>
        begin<span class="token punctuation">.</span><span class="token function">setOnClickListener</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        refresh<span class="token punctuation">.</span><span class="token function">setOnClickListener</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        fab<span class="token punctuation">.</span><span class="token function">setOnClickListener</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>此处的 this 指的是 MainActivity，因为 MainActivity 类 implements 了 View.OnClickListener 接口，因此它具备了监听点击事件的能力，之后要做的便于重写接口中的 onClick 方法，在 MainActivity 类中添加如下代码：</p>
<pre class=" language-java"><code class="language-java"><span class="token keyword">public</span> <span class="token keyword">void</span> <span class="token function">onClick</span><span class="token punctuation">(</span>View v<span class="token punctuation">)</span><span class="token punctuation">{</span>
  <span class="token keyword">switch</span><span class="token punctuation">(</span>v<span class="token punctuation">.</span><span class="token function">getId</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">case</span> R<span class="token punctuation">.</span>id<span class="token punctuation">.</span>begin<span class="token operator">:</span><span class="token punctuation">{</span>
      <span class="token comment" spellcheck="true">//TODO 开始按钮点击事件</span>
      <span class="token keyword">break</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">case</span> R<span class="token punctuation">.</span>id<span class="token punctuation">.</span>refresh<span class="token operator">:</span><span class="token punctuation">{</span>
      <span class="token comment" spellcheck="true">//TODO 刷新定位按钮点击事件</span>
      <span class="token keyword">break</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">case</span> R<span class="token punctuation">.</span>id<span class="token punctuation">.</span>fab<span class="token operator">:</span><span class="token punctuation">{</span>
      <span class="token comment" spellcheck="true">//举报按钮点击事件</span>
      Toast<span class="token punctuation">.</span><span class="token function">makeText</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">,</span> <span class="token string">"举报功能正在完善"</span><span class="token punctuation">,</span> Toast<span class="token punctuation">.</span>LENGTH_SHORT<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">show</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">break</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">default</span><span class="token operator">:</span>
      <span class="token keyword">break</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre>
<p>通过 View 的 getId() 方法获取当前被点击按钮的 id，然后根据 id 设置相应的点击逻辑，在这里还未加入过多的点击逻辑，但可以先分析一下，开始按钮 begin 点击后应该跳转至一个新的活动（即后面要讲到的用车界面），定位刷新按钮 refresh 点击之后会重新获取当前位置信息，并显示在主界面的地图模块中（地图模块将在下一节实现），所以这两个按钮的点击事件我们先用 TODO 注释占个坑，至于举报按钮 fab，我就不打算去实现它的点击事件了，所以在此加入一个简单的 Toast 提示语句。</p>
<p>好了，经过上面的开发过程，我们往主界面加入了标题栏、导航栏和悬浮按钮，功能已经基本完善了，下面需要加入地图显示模块，在此之前，我们先预览一下到目前为止的成果吧，如下图所示：</p>
<p><img src="http://on2kkr82s.bkt.clouddn.com/17-4-1/9165962-file_1491059740994_c666.png" width="600"></p>
<p>本来想通过一篇博客就把整个过程写完，现在发现前面的部分写得过于详细，以致于才写到一半就已经快 6000 字了。因此我将开发过程的后续内容又写了一篇 7000 字的博客，内容非常详尽，请参考<a href="http://nightn.com/2017/04/02/Android-develop-minofo-2/">Android 开发小作：Minofo(2)</a> 这篇文章吧！</p>
]]></content>
      
        <categories>
            
            <category> Android </category>
            
        </categories>
        
        
        <tags>
            
            <tag> Android </tag>
            
            <tag> ofo </tag>
            
        </tags>
        
    </entry>
    
    <entry>
      <title><![CDATA[如何创造财富]]></title>
      <url>http://nightn.com/2017/03/25/how-to-create-wealth/</url>
      <content type="html"><![CDATA[<p>“<strong>如何创造财富？我认为最好的办法就是自己创业，或者加入创业公司。</strong>” —— Paul·Graham<br><a id="more"></a></p>
<p>「如何创造财富」是《黑客与画家》（Hackers and Painters: Big Ideas from the Computer Age）一书中所讨论的一个章节话题，本书作者 Paul Graham 被誉为「硅谷创业之父」，他在书中提到的观点都十分耐人寻味，甚至让人大开眼界，书的内容并不深奥，不仅仅是写给程序员和创业者的，更是写给普通读者的。本文主要是对「如何创造财富」这一章内容进行总结和讨论。</p>
<h2 id="《黑客与画家》"><a href="#《黑客与画家》" class="headerlink" title="《黑客与画家》"></a>《黑客与画家》</h2><p>《黑客与画家》是本非常独特的书，作者最大的目的，就是通过这本书让普通读者理解我们所处的这个计算机时代。作者把黑客与画家比较，二者都是怀着一门特殊手艺、有创造天赋的艺术创作者，本书内容包括黑客的成长以及他们看待世界的观点、黑客是如何做出成果（或者说创造财富）进而影响全世界的、黑客所使用的工具（编程语言）和黑客文化。</p>
<h3 id="此黑客非彼黑客"><a href="#此黑客非彼黑客" class="headerlink" title="此黑客非彼黑客"></a>此黑客非彼黑客</h3><p>必须要说明的是，黑客（hacker）从来都不是指那些恶意入侵计算机系统的人（cracker），只是由于媒体的报道中错误地使用了「黑客」这一个词，只强调黑客行为很窄的一个方面：入侵系统。（媒体这么做，也是为了提升公众的关注度）。事实上，黑客是指那些信奉「黑客理论」而且能力超高的程序员，比如 Unix 操作系统创始人丹尼斯·里奇和肯·汤普森，开源运动创始人埃里克·雷蒙德，微软公司创始人比尔·盖茨等。正是黑客把计算机工业推向了更高的高度。</p>
<p>何谓「黑客理论」 ？最佳论述出自《黑客：计算机革命的英雄》，包括六条：</p>
<ol>
<li>使用计算机以及所有有助于了解这个世界本质的事物都不应该受到任何限制。任何事情都应该亲自尝试。</li>
<li>信息应该全部免费。</li>
<li>不信任权威，提倡去中心化。</li>
<li>判断一名黑客的水平应该看他的技术能力，而不是看他的学历、年龄或地位等其他标准。</li>
<li>你可以用计算机创造美和艺术。</li>
<li>计算机使生活更美好。</li>
</ol>
<p>正是因为有第一条理论（使用了解世界本质的事物不该受到限制），所以才会出现黑客越过计算机防御系统获取有助于解决问题或深入事物本质所需要的信息或工具（注意，这和 cracker 入侵计算机系统有本质区别，前者以创造为目的，而后者以破坏为动机）。</p>
<h3 id="Paul·Graham"><a href="#Paul·Graham" class="headerlink" title="Paul·Graham"></a>Paul·Graham</h3><p>要了解该书，首先来看作者其人。Paul Graham 出生于匹兹堡郊区的一个中产阶级家庭，青少年时代便开始编程，而且他的兴趣十分广泛。中学时喜欢写小说，进入康奈尔大学后主修哲学，后来发现哲学难以理解，研究生阶段又在哈佛大学计算机系主攻人工智能。博士读到一半，又去哈佛艺术系旁听，拿到博士学位后，开始学习绘画课程，梦想成为画家。去欧洲佛罗伦萨学院继续学习绘画，但第二年钱花完了，不得不返回美国，在一家创业公司担任程序员。</p>
<p>此时，Paul·Graham 的生活非常窘迫，他不得不替别人编程赚取生活费。他意识到要实现自己当画家的梦想，首先得彻底解决自己的收入问题。因此他找到读书时的朋友，决定开发一个搭建网店的软件，他们改变了传统的使用模式，直接让用户通过浏览器操作服务器，免去了安装和上传的麻烦。后来，他们的软件被做成了一个互联网程序，并取名为 Viaweb，这是世界上第一个通过互联网使用的软件。</p>
<p>随着后面创始人的加入和几轮投资，Viaweb 发展得很快，最后雅虎以 4900 万美元的价格兼并了 Viaweb，改名为 Yahoo Store。Paul·Graham 成为了雅虎的员工，但由于不习惯大公司的官僚环境，不就后他便辞职了。离开雅虎之后，写了一系列文集，取名为《黑客与画家》。后来，Paul·Graham 在硅谷成立了 YC 项目，作为一家创业公司孵化器，成功培育出 200 多家创业公司。Paul·Graham 认为，对于科技公司来说，未来充满了机会，前景一篇光明。</p>
<p>所有的东西都在变成软件，印刷机诞生后，人类写过多少个字，未来就有多少家软件公司。</p>
<h2 id="如何创造财富"><a href="#如何创造财富" class="headerlink" title="如何创造财富"></a>如何创造财富</h2><p>本文前半部分内容介绍了《黑客与画家》以及作者 Paul·Graham 其人其事，还未涉及到标题。那么接下来，就来论述 Paul·Graham 关于如何创造财富这一话题所提出的观点吧。</p>
<p>“<strong>如何创造财富？我认为最好的办法就是自己创业，或者加入创业公司。</strong>” —— Paul·Graham</p>
<p>创业（Startup）往往与技术有关，创业公司其实就是解决某个技术难题的小公司。从经济学观点看，创业是一个压缩过程，将你低强度工作的 40 年，压缩成极限强度下工作的 4 年。这高技术领域，这种压缩的回报尤其丰厚。假如你是一个年薪 40 万 20 多岁的优秀黑客，你每年要给公司带来 40 万收益，公司才不会亏钱。但是，你真正的工作时间是上班时间的 2 倍；全神贯注的话可提高 3 倍；除去主管、人事部等对你工作的妨碍，效率可以再提高 2 倍；你也不用去完成强行指派的任务，而是充分发挥你的聪明才智，效率再增加 3 倍。那么总共就是 36 倍，一个优秀黑客在大公司身价每年 40 万，那么一个勤奋工作，摆脱杂事干扰的聪明黑客，他的工作相当于每年创造 1440 万的价值。计算很粗糙，这个倍数不一定就是 36，但肯定是大于 10 的。当然，上述分析考虑的是极限情况，即休闲时间为 0，工作强度之大足以危害到健康。</p>
<p>创造有价值的东西就是创造财富。但你必须清楚，金钱不等于财富，它只是用来转移财富所有权的东西。如何创造价值呢？你可以首先想到的是找一份工作，是的，毕业后理所当然想到的是找一份工作，但是你创造的价值如何衡量呢？你每个月的工资就是你价值的衡量吗？事实上，大公司最大的困扰就是无法准确测量每个员工的贡献，大多数时候是在瞎猜。在大公司中，你只要一般性地努力，就能得到意料之中的薪水，你想创造更多的财富，因此更努力地工作，但是你的工作与其他许多人的工作混杂在一起，这样就产生了问题。在大公司中，个人的表现无法单独测量，公司里其他人会拖累你。</p>
<h3 id="可测量性和可放大性"><a href="#可测量性和可放大性" class="headerlink" title="可测量性和可放大性"></a>可测量性和可放大性</h3><p>想要创造更多的财富，需要满足两个条件：可测量性和可放大性。你的职位产生的业绩，应该是可测量的，否则你做的再多，也不会得到更多的报酬。可放大性是说，你做的决定能够产生巨大的效应。</p>
<p>但具备可测量性是不够的。比如工人的报酬按照计件制计算，但这并不具备可放大性。即使你做到最快，回报也只能增加 1 到 2 倍。有一种办法可以发现是否具有可放大性，那就是看失败的可能性。收入和风险是对称的，如果有巨大获利的可能，就必然存在巨大失败的可能。如果你有一个令你感到安全的工作，你就不会创造更多的财富，因为没有危险，就几乎等于没有可放大性。</p>
<h4 id="小团体-可测量性"><a href="#小团体-可测量性" class="headerlink" title="小团体 = 可测量性"></a>小团体 = 可测量性</h4><p>在小团体中测量每个成员的贡献是相对容易而且准确的。因此，创业或加入一家创业公司最可能实现前文的情况。乔布斯曾经说过，创业的成败取决于最早加入公司的那十个人。甚至可以说真正决定成败的其实只是前五个人。小团队的优势不在于它本身小，而在于你可以选择成员。我们不需要小村庄的那种「小」，而需要全明星第一阵容的那种「小」。</p>
<h4 id="高科技-可放大性"><a href="#高科技-可放大性" class="headerlink" title="高科技 = 可放大性"></a>高科技 = 可放大性</h4><p>创业公司通过发明新技术盈利，所以具备可放大性。什么是技术？技术就是解决问题的某种手段，如果你发现了解决某一问题的新的方式，其价值就取决于多少人愿意使用这种新方式。技术是钓鱼的鱼竿，而不是鱼。这就是创业公司和餐馆或理发店的区别。餐馆煎鸡蛋，理发店剪头发，每次只能为一个顾客提供服务，但是如果你解决了一个热门的技术难题，别人都会使用你的解决方案。这就是可放大性。</p>
<p>创业公司应该如何选择技术难题呢？当然是以难度为指引，实际上，故意选择那些很困难的技术问题，不是因为那个功能可以带来更多收入，而是可以帮你过滤掉很多竞争对手。风险投资商在做决策的时候，经常会问到的问题是，其他人复制你的模式是否会很困难，也就是说，你为竞争对手设置的壁垒有多高。除了选择更困难的技术难题之外，设置“进入壁垒”的方法之一就是申请专利。但是这样并不等于万事大吉了，大公司对于好的想法和方案非常重要，即使你有专利，如果专利的保护程度不高，大公司就可以绕过专利，实在绕不过，就直接侵犯你的专利，等着你去起诉他们，大公司不怕打官司，他们有的是财力物力。</p>
<p>说到这里，我觉得和美剧《硅谷》里的情节非常相似。Richard 在创业孵化器中开发了一种非常强大的压缩算法，大公司互利深知这是一个非常有前景的面向企业的解决方案，不惜以 1000 万美金收购，但是 Richard 还是拒绝了，并自己开始组建公司。当然，互利怎么会就此善罢甘休，他们立即成立了 Nucleus 研究相应压缩算法，在研究失败后不惜起诉 Richard，原因就是他在开发压缩算法时，曾经使用过互利公司的电脑。因此，最好的防御就是进攻。如果你一开就选择较难的技术问题，开发的技术是竞争对手难以复制的，你就很难被超越。但是我觉得 Richard 一开始就把算法以 1000 万美金卖给互利，也是非常明智的，这是比较保险的做法，放弃未来的发展壮大，同时也不用承担之后的风险。毕竟现在很多创业公司发展就初衷就是希望能够被大公司收购。</p>
<p>创业公司通过创造财富而致富已经成为了普遍模式。每一个这样做的人都差不多应用了同样的诀窍：可测量性和可放大性。前者来自小团队的合作，后者来自开发新技术。</p>
]]></content>
      
        <categories>
            
            <category> Mind Explorer </category>
            
        </categories>
        
        
        <tags>
            
            <tag> 《黑客与画家》 </tag>
            
            <tag> 创业 </tag>
            
        </tags>
        
    </entry>
    
    <entry>
      <title><![CDATA[Android Device Monitor 文件管理的常见问题]]></title>
      <url>http://nightn.com/2017/03/19/Android-Device-Monitor-common-problems/</url>
      <content type="html"><![CDATA[<p>Android Device Monitor 是 Android Studio 中用于监测模拟器或真机运行状态的一款开发者工具。但开发者在使用它的过程中往往会遇到很多问题，尤其对于新手。本文分析了实际学习中遇到的问题，包括：1. File Explorer 不显示文件；2. 无权访问 data 等文件; 3. 无权下载文件等，涉及到 Monitor 的基本操作以及 adb shell 和命令行的操作等。<br><a id="more"></a></p>
<h2 id="背景"><a href="#背景" class="headerlink" title="背景"></a><strong>背景</strong></h2><p>最近在看《第一行代码》（第二版）中关于数据存储方案的介绍。数据的状态分为两种：瞬时状态和持久状态，一般保存在内存中的数据随着活动的关闭，数据也就销毁了，如果我们想保存这些数据，该怎么办呢？书中介绍了三种实现数据持久化的方法，分别是：文件存储，SharedPreference 存储以及数据库存储。</p>
<p>在学习第一种数据持久化方法文件存储的时候，我们通过 Context 类中的 openFileOutput() 方法创建一个指定了保存路径的 FileOutputStream 对象 out，然后用这个 out 对象去创建一个 OutputStreamWriter 对象，之后再用这个 OutputStreamWriter 对象创建一个 BufferedWriter 对象 writer，我们就是通过这个 writer 的 write() 方法向文件输出流写入我们想要保存的数据的。文件写入数据之后默认保存在 /data/data/(package name)/files 目录下。我们可以通过 Android Studio 中的 Android Device Monitor 去查看，Android Device Monitor 的打开方法如下所示。</p>
<p><img src="http://img.blog.csdn.net/20170316145505719?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQva25pZ2h0YW9rbw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="打开 Android Device Monitor"></p>
<h2 id="问题1：设备-Offline-File-Explorer-空空如也"><a href="#问题1：设备-Offline-File-Explorer-空空如也" class="headerlink" title="问题1：设备 Offline,  File Explorer 空空如也"></a><strong>问题1：设备 Offline,  File Explorer 空空如也</strong></h2><p>打开 Android Device Monitor 之后，发现里面什么都没有，左边的面板上显示了一台模拟器，但出于 offline 状态，不对呀，我的模拟器命名开着的呀，它正在运行我刚刚写的 app 呢，怎么这里会显示离线状态呢？于是我试着 Google 去找解决方案。</p>
<p><img src="http://img.blog.csdn.net/20170316145939956?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQva25pZ2h0YW9rbw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt=" File Explorer 不显示文件"></p>
<p>在 StackOverflow 上我发现了有人和我一样也碰到了这个问题，不过底下的回答寥寥无几，我找到了一个最高赞的答案（其实也就一个赞….），如下图所示，他的意思是他也不明白其中的具体原理，但是他发现如果先打开 Android Device Monitor，然后再运行模拟器，就可以解决这个问题。</p>
<p><img src="http://img.blog.csdn.net/20170316150034301?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQva25pZ2h0YW9rbw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="解决 File Explorer 不显示文件（from SO）"></p>
<p>于是我按照这个方法尝试，先打开 Android Device Monitor，里面什么也没有，然后打开模拟器，随着模拟器的启动，Monitor 左侧面板出现了 offline 的模拟器，然后再相继启动很多服务，最后就显示为 online 了，如下图所示，这样我们就可以通过 Monitor 中的 File Explorer 标签访问模拟器中的文件了。</p>
<p><img src="http://img.blog.csdn.net/20170316150112791?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQva25pZ2h0YW9rbw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt=" 解决 File Explorer 不显示文件"></p>
<h2 id="问题2：File-Explorer-中的文件无法访问"><a href="#问题2：File-Explorer-中的文件无法访问" class="headerlink" title="问题2：File Explorer 中的文件无法访问"></a><strong>问题2：File Explorer 中的文件无法访问</strong></h2><p>还记得刚刚说的吗，openFileOutput() 方法生成的文件存放在一个默认路径，即 /data/data/(package name)/files 下。由于我的包名是 com.knightaoko.filepersistencetest，所以在下文的叙述中，大家看到这个陌生的字符串不要惊讶，实际操作下替换成你自己的包名即可。（这期间还碰到个问题，好像 Android Device Monitor 不能和 Instant Run 同时运行，所以在此需要把 Instant Run 功能关闭，怎么关闭大家自行 Google，很简单的。）于是，下一步当然是打开这个路径了，找到 data，点击，没反应，再点击，还是没反应。又遇到问题了，我无法访问 data 目录，通过 Google 搜索，我知道了 File Explorer 中的每个文件和文件夹都是有访问权限的，如下图红框中标识的就是 data 文件夹的访问权限。</p>
<p><img src="http://img.blog.csdn.net/20170316150235614?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQva25pZ2h0YW9rbw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="无权访问"></p>
<p> 访问权限是 drwxrwx–x，这玩意是什么意思呢？我相信，学过 Linux 的同学肯定一眼就知道这是什么意思。不知道也没关系，听我慢慢道来，这一个字符串一共有 10 个字符，第一个字符表示是文件夹还是目录，如果第 1 个字符是 d，则表示是文件夹。后面 9 个字符可以分为三组，第一组 rwx 表示所有者（user）对文件的访问权限，r 表示可读（read），w 表示可写（write），x 表示可被执行，- 表示没有该权限；第二组 rwx 表示组群（group）对文件的访问权限；第三组 –x 表示其他人（other）对文件的访问权限，可以看到，没有 r 和 w，说明 data 对其他人来说是不可读不可写的，怪不得我们不能打开它呢，那怎么办呢？于是我又网上搜啊搜，发现可以通过一定的方法修改文件的访问权限的，对，这个方法就是 adb shell。</p>
<p>adb shell 是 Android SDK 中的一个工具，你可以在你的 Android SDK 目录下的 platform-tools 找到它，下图就是我电脑上的该目录：</p>
<p><img src="http://img.blog.csdn.net/20170316150326458?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQva25pZ2h0YW9rbw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="adb 所在目录"></p>
<p>我们需要将这个目录添加到环境变量，为的是后面在命令行直接调用 adb 中的命令。比如在此我将 D:\AndroidSDK\platform-tools 添加到环境变量（具体怎么添加应该不用手把手教学了吧）后，运行 cmd 命令行，然后输入下面的命令。</p>
<p><img src="http://img.blog.csdn.net/20170316150358154?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQva25pZ2h0YW9rbw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="通过 adb shell 获取文件访问权限"></p>
<ul>
<li>adb shell 是打开 adb 外壳程序。</li>
<li>su 是获取 root 权限，只有 root 权限才能修改文件的访问权限。</li>
<li>底下一堆 chmod 777 是把对应的文件或文件夹的访问权限的后 9 位设置成 rwxrwxrwx，777 就三个二进制 111, 喝起来就是 111111111（9 个 1），即相当于把后 9 位访问权限都置 1，于是就成了 rwxrwxrwx，即所有用户都具有该文件的全部访问权限（妈妈再也不用担心我打不开 data 了…）。我们来看看结果：</li>
</ul>
<p><img src="http://img.blog.csdn.net/20170316150537048?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQva25pZ2h0YW9rbw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt=" 修改后的文件访问权限"></p>
<h2 id="问题3：File-Explorer-中的文件无法-pull（下载）"><a href="#问题3：File-Explorer-中的文件无法-pull（下载）" class="headerlink" title="问题3：File Explorer 中的文件无法 pull（下载）"></a><strong>问题3：File Explorer 中的文件无法 pull（下载）</strong></h2><p>可以看到这些目录都能访问了，可以在包名目录下看到生成的 data 文件了，下一步我们想把这个文件复制到我们的电脑里，怎么操作呢？选中该文件，点击右上角的 pull 图标即可，如下图所示：</p>
<p><img src="http://img.blog.csdn.net/20170316150620678?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQva25pZ2h0YW9rbw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="文件下载按钮"></p>
<p>点击之后，选好保存路径。结果我们发现文件并没有保存下来，在 Console 窗口还提示了错误：</p>
<p><img src="http://img.blog.csdn.net/20170316150658987?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQva25pZ2h0YW9rbw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="文件下载出错"></p>
<p>意思就是拉取文件失败，因为你无权进行该操作。又是一脸懵逼，怎么办？还能怎么办，继续 Google 呗！这里我找了很久，终于发现了解决方案：adb root 。没错，在命令行输入这条语句，完美解决！（注意是在 windows 下的命令行，而不是 adb shell 里，当然前提是你添加了 adb 的目录到你的环境变量里）</p>
<p><img src="http://img.blog.csdn.net/20170316150811460?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQva25pZ2h0YW9rbw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="通过 adb root 获取文件下载权限"></p>
<p>然后我们再来 pull 一下，卧槽，崩溃了，又发现问题了：Failed to pull selection。</p>
<p><img src="http://img.blog.csdn.net/20170316150850913?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQva25pZ2h0YW9rbw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="文件下载再次出错"></p>
<p>怎么办？OK，继续 Google，在 StackOverflow 里找到了一个高赞的解决方法：</p>
<p><img src="http://img.blog.csdn.net/20170316150928820?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQva25pZ2h0YW9rbw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="重新选择模拟器（from SO）"></p>
<p>什么意思？重新选择一下 Android Device Monitor 左侧面板的设备即可，没错！就是把下图红框中国的玩意儿点一下。</p>
<p><img src="http://img.blog.csdn.net/20170316151002632?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQva25pZ2h0YW9rbw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="重新选择模拟器"></p>
<p>好了，我们再找到刚刚那个要拷贝的文件，pull 一下，卧槽！！成功了，真是踏破铁鞋无觅处，得来全得靠姑姑（谷歌）。</p>
<p><img src="http://img.blog.csdn.net/20170316151045304?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQva25pZ2h0YW9rbw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="文件下载成功"></p>
<h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a><strong>总结</strong></h2><p>总结一下吧，初次使用 Android Device Monitor，本来只是用来辅助学习 SQLite，结果一上午碰到一大堆问题，总算都一一解决了，在此总结一下。</p>
<ol>
<li><p><strong>Android Device Monitor 要在模拟器运行之前就打开</strong>，这样才不会出现模拟器设备 offline 的问题。</p>
</li>
<li><p>Android Device Monitor 和 Instant Run 貌似有冲突，<strong>在用 Android Device Monitor 时关闭 Instant Run 功能</strong>。我相信还有更好的解决方法，不然打开一个大一点的 APP，不能同时用这两个功能，那多影响效率啊。只是我目前还处于学习阶段，上述方案能解决我当前的问题，不影响我进一步学习，那它就是 OK 的。</p>
</li>
<li><p>操作 Android Device Monitor 时，应该默认把你当做其他人（other）对待，所以你对文件的访问权限很受限制。解决方法是在命令行中，<strong>通过在 adb shell 里获取 root 权限，并更改相应文件的访问权限</strong>，当然记得将 adb 所在目录添加进环境变量。</p>
</li>
<li><p>能访问了但是不能下载也是很麻烦的事，<strong>通过在命令行运行 adb root 获取文件的下载权限</strong>。</p>
</li>
<li><p>通过上述操作之后，就能正常使用 Android Device Monitor 进行文件管理了。但不幸的是，<strong>当你重启模拟器，或启动另一台模拟器时，这些配置又得重新来过</strong>，否则你还是无法访问和下载模拟器中的文件。这个问题的根源在于权限二字，问题不是不能获取权限（通过 adb shell 可以获取 root 权限），而在于获取权限太麻烦了，希望后续版本的 Android Studio 可以直接在 Android Device Monitor 的 GUI 中设置相应获取权限的命令，使得广大 Android 开发者对模拟器中的文件操作更有效率。</p>
</li>
<li><p><strong>Google 大法好</strong>。</p>
</li>
<li><p>最后还有一点，我目前是跟着《第一行代码》（第二版）学习 Android 开发的，但是作者郭霖老师没有组织读者交流群，所以在学习过程中遇到问题时，要么不知所措，要么大费周折才解决一个问题。如果有志同道合的同学一起交流，那样学习更有效率，遇到问题也能大家一起讨论解决。<strong>不知道大家有没有《第二行代码》学习社群推荐，或者有意向和我一起组建一个这样的学习环境，大家可以在留言区畅所欲言</strong>。</p>
</li>
<li><p>PS：本人初出茅庐，开发经验匮乏。如果你发现上文中有不对的地方，还望不吝赐教！</p>
</li>
</ol>
]]></content>
      
        <categories>
            
            <category> Android Studio </category>
            
        </categories>
        
        
        <tags>
            
            <tag> Android Studio </tag>
            
            <tag> adb shell </tag>
            
        </tags>
        
    </entry>
    
    <entry>
      <title><![CDATA[计算机系统漫游]]></title>
      <url>http://nightn.com/2017/01/22/computer-system-roaming/</url>
      <content type="html"><![CDATA[<p>计算机系统是由硬件和软件系统组成的，它们共同工作来运行应用程序。作为程序员，也需要了解这些组件是如何工作的，以及这些组件是如何影响程序的正确性和性能的。我们从最简单的 hello 程序开始，通过跟踪 hello 程序的生命周期（从被创建，到运行，输出，然终止），来开始对计算机系统的学习。<br><a id="more"></a></p>
<h2 id="1-hello-程序创建"><a href="#1-hello-程序创建" class="headerlink" title="1. hello 程序创建"></a><strong>1. hello 程序创建</strong></h2><p>hello.c</p>
<pre class=" language-c"><code class="language-c"><span class="token macro property">#<span class="token directive keyword">include</span> <span class="token string">&lt;stdio.h></span></span>

<span class="token keyword">int</span> <span class="token function">main</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token punctuation">{</span>
    <span class="token function">printf</span><span class="token punctuation">(</span><span class="token string">"hello, world\n"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<p>hello 程序的生命周期是从源程序 hello.c 开始的，它实际上是由 0 和 1 组成的位（bit）序列，8 位称为一个字节。根据 ASCII 标准，每个字节表示一个特定的文本字符，如下图所示，hello.c 程序中的每个字符都对应一个单字节。</p>
<p><img src="http://on2kkr82s.bkt.clouddn.com/17-3-20/66099901-file_1490015480906_21f.png" alt=""></p>
<p>hello.c 的表示方法说明了一个基本思想：计算机系统中的所有信息，包括磁盘中的文件、存储器中的程序和数据、网络上传的数据，都是一串由 0 和 1 组成的位（bit）序列，区分不同数据对象的唯一方法是我们读到这些数据对象时的上下文。</p>
<h2 id="2-hello-程序编译"><a href="#2-hello-程序编译" class="headerlink" title="2. hello 程序编译"></a><strong>2. hello 程序编译</strong></h2><h3 id="2-1-编译系统"><a href="#2-1-编译系统" class="headerlink" title="2.1 编译系统"></a>2.1 编译系统</h3><p>前面创建的 hello.c 程序是一个高级 C 语言程序，我们能够读懂，但计算机系统不懂。必须把高级语言转化为计算机系统能够执行的低级机器语言指令，得到的是可执行目标文件 hello。从源程序文件 hello.c 到可执行目标文件 hello，编译过程分为四个阶段：预处理阶段、编译阶段、汇编阶段和链接阶段，这四个阶段分别由预处理器、编译器、汇编器和链接器完成，它们一起构成了编译系统。</p>
<p><img src="http://on2kkr82s.bkt.clouddn.com/17-3-20/43933800-file_1490015481069_ff32.png" alt=""></p>
<ul>
<li><strong>预处理阶段</strong>。预处理器根据以 # 字符开头的命令，向源程序添加相应的头文件。如 hello.c 第一行的 #include，预处理器读取系统头文件 stdio.h，并将其直接插入到程序文本，得到 hello.i 文件。</li>
<li><strong>编译阶段</strong>。编译器将 hello.i 翻译成汇编程序文件 hello.s。</li>
<li><strong>汇编阶段</strong>。汇编器将汇编程序文件 hello.s 翻译成机器语言指令，并将指令打包成可重定位目标程序，保存在 hello.o 中。hello.o 是二进制文件，而不是文本文件，因此用文本编辑器打开，发现是一堆乱码。</li>
<li><strong>链接阶段</strong>。hello 程序调用了 printf 函数，这个函数存在于已经编译好的 printf.o 中，链接器负责将 .o 文件合并，得到一个可执行目标文件 hello，可以被加载到内存中，由系统执行。</li>
</ul>
<h3 id="2-2-程序员为什么要了解编译系统？"><a href="#2-2-程序员为什么要了解编译系统？" class="headerlink" title="2.2 程序员为什么要了解编译系统？"></a>2.2 程序员为什么要了解编译系统？</h3><ol>
<li><strong>优化程序性能</strong>。为了在 C 程序中做出好的编码选择，我们确实需要了解一些机器代码以及编译器将不同 C 语句转化为机器代码的方式。例如，一个 switch 语句是否总比一系列 if-then-else 语句高效得多？一个函数调用的开销有多大？while 循环比 for 循环更有效吗？指针引用比数组索引更有效吗？</li>
<li><strong>理解链接时出现的错误</strong>。一些令人困扰的程序错误往往都与链接器操作有关。</li>
<li><strong>避免安全漏洞</strong>。缓冲区溢出是造成大多数网络和 Internet 服务器上安全漏洞的主要原因。通过更好地理解编译系统，可以降低这些错误的出现。</li>
</ol>
<h2 id="3-hello-程序执行"><a href="#3-hello-程序执行" class="headerlink" title="3 hello 程序执行"></a><strong>3 hello 程序执行</strong></h2><p>此时，hello.c 源程序已经被编译系统翻译成可执行目标文件 hello，存放在磁盘上。在 Linux 系统的外壳（shell）中可以执行 hello。为了理解 hello 执行的时候发生了什么，我们先对一个典型系统的硬件组成进行简单介绍。</p>
<h3 id="3-1-计算机系统硬件组成"><a href="#3-1-计算机系统硬件组成" class="headerlink" title="3.1 计算机系统硬件组成"></a>3.1 计算机系统硬件组成</h3><p><img src="http://on2kkr82s.bkt.clouddn.com/17-3-20/83046123-file_1490015481442_490e.png" alt=""></p>
<p>如图所示，典型系统的硬件组成包括总线、I/O设备、主存和处理器。</p>
<ul>
<li><strong>总线</strong>。总线贯穿整个系统，它携带信息字节并负责在各个部件间传递，每次只传一个字，字的长度成为字长，有的机器字长是 4 个字节（32位），有的是 8 个字节（64位）。</li>
<li><strong>I/O 设备</strong>。输入/输出设备是系统与外部联系的通道。上图包括 4 个 I/O 设备：作为输入的鼠标和键盘、用于输出的显示器、用于存储的磁盘（可执行文件 hello 存于此），网络也可视作一个 I/O 设备。</li>
<li><strong>主存</strong>。主存是临时存储设备，在处理器执行程序时，用来存放程序和所需的数据。物理上看，主存是由 DRAM 芯片组成的；逻辑上看，主存是一个线性的字节数组，每个字节都有其唯一的地址。</li>
<li><strong>处理器</strong>。处理器是执行主存中指令的引擎，其核心是一个字长的程序计数器（PC）。在任何时刻，PC 都指向主存中的某条机器语言指令。ALU 是算术逻辑单元；寄存器文件是一个小的存储设备，由一些 1 字长的寄存器组成，每个寄存器都有唯一的名字。CPU 在指令的要求下可能会执行以下操作：</li>
</ul>
<table>
<thead>
<tr>
<th>加载</th>
<th>存储</th>
<th>操作</th>
<th>跳转</th>
</tr>
</thead>
<tbody>
<tr>
<td>把一个字节/字从主存复制到寄存器，覆盖寄存器原来的内容。</td>
<td>把一个字节/字从寄存器复制到主存的某个位置。</td>
<td>把两个寄存器的内容复制到ALU，ALU它们进行运算，结果保存到一个寄存器中。</td>
<td>从指令本身抽取一个字，将其复制到 PC中。（即改变 PC 的地址实现跳转）</td>
</tr>
</tbody>
</table>
<h3 id="3-2-运行-hello-程序"><a href="#3-2-运行-hello-程序" class="headerlink" title="3.2 运行 hello 程序"></a>3.2 运行 hello 程序</h3><p> 首先我们在外壳（shell）输入字符串“./hello”以执行 hello 程序，外壳程序将字符逐一从输入设备读入 CPU 的寄存器，再把它放到主存中。</p>
<p>键入回车，外壳会执行一系列代码加载 hello，将 hello 的代码和数据从磁盘复制到主存，利用 DMA（直接存储器存取技术），数据可以不通过处理器而直接从磁盘达到主存。</p>
<p>hello 加载完之后，处理器开始执行 hello 程序中的 main 程序，将“hello. world\n”字符串从主存复制到寄存器文件，再从寄存器文件复制到显示设备，最终显示在屏幕上。</p>
<h3 id="3-3-高速缓存和存储器层次结构"><a href="#3-3-高速缓存和存储器层次结构" class="headerlink" title="3.3 高速缓存和存储器层次结构"></a>3.3 高速缓存和存储器层次结构</h3><p>看完上面 hello 的执行过程，可以发现，系统花费了大量时间把信息从一个地方传到另一个地方，系统设计者的一个主要目标是使这些复制操作尽可能快地完成。针对处理器与主存之间速度的差异，系统设计者用更小、更快的存储设备，即高速缓存存储器，作为暂时的集结区域，用于存放处理器近期可能会需要的信息。</p>
<p><img src="http://on2kkr82s.bkt.clouddn.com/17-3-20/58858427-file_1490015481552_c1e1.png" alt=""></p>
<p>上图展示了一个典型系统的中高速缓存，处理器芯片上的 L1 高速缓存大小可达数万字节，访问速度几乎和访问寄存器文件一样快。还有 L2 ,甚至 L3 高速缓存，随着容量增大，访问速度变慢。高速缓存是用 SRAM （静态随机访问存储器）的硬件技术实现的。有了高速缓存，程序的执行性能可以提高一个数量级。</p>
<p>实际上，除了在处理器和主存之间插入多级高速缓存，每个计算机系统中还有更复杂的存储器层次结构，如下图所示，这个层次结构从上到下，访问速度越来越慢，容量越来越大，并且每个字节的造价也越来越便宜。L0 为寄存器文件，L1 到 L3 为三级高速缓存，然后是主存、本地磁盘，最后是远程二级存储。存储器层次结构的主要思想是：一层上的存储器是低一层存储器的高速缓存，如寄存器文件是 L1 的高速缓存，L1 是 L2 的高速缓存等。</p>
<p><img src="http://on2kkr82s.bkt.clouddn.com/17-3-20/8906578-file_1490015481302_7753.png" alt=""></p>
<h2 id="4-操作系统管理硬件"><a href="#4-操作系统管理硬件" class="headerlink" title="4. 操作系统管理硬件"></a><strong>4. 操作系统管理硬件</strong></h2><p>当我们加载和运行 hello 程序，以及 hello 程序输出时，外壳和 hello 程序都没有直接访问键盘、显示器、磁盘和主存。它们依靠操作系统来管理硬件。操作系统有两个基本功能：（1）防止硬件被失控的应用程序滥用；（2）向应用程序提供了简单一致的机制来控制复制而又大相径庭的硬件设备。操作系统是通过几个基本的抽象概念来实现这两个功能的。</p>
<ul>
<li><strong>文件</strong>。是操作系统对 I/O 设备的抽象表示。</li>
<li><strong>虚拟存储器</strong>。是操作系统对主存和磁盘 I/O 设备的抽象表示。</li>
<li><strong>进程</strong>。是对处理器、主存和 I/O 设备的抽象表示。</li>
</ul>
<p><img src="http://on2kkr82s.bkt.clouddn.com/17-3-20/48144014-file_1490015481189_6c56.png" alt=""></p>
<h3 id="4-1-进程"><a href="#4-1-进程" class="headerlink" title="4.1 进程"></a>4.1 进程</h3><p>hello 程序运行时，操作系统会提供一个假象，就好像系统上只有这个程序在运行。这是通过进程的概念来实现的，进程是计算机科学中最重要和最成功的概念之一。进程是操作系统对正在运行程序的一种抽象，一个系统可以同时运行多个进程，这种并发运行时通过处理器在进程间的切换（称为上下文切换）实现的。实际上，在任何时刻，单处理器系统都只能执行一个进程的代码。</p>
<p><img src="http://on2kkr82s.bkt.clouddn.com/17-3-20/3651090-file_1490015481670_80e8.png" alt=""></p>
<p> 如上图所示，有两个进程：外壳进程和 hello 进程。一开始只有外壳进程在运行，输入“./hello”命令后，系统调用将控制权传递给操作系统，操作系统保存当前外壳进程的上下文，并创建新的 hello 进程及其上下文，将控制权传递给新的 hello 进程。hello 进程终止后，操作系统恢复外壳进程上下文，并将控制权传回给它，外壳进程等待下一个命令输入。</p>
<h3 id="4-2-线程"><a href="#4-2-线程" class="headerlink" title="4.2 线程"></a>4.2 线程</h3><p>通常我们认为一个进程只有单一控制流，如 hello 进程只有 main 控制流。但是在现代系统中，一个进程可以由多个称为线程的执行单元组成，每个线程都运行在进程的上下文中，并共享同样的代码和全局数据。一般来说，线程比进程更高效，所以多线程之间比多进程之间更容易共享数据。</p>
<h3 id="4-3-虚拟存储器"><a href="#4-3-虚拟存储器" class="headerlink" title="4.3 虚拟存储器"></a>4.3 虚拟存储器</h3><p>虚拟存储器是一个抽象的概念，它为每个进程提供了一个假象：每个进程都在独占使用主存。每个进程看到的是一致的存储器，称为虚拟地址空间。</p>
<p><img src="http://on2kkr82s.bkt.clouddn.com/17-3-20/17034796-file_1490015481788_17b.png" alt=""></p>
<p> 每个进程的虚拟地址空间由大量准确定义的区构成，每个区都有专门的功能。</p>
<ul>
<li><strong>程序代码和数据</strong>。代码从一个固定地址开始，接着是数据。代码和数据区是直接按照可执行目标文件（在此是 hello）的内容初始化的。</li>
<li><strong>堆</strong>。代码和数据区紧跟着是堆，前者运行时规定了大小，后者可以调用 malloc 和 free 在运行时动态扩展和收缩。</li>
<li><strong>共享库</strong>。地址中间一部分存放着像 C 标准库和数学库这样的共享库的代码和数据的区域。</li>
<li><strong>栈</strong>。虚拟地址空间顶部的是用户栈，可以动态扩展和收缩。如调用一个函数时，栈会增长，从一个函数返回时，栈会收缩。</li>
<li><strong>内核虚拟存储器</strong>。是操作系统的一部分，不允许应用程序读写或调用。</li>
</ul>
<p>虚拟存储器的运作需要硬件和操作系统之间精密复杂的交互，其基本思想是把一个进程虚拟存储器的内容存储在磁盘上，然后用主存作为磁盘的高速缓存。</p>
<h3 id="4-4-文件"><a href="#4-4-文件" class="headerlink" title="4.4 文件"></a>4.4 文件</h3><p>文件就是字节序列，仅此而已。每个 I/O 设备，包括磁盘、键盘、显示器，甚至网络，都可以视为文件。它向应用程序提供了一个统一的视角，来看待系统中可能含有的所有各式各样的 I/O 设备。</p>
<h2 id="5-其他重要主题"><a href="#5-其他重要主题" class="headerlink" title="5. 其他重要主题"></a><strong>5. 其他重要主题</strong></h2><p>在上述计算机系统漫游中，我们得出重要结论：计算机系统不仅仅只是硬件。系统是硬件和软件互相交织的集合体，它们必须共同协作以达到运行应用程序的最终目的。我们来再来讨论几个贯穿计算机系统的重要概念作为结尾。</p>
<h3 id="5-1-并发和并行"><a href="#5-1-并发和并行" class="headerlink" title="5.1 并发和并行"></a>5.1 并发和并行</h3><p>我们需要计算机做得更多，也需要它运行得更快，怎么办呢？因此引入了并发，并发是一个通用的概念，指一个同时具有多个活动的系统；并行是指用并发使一个系统运行得更快。并行有三个层次，由高到低分别是：线程级并发；指令级并行；单指令多数据并行。</p>
<ul>
<li><strong>线程级并发</strong>。在一个进程中执行多个控制流，即多线程。传统上通过线程间的切换实现并行，随着多核处理器和超线程的出现，线程之间的切换变得更加的快速。</li>
<li><strong>指令级并行</strong>。即处理器可以同时执行多条指令，</li>
<li><strong>单指令、多数据并行</strong>。允许一条指令产生多个可以并行执行的操作，即 SIMD 并行，如较新的 Intel 和 AMD 处理器并行地对 4 对单精度浮点数做加法的指令。</li>
</ul>
<h3 id="5-2-计算机系统中的抽象"><a href="#5-2-计算机系统中的抽象" class="headerlink" title="5.2 计算机系统中的抽象"></a>5.2 计算机系统中的抽象</h3><p>抽象是计算机科学中最为重要的概念之一。例如，在编程中可以为函数提供抽象的接口，程序员无需了解函数内部工作机制就可以使用这些代码。如文件是对 I/O 设备的抽象；虚拟存储器是对主存和磁盘 I/O 的抽象；进程是对一个正在运行的程序的抽象；而虚拟机是对整个计算机（包括操作系统、处理器和程序）的抽象。</p>
<h2 id="6-总结"><a href="#6-总结" class="headerlink" title="6 总结"></a><strong>6 总结</strong></h2><p>由一个 hello 程序的生命周期对整个计算机系统进行了快速的漫游。从中我们知道了，计算机系统是由硬件和软件组成的，共同协作以运行程序。计算机内部的信息实际上是一系列位序列，根据上下文有不同的解释方式。编译系统将源程序经过预处理、编译、汇编和链接四个步骤翻译成可执行目标文件。由于程序运行时，信息常常由一个地方被复制到另一个地方，为了提高传递速度，提出了存储器层次结构，由高到低分别是寄存器文件，L1 高速缓存，L2 高速缓存，L3 高速缓存，主存，磁盘，远程存储器等，由上到下，容量依次变大，但速度越来越慢，每个字节的造价也越来越便宜。</p>
<p>另外，应用程序并不是直接操纵计算机硬件，而是通过操作系统代为管理，这样可以避免失控的应用程序对系统硬件的滥用，同时为应用程序提供了简单统一的机制来控制复杂多样的硬件。具体是通过进程、虚拟存储器和文件等抽象概念实现的。最后还讨论了三个不同层次的并发机制，并说明了计算机系统中抽象的重要性。</p>
<hr>
<p>参考：<a href="http://csapp.cs.cmu.edu/" target="_blank" rel="external">《Computer Systems A Programmer’s Perspective》</a></p>
]]></content>
      
        <categories>
            
            <category> Computer Systems </category>
            
        </categories>
        
        
        <tags>
            
            <tag> Computer Systems </tag>
            
            <tag> 计算机基础 </tag>
            
        </tags>
        
    </entry>
    
    <entry>
      <title><![CDATA[OpenCV 图像遍历与颜色缩减]]></title>
      <url>http://nightn.com/2017/01/21/OpenCV-traversal-and-compression/</url>
      <content type="html"><![CDATA[<p>图像处理的基础是对图像每一个像素点的遍历，即图像扫描。在本节中，将介绍几种不同的图像遍历方式，为了对比不同方法的效率，我们不是单纯的遍历，而是对图像做更多的处理。在此，我们测试的是一种简单的颜色缩减方法。为了比较不同遍历算法的运行时间，你还将看到 OpenCV 中计时函数的用法。<br><a id="more"></a></p>
<h2 id="1-概述"><a href="#1-概述" class="headerlink" title="1. 概述"></a><strong>1. 概述</strong></h2><p>图像处理的基础是对图像每一个像素点的遍历，即图像扫描。在本节中，将介绍几种不同的图像遍历方式，为了对比不同方法的效率，我们不是单纯的遍历，而是对图像做更多的处理。在此，我们测试的是一种简单的颜色缩减方法。为了比较不同遍历算法的运行时间，你还将看到 OpenCV 中计时函数的用法。</p>
<h2 id="2-图像存储方式"><a href="#2-图像存储方式" class="headerlink" title="2. 图像存储方式"></a><strong>2. 图像存储方式</strong></h2><p>在进行下面的论述之前，先对图像矩阵在内存中的存储方式简单介绍。对于单通道灰度图像：</p>
<p><img src="http://on2kkr82s.bkt.clouddn.com/17-3-20/94760296-file_1490017405620_17ae0.png" alt=""></p>
<p>而对于多通道图像来说，矩阵中的列会包含多个子列，子列数与通道数相等，如 BGR 颜色模型的矩阵为：</p>
<p><img src="http://on2kkr82s.bkt.clouddn.com/17-3-20/29406263-file_1490017405477_1ada.png" alt=""></p>
<h2 id="3-颜色缩减"><a href="#3-颜色缩减" class="headerlink" title="3. 颜色缩减"></a><strong>3. 颜色缩减</strong></h2><p>何谓颜色缩减？对于元素类型为 uchar 的单通道图像矩阵，每个像素点有 256 个灰度值，但是对于三通道图像，每个像素点的颜色种类达 16777216 种（256 的三次方）。如此多的颜色可能会对算法性能造成严重影响，我们往往只需要颜色的一部分，也能满足要求，因此引入了颜色缩减。</p>
<p><img src="http://on2kkr82s.bkt.clouddn.com/17-3-20/25494428-file_1490017405949_8fda.png" alt=""></p>
<p>如上图所示，左侧为颜色缩减前，右侧为颜色缩减后，数字表示灰度值。可以看出，灰度值 92 到 114 映射为 92；115 到 137 映射为 115，以此类推，左侧 164 种颜色缩减为右侧的 7 种颜色。实现方法也很简单：</p>
<pre class=" language-cpp"><code class="language-cpp"><span class="token comment" spellcheck="true">//color1输入,color2输出 </span>
color2 <span class="token operator">=</span> <span class="token punctuation">(</span>color1 <span class="token operator">/</span> <span class="token number">23</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token number">23</span><span class="token punctuation">;</span>
</code></pre>
<p>但是，如果直接对图像的每个像素进行上述除法和乘法，这样效率是很低的。一个较好的办法是事先生成一张颜色缩减的查找表，表中缩减前后的值都明确给定，这样遍历图像时，利用查找表直接对相应像素点进行赋值即可。其优势在于只需读取、无需计算。以下代码生成颜色查找表 color_table：</p>
<pre class=" language-cpp"><code class="language-cpp"><span class="token comment" spellcheck="true">// 生成颜色查找表</span>
vector<span class="token operator">&lt;</span><span class="token keyword">int</span><span class="token operator">></span> color_table<span class="token punctuation">;</span>
<span class="token keyword">int</span> width <span class="token operator">=</span> <span class="token number">20</span><span class="token punctuation">;</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">int</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> <span class="token number">256</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span>
<span class="token punctuation">{</span>
    color_table<span class="token punctuation">.</span><span class="token function">push_back</span><span class="token punctuation">(</span>i <span class="token operator">/</span> width <span class="token operator">*</span> width<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<h2 id="4-图像遍历"><a href="#4-图像遍历" class="headerlink" title="4. 图像遍历"></a><strong>4. 图像遍历</strong></h2><p>有了颜色查找表后，我们便可以对图像进行遍历并对像素点进行颜色缩减了。我们采用了几种不同的图像遍历方法，为了对比它们的效率，采用 OpenCV 提供的两个简单的计时器函数 getTickCount() 和 getTickFrequency(), 它们分别返回 CPU 走过的时钟周期数和 CPU 一秒的时钟周期数。因此，可以这样来计时（单位：秒）：</p>
<pre class=" language-cpp"><code class="language-cpp"><span class="token keyword">double</span> time_begin <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token keyword">double</span><span class="token punctuation">)</span><span class="token function">getTickCount</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment" spellcheck="true">// do something</span>
<span class="token keyword">double</span> time_end <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token keyword">double</span><span class="token punctuation">)</span><span class="token function">getTickCount</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">double</span> time <span class="token operator">=</span> <span class="token punctuation">(</span>time_end <span class="token operator">-</span> time_begin<span class="token punctuation">)</span> <span class="token operator">/</span> <span class="token function">getTickFrequency</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<h3 id="4-1-利用指针遍历"><a href="#4-1-利用指针遍历" class="headerlink" title="4.1 利用指针遍历"></a>4.1 利用指针遍历</h3><pre class=" language-cpp"><code class="language-cpp">Mat<span class="token operator">&amp;</span> <span class="token function">ScanImageAndReduceC</span><span class="token punctuation">(</span>Mat<span class="token operator">&amp;</span> I<span class="token punctuation">,</span> vector<span class="token operator">&lt;</span><span class="token keyword">int</span><span class="token operator">></span> color_table<span class="token punctuation">)</span>
<span class="token punctuation">{</span>
     <span class="token comment" spellcheck="true">//只接收字符型矩阵</span>
     <span class="token function">CV_Assert</span><span class="token punctuation">(</span>I<span class="token punctuation">.</span><span class="token function">depth</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">!=</span> <span class="token keyword">sizeof</span><span class="token punctuation">(</span>uchar<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
     <span class="token keyword">int</span> channels <span class="token operator">=</span> I<span class="token punctuation">.</span><span class="token function">channels</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true">//获取图像通道数</span>
     <span class="token keyword">int</span> row <span class="token operator">=</span> I<span class="token punctuation">.</span>rows <span class="token operator">*</span> channels<span class="token punctuation">;</span>
     <span class="token keyword">int</span> col <span class="token operator">=</span> I<span class="token punctuation">.</span>cols<span class="token punctuation">;</span>
     uchar<span class="token operator">*</span> p<span class="token punctuation">;</span>
     <span class="token keyword">if</span> <span class="token punctuation">(</span>I<span class="token punctuation">.</span><span class="token function">isContinuous</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment" spellcheck="true">//判断像素是否连续存储</span>
     <span class="token punctuation">{</span>
           col <span class="token operator">*</span><span class="token operator">=</span> row<span class="token punctuation">;</span>
           row <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>
     <span class="token punctuation">}</span>
     <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">int</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> row<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span>
     <span class="token punctuation">{</span>
           p <span class="token operator">=</span> I<span class="token punctuation">.</span>ptr<span class="token operator">&lt;</span>uchar<span class="token operator">></span><span class="token punctuation">(</span>i<span class="token punctuation">)</span><span class="token punctuation">;</span>
           <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">int</span> j <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> j <span class="token operator">&lt;</span> col<span class="token punctuation">;</span> j<span class="token operator">++</span><span class="token punctuation">)</span>
           <span class="token punctuation">{</span>
                p<span class="token punctuation">[</span>j<span class="token punctuation">]</span> <span class="token operator">=</span> color_table<span class="token punctuation">[</span>p<span class="token punctuation">[</span>j<span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
           <span class="token punctuation">}</span>
     <span class="token punctuation">}</span>
     <span class="token keyword">return</span> I<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<p>颜色缩减结果（根据查找表的width设置缩减的程度，在此 width = 20）</p>
<p><img src="http://on2kkr82s.bkt.clouddn.com/17-3-20/79119290-file_1490017405746_14c2e.png" alt=""></p>
<p>算法执行时间为 0.0134007 秒。</p>
<h3 id="4-2-利用迭代器遍历"><a href="#4-2-利用迭代器遍历" class="headerlink" title="4.2 利用迭代器遍历"></a>4.2 利用迭代器遍历</h3><pre class=" language-cpp"><code class="language-cpp">Mat<span class="token operator">&amp;</span> <span class="token function">ScanImageAndReduceIterator</span><span class="token punctuation">(</span>Mat<span class="token operator">&amp;</span> I<span class="token punctuation">,</span> vector<span class="token operator">&lt;</span><span class="token keyword">int</span><span class="token operator">></span> color_table<span class="token punctuation">)</span>
<span class="token punctuation">{</span>
     <span class="token comment" spellcheck="true">//只接收字符型矩阵</span>
     <span class="token function">CV_Assert</span><span class="token punctuation">(</span>I<span class="token punctuation">.</span><span class="token function">depth</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">!=</span> <span class="token keyword">sizeof</span><span class="token punctuation">(</span>uchar<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
     <span class="token keyword">int</span> channels <span class="token operator">=</span> I<span class="token punctuation">.</span><span class="token function">channels</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
     <span class="token keyword">switch</span> <span class="token punctuation">(</span>channels<span class="token punctuation">)</span>
     <span class="token punctuation">{</span>
     <span class="token keyword">case</span> <span class="token number">1</span><span class="token operator">:</span>
     <span class="token punctuation">{</span>
           MatIterator_<span class="token operator">&lt;</span>uchar<span class="token operator">></span> it<span class="token punctuation">,</span> end<span class="token punctuation">;</span>
           <span class="token keyword">for</span> <span class="token punctuation">(</span>it <span class="token operator">=</span> I<span class="token punctuation">.</span>begin<span class="token operator">&lt;</span>uchar<span class="token operator">></span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> end <span class="token operator">=</span> I<span class="token punctuation">.</span>end<span class="token operator">&lt;</span>uchar<span class="token operator">></span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> it <span class="token operator">!=</span> end<span class="token punctuation">;</span> it<span class="token operator">++</span><span class="token punctuation">)</span>
                <span class="token operator">*</span>it <span class="token operator">=</span> color_table<span class="token punctuation">[</span><span class="token operator">*</span>it<span class="token punctuation">]</span><span class="token punctuation">;</span>
           <span class="token keyword">break</span><span class="token punctuation">;</span>
     <span class="token punctuation">}</span>
     <span class="token keyword">case</span> <span class="token number">3</span><span class="token operator">:</span>
     <span class="token punctuation">{</span>
           MatIterator_<span class="token operator">&lt;</span>Vec3b<span class="token operator">></span> it<span class="token punctuation">,</span> end<span class="token punctuation">;</span>
           <span class="token keyword">for</span> <span class="token punctuation">(</span>it <span class="token operator">=</span> I<span class="token punctuation">.</span>begin<span class="token operator">&lt;</span>Vec3b<span class="token operator">></span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> end <span class="token operator">=</span> I<span class="token punctuation">.</span>end<span class="token operator">&lt;</span>Vec3b<span class="token operator">></span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> it <span class="token operator">!=</span> end<span class="token punctuation">;</span> it<span class="token operator">++</span><span class="token punctuation">)</span>
           <span class="token punctuation">{</span>
                <span class="token punctuation">(</span><span class="token operator">*</span>it<span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token operator">=</span> color_table<span class="token punctuation">[</span><span class="token punctuation">(</span><span class="token operator">*</span>it<span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
                <span class="token punctuation">(</span><span class="token operator">*</span>it<span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span> <span class="token operator">=</span> color_table<span class="token punctuation">[</span><span class="token punctuation">(</span><span class="token operator">*</span>it<span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
                <span class="token punctuation">(</span><span class="token operator">*</span>it<span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span> <span class="token operator">=</span> color_table<span class="token punctuation">[</span><span class="token punctuation">(</span><span class="token operator">*</span>it<span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
           <span class="token punctuation">}</span>
           <span class="token keyword">break</span><span class="token punctuation">;</span>
     <span class="token punctuation">}</span>
     <span class="token punctuation">}</span>
     <span class="token keyword">return</span> I<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<p>算法执行时间 0.0693951 秒。用迭代器遍历速度稍慢，但是更加安全。上述代码中，我们首先对图像的通道数进行判断，通道数为 1 时，直接对灰度值赋值；对于三通道彩色图像，每个像素可以看做一个包含三个 uchar 元素的 vector, 在 OpenCV 中用 Vec3b 命名。对于彩色图像，如果我们仅仅使用 uchar 而不是 Vec3b 迭代的话就只能获得蓝色通道的值（BGR模型中的第一个通道）。</p>
<h3 id="4-3-通过相关返回值的-On-the-fly-地址遍历"><a href="#4-3-通过相关返回值的-On-the-fly-地址遍历" class="headerlink" title="4.3 通过相关返回值的 On-the-fly 地址遍历"></a>4.3 通过相关返回值的 On-the-fly 地址遍历</h3><pre class=" language-cpp"><code class="language-cpp">Mat<span class="token operator">&amp;</span> <span class="token function">ScanImageAndReduceRadomAccess</span><span class="token punctuation">(</span>Mat<span class="token operator">&amp;</span> I<span class="token punctuation">,</span> vector<span class="token operator">&lt;</span><span class="token keyword">int</span><span class="token operator">></span> color_table<span class="token punctuation">)</span>
<span class="token punctuation">{</span>
     <span class="token comment" spellcheck="true">//只接收字符型矩阵</span>
     <span class="token function">CV_Assert</span><span class="token punctuation">(</span>I<span class="token punctuation">.</span><span class="token function">depth</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">!=</span> <span class="token keyword">sizeof</span><span class="token punctuation">(</span>uchar<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
     <span class="token keyword">int</span> channels <span class="token operator">=</span> I<span class="token punctuation">.</span><span class="token function">channels</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
     <span class="token keyword">switch</span> <span class="token punctuation">(</span>channels<span class="token punctuation">)</span>
     <span class="token punctuation">{</span>
     <span class="token keyword">case</span> <span class="token number">1</span><span class="token operator">:</span>
     <span class="token punctuation">{</span>
           <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">int</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> I<span class="token punctuation">.</span>rows<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span>
           <span class="token punctuation">{</span>
                <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">int</span> j <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> j <span class="token operator">&lt;</span> I<span class="token punctuation">.</span>cols<span class="token punctuation">;</span> j<span class="token operator">++</span><span class="token punctuation">)</span>
                <span class="token punctuation">{</span>
                      I<span class="token punctuation">.</span>at<span class="token operator">&lt;</span>uchar<span class="token operator">></span><span class="token punctuation">(</span>i<span class="token punctuation">,</span> j<span class="token punctuation">)</span> <span class="token operator">=</span> color_table<span class="token punctuation">[</span>I<span class="token punctuation">.</span>at<span class="token operator">&lt;</span>uchar<span class="token operator">></span><span class="token punctuation">(</span>i<span class="token punctuation">,</span> j<span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
                <span class="token punctuation">}</span>
           <span class="token punctuation">}</span>
           <span class="token keyword">break</span><span class="token punctuation">;</span>
     <span class="token punctuation">}</span>
     <span class="token keyword">case</span> <span class="token number">3</span><span class="token operator">:</span>
     <span class="token punctuation">{</span>
           <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">int</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> I<span class="token punctuation">.</span>rows<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span>
           <span class="token punctuation">{</span>
                <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">int</span> j <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> j <span class="token operator">&lt;</span> I<span class="token punctuation">.</span>cols<span class="token punctuation">;</span> j<span class="token operator">++</span><span class="token punctuation">)</span>
                <span class="token punctuation">{</span>
                      I<span class="token punctuation">.</span>at<span class="token operator">&lt;</span>Vec3b<span class="token operator">></span><span class="token punctuation">(</span>i<span class="token punctuation">,</span> j<span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token operator">=</span> color_table<span class="token punctuation">[</span>I<span class="token punctuation">.</span>at<span class="token operator">&lt;</span>Vec3b<span class="token operator">></span><span class="token punctuation">(</span>i<span class="token punctuation">,</span> j<span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
                      I<span class="token punctuation">.</span>at<span class="token operator">&lt;</span>Vec3b<span class="token operator">></span><span class="token punctuation">(</span>i<span class="token punctuation">,</span> j<span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span> <span class="token operator">=</span> color_table<span class="token punctuation">[</span>I<span class="token punctuation">.</span>at<span class="token operator">&lt;</span>Vec3b<span class="token operator">></span><span class="token punctuation">(</span>i<span class="token punctuation">,</span> j<span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
                      I<span class="token punctuation">.</span>at<span class="token operator">&lt;</span>Vec3b<span class="token operator">></span><span class="token punctuation">(</span>i<span class="token punctuation">,</span> j<span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span> <span class="token operator">=</span> color_table<span class="token punctuation">[</span>I<span class="token punctuation">.</span>at<span class="token operator">&lt;</span>Vec3b<span class="token operator">></span><span class="token punctuation">(</span>i<span class="token punctuation">,</span> j<span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
                <span class="token punctuation">}</span>
           <span class="token punctuation">}</span>
           <span class="token keyword">break</span><span class="token punctuation">;</span>
     <span class="token punctuation">}</span>
     <span class="token punctuation">}</span>
     <span class="token keyword">return</span> I<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<p>通过 at() 函数获取并更改图像中的元素。事实上，这种方法并不推荐呗用来进行图像扫描。</p>
<h3 id="4-4-核心函数-LUT-The-Core-Function"><a href="#4-4-核心函数-LUT-The-Core-Function" class="headerlink" title="4.4 核心函数 LUT (The Core Function)"></a>4.4 核心函数 LUT (The Core Function)</h3><p>核心函数 LUT 是最被推荐用于实现批量图像元素查找和更改的方法，它并不需要你自己去扫描图像。我们先建立一个查找表：</p>
<pre class=" language-cpp"><code class="language-cpp">Mat <span class="token function">table</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">256</span><span class="token punctuation">,</span> CV_8U<span class="token punctuation">)</span><span class="token punctuation">;</span>
uchar<span class="token operator">*</span> p <span class="token operator">=</span> table<span class="token punctuation">.</span>data<span class="token punctuation">;</span>
<span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">int</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> <span class="token number">256</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span>
    p<span class="token punctuation">[</span>i<span class="token punctuation">]</span> <span class="token operator">=</span> color_table<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">;</span>
</code></pre>
<p>然后调用函数：</p>
<pre class=" language-cpp"><code class="language-cpp"><span class="token comment" spellcheck="true">//image是输入，image_reduce是输出</span>
<span class="token function">LUT</span><span class="token punctuation">(</span>image<span class="token punctuation">,</span> table<span class="token punctuation">,</span> image_reduce<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<h3 id="4-5-结论"><a href="#4-5-结论" class="headerlink" title="4.5 结论"></a>4.5 结论</h3><p>尽量使用 OpenCV 内置函数，调用 LUT 函数可以获得最快的速度，这是因为 OpenCV 库可以通过英特尔线程架构启用多线程，当然，迭代器也是一个不错的选择，优点是安全，缺点是速度较慢，on-the-fly方法不推荐使用。</p>
<hr>
<p><a href="http://www.opencv.org.cn/opencvdoc/2.3.2/html/doc/tutorials/core/how_to_scan_images/how_to_scan_images.html#howtoscanimagesopencv" target="_blank" rel="external">More</a></p>
]]></content>
      
        <categories>
            
            <category> OpenCV </category>
            
        </categories>
        
        
        <tags>
            
            <tag> 机器视觉 </tag>
            
            <tag> OpenCV </tag>
            
        </tags>
        
    </entry>
    
    <entry>
      <title><![CDATA[OpenCV Mat 介绍]]></title>
      <url>http://nightn.com/2017/01/21/OpenCV-Mat-introduction/</url>
      <content type="html"><![CDATA[<h2 id="1-为什么要引入-Mat-图像容器？"><a href="#1-为什么要引入-Mat-图像容器？" class="headerlink" title="1. 为什么要引入 Mat 图像容器？"></a>1. 为什么要引入 Mat 图像容器？</h2><p>在计算机看来，一幅图像对应的是矩阵，矩阵包含了所有像素点的强度值。获取并存储这些像素值，可以使计算机图像处理简化为数值矩阵及描述矩阵信息的处理。OpenCV 是如何存储图像的呢？</p>
<p>2001年 OpenCV 刚出现的时候，是基于 C 语言接口而建的。为了在内存中存放图像，当时采用名为 IplImage 的 C 语言结构体。这种方法的最大弊端是：用户必须手动管理内存，一旦代码庞大，这便变得非常麻烦且容易出错。OpenCV 2.0 引入新的 C++ 接口，利用个自动内存管理给出了解决方案。</p>
<h2 id="2-Mat-介绍"><a href="#2-Mat-介绍" class="headerlink" title="2. Mat 介绍"></a>2. Mat 介绍</h2><p>Mat 作为一个类，数据包括两个部分：矩阵头和指向像素矩阵的指针。</p>
<table>
<thead>
<tr>
<th>数据部分</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>矩阵头</td>
<td>描述像素矩阵，主要包括矩阵的尺寸、存储方式、存储地址等。矩阵头的大小固定。</td>
</tr>
<tr>
<td>矩阵指针</td>
<td>矩阵指针所指对象代表了图像本身，其尺寸会根据图像的不同而不同。像素矩阵一般比矩阵头大几个数量级，因此，拷贝图像会产生很大的计算量。</td>
</tr>
</tbody>
</table>
<h3 id="2-1-赋值和拷贝构造函数只拷贝信息头"><a href="#2-1-赋值和拷贝构造函数只拷贝信息头" class="headerlink" title="2.1 赋值和拷贝构造函数只拷贝信息头"></a>2.1 赋值和拷贝构造函数只拷贝信息头</h3><p>为了避免拷贝图像的巨大计算量，OpenCV 采用引用计数机制。即每个 Mat 对象有其自己的矩阵头，但可以共享同一个图像矩阵（即 Mat 对象的矩阵指针指向同一地址）。在 Mat 对象赋值及拷贝构造函数中，只拷贝矩阵头和矩阵指针，不拷贝矩阵本身，这样可以减少很多计算量。</p>
<p>这样我们会看到，同一个图像矩阵，可能属于多个 Mat 对象，那么当不需要图像矩阵时，哪个 Mat 对象负责清理它呢？正如 C++ 语法中的智能指针，Mat 规定最后一个使用矩阵的对象负责清理，这是根据矩阵的引用计数进行判断的，当引用计数为 0 时，矩阵会被清理。</p>
<pre class=" language-cpp"><code class="language-cpp">Mat A<span class="token punctuation">;</span> <span class="token comment" spellcheck="true">// A 的引用计数为0</span>
A <span class="token operator">=</span> <span class="token function">imread</span><span class="token punctuation">(</span><span class="token string">"E:/Code/CPP/OpenCV/Pictures/1.bmp"</span><span class="token punctuation">,</span> CV_LOAD_IMAGE_COLOR<span class="token punctuation">)</span><span class="token punctuation">;</span>
Mat <span class="token function">B</span><span class="token punctuation">(</span>A<span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment" spellcheck="true">// A 的引用计数+1，为 2</span>
Mat C <span class="token operator">=</span> A<span class="token punctuation">;</span>  <span class="token comment" spellcheck="true">// A 的引用计数+1，为 3</span>
cout <span class="token operator">&lt;&lt;</span> <span class="token string">"refcount of A: "</span> <span class="token operator">&lt;&lt;</span> <span class="token operator">*</span>A<span class="token punctuation">.</span>refcount <span class="token operator">&lt;&lt;</span> endl<span class="token punctuation">;</span>
Mat D <span class="token operator">=</span> <span class="token function">imread</span><span class="token punctuation">(</span><span class="token string">"E:/Code/CPP/OpenCV/Pictures/1.bmp"</span><span class="token punctuation">,</span> CV_LOAD_IMAGE_COLOR<span class="token punctuation">)</span><span class="token punctuation">;</span>
C <span class="token operator">=</span> D<span class="token punctuation">;</span> <span class="token comment" spellcheck="true">// C, D 指向同一矩阵，A 的引用计数-1，为2</span>
cout <span class="token operator">&lt;&lt;</span> <span class="token string">"refcount of A: "</span> <span class="token operator">&lt;&lt;</span> <span class="token operator">*</span>A<span class="token punctuation">.</span>refcount <span class="token operator">&lt;&lt;</span> endl<span class="token punctuation">;</span>
cout <span class="token operator">&lt;&lt;</span> <span class="token string">"refcount of D: "</span> <span class="token operator">&lt;&lt;</span> <span class="token operator">*</span>D<span class="token punctuation">.</span>refcount <span class="token operator">&lt;&lt;</span> endl<span class="token punctuation">;</span>
</code></pre>
<p>运行结果：</p>
<p><img src="http://on2kkr82s.bkt.clouddn.com/17-3-20/61446613-file_1490016922912_2080.png" alt=""></p>
<h3 id="2-2-使用-clone-或-copyTo-拷贝图像矩阵"><a href="#2-2-使用-clone-或-copyTo-拷贝图像矩阵" class="headerlink" title="2.2 使用 clone() 或 copyTo() 拷贝图像矩阵"></a>2.2 使用 clone() 或 copyTo() 拷贝图像矩阵</h3><p>那么有时候我们的确需要拷贝矩阵本身呢？可以用 Mat 的成员函数 clone() 或者 copyTo()。</p>
<pre class=" language-cpp"><code class="language-cpp">Mat im1 <span class="token operator">=</span><span class="token function">imread</span><span class="token punctuation">(</span><span class="token string">"E:/Code/CPP/OpenCV/Pictures/1.bmp"</span><span class="token punctuation">,</span>
CV_LOAD_IMAGE_COLOR<span class="token punctuation">)</span><span class="token punctuation">;</span>
Mat im2 <span class="token operator">=</span> im1<span class="token punctuation">.</span><span class="token function">clone</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true">//矩阵内容拷贝</span>
Mat im3<span class="token punctuation">;</span>
im1<span class="token punctuation">.</span><span class="token function">copyTo</span><span class="token punctuation">(</span>im3<span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment" spellcheck="true">//矩阵内容拷贝</span>
</code></pre>
<p>上面的代码中，im1, im2, im3的引用计数都为1，因为它们并没有共享底层矩阵。</p>
<h2 id="3-使用-Mat"><a href="#3-使用-Mat" class="headerlink" title="3. 使用 Mat"></a>3. 使用 Mat</h2><h3 id="3-1-创建-Mat"><a href="#3-1-创建-Mat" class="headerlink" title="3.1 创建 Mat"></a>3.1 创建 Mat</h3><h4 id="通过构造函数创建："><a href="#通过构造函数创建：" class="headerlink" title="通过构造函数创建："></a>通过构造函数创建：</h4><pre class=" language-cpp"><code class="language-cpp">Mat <span class="token function">M</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> CV_8UC3<span class="token punctuation">,</span> <span class="token function">Scalar</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">255</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
cout <span class="token operator">&lt;&lt;</span> <span class="token string">"M = "</span> <span class="token operator">&lt;&lt;</span> endl <span class="token operator">&lt;&lt;</span> <span class="token string">" "</span> <span class="token operator">&lt;&lt;</span> M <span class="token operator">&lt;&lt;</span> endl<span class="token punctuation">;</span>
</code></pre>
<p>上述程序创建了 2X2 的像素图像，每个像素有三个通道，CV_8UC3 表示使用 8 位 unsigned char 表示三通道，用 Scalar 进行初始化，值得注意是的，Mat 三通道依次是 BGR，而不是我们熟知的 RGB。OpenCV 也重载了 &lt;&lt; 运算符，因此，直接可以用标准输出对 Mat 对象进行输出，运行结果为：</p>
<p><img src="http://on2kkr82s.bkt.clouddn.com/17-3-20/75183952-file_1490016923037_12546.png" alt=""></p>
<h4 id="通过-create-创建："><a href="#通过-create-创建：" class="headerlink" title="通过 create() 创建："></a>通过 create() 创建：</h4><pre class=" language-cpp"><code class="language-cpp">Mat M<span class="token punctuation">;</span>
<span class="token comment" spellcheck="true">//create不能指定初始值, CV_8UC(4)为自定义通道数</span>
M<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token function">CV_8UC</span><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 
cout <span class="token operator">&lt;&lt;</span> <span class="token string">"M = "</span> <span class="token operator">&lt;&lt;</span> endl <span class="token operator">&lt;&lt;</span> <span class="token string">" "</span> <span class="token operator">&lt;&lt;</span> M <span class="token operator">&lt;&lt;</span> endl<span class="token punctuation">;</span>
</code></pre>
<p>运行结果：</p>
<p><img src="http://on2kkr82s.bkt.clouddn.com/17-3-20/79319227-file_1490016923144_842f.png" alt=""></p>
<p>可以看出，create 并不能设定初始值，元素默认初始化为 205。另外，我们可以使用 CV_8UC(n)自定义n维通道。</p>
<h4 id="静态函数-zeros-ones-eyes"><a href="#静态函数-zeros-ones-eyes" class="headerlink" title="静态函数 zeros(), ones(), eyes()"></a>静态函数 zeros(), ones(), eyes()</h4><table>
<thead>
<tr>
<th>静态函数</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>zeros()</td>
<td>零矩阵</td>
</tr>
<tr>
<td>ones()</td>
<td>全 1 矩阵</td>
</tr>
<tr>
<td>eyes()</td>
<td>单位矩阵</td>
</tr>
</tbody>
</table>
<h3 id="3-2-格式化输出"><a href="#3-2-格式化输出" class="headerlink" title="3.2 格式化输出"></a>3.2 格式化输出</h3><p>OpenCV 支持多种输出方式，如默认方式、Python 格式、CSV 格式，Numpy 格式以及 C 语言格式。</p>
<pre class=" language-cpp"><code class="language-cpp">Mat <span class="token function">M</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> CV_8UC3<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">randu</span><span class="token punctuation">(</span>M<span class="token punctuation">,</span> Scalar<span class="token operator">::</span><span class="token function">all</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">,</span> Scalar<span class="token operator">::</span><span class="token function">all</span><span class="token punctuation">(</span><span class="token number">255</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
cout <span class="token operator">&lt;&lt;</span> <span class="token string">"Default fomart: "</span> <span class="token operator">&lt;&lt;</span> endl <span class="token operator">&lt;&lt;</span> <span class="token string">" "</span> <span class="token operator">&lt;&lt;</span> M <span class="token operator">&lt;&lt;</span>endl<span class="token punctuation">;</span>
cout <span class="token operator">&lt;&lt;</span> <span class="token string">"Python format: "</span> <span class="token operator">&lt;&lt;</span> endl <span class="token operator">&lt;&lt;</span> <span class="token string">" "</span> <span class="token operator">&lt;&lt;</span> <span class="token function">format</span><span class="token punctuation">(</span>M<span class="token punctuation">,</span> <span class="token string">"python"</span><span class="token punctuation">)</span> <span class="token operator">&lt;&lt;</span> endl<span class="token punctuation">;</span>
cout <span class="token operator">&lt;&lt;</span> <span class="token string">"CSV format: "</span> <span class="token operator">&lt;&lt;</span> endl <span class="token operator">&lt;&lt;</span> <span class="token string">" "</span> <span class="token operator">&lt;&lt;</span> <span class="token function">format</span><span class="token punctuation">(</span>M<span class="token punctuation">,</span> <span class="token string">"csv"</span><span class="token punctuation">)</span> <span class="token operator">&lt;&lt;</span> endl<span class="token punctuation">;</span>
cout <span class="token operator">&lt;&lt;</span> <span class="token string">"Numpy format: "</span> <span class="token operator">&lt;&lt;</span> endl <span class="token operator">&lt;&lt;</span> <span class="token string">" "</span> <span class="token operator">&lt;&lt;</span> <span class="token function">format</span><span class="token punctuation">(</span>M<span class="token punctuation">,</span> <span class="token string">"numpy"</span><span class="token punctuation">)</span> <span class="token operator">&lt;&lt;</span> endl<span class="token punctuation">;</span>
cout <span class="token operator">&lt;&lt;</span> <span class="token string">"C format: "</span> <span class="token operator">&lt;&lt;</span> endl <span class="token operator">&lt;&lt;</span> <span class="token string">" "</span> <span class="token operator">&lt;&lt;</span> <span class="token function">format</span><span class="token punctuation">(</span>M<span class="token punctuation">,</span> <span class="token string">"c"</span><span class="token punctuation">)</span> <span class="token operator">&lt;&lt;</span> endl<span class="token punctuation">;</span>
</code></pre>
<p>运行结果：</p>
<p><img src="http://on2kkr82s.bkt.clouddn.com/17-3-20/21687811-file_1490016923270_7f1.png" alt=""></p>
<p>其中 randu() 为 M 的元素随机赋值，范围为指定的 0 - 255。</p>
<hr>
<p><a href="http://www.opencv.org.cn/opencvdoc/2.3.2/html/doc/tutorials/core/mat%20-%20the%20basic%20image%20container/mat%20-%20the%20basic%20image%20container.html#matthebasicimagecontainer" target="_blank" rel="external">More</a></p>
]]></content>
      
        <categories>
            
            <category> OpenCV </category>
            
        </categories>
        
        
        <tags>
            
            <tag> 机器视觉 </tag>
            
            <tag> OpenCV </tag>
            
        </tags>
        
    </entry>
    
    <entry>
      <title><![CDATA[OpenCV 读取、修改、保存图像]]></title>
      <url>http://nightn.com/2017/01/21/OpenCV-imread-imwrite-imshow/</url>
      <content type="html"><![CDATA[<p>OpenCV 图像保存格式之一为 cv::Mat, 常用 imread 进行图像读取，用 imwrite 进行图像保存，用 imshow 进行图像显示。<br><a id="more"></a></p>
<h2 id="1-读取图像"><a href="#1-读取图像" class="headerlink" title="1. 读取图像"></a>1. 读取图像</h2><p>OpenCV 图像保存格式之一为 cv::Mat, 常用 imread 进行图像读取：</p>
<pre class=" language-cpp"><code class="language-cpp">Mat image<span class="token punctuation">;</span>
image <span class="token operator">=</span> <span class="token function">imread</span><span class="token punctuation">(</span><span class="token string">"E:/Code/CPP/OpenCV/Pictures/1.bmp"</span><span class="token punctuation">,</span> CV_LOAD_IMAGE_COLOR<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<h2 id="2-彩色图像转换为灰度图像"><a href="#2-彩色图像转换为灰度图像" class="headerlink" title="2. 彩色图像转换为灰度图像"></a>2. 彩色图像转换为灰度图像</h2><pre class=" language-cpp"><code class="language-cpp">Mat gray_image<span class="token punctuation">;</span>
<span class="token function">cvtColor</span><span class="token punctuation">(</span>image<span class="token punctuation">,</span> gray_image<span class="token punctuation">,</span> CV_BGR2GRAY<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>第三个参数指定转换类型，在此为 CV_BGR2GRAY</p>
<h2 id="3-图像保存与显示"><a href="#3-图像保存与显示" class="headerlink" title="3. 图像保存与显示"></a>3. 图像保存与显示</h2><p>我们用 imwrite 进行图像保存，用 imshow 进行图像显示，如：</p>
<pre class=" language-cpp"><code class="language-cpp"><span class="token function">imwrite</span><span class="token punctuation">(</span><span class="token string">"E:/Code/CPP/OpenCV/Pictures/1_gray.bmp"</span><span class="token punctuation">,</span> gray_image<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">imshow</span><span class="token punctuation">(</span><span class="token string">"image"</span><span class="token punctuation">,</span> image<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">imshow</span><span class="token punctuation">(</span><span class="token string">"gray_image"</span><span class="token punctuation">,</span> gray_image<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">waitKey</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<hr>
<p><a href="http://www.opencv.org.cn/opencvdoc/2.3.2/html/doc/tutorials/introduction/load_save_image/load_save_image.html#load-save-image" target="_blank" rel="external">More</a></p>
]]></content>
      
        <categories>
            
            <category> OpenCV </category>
            
        </categories>
        
        
        <tags>
            
            <tag> 机器视觉 </tag>
            
            <tag> OpenCV </tag>
            
        </tags>
        
    </entry>
    
    <entry>
      <title><![CDATA[Qt主界面获取对话框数据]]></title>
      <url>http://nightn.com/2016/12/23/Qt-communication-bwteen-main-and-dialog-box/</url>
      <content type="html"><![CDATA[<p>在编写Qt程序的时候，我们常常需要通过对话框来获取用户的输入数据，比如通过文件对话框获取文件的路径，通过颜色对话框获取用户所选择的颜色，这些对话框的类都是Qt帮我们写好了的，调用相应函数就能直接返回用户的输入，比如颜色对话框QColorDialog中有一个静态函数getColor，我们直接调用该函数，便会弹出颜色对话框，等我们选择好颜色并确定，该函数就会返回一个QColor的对象，这个对象就包含了我们之前所选颜色的RGB值了。<br><a id="more"></a><br>然而，很多时候，我们需要创建自己的对话框，我们不能调用现成函数来获取用户输入，本文将提供两种方法，通过对话框来获取用户输入的案例。在此之前，我们先讨论一下显示对话框的两个函数，一个是show()，一个是exec()。show() 显示的是非模态窗口，不会阻塞程序的线程，因此如果你的对话框是创建在栈上，跳出作用域之后，对象便销毁了，因此你会发现对话框一闪而过；如果你用new关键字将对话框创建在堆上，跳出作用域之后对象不能被销毁，但是建立在堆上需要考虑及时释放内存的问题，以免造成内存泄漏。但是能够正常显示窗口不代表能够很方便地获取数据，show()不会阻塞线程，因此可能用户还没来得及输入数据，就已经执行之后的代码了。解决这个问题需要用到信号槽机制，具体解决方案会在下文详细讲解。exec()显示的是模态窗口，它开启了一个事件循环，会阻塞程序的线程，函数返回之后，我们直接可以获取对话框的数据。下面考虑这两种不同的对话框显示方式，提供两种不同的获取对话框数据的方法。</p>
<h3 id="方法一"><a href="#方法一" class="headerlink" title="方法一"></a><strong>方法一</strong></h3><p>首先考虑简单的，使用exec()显示对话框。我们定义了一个主界面的类，叫MainWindow,界面包含一个名为btn的按钮（用于跳出对话框）和一个名为label的标签（用于显示从对话框获取的用户输入）；我们还定义一个对话框类，界面包含一个名为lineEdit的单行文本框（用于接收用户输入)，以及确定和取消按钮（这两个按钮是创建对话框的时候自动生成的）。两个界面如下图：</p>
<p><img src="http://on2kkr82s.bkt.clouddn.com/17-3-20/61203614-file_1490012608851_7b1e.png" alt="主界面"></p>
<p><img src="http://on2kkr82s.bkt.clouddn.com/17-3-20/79032149-file_1490012695609_305e.png" alt="对话框界面"></p>
<p>关键代码如下：</p>
<pre class=" language-cpp"><code class="language-cpp"><span class="token comment" spellcheck="true">//in mainwindow.h</span>
<span class="token keyword">class</span> <span class="token class-name">MainWindow</span> <span class="token operator">:</span> <span class="token keyword">public</span> QMainWindow
<span class="token punctuation">{</span>
    Q_OBJECT
<span class="token keyword">public</span><span class="token operator">:</span>
    <span class="token keyword">explicit</span> <span class="token function">MainWindow</span><span class="token punctuation">(</span>QWidget <span class="token operator">*</span>parent <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token operator">~</span><span class="token function">MainWindow</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">private</span><span class="token operator">:</span>
    Ui<span class="token operator">::</span>MainWindow <span class="token operator">*</span>ui<span class="token punctuation">;</span>
    <span class="token keyword">void</span> <span class="token function">showDialog</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token comment" spellcheck="true">//in mainwindow.cpp</span>
MainWindow<span class="token operator">::</span><span class="token function">MainWindow</span><span class="token punctuation">(</span>QWidget <span class="token operator">*</span>parent<span class="token punctuation">)</span> <span class="token operator">:</span>
    <span class="token function">QMainWindow</span><span class="token punctuation">(</span>parent<span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token function">ui</span><span class="token punctuation">(</span><span class="token keyword">new</span> Ui<span class="token operator">::</span>MainWindow<span class="token punctuation">)</span>
<span class="token punctuation">{</span>
    ui<span class="token operator">-</span><span class="token operator">></span><span class="token function">setupUi</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment" spellcheck="true">//“显示对话框”按钮与显示函数建立信号槽关系</span>
    <span class="token function">connect</span><span class="token punctuation">(</span>ui<span class="token operator">-</span><span class="token operator">></span>btn<span class="token punctuation">,</span> <span class="token operator">&amp;</span>QPushButton<span class="token operator">::</span>clicked<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">,</span> <span class="token operator">&amp;</span>MainWindow<span class="token operator">::</span>showDialog<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
MainWindow<span class="token operator">::</span><span class="token operator">~</span><span class="token function">MainWindow</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token keyword">delete</span> ui<span class="token punctuation">;</span><span class="token punctuation">}</span>
<span class="token keyword">void</span> MainWindow<span class="token operator">::</span><span class="token function">showDialog</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token punctuation">{</span>
    Dialog dialog<span class="token punctuation">;</span>
    dialog<span class="token punctuation">.</span><span class="token function">exec</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    ui<span class="token operator">-</span><span class="token operator">></span>label<span class="token operator">-</span><span class="token operator">></span><span class="token function">setText</span><span class="token punctuation">(</span>dialog<span class="token punctuation">.</span><span class="token function">getinput</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<pre class=" language-cpp"><code class="language-cpp"><span class="token comment" spellcheck="true">//in dialog.h</span>
<span class="token keyword">class</span> <span class="token class-name">Dialog</span> <span class="token operator">:</span> <span class="token keyword">public</span> QDialog
<span class="token punctuation">{</span>
    Q_OBJECT
<span class="token keyword">public</span><span class="token operator">:</span>
    <span class="token keyword">explicit</span> <span class="token function">Dialog</span><span class="token punctuation">(</span>QWidget <span class="token operator">*</span>parent <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token operator">~</span><span class="token function">Dialog</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    QString <span class="token function">getinput</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">private</span><span class="token operator">:</span>
    Ui<span class="token operator">::</span>Dialog <span class="token operator">*</span>ui<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token comment" spellcheck="true">//in dialog.cpp</span>
Dialog<span class="token operator">::</span><span class="token function">Dialog</span><span class="token punctuation">(</span>QWidget <span class="token operator">*</span>parent<span class="token punctuation">)</span> <span class="token operator">:</span>
    <span class="token function">QDialog</span><span class="token punctuation">(</span>parent<span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token function">ui</span><span class="token punctuation">(</span><span class="token keyword">new</span> Ui<span class="token operator">::</span>Dialog<span class="token punctuation">)</span>
<span class="token punctuation">{</span>
    ui<span class="token operator">-</span><span class="token operator">></span><span class="token function">setupUi</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
Dialog<span class="token operator">::</span><span class="token operator">~</span><span class="token function">Dialog</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token keyword">delete</span> ui<span class="token punctuation">;</span><span class="token punctuation">}</span>
QString Dialog<span class="token operator">::</span><span class="token function">getinput</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token punctuation">{</span>
    QString s <span class="token operator">=</span> ui<span class="token operator">-</span><span class="token operator">></span>lineEdit<span class="token operator">-</span><span class="token operator">></span><span class="token function">text</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> s<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<p>代码说明：上面的程序还是比较容易理解的，在mainwindow.h和mainwindow.cpp里，先将btn与showDialog建立联系，在showDialog内部创建Dialog对象，并通过exec()显示，由于exec()会阻碍线程，因此待用户输入数据之后再执行后续获取数据的代码，由于我们想获取的dialog内的数据是私有的，因此在Dialog类定义了一个public的getinput()函数（之前还考虑用友元，感觉被自己蠢哭了），间接获取用户的输入，最后将数据显示在主界面的label上面，达到主界面获取对话框数据的目的。<br>附：<a href="http://on2kkr82s.bkt.clouddn.com/DialogData1.rar" target="_blank" rel="external">方法一源代码</a></p>
<h3 id="方法二："><a href="#方法二：" class="headerlink" title="方法二："></a><strong>方法二：</strong></h3><p>上面讨论的是用exec()显示对话框的情况下获取用户输入数据，那如果用show()显示对话框，该如何获取数据呢？由于show()不会开启事件循环，因此如果继续按上面的方法，用户根本来不及输入数据，后续的代码就已经执行了，因此需要用到信号槽机制。思路是这样的：按下对话框的确定按钮后，程序会自动调用QDialog::accept()函数，因此如果我们可以重载accept()函数，在其中发送信号，关联该信号的槽便会响应，我们在槽里面进行数据数据接收。<br>关键代码如下：</p>
<pre class=" language-cpp"><code class="language-cpp"><span class="token comment" spellcheck="true">//in mainwindow.h</span>
<span class="token keyword">class</span> <span class="token class-name">MainWindow</span> <span class="token operator">:</span> <span class="token keyword">public</span> QMainWindow
<span class="token punctuation">{</span>
    Q_OBJECT
<span class="token keyword">public</span><span class="token operator">:</span>
    <span class="token keyword">explicit</span> <span class="token function">MainWindow</span><span class="token punctuation">(</span>QWidget <span class="token operator">*</span>parent <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token operator">~</span><span class="token function">MainWindow</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">private</span><span class="token operator">:</span>
    Ui<span class="token operator">::</span>MainWindow <span class="token operator">*</span>ui<span class="token punctuation">;</span>
    <span class="token keyword">void</span> <span class="token function">showDialog</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">void</span> <span class="token function">displayData</span><span class="token punctuation">(</span>QString data<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">void</span> <span class="token function">accept</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token comment" spellcheck="true">//in mainwindow.cpp</span>
MainWindow<span class="token operator">::</span><span class="token function">MainWindow</span><span class="token punctuation">(</span>QWidget <span class="token operator">*</span>parent<span class="token punctuation">)</span> <span class="token operator">:</span>
    <span class="token function">QMainWindow</span><span class="token punctuation">(</span>parent<span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token function">ui</span><span class="token punctuation">(</span><span class="token keyword">new</span> Ui<span class="token operator">::</span>MainWindow<span class="token punctuation">)</span>
<span class="token punctuation">{</span>
    ui<span class="token operator">-</span><span class="token operator">></span><span class="token function">setupUi</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token function">connect</span><span class="token punctuation">(</span>ui<span class="token operator">-</span><span class="token operator">></span>btn<span class="token punctuation">,</span> <span class="token operator">&amp;</span>QPushButton<span class="token operator">::</span>clicked<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">,</span> <span class="token operator">&amp;</span>MainWindow<span class="token operator">::</span>showDialog<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
MainWindow<span class="token operator">::</span><span class="token operator">~</span><span class="token function">MainWindow</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token keyword">delete</span> ui<span class="token punctuation">;</span><span class="token punctuation">}</span>
<span class="token keyword">void</span> MainWindow<span class="token operator">::</span><span class="token function">showDialog</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token punctuation">{</span>
    Dialog <span class="token operator">*</span>dialog <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token function">Dialog</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token function">connect</span><span class="token punctuation">(</span>dialog<span class="token punctuation">,</span> <span class="token operator">&amp;</span>Dialog<span class="token operator">::</span>receiveData<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">,</span> <span class="token operator">&amp;</span>MainWindow<span class="token operator">::</span>displayData<span class="token punctuation">)</span><span class="token punctuation">;</span>
    dialog<span class="token operator">-</span><span class="token operator">></span><span class="token function">show</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">void</span> MainWindow<span class="token operator">::</span><span class="token function">displayData</span><span class="token punctuation">(</span>QString data<span class="token punctuation">)</span>
<span class="token punctuation">{</span>
    ui<span class="token operator">-</span><span class="token operator">></span>label<span class="token operator">-</span><span class="token operator">></span><span class="token function">setText</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<pre class=" language-cpp"><code class="language-cpp"><span class="token comment" spellcheck="true">//in dialog.h</span>
<span class="token keyword">class</span> <span class="token class-name">Dialog</span> <span class="token operator">:</span> <span class="token keyword">public</span> QDialog
<span class="token punctuation">{</span>
    Q_OBJECT
<span class="token keyword">public</span><span class="token operator">:</span>
    <span class="token keyword">explicit</span> <span class="token function">Dialog</span><span class="token punctuation">(</span>QWidget <span class="token operator">*</span>parent <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token operator">~</span><span class="token function">Dialog</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
signals<span class="token operator">:</span>
    <span class="token keyword">void</span> <span class="token function">receiveData</span><span class="token punctuation">(</span>QString s<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">private</span><span class="token operator">:</span>
    Ui<span class="token operator">::</span>Dialog <span class="token operator">*</span>ui<span class="token punctuation">;</span>
    <span class="token keyword">void</span> <span class="token function">accept</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token comment" spellcheck="true">//in dialog.cpp</span>
Dialog<span class="token operator">::</span><span class="token function">Dialog</span><span class="token punctuation">(</span>QWidget <span class="token operator">*</span>parent<span class="token punctuation">)</span> <span class="token operator">:</span>
    <span class="token function">QDialog</span><span class="token punctuation">(</span>parent<span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token function">ui</span><span class="token punctuation">(</span><span class="token keyword">new</span> Ui<span class="token operator">::</span>Dialog<span class="token punctuation">)</span>
<span class="token punctuation">{</span>
    ui<span class="token operator">-</span><span class="token operator">></span><span class="token function">setupUi</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
Dialog<span class="token operator">::</span><span class="token operator">~</span><span class="token function">Dialog</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token keyword">delete</span> ui<span class="token punctuation">;</span><span class="token punctuation">}</span>
<span class="token keyword">void</span> Dialog<span class="token operator">::</span><span class="token function">accept</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment" spellcheck="true">//重载accept()</span>
<span class="token punctuation">{</span>
    QString data <span class="token operator">=</span> ui<span class="token operator">-</span><span class="token operator">></span>lineEdit<span class="token operator">-</span><span class="token operator">></span><span class="token function">text</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    emit <span class="token function">receiveData</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment" spellcheck="true">//发送信号给mainwindow</span>
    QDialog<span class="token operator">::</span><span class="token function">accept</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<p>代码说明：用户输入数据后，按下确定按钮，程序会自动调用accept()，因此重载了accept()函数，让其将获取的输入数据作为信号（receiveData是一个信号）通过emit发送给主界面，在mainwindow.cpp，我们信号receiveData和槽displayData进行关联，displayData将接收的数据显示在主界面的label上的。总的来说，数据输入后，先调用accept()，accept()将信号（信号上带有数据）发送给displayData，displayData显示数据。通过信号槽机制，我们看到，即使对话框作为非模态窗口显示，即使其稍纵即逝，我们还是能通过特定手段获取用户的输入。<br>附：<a href="http://on2kkr82s.bkt.clouddn.com/DialogData2.rar" target="_blank" rel="external">方法二源代码</a></p>
<p>运行结果：</p>
<p><img src="http://on2kkr82s.bkt.clouddn.com/17-3-20/57471216-file_1490012700145_1d5f.gif" alt="运行结果"></p>
]]></content>
      
        <categories>
            
            <category> Qt </category>
            
        </categories>
        
        
        <tags>
            
            <tag> C++ </tag>
            
            <tag> Qt </tag>
            
        </tags>
        
    </entry>
    
    <entry>
      <title><![CDATA[Hello World]]></title>
      <url>http://nightn.com/2016/01/01/hello-world/</url>
      <content type="html"><![CDATA[<p>Welcome to <a href="https://hexo.io/" target="_blank" rel="external">Hexo</a>! This is your very first post. <a id="more"></a>Check <a href="https://hexo.io/docs/" target="_blank" rel="external">documentation</a> for more info. If you get any problems when using Hexo, you can find the answer in <a href="https://hexo.io/docs/troubleshooting.html" target="_blank" rel="external">troubleshooting</a> or you can ask me on <a href="https://github.com/hexojs/hexo/issues" target="_blank" rel="external">GitHub</a>.</p>
<h2 id="Quick-Start"><a href="#Quick-Start" class="headerlink" title="Quick Start"></a>Quick Start</h2><h3 id="Create-a-new-post"><a href="#Create-a-new-post" class="headerlink" title="Create a new post"></a>Create a new post</h3><pre class=" language-bash"><code class="language-bash">$ hexo new <span class="token string">"My New Post"</span>
</code></pre>
<p>More info: <a href="https://hexo.io/docs/writing.html" target="_blank" rel="external">Writing</a></p>
<h3 id="Run-server"><a href="#Run-server" class="headerlink" title="Run server"></a>Run server</h3><pre class=" language-bash"><code class="language-bash">$ hexo server
</code></pre>
<p>More info: <a href="https://hexo.io/docs/server.html" target="_blank" rel="external">Server</a></p>
<h3 id="Generate-static-files"><a href="#Generate-static-files" class="headerlink" title="Generate static files"></a>Generate static files</h3><pre class=" language-bash"><code class="language-bash">$ hexo generate
</code></pre>
<p>More info: <a href="https://hexo.io/docs/generating.html" target="_blank" rel="external">Generating</a></p>
<h3 id="Deploy-to-remote-sites"><a href="#Deploy-to-remote-sites" class="headerlink" title="Deploy to remote sites"></a>Deploy to remote sites</h3><pre class=" language-bash"><code class="language-bash">$ hexo deploy
</code></pre>
<p>More info: <a href="https://hexo.io/docs/deployment.html" target="_blank" rel="external">Deployment</a></p>
]]></content>
      
        
    </entry>
    
  
  
</search>