Android开源: Hover - 谷歌开源超酷浮动菜单
luojun0513
8年前
<h2>简介</h2> <p style="text-align:start">Hover是Android的浮动菜单实现。</p> <h2 style="text-align:start">目标</h2> <p style="text-align:start">Hover的目标是：</p> <ol> <li>为Android开发人员提供一个易于使用，开箱即用的浮动菜单实现</li> <li>为Android开发者提供常用工具，以创建自己的浮动菜单。</li> </ol> <h2 style="text-align:start">Beta通知</h2> <p>悬停仍在大量发展。 还有很多代码清理要做，所以期望打破API随时间的变化。</p> <p>也就是说，Hover应该在这个时候处于可用状态。</p> <h2 style="text-align:start">演示</h2> <p style="text-align:start">Hover repo中包含演示应用程序。 这里有一些演示的屏幕截图。</p> <p style="text-align:start"><a href="https://simg.open-open.com/show/5aba931c212258b7b02c2ad5549d59d9.gif" style="box-sizing: border-box; background-color: transparent; color: rgb(64, 120, 192); text-decoration: none;"><img src="https://simg.open-open.com/show/5aba931c212258b7b02c2ad5549d59d9.gif"></a> <a href="https://simg.open-open.com/show/97b6ddd22738a74830607d825a9695d1.png" style="box-sizing: border-box; background-color: transparent; color: rgb(64, 120, 192); text-decoration: none;"><img alt="Demo Hover Menu - Launching" src="https://simg.open-open.com/show/97b6ddd22738a74830607d825a9695d1.png"></a> <a href="https://simg.open-open.com/show/bdba9da3f02886aafc12bd9c097e9093.png" style="box-sizing: border-box; background-color: transparent; color: rgb(64, 120, 192); text-decoration: none;"><img alt="Demo Hover Menu - Launching" src="https://simg.open-open.com/show/bdba9da3f02886aafc12bd9c097e9093.png"></a></p> <p style="text-align:start"><a href="https://simg.open-open.com/show/6ddd54b9cec38cadacb6970db1b27ae1.png" style="box-sizing: border-box; background-color: transparent; color: rgb(64, 120, 192); text-decoration: none;"><img alt="Demo Hover Menu - Launching" src="https://simg.open-open.com/show/6ddd54b9cec38cadacb6970db1b27ae1.png"></a> <a href="https://simg.open-open.com/show/a20f00cee250008cfe01e13bdb64ba50.png" style="box-sizing: border-box; background-color: transparent; color: rgb(64, 120, 192); text-decoration: none;"><img alt="Demo Hover Menu - Launching" src="https://simg.open-open.com/show/a20f00cee250008cfe01e13bdb64ba50.png"></a> <a href="https://simg.open-open.com/show/d885347b9e140704e6c0edd6c376bf89.png" style="box-sizing: border-box; background-color: transparent; color: rgb(64, 120, 192); text-decoration: none;"><img alt="Demo Hover Menu - Launching" src="https://simg.open-open.com/show/d885347b9e140704e6c0edd6c376bf89.png"></a></p> <h2 style="text-align:start">入门</h2> <h3 style="text-align:start">从 HoverMenuService派生</h3> <p style="text-align:start">从HoverMenuService派生一个子类开始使用Hover，请创建HoverMenuService的子类来托管Hover菜单。 您需要覆盖的唯一方法是createHoverMenuAdapter（），它将返回您的Hover菜单的内容。</p> <pre> <code class="language-java"><span style="color:rgb(167, 29, 93)">public</span> <span style="color:rgb(167, 29, 93)">class</span> <span style="color:rgb(121, 93, 163)">MyHoverMenuService</span> <span style="color:rgb(167, 29, 93)">extends</span> <span style="color:rgb(121, 93, 163)">HoverMenuService</span> { <span style="color:rgb(167, 29, 93)">@Override</span> <span style="color:rgb(167, 29, 93)">protected</span> <span style="color:rgb(51, 51, 51)">HoverMenuAdapter</span> <span style="color:rgb(121, 93, 163)">createHoverMenuAdapter</span>() { <span style="color:rgb(150, 152, 150)"><span style="color:rgb(150, 152, 150)">//</span> Create and configure your content for the HoverMenu.</span> <span style="color:rgb(167, 29, 93)">return</span> myHoverMenuAdapter; } }</code></pre> <h3 style="text-align:start">实现一个HoverMenuAdapter</h3> <p style="text-align:start">HoverMenuAdapter很像一个标准的Android适配器。 HoverMenuAdapters为您的悬停菜单中显示的每个选项卡提供一个视图。 它还为每个选项卡提供相应的NavigatorContent。</p> <pre> <code class="language-java"><span style="color:rgb(167, 29, 93)">public</span> <span style="color:rgb(167, 29, 93)">class</span> <span style="color:rgb(121, 93, 163)">MyHoverMenuAdapter</span> <span style="color:rgb(167, 29, 93)">extends</span> <span style="color:rgb(121, 93, 163)">BaseHoverMenuAdapter</span> { <span style="color:rgb(167, 29, 93)">private</span> <span style="color:rgb(167, 29, 93)">List<<span style="color:rgb(51, 51, 51)">String</span>></span> mTabs; <span style="color:rgb(167, 29, 93)">private</span> <span style="color:rgb(167, 29, 93)">Map<<span style="color:rgb(51, 51, 51)">String</span>, <span style="color:rgb(51, 51, 51)">NavigatorContent</span>></span> mContentMap <span style="color:rgb(167, 29, 93)">=</span> <span style="color:rgb(167, 29, 93)">new</span> <span style="color:rgb(167, 29, 93)">HashMap<></span>(); <span style="color:rgb(167, 29, 93)">public</span> <span style="color:rgb(121, 93, 163)">MyHoverMenuAdapter</span>() { mTabs <span style="color:rgb(167, 29, 93)">=</span> <span style="color:rgb(51, 51, 51)">Arrays</span><span style="color:rgb(167, 29, 93)">.</span>asList(<span style="color:rgb(24, 54, 145)"><span style="color:rgb(24, 54, 145)">"</span>first<span style="color:rgb(24, 54, 145)">"</span></span>, <span style="color:rgb(24, 54, 145)"><span style="color:rgb(24, 54, 145)">"</span>second<span style="color:rgb(24, 54, 145)">"</span></span>); mContentMap<span style="color:rgb(167, 29, 93)">.</span>put(<span style="color:rgb(24, 54, 145)"><span style="color:rgb(24, 54, 145)">"</span>first<span style="color:rgb(24, 54, 145)">"</span></span>, <span style="color:rgb(150, 152, 150)"><span style="color:rgb(150, 152, 150)">/*</span>...<span style="color:rgb(150, 152, 150)">*/</span></span>); mContentMap<span style="color:rgb(167, 29, 93)">.</span>put(<span style="color:rgb(24, 54, 145)"><span style="color:rgb(24, 54, 145)">"</span>second<span style="color:rgb(24, 54, 145)">"</span></span>, <span style="color:rgb(150, 152, 150)"><span style="color:rgb(150, 152, 150)">/*</span>...<span style="color:rgb(150, 152, 150)">*/</span></span>); } <span style="color:rgb(167, 29, 93)">@Override</span> <span style="color:rgb(167, 29, 93)">public</span> <span style="color:rgb(167, 29, 93)">void</span> <span style="color:rgb(121, 93, 163)">getTabCount</span>() { <span style="color:rgb(167, 29, 93)">return</span> mTabs<span style="color:rgb(167, 29, 93)">.</span>size(); } <span style="color:rgb(167, 29, 93)">@Override</span> <span style="color:rgb(167, 29, 93)">public</span> <span style="color:rgb(167, 29, 93)">long</span> <span style="color:rgb(121, 93, 163)">getTabId</span>(<span style="color:rgb(167, 29, 93)">int</span> <span style="color:rgb(237, 106, 67)">position</span>) { <span style="color:rgb(167, 29, 93)">return</span> mTabs<span style="color:rgb(167, 29, 93)">.</span>get(position)<span style="color:rgb(167, 29, 93)">.</span>hashCode(); } <span style="color:rgb(167, 29, 93)">@Override</span> <span style="color:rgb(167, 29, 93)">public</span> <span style="color:rgb(51, 51, 51)">View</span> <span style="color:rgb(121, 93, 163)">getTabView</span>(<span style="color:rgb(167, 29, 93)">int</span> <span style="color:rgb(237, 106, 67)">position</span>) { <span style="color:rgb(51, 51, 51)">String</span> tabName <span style="color:rgb(167, 29, 93)">=</span> mTabs<span style="color:rgb(167, 29, 93)">.</span>get(position); <span style="color:rgb(167, 29, 93)">if</span> (<span style="color:rgb(24, 54, 145)"><span style="color:rgb(24, 54, 145)">"</span>first<span style="color:rgb(24, 54, 145)">"</span></span><span style="color:rgb(167, 29, 93)">.</span>equals(tabName)) { <span style="color:rgb(150, 152, 150)"><span style="color:rgb(150, 152, 150)">//</span> Create and return the tab View for "first".</span> } <span style="color:rgb(167, 29, 93)">else</span> <span style="color:rgb(167, 29, 93)">if</span> (<span style="color:rgb(24, 54, 145)"><span style="color:rgb(24, 54, 145)">"</span>second<span style="color:rgb(24, 54, 145)">"</span></span><span style="color:rgb(167, 29, 93)">.</span>equals(tabName)) { <span style="color:rgb(150, 152, 150)"><span style="color:rgb(150, 152, 150)">//</span> Create and return the tab View for "second".</span> } <span style="color:rgb(150, 152, 150)"><span style="color:rgb(150, 152, 150)">//</span> etc.</span> } <span style="color:rgb(167, 29, 93)">@Override</span> <span style="color:rgb(167, 29, 93)">public</span> <span style="color:rgb(51, 51, 51)">NavigatorContent</span> <span style="color:rgb(121, 93, 163)">getNavigatorContent</span>(<span style="color:rgb(167, 29, 93)">int</span> <span style="color:rgb(237, 106, 67)">position</span>) { <span style="color:rgb(51, 51, 51)">String</span> tabName <span style="color:rgb(167, 29, 93)">=</span> mTabs<span style="color:rgb(167, 29, 93)">.</span>get(position); <span style="color:rgb(167, 29, 93)">return</span> mContentMap<span style="color:rgb(167, 29, 93)">.</span>get(tabName); } }</code></pre> <h3 style="text-align:start">用HoverMenu直接工作</h3> <p style="text-align:start">如果你想从头开始创建自己的Hover菜单服务，或者如果你想直接试验一个HoverMenu，你可以自己实例化一个。 使用HoverMenuBuilder为您的特定需求配置HoverMenu。</p> <pre> <code class="language-java"><span style="color:rgb(150, 152, 150)"><span style="color:rgb(150, 152, 150)">//</span> Build a HoverMenu.</span> <span style="color:rgb(51, 51, 51)">HoverMenu</span> hoverMenu <span style="color:rgb(167, 29, 93)">=</span> <span style="color:rgb(167, 29, 93)">new</span> <span style="color:rgb(51, 51, 51)">HoverMenuBuilder</span>(context) .displayWithinWindow() .useNavigator(myNavigator) .startAtLocation(savedLocationMemento) .useAdapter(adapter) .build(); <span style="color:rgb(150, 152, 150)"><span style="color:rgb(150, 152, 150)">//</span> When you're ready for your HoverMenu to appear on screen.</span> hoverMenu<span style="color:rgb(167, 29, 93)">.</span>show(); <span style="color:rgb(150, 152, 150)"><span style="color:rgb(150, 152, 150)">//</span> When you want to remove your HoverMenu from the screen.</span> hoverMenu<span style="color:rgb(167, 29, 93)">.</span>hide(); <span style="color:rgb(150, 152, 150)"><span style="color:rgb(150, 152, 150)">//</span> When you want to force your HoverMenu to expand fullscreen.</span> hoverMenu<span style="color:rgb(167, 29, 93)">.</span>expandMenu(); <span style="color:rgb(150, 152, 150)"><span style="color:rgb(150, 152, 150)">//</span> When you want to force your HoverMenu to collapse to a draggable icon.</span> hoverMenu<span style="color:rgb(167, 29, 93)">.</span>collapseMenu(); <span style="color:rgb(150, 152, 150)"><span style="color:rgb(150, 152, 150)">//</span> When you want to change the tabs and content in your HoverMenu.</span> hoverMenu<span style="color:rgb(167, 29, 93)">.</span>setAdapter(otherAdapter); <span style="color:rgb(150, 152, 150)"><span style="color:rgb(150, 152, 150)">//</span> When you want to save the display state of your HoverMenu.</span> <span style="color:rgb(51, 51, 51)">Parcelable</span> displayState <span style="color:rgb(167, 29, 93)">=</span> hoverMenu<span style="color:rgb(167, 29, 93)">.</span>createDisplayStateMemento(); <span style="color:rgb(150, 152, 150)"><span style="color:rgb(150, 152, 150)">//</span> When you want to be notified when your HoverMenu is added to/removed from the display.</span> hoverMenu<span style="color:rgb(167, 29, 93)">.</span>addOnVisibilityChangeListener(listener); <span style="color:rgb(150, 152, 150)"><span style="color:rgb(150, 152, 150)">//</span> When you want to be notified when your HoverMenu expands or collapses.</span> hoverMenu<span style="color:rgb(167, 29, 93)">.</span>addOnCollapseAndExpandListener(listener);</code></pre> <h2 style="text-align:start">下载</h2> <p style="text-align:start">可通过jCenter获取Hover:</p> <pre> <code class="language-java">compile <span style="color:rgb(24, 54, 145)"><span style="color:rgb(24, 54, 145)">'</span>io.mattcarroll.hover:hover:0.9.6<span style="color:rgb(24, 54, 145)">'</span></span></code></pre> <h2 style="text-align:start">问题</h2> <p style="text-align:start">在当前时间，悬停菜单不能在正常视图层次结构中使用。 它只能在窗口中使用。</p> <h2 style="text-align:start">免责声明</h2> <p style="text-align:start">这不是Google的官方产品。</p> <h2>许可</h2> <pre style="text-align:start"> <code class="language-java">Copyright (C) 2016 Nest Labs Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.</code></pre>