精华内容
下载资源
问答
  • IE Dev Toolbar 中文

    2009-05-06 19:47:20
    微软发布了Internet Explorer Developer Toolbar最新版.该产品让开发人员能够深入探索和理解Web页面,帮助开发者更好地创建Web应用.安装后可以在IE中快速分析网页的软件.该工具条可集成在IE窗口,或以浮动窗口形式存在...
  • 微软IE Developer Toolbar是微软专门为Web开发人员设计的一款免费产品,该产品让开发人员能够深入探索和理解Web页面,帮助开发者更好地创建Web应用.安装后可以在IE中快速分析网页的软件.该工具条可集成在IE窗口,或以...
  • Android7.0中文文档(API)-- Toolbar

    千次阅读 2017-06-15 11:26:49
    Android中文文档 Toolbar

    完整内容,请查看:http://www.zhdoc.net/android/reference/android/widget/Toolbar.html

    Toolbar

    public class Toolbar
    extends ViewGroup

    java.lang.Object
       ↳ android.view.View
         ↳ android.view.ViewGroup
           ↳ android.widget.Toolbar


    A standard toolbar for use within application content.
    一个用于应用程序内容的标准工具栏。

    A Toolbar is a generalization of action bars for use within application layouts. While an action bar is traditionally part of an Activity's opaque window decor controlled by the framework, a Toolbar may be placed at any arbitrary level of nesting within a view hierarchy. An application may choose to designate a Toolbar as the action bar for an Activity using the setActionBar() method.
    Toolbar是action bars的一个范例,它用于应用程序布局内部。虽然操作栏通常是由框架控制的Activity's的不透明窗口的一部分,但是Toolbar可以嵌套放置在视图层次结构中的任意层次中。应用程序可以选择将Toolbar指定为使用setActionBar()方法的Activity的操作栏。

    Toolbar supports a more focused feature set than ActionBar. From start to end, a toolbar may contain a combination of the following optional elements:

    • A navigation button. This may be an Up arrow, navigation menu toggle, close, collapse, done or another glyph of the app's choosing. This button should always be used to access other navigational destinations within the container of the Toolbar and its signified content or otherwise leave the current context signified by the Toolbar. The navigation button is vertically aligned within the Toolbar's minimum height, if set.
    • A branded logo image. This may extend to the height of the bar and can be arbitrarily wide.
    • A title and subtitle. The title should be a signpost for the Toolbar's current position in the navigation hierarchy and the content contained there. The subtitle, if present should indicate any extended information about the current content. If an app uses a logo image it should strongly consider omitting a title and subtitle.
    • One or more custom views. The application may add arbitrary child views to the Toolbar. They will appear at this position within the layout. If a child view's Toolbar.LayoutParams indicates a Gravity value of CENTER_HORIZONTAL the view will attempt to center within the available space remaining in the Toolbar after all other elements have been measured.
    • An action menu. The menu of actions will pin to the end of the Toolbar offering a few frequent, important or typical actions along with an optional overflow menu for additional actions. Action buttons are vertically aligned within the Toolbar's minimum height, if set.

    Toolbar比ActionBar支持更多的主要功能。从开始到结束,Toolbar可能包含以下可选元素的组合:
    • 一个导航按钮。这个按钮可以是一个向上的箭头,导航菜单切换,关闭,折叠收起,完成或者应用程序选择的其他符号。这个按钮应该总是用来访问在容器中的Toolbar和内容符号的其他导航目标,否则就会离开Toolbar所显示的当前上下文。如果设置,导航按钮与ToolBar的minimum height垂直对齐。
    • 应用程序Logo图像。它可以扩展到Toolbar的高度,并且可以任意宽。
    • 一个标题和副标题。标题是Toolbar在导航层次结构中的当前位置和所包含的内容的一个说明。如果有副标题,则这个副标题应该表明关于当前内容的任何扩展信息。如果应用程序使用了Logo图像,应该考虑省略标题和副标题。
    • 一个或多个自定义视图。应用程序可以在Toolbar中添加任意的子视图。它们会出现在布局中的这个位置。如果子视图的Toolbar.LayoutParams设置了GravityCENTER_HORIZONTAL,则将在测量所有其他元素都之后,在Toolbar中剩余的可用空间中视图尝试居中。
    • 一个action menu操作菜单将会在Toolbar的末尾处提供一些常见的、重要的或典型的操作,以及附加操作的可选溢出菜单。如果设置,操作按钮与ToolBar的minimum height垂直对齐。

    In modern Android UIs developers should lean more on a visually distinct color scheme for toolbars than on their application icon. The use of application icon plus title as a standard layout is discouraged on API 21 devices and newer.
    在现代的Android UI中,开发者应该更多地关注工具条Toolbar的视觉色彩方案,而不是他们的应用图标。应用程序图标加上标题作为标准布局,在API 21设备和更新的设备上都是不推荐的。

    展开全文
  • Javascript高级调试工具: IE Developer Toolbar 简体中文汉化版
  • Internet Explorer Developer Toolbar1.00.2188中文破解版
  • ToolBar

    2016-06-05 22:26:23
    我们都知道Marterial Design是Google推出的全新UI设计规范,如果对其不太了解的可以看下:Material design非官方中文指导手册 ,或者我的前面几篇Material Design的译文,相比之前Google在Android H

    转自:http://blog.csdn.net/lmj623565791/article/details/45303349

    前言

    我们都知道Marterial Design是Google推出的全新UI设计规范,如果对其不太了解的可以看下:Material design非官方中文指导手册 ,或者我的前面几篇Material Design的译文,相比之前Google在Android Holo风格上平平淡淡的表现不同,Material Design现在是被Google所比较重视的。在推出这门全新设计语言后,Android上自家的应用很快就使用Material Design全新设计了,如Play商店,Google Map,Google+,比较新的Inbox等;Web上的视觉体验也是很Material的,最有帮助的当属这个了Material Design的官方介绍(自备梯子)了;iOS方面的Google应用也在慢慢推进中。所以作为一个Android开发者怎么能不紧跟Google的步伐呢,下面就来通过Toolbar和Palette这两个在API21后推出的东西,当然Google已经把它们放到到v7库里了,使用Material Design来设计App当然不仅限于这两个方面了,前面的Material Design的译文已经清楚知道怎么去全面设计。除了Toolbar和Palette这篇文章还会介绍在Toolbar下使用Drawer。



    Toolbar

    Toolbar是什么?大概说一下它的官方介绍。Toolbar是应用的内容的标准工具栏,可以说是Actionbar的升级版,两者不是独立关系,要使用Toolbar还是得跟ActionBar扯上关系的。相比Actionbar Toolbar最明显的一点就是变得很自由,可随处放置,因为它是作为一个ViewGroup来定义使用的,所以单纯使用ActionBar已经稍显过时了,它的一些方法已被标注过时。

    那么它怎么使用呢,首先我们一样要用到v7的支持包,然后定义程序的主题样式,在style里得先把Actionbar去掉,有点像欲想练功,必先自宫的感觉啊。如下:

    /res/values/styles.xml

    [html] view plaincopy
    1. <resources xmlns:android="http://schemas.android.com/apk/res/android">  
    2.   
    3.     <style name="AppBaseTheme" parent="Theme.AppCompat.Light.NoActionBar">  
    4.   
    5.         <!-- toolbar(actionbar)颜色 -->  
    6.         <item name="colorPrimary">#4876FF</item>  
    7.         <!-- 状态栏颜色 -->  
    8.         <item name="colorPrimaryDark">#3A5FCD</item>  
    9.         <!-- 窗口的背景颜色 -->  
    10.         <item name="android:windowBackground">@android:color/white</item>  
    11.         <!-- SearchView -->  
    12.         <item name="searchViewStyle">@style/MySearchViewStyle</item>  
    13.     </style>  
    14.   
    15.     <style name="AppTheme" parent="@style/AppBaseTheme"></style>  
    16.   
    17.     <style name="MySearchViewStyle" parent="Widget.AppCompat.SearchView">  
    18.         <!--  
    19.     Background for the search query section (e.g. EditText)  
    20.     <item name="queryBackground">...</item>  
    21.     Background for the actions section (e.g. voice, submit)  
    22.     <item name="submitBackground">...</item>  
    23.     Close button icon  
    24.     <item name="closeIcon">...</item>  
    25.     Search button icon  
    26.     <item name="searchIcon">...</item>  
    27.     Go/commit button icon  
    28.     <item name="goIcon">...</item>  
    29.     Voice search button icon  
    30.     <item name="voiceIcon">...</item>  
    31.     Commit icon shown in the query suggestion row  
    32.     <item name="commitIcon">...</item>  
    33.     Layout for query suggestion rows  
    34.     <item name="suggestionRowLayout">...</item>  
    35.         -->  
    36.   
    37.     </style>  
    38.   
    39. </resources>  
    [html] view plain copy
    1. <resources xmlns:android="http://schemas.android.com/apk/res/android">  
    2.   
    3.     <style name="AppBaseTheme" parent="Theme.AppCompat.Light.NoActionBar">  
    4.   
    5.         <!-- toolbar(actionbar)颜色 -->  
    6.         <item name="colorPrimary">#4876FF</item>  
    7.         <!-- 状态栏颜色 -->  
    8.         <item name="colorPrimaryDark">#3A5FCD</item>  
    9.         <!-- 窗口的背景颜色 -->  
    10.         <item name="android:windowBackground">@android:color/white</item>  
    11.         <!-- SearchView -->  
    12.         <item name="searchViewStyle">@style/MySearchViewStyle</item>  
    13.     </style>  
    14.   
    15.     <style name="AppTheme" parent="@style/AppBaseTheme"></style>  
    16.   
    17.     <style name="MySearchViewStyle" parent="Widget.AppCompat.SearchView">  
    18.         <!--  
    19.     Background for the search query section (e.g. EditText)  
    20.     <item name="queryBackground">...</item>  
    21.     Background for the actions section (e.g. voice, submit)  
    22.     <item name="submitBackground">...</item>  
    23.     Close button icon  
    24.     <item name="closeIcon">...</item>  
    25.     Search button icon  
    26.     <item name="searchIcon">...</item>  
    27.     Go/commit button icon  
    28.     <item name="goIcon">...</item>  
    29.     Voice search button icon  
    30.     <item name="voiceIcon">...</item>  
    31.     Commit icon shown in the query suggestion row  
    32.     <item name="commitIcon">...</item>  
    33.     Layout for query suggestion rows  
    34.     <item name="suggestionRowLayout">...</item>  
    35.         -->  
    36.   
    37.     </style>  
    38.   
    39. </resources>  
    去除Actionbar最简单的方法就是直接继承NoActionBar的主题了。颜色的属性说明,还是下面这张图最清楚了:



    另外,SearchView在AppCompat中提供了更强的可定制性和更多的样式可供设置,不过一般我们用默认的就行。

    还有我们可以在values-v21给API21的系统版本设置默认的底部导航栏默认的颜色:

    /res/values-v21/styles.xml

    [html] view plaincopy
    1. <resources xmlns:android="http://schemas.android.com/apk/res/android">  
    2.   
    3.     <style name="AppTheme" parent="@style/AppBaseTheme">  
    4.   
    5.         <!-- 底部导航栏颜色 -->  
    6.         <item name="android:navigationBarColor">#4876FF</item>  
    7.     </style>  
    8.   
    9. </resources>  
    [html] view plain copy
    1. <resources xmlns:android="http://schemas.android.com/apk/res/android">  
    2.   
    3.     <style name="AppTheme" parent="@style/AppBaseTheme">  
    4.   
    5.         <!-- 底部导航栏颜色 -->  
    6.         <item name="android:navigationBarColor">#4876FF</item>  
    7.     </style>  
    8.   
    9. </resources>  
    设置好主题的下一步工作:
    在xml的layout中定义一个Toolbar:

    /layout/toolbar.xml

    [html] view plaincopy
    1. <?xml version="1.0" encoding="utf-8"?>  
    2. <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"  
    3.     xmlns:app="http://schemas.android.com/apk/res/com.example.toolbar"  
    4.     android:id="@+id/toolbar"  
    5.     android:layout_width="match_parent"  
    6.     android:layout_height="wrap_content"  
    7.     android:background="?attr/colorPrimary"  
    8.     android:minHeight="?attr/actionBarSize"  
    9.     app:popupTheme="@style/ThemeOverlay.AppCompat.Light"  
    10.     app:theme="@style/ThemeOverlay.AppCompat.ActionBar" >  
    11.   
    12. </android.support.v7.widget.Toolbar>  
    [html] view plain copy
    1. <?xml version="1.0" encoding="utf-8"?>  
    2. <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"  
    3.     xmlns:app="http://schemas.android.com/apk/res/com.example.toolbar"  
    4.     android:id="@+id/toolbar"  
    5.     android:layout_width="match_parent"  
    6.     android:layout_height="wrap_content"  
    7.     android:background="?attr/colorPrimary"  
    8.     android:minHeight="?attr/actionBarSize"  
    9.     app:popupTheme="@style/ThemeOverlay.AppCompat.Light"  
    10.     app:theme="@style/ThemeOverlay.AppCompat.ActionBar" >  
    11.   
    12. </android.support.v7.widget.Toolbar>  
    我们把toolbar作为一个独立的布局xml,方便在其他布局里include进去。可以看到我们在这里是可以设置Toolbar的属性的,初上面的外还有以下的属性,都是见名知意的就不一一说明了。




    然后在activity的布局里把它include进去就行了,当然一般把它放到最上面了,有需要你是可以把它放到中间、底部或其它位置的,可见它的自由度是很高的。在下一步呢就到代码了,在onCreate中:

    [java] view plaincopy
    1. mToolbar = (Toolbar) findViewById(R.id.toolbar);  
    2. // toolbar.setLogo(R.drawable.ic_launcher);   
    3. mToolbar.setTitle("Rocko");// 标题的文字需在setSupportActionBar之前,不然会无效   
    4. // toolbar.setSubtitle("副标题");   
    5. setSupportActionBar(mToolbar);  
    6. /* 这些通过ActionBar来设置也是一样的,注意要在setSupportActionBar(toolbar);之后,不然就报错了 */  
    7. // getSupportActionBar().setTitle("标题");   
    8. // getSupportActionBar().setSubtitle("副标题");   
    9. // getSupportActionBar().setLogo(R.drawable.ic_launcher);   
    10.   
    11. /* 菜单的监听可以在toolbar里设置,也可以像ActionBar那样,通过Activity的onOptionsItemSelected回调方法来处理 */  
    12. mToolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {  
    13.     @Override  
    14.     public boolean onMenuItemClick(MenuItem item) {  
    15.         switch (item.getItemId()) {  
    16.         case R.id.action_settings:  
    17.             Toast.makeText(MainActivity.this"action_settings"0).show();  
    18.             break;  
    19.         case R.id.action_share:  
    20.             Toast.makeText(MainActivity.this"action_share"0).show();  
    21.             break;  
    22.         default:  
    23.             break;  
    24.         }  
    25.         return true;  
    26.     }  
    27. });  
    [java] view plain copy
    1. mToolbar = (Toolbar) findViewById(R.id.toolbar);  
    2. // toolbar.setLogo(R.drawable.ic_launcher);  
    3. mToolbar.setTitle("Rocko");// 标题的文字需在setSupportActionBar之前,不然会无效  
    4. // toolbar.setSubtitle("副标题");  
    5. setSupportActionBar(mToolbar);  
    6. /* 这些通过ActionBar来设置也是一样的,注意要在setSupportActionBar(toolbar);之后,不然就报错了 */  
    7. // getSupportActionBar().setTitle("标题");  
    8. // getSupportActionBar().setSubtitle("副标题");  
    9. // getSupportActionBar().setLogo(R.drawable.ic_launcher);  
    10.   
    11. /* 菜单的监听可以在toolbar里设置,也可以像ActionBar那样,通过Activity的onOptionsItemSelected回调方法来处理 */  
    12. mToolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {  
    13.     @Override  
    14.     public boolean onMenuItemClick(MenuItem item) {  
    15.         switch (item.getItemId()) {  
    16.         case R.id.action_settings:  
    17.             Toast.makeText(MainActivity.this"action_settings"0).show();  
    18.             break;  
    19.         case R.id.action_share:  
    20.             Toast.makeText(MainActivity.this"action_share"0).show();  
    21.             break;  
    22.         default:  
    23.             break;  
    24.         }  
    25.         return true;  
    26.     }  
    27. });  
    上面关键的一点就是setSupportActionBar(mToolbar);把Toolbar当做ActionBar给设置了。menu还是可以像ActionBar一样用和处理的:

    res/menu/main.xml

    [html] view plaincopy
    1. <menu xmlns:android="http://schemas.android.com/apk/res/android"  
    2.     xmlns:app="http://schemas.android.com/apk/res-auto"  
    3.     xmlns:tools="http://schemas.android.com/tools"  
    4.     tools:context=".MainActivity" >  
    5.   
    6.     <item  
    7.         android:id="@+id/ab_search"  
    8.         android:orderInCategory="80"  
    9.         android:title="action_search"  
    10.         app:actionViewClass="android.support.v7.widget.SearchView"  
    11.         app:showAsAction="ifRoom"/>  
    12.     <item  
    13.         android:id="@+id/action_share"  
    14.         android:orderInCategory="90"  
    15.         android:title="action_share"  
    16.         app:actionProviderClass="android.support.v7.widget.ShareActionProvider"  
    17.         app:showAsAction="ifRoom"/>  
    18.     <item  
    19.         android:id="@+id/action_settings"  
    20.         android:orderInCategory="100"  
    21.         android:title="action_settings"  
    22.         app:showAsAction="never"/>  
    23.   
    24. </menu>  
    [html] view plain copy
    1. <menu xmlns:android="http://schemas.android.com/apk/res/android"  
    2.     xmlns:app="http://schemas.android.com/apk/res-auto"  
    3.     xmlns:tools="http://schemas.android.com/tools"  
    4.     tools:context=".MainActivity" >  
    5.   
    6.     <item  
    7.         android:id="@+id/ab_search"  
    8.         android:orderInCategory="80"  
    9.         android:title="action_search"  
    10.         app:actionViewClass="android.support.v7.widget.SearchView"  
    11.         app:showAsAction="ifRoom"/>  
    12.     <item  
    13.         android:id="@+id/action_share"  
    14.         android:orderInCategory="90"  
    15.         android:title="action_share"  
    16.         app:actionProviderClass="android.support.v7.widget.ShareActionProvider"  
    17.         app:showAsAction="ifRoom"/>  
    18.     <item  
    19.         android:id="@+id/action_settings"  
    20.         android:orderInCategory="100"  
    21.         android:title="action_settings"  
    22.         app:showAsAction="never"/>  
    23.   
    24. </menu>  
    这一步时候程序的样子:
       PS.  Genymotion可以用5.0的模拟器了

    可以感觉到这样是不是和ActionBar没什么区别呢。诶,左边的菜单图标怎么出来的呢,其实上面还没处理到,他就是Navigation drawer了,使用新版本的v4、v7库的drawer明显的一点是它带了一个酷酷的交互动画(请看最后的gif图)。那么使用Toolbar之后又怎么去在Toolbar中使用drawer呢。下面当然也是跟着代码来.

    /layout/activity_main.xml

    [html] view plaincopy
    1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    2.     xmlns:tools="http://schemas.android.com/tools"  
    3.     android:layout_width="match_parent"  
    4.     android:layout_height="match_parent"  
    5.     android:orientation="vertical"  
    6.     tools:context="com.example.toolbar.MainActivity" >  
    7.   
    8.     <include layout="@layout/toolbar" />  
    9.   
    10.     <android.support.v4.widget.DrawerLayout  
    11.         android:id="@+id/drawer"  
    12.         android:layout_width="match_parent"  
    13.         android:layout_height="match_parent" >  
    14.   
    15.         <!-- 内容界面 -->  
    16.   
    17.         <LinearLayout  
    18.             android:layout_width="match_parent"  
    19.             android:layout_height="match_parent"  
    20.             android:orientation="vertical" >  
    21.   
    22.             <com.example.toolbar.widget.PagerSlidingTabStrip  
    23.                 android:id="@+id/tabs"  
    24.                 android:layout_width="match_parent"  
    25.                 android:layout_height="48dip" >  
    26.             </com.example.toolbar.widget.PagerSlidingTabStrip>  
    27.   
    28.             <android.support.v4.view.ViewPager  
    29.                 android:id="@+id/pager"  
    30.                 android:layout_width="match_parent"  
    31.                 android:layout_height="match_parent" >  
    32.             </android.support.v4.view.ViewPager>  
    33.         </LinearLayout>  
    34.   
    35.         <!-- 侧滑菜单内容 -->  
    36.   
    37.         <LinearLayout  
    38.             android:id="@+id/drawer_view"  
    39.             android:layout_width="match_parent"  
    40.             android:layout_height="match_parent"  
    41.             android:layout_gravity="start"  
    42.             android:background="@drawable/drawer"  
    43.             android:orientation="vertical"  
    44.             android:padding="8dp" >  
    45.   
    46.             <TextView  
    47.                 android:layout_width="match_parent"  
    48.                 android:layout_height="match_parent" />  
    49.         </LinearLayout>  
    50.     </android.support.v4.widget.DrawerLayout>  
    51.   
    52. </LinearLayout>  
    [html] view plain copy
    1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    2.     xmlns:tools="http://schemas.android.com/tools"  
    3.     android:layout_width="match_parent"  
    4.     android:layout_height="match_parent"  
    5.     android:orientation="vertical"  
    6.     tools:context="com.example.toolbar.MainActivity" >  
    7.   
    8.     <include layout="@layout/toolbar" />  
    9.   
    10.     <android.support.v4.widget.DrawerLayout  
    11.         android:id="@+id/drawer"  
    12.         android:layout_width="match_parent"  
    13.         android:layout_height="match_parent" >  
    14.   
    15.         <!-- 内容界面 -->  
    16.   
    17.         <LinearLayout  
    18.             android:layout_width="match_parent"  
    19.             android:layout_height="match_parent"  
    20.             android:orientation="vertical" >  
    21.   
    22.             <com.example.toolbar.widget.PagerSlidingTabStrip  
    23.                 android:id="@+id/tabs"  
    24.                 android:layout_width="match_parent"  
    25.                 android:layout_height="48dip" >  
    26.             </com.example.toolbar.widget.PagerSlidingTabStrip>  
    27.   
    28.             <android.support.v4.view.ViewPager  
    29.                 android:id="@+id/pager"  
    30.                 android:layout_width="match_parent"  
    31.                 android:layout_height="match_parent" >  
    32.             </android.support.v4.view.ViewPager>  
    33.         </LinearLayout>  
    34.   
    35.         <!-- 侧滑菜单内容 -->  
    36.   
    37.         <LinearLayout  
    38.             android:id="@+id/drawer_view"  
    39.             android:layout_width="match_parent"  
    40.             android:layout_height="match_parent"  
    41.             android:layout_gravity="start"  
    42.             android:background="@drawable/drawer"  
    43.             android:orientation="vertical"  
    44.             android:padding="8dp" >  
    45.   
    46.             <TextView  
    47.                 android:layout_width="match_parent"  
    48.                 android:layout_height="match_parent" />  
    49.         </LinearLayout>  
    50.     </android.support.v4.widget.DrawerLayout>  
    51.   
    52. </LinearLayout>  
    Pager的东西可以先忽略,后面会说到。侧滑菜单的内容为简单起见直接先用图片来演示了。可以看到布局的设置大同小异,不同点在代码中:

    [java] view plaincopy
    1. getSupportActionBar().setDisplayHomeAsUpEnabled(true);  
    2. mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer);  
    3. mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, mToolbar, R.string.drawer_open,  
    4.         R.string.drawer_close);  
    5. mDrawerToggle.syncState();  
    6. mDrawerLayout.setDrawerListener(mDrawerToggle);  
    [java] view plain copy
    1. getSupportActionBar().setDisplayHomeAsUpEnabled(true);  
    2. mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer);  
    3. mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, mToolbar, R.string.drawer_open,  
    4.         R.string.drawer_close);  
    5. mDrawerToggle.syncState();  
    6. mDrawerLayout.setDrawerListener(mDrawerToggle);  
    先把图标设置显示出来,然后把ActionBarDrawerToggle作为DrawerLayout的监听器设置进去,还是比较简单的,效果:

    要是需要把drawer覆盖toolbar怎么办呢?需要稍微调整一下界面的布局位置就行了,效果就不贴上来了(脑补,或者改下源码的setContentView运行):

    [html] view plaincopy
    1. <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    2.     xmlns:tools="http://schemas.android.com/tools"  
    3.     android:id="@+id/drawer"  
    4.     android:layout_width="match_parent"  
    5.     android:layout_height="match_parent"  
    6.     android:fitsSystemWindows="true" >  
    7.   
    8.     <LinearLayout  
    9.         android:layout_width="match_parent"  
    10.         android:layout_height="match_parent"  
    11.         android:orientation="vertical"  
    12.         tools:context="com.example.toolbar.MainActivity" >  
    13.   
    14.         <include layout="@layout/toolbar" />  
    15.         <!-- 内容界面 -->  
    16.   
    17.         <LinearLayout  
    18.             android:layout_width="match_parent"  
    19.             android:layout_height="match_parent"  
    20.             android:background="@drawable/content"  
    21.             android:orientation="vertical" >  
    22.   
    23.             <com.example.toolbar.widget.PagerSlidingTabStrip  
    24.                 android:id="@+id/tabs"  
    25.                 android:layout_width="match_parent"  
    26.                 android:layout_height="48dip"  
    27.                 android:visibility="invisible" >  
    28.             </com.example.toolbar.widget.PagerSlidingTabStrip>  
    29.   
    30.             <android.support.v4.view.ViewPager  
    31.                 android:id="@+id/pager"  
    32.                 android:layout_width="match_parent"  
    33.                 android:layout_height="match_parent"  
    34.                 android:visibility="invisible" >  
    35.             </android.support.v4.view.ViewPager>  
    36.         </LinearLayout>  
    37.     </LinearLayout>  
    38.     <!-- 侧滑菜单内容 -->  
    39.   
    40.     <LinearLayout  
    41.         android:id="@+id/drawer_view"  
    42.         android:layout_width="match_parent"  
    43.         android:layout_height="match_parent"  
    44.         android:layout_gravity="start"  
    45.         android:background="@drawable/drawer"  
    46.         android:orientation="vertical"  
    47.         android:clickable="true"  
    48.         android:padding="8dp" >  
    49.   
    50.         <TextView  
    51.             android:layout_width="match_parent"  
    52.             android:layout_height="match_parent" />  
    53.     </LinearLayout>  
    54.   
    55. </android.support.v4.widget.DrawerLayout>  
    [html] view plain copy
     在CODE上查看代码片派生到我的代码片
    1. <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    2.     xmlns:tools="http://schemas.android.com/tools"  
    3.     android:id="@+id/drawer"  
    4.     android:layout_width="match_parent"  
    5.     android:layout_height="match_parent"  
    6.     android:fitsSystemWindows="true" >  
    7.   
    8.     <LinearLayout  
    9.         android:layout_width="match_parent"  
    10.         android:layout_height="match_parent"  
    11.         android:orientation="vertical"  
    12.         tools:context="com.example.toolbar.MainActivity" >  
    13.   
    14.         <include layout="@layout/toolbar" />  
    15.         <!-- 内容界面 -->  
    16.   
    17.         <LinearLayout  
    18.             android:layout_width="match_parent"  
    19.             android:layout_height="match_parent"  
    20.             android:background="@drawable/content"  
    21.             android:orientation="vertical" >  
    22.   
    23.             <com.example.toolbar.widget.PagerSlidingTabStrip  
    24.                 android:id="@+id/tabs"  
    25.                 android:layout_width="match_parent"  
    26.                 android:layout_height="48dip"  
    27.                 android:visibility="invisible" >  
    28.             </com.example.toolbar.widget.PagerSlidingTabStrip>  
    29.   
    30.             <android.support.v4.view.ViewPager  
    31.                 android:id="@+id/pager"  
    32.                 android:layout_width="match_parent"  
    33.                 android:layout_height="match_parent"  
    34.                 android:visibility="invisible" >  
    35.             </android.support.v4.view.ViewPager>  
    36.         </LinearLayout>  
    37.     </LinearLayout>  
    38.     <!-- 侧滑菜单内容 -->  
    39.   
    40.     <LinearLayout  
    41.         android:id="@+id/drawer_view"  
    42.         android:layout_width="match_parent"  
    43.         android:layout_height="match_parent"  
    44.         android:layout_gravity="start"  
    45.         android:background="@drawable/drawer"  
    46.         android:orientation="vertical"  
    47.         android:clickable="true"  
    48.         android:padding="8dp" >  
    49.   
    50.         <TextView  
    51.             android:layout_width="match_parent"  
    52.             android:layout_height="match_parent" />  
    53.     </LinearLayout>  
    54.   
    55. </android.support.v4.widget.DrawerLayout>  
    做这里时发现拉出菜单后还是可以点击Toggle按钮的,解决方法时把侧滑的布局设置为clickable="true"。关于侧滑菜单需不需要的覆盖Toolbar的问题好像从Google提供的例子来看两者都有。我想既然它做出这个Toggle按钮的动画来的话如果覆盖了不就没有意义了?或者还有其它考虑?暂时我们看着Google Play来就行,新版Play的是没有覆盖上去的。




    Palette

    Palette之前先说下前面提到的Pager。ViewPager是什么大家应该都是知道的了,一般ViewPager、xxxTabStrip、Fragment三个好基友是一起出现的。这里的xxxTabStrip是使用Github上的PagerSlidingTabStrip。当我们的Pager切换时伴随着Fragment的变化,而Fragment里的内容一般是不同的,所以每个Fragment里的一般视觉效果也是不同的,所以我们可以用Palette来去提取Fragment中的主色调,那Fragment中的拿什么给Palatte去提取颜色呢,这就需要自己根据自己的情况来决定的。比如我这个demo里,Fragment就一个TextView和给Fragment设了背景,那么我就可以把背景的图片给Palette去提取颜色了。

    说了上面一段你也基本知道Palatte是用来干么的了,它就是用来从Bitmap中提取颜色的,然后把颜色设置给title啊content啊等等。

    先贴上Pager部分的代码:

    [java] view plaincopy
    1. private void initViews() {  
    2.     mToolbar = (Toolbar) findViewById(R.id.toolbar);  
    3.     // toolbar.setLogo(R.drawable.ic_launcher);   
    4.     mToolbar.setTitle("Rocko");// 标题的文字需在setSupportActionBar之前,不然会无效   
    5.     // toolbar.setSubtitle("副标题");   
    6.     setSupportActionBar(mToolbar);  
    7.     /* 这些通过ActionBar来设置也是一样的,注意要在setSupportActionBar(toolbar);之后,不然就报错了 */  
    8.     // getSupportActionBar().setTitle("标题");   
    9.     // getSupportActionBar().setSubtitle("副标题");   
    10.     // getSupportActionBar().setLogo(R.drawable.ic_launcher);   
    11.       
    12.     /* 菜单的监听可以在toolbar里设置,也可以像ActionBar那样,通过下面的两个回调方法来处理 */  
    13.     mToolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {  
    14.         @Override  
    15.         public boolean onMenuItemClick(MenuItem item) {  
    16.             switch (item.getItemId()) {  
    17.             case R.id.action_settings:  
    18.                 Toast.makeText(MainActivity.this"action_settings"0).show();  
    19.                 break;  
    20.             case R.id.action_share:  
    21.                 Toast.makeText(MainActivity.this"action_share"0).show();  
    22.                 break;  
    23.             default:  
    24.                 break;  
    25.             }  
    26.             return true;  
    27.         }  
    28.     });  
    29.     getSupportActionBar().setDisplayHomeAsUpEnabled(true);  
    30.     /* findView */  
    31.     mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer);  
    32.     mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, mToolbar, R.string.drawer_open,  
    33.             R.string.drawer_close);  
    34.     mDrawerToggle.syncState();  
    35.     mDrawerLayout.setDrawerListener(mDrawerToggle);  
    36.   
    37.     mPagerSlidingTabStrip = (PagerSlidingTabStrip) findViewById(R.id.tabs);  
    38.     mViewPager = (ViewPager) findViewById(R.id.pager);  
    39.     mViewPager.setAdapter(new MyPagerAdapter(getSupportFragmentManager()));  
    40.     mPagerSlidingTabStrip.setViewPager(mViewPager);  
    41.     mPagerSlidingTabStrip.setOnPageChangeListener(new OnPageChangeListener() {  
    42.   
    43.         @Override  
    44.         public void onPageSelected(int arg0) {  
    45.             colorChange(arg0);  
    46.         }  
    47.   
    48.         @Override  
    49.         public void onPageScrolled(int arg0, float arg1, int arg2) {  
    50.         }  
    51.   
    52.         @Override  
    53.         public void onPageScrollStateChanged(int arg0) {  
    54.         }  
    55.     });  
    56.     initTabsValue();  
    57. }  
    58.   
    59. /** 
    60.  * mPagerSlidingTabStrip默认值配置 
    61.  *  
    62.  */  
    63. private void initTabsValue() {  
    64.     // 底部游标颜色   
    65.     mPagerSlidingTabStrip.setIndicatorColor(Color.BLUE);  
    66.     // tab的分割线颜色   
    67.     mPagerSlidingTabStrip.setDividerColor(Color.TRANSPARENT);  
    68.     // tab背景   
    69.     mPagerSlidingTabStrip.setBackgroundColor(Color.parseColor("#4876FF"));  
    70.     // tab底线高度   
    71.     mPagerSlidingTabStrip.setUnderlineHeight((int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,  
    72.             1, getResources().getDisplayMetrics()));  
    73.     // 游标高度   
    74.     mPagerSlidingTabStrip.setIndicatorHeight((int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,  
    75.             5, getResources().getDisplayMetrics()));  
    76.     // 选中的文字颜色   
    77.     mPagerSlidingTabStrip.setSelectedTextColor(Color.WHITE);  
    78.     // 正常文字颜色   
    79.     mPagerSlidingTabStrip.setTextColor(Color.BLACK);  
    80. }  
    [java] view plain copy
     在CODE上查看代码片派生到我的代码片
    1. private void initViews() {  
    2.     mToolbar = (Toolbar) findViewById(R.id.toolbar);  
    3.     // toolbar.setLogo(R.drawable.ic_launcher);  
    4.     mToolbar.setTitle("Rocko");// 标题的文字需在setSupportActionBar之前,不然会无效  
    5.     // toolbar.setSubtitle("副标题");  
    6.     setSupportActionBar(mToolbar);  
    7.     /* 这些通过ActionBar来设置也是一样的,注意要在setSupportActionBar(toolbar);之后,不然就报错了 */  
    8.     // getSupportActionBar().setTitle("标题");  
    9.     // getSupportActionBar().setSubtitle("副标题");  
    10.     // getSupportActionBar().setLogo(R.drawable.ic_launcher);  
    11.       
    12.     /* 菜单的监听可以在toolbar里设置,也可以像ActionBar那样,通过下面的两个回调方法来处理 */  
    13.     mToolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {  
    14.         @Override  
    15.         public boolean onMenuItemClick(MenuItem item) {  
    16.             switch (item.getItemId()) {  
    17.             case R.id.action_settings:  
    18.                 Toast.makeText(MainActivity.this"action_settings"0).show();  
    19.                 break;  
    20.             case R.id.action_share:  
    21.                 Toast.makeText(MainActivity.this"action_share"0).show();  
    22.                 break;  
    23.             default:  
    24.                 break;  
    25.             }  
    26.             return true;  
    27.         }  
    28.     });  
    29.     getSupportActionBar().setDisplayHomeAsUpEnabled(true);  
    30.     /* findView */  
    31.     mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer);  
    32.     mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, mToolbar, R.string.drawer_open,  
    33.             R.string.drawer_close);  
    34.     mDrawerToggle.syncState();  
    35.     mDrawerLayout.setDrawerListener(mDrawerToggle);  
    36.   
    37.     mPagerSlidingTabStrip = (PagerSlidingTabStrip) findViewById(R.id.tabs);  
    38.     mViewPager = (ViewPager) findViewById(R.id.pager);  
    39.     mViewPager.setAdapter(new MyPagerAdapter(getSupportFragmentManager()));  
    40.     mPagerSlidingTabStrip.setViewPager(mViewPager);  
    41.     mPagerSlidingTabStrip.setOnPageChangeListener(new OnPageChangeListener() {  
    42.   
    43.         @Override  
    44.         public void onPageSelected(int arg0) {  
    45.             colorChange(arg0);  
    46.         }  
    47.   
    48.         @Override  
    49.         public void onPageScrolled(int arg0, float arg1, int arg2) {  
    50.         }  
    51.   
    52.         @Override  
    53.         public void onPageScrollStateChanged(int arg0) {  
    54.         }  
    55.     });  
    56.     initTabsValue();  
    57. }  
    58.   
    59. /** 
    60.  * mPagerSlidingTabStrip默认值配置 
    61.  *  
    62.  */  
    63. private void initTabsValue() {  
    64.     // 底部游标颜色  
    65.     mPagerSlidingTabStrip.setIndicatorColor(Color.BLUE);  
    66.     // tab的分割线颜色  
    67.     mPagerSlidingTabStrip.setDividerColor(Color.TRANSPARENT);  
    68.     // tab背景  
    69.     mPagerSlidingTabStrip.setBackgroundColor(Color.parseColor("#4876FF"));  
    70.     // tab底线高度  
    71.     mPagerSlidingTabStrip.setUnderlineHeight((int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,  
    72.             1, getResources().getDisplayMetrics()));  
    73.     // 游标高度  
    74.     mPagerSlidingTabStrip.setIndicatorHeight((int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,  
    75.             5, getResources().getDisplayMetrics()));  
    76.     // 选中的文字颜色  
    77.     mPagerSlidingTabStrip.setSelectedTextColor(Color.WHITE);  
    78.     // 正常文字颜色  
    79.     mPagerSlidingTabStrip.setTextColor(Color.BLACK);  
    80. }  

    这些都是一些基本设置,然后Palette在哪里开始工作呢,就是在tab切换时了。在onPagerSelect方法里即上面代码的45行。他是这么干的:

    [java] view plaincopy
    1. /** 
    2.  * 界面颜色的更改 
    3.  */  
    4. @SuppressLint("NewApi")  
    5. private void colorChange(int position) {  
    6.     // 用来提取颜色的Bitmap   
    7.     Bitmap bitmap = BitmapFactory.decodeResource(getResources(),  
    8.             SuperAwesomeCardFragment.getBackgroundBitmapPosition(position));  
    9.     // Palette的部分   
    10.     Palette.generateAsync(bitmap, new Palette.PaletteAsyncListener() {  
    11.         /** 
    12.          * 提取完之后的回调方法 
    13.          */  
    14.         @Override  
    15.         public void onGenerated(Palette palette) {  
    16.             Palette.Swatch vibrant = palette.getVibrantSwatch();  
    17.             /* 界面颜色UI统一性处理,看起来更Material一些 */  
    18.             mPagerSlidingTabStrip.setBackgroundColor(vibrant.getRgb());  
    19.             mPagerSlidingTabStrip.setTextColor(vibrant.getTitleTextColor());  
    20.             // 其中状态栏、游标、底部导航栏的颜色需要加深一下,也可以不加,具体情况在代码之后说明   
    21.             mPagerSlidingTabStrip.setIndicatorColor(colorBurn(vibrant.getRgb()));  
    22.   
    23.             mToolbar.setBackgroundColor(vibrant.getRgb());  
    24.             if (android.os.Build.VERSION.SDK_INT >= 21) {  
    25.                 Window window = getWindow();  
    26.                 // 很明显,这两货是新API才有的。   
    27.                 window.setStatusBarColor(colorBurn(vibrant.getRgb()));  
    28.                 window.setNavigationBarColor(colorBurn(vibrant.getRgb()));  
    29.             }  
    30.         }  
    31.     });  
    32. }  
    33.   
    34. /** 
    35.  * 颜色加深处理 
    36.  *  
    37.  * @param RGBValues 
    38.  *            RGB的值,由alpha(透明度)、red(红)、green(绿)、blue(蓝)构成, 
    39.  *            Android中我们一般使用它的16进制, 
    40.  *            例如:"#FFAABBCC",最左边到最右每两个字母就是代表alpha(透明度)、 
    41.  *            red(红)、green(绿)、blue(蓝)。每种颜色值占一个字节(8位),值域0~255 
    42.  *            所以下面使用移位的方法可以得到每种颜色的值,然后每种颜色值减小一下,在合成RGB颜色,颜色就会看起来深一些了 
    43.  * @return 
    44.  */  
    45. private int colorBurn(int RGBValues) {  
    46.     int alpha = RGBValues >> 24;  
    47.     int red = RGBValues >> 16 & 0xFF;  
    48.     int green = RGBValues >> 8 & 0xFF;  
    49.     int blue = RGBValues & 0xFF;  
    50.     red = (int) Math.floor(red * (1 - 0.1));  
    51.     green = (int) Math.floor(green * (1 - 0.1));  
    52.     blue = (int) Math.floor(blue * (1 - 0.1));  
    53.     return Color.rgb(red, green, blue);  
    54. }  
    [java] view plain copy
     在CODE上查看代码片派生到我的代码片
    1. /** 
    2.  * 界面颜色的更改 
    3.  */  
    4. @SuppressLint("NewApi")  
    5. private void colorChange(int position) {  
    6.     // 用来提取颜色的Bitmap  
    7.     Bitmap bitmap = BitmapFactory.decodeResource(getResources(),  
    8.             SuperAwesomeCardFragment.getBackgroundBitmapPosition(position));  
    9.     // Palette的部分  
    10.     Palette.generateAsync(bitmap, new Palette.PaletteAsyncListener() {  
    11.         /** 
    12.          * 提取完之后的回调方法 
    13.          */  
    14.         @Override  
    15.         public void onGenerated(Palette palette) {  
    16.             Palette.Swatch vibrant = palette.getVibrantSwatch();  
    17.             /* 界面颜色UI统一性处理,看起来更Material一些 */  
    18.             mPagerSlidingTabStrip.setBackgroundColor(vibrant.getRgb());  
    19.             mPagerSlidingTabStrip.setTextColor(vibrant.getTitleTextColor());  
    20.             // 其中状态栏、游标、底部导航栏的颜色需要加深一下,也可以不加,具体情况在代码之后说明  
    21.             mPagerSlidingTabStrip.setIndicatorColor(colorBurn(vibrant.getRgb()));  
    22.   
    23.             mToolbar.setBackgroundColor(vibrant.getRgb());  
    24.             if (android.os.Build.VERSION.SDK_INT >= 21) {  
    25.                 Window window = getWindow();  
    26.                 // 很明显,这两货是新API才有的。  
    27.                 window.setStatusBarColor(colorBurn(vibrant.getRgb()));  
    28.                 window.setNavigationBarColor(colorBurn(vibrant.getRgb()));  
    29.             }  
    30.         }  
    31.     });  
    32. }  
    33.   
    34. /** 
    35.  * 颜色加深处理 
    36.  *  
    37.  * @param RGBValues 
    38.  *            RGB的值,由alpha(透明度)、red(红)、green(绿)、blue(蓝)构成, 
    39.  *            Android中我们一般使用它的16进制, 
    40.  *            例如:"#FFAABBCC",最左边到最右每两个字母就是代表alpha(透明度)、 
    41.  *            red(红)、green(绿)、blue(蓝)。每种颜色值占一个字节(8位),值域0~255 
    42.  *            所以下面使用移位的方法可以得到每种颜色的值,然后每种颜色值减小一下,在合成RGB颜色,颜色就会看起来深一些了 
    43.  * @return 
    44.  */  
    45. private int colorBurn(int RGBValues) {  
    46.     int alpha = RGBValues >> 24;  
    47.     int red = RGBValues >> 16 & 0xFF;  
    48.     int green = RGBValues >> 8 & 0xFF;  
    49.     int blue = RGBValues & 0xFF;  
    50.     red = (int) Math.floor(red * (1 - 0.1));  
    51.     green = (int) Math.floor(green * (1 - 0.1));  
    52.     blue = (int) Math.floor(blue * (1 - 0.1));  
    53.     return Color.rgb(red, green, blue);  
    54. }  
    Palette需要你自己写的东西还是比较少的,你只需在它提取完成的回调方法了获取各种提取到的颜色设置给相应的view就行了。图片的颜色比较鲜艳突出,方便直观的了解。提取到的颜色怎么很好的搭配,如果你有UI设计师的话就最好了,像我这种的话看着它顺眼就行。上面的颜色处理:像如果有把Toolbar当成了ActionBar来使用而且有一些明显的ActionBar即视感的ActionButton的话,我觉得状态栏的颜色应该比ToolBar颜色深一点比较好,看起来有一点界限分隔。在Android中RGB颜色Color加深减淡的处理:可以看到我采用的加深颜色的方法就是先得到RGB颜色的redgreenblue的值,然后把每个颜色的值减小,floor函数是向下取整的功能,如果看不懂的可以先看下RGB颜色的构成再看就会很好理解了。设置成一样时的情况更多的是没有ActionButton这些明显的东西或没有三个点的更多ActionButton时,看起来更平面一点,更浑然一体。

    说了这么多,Palette呢就是一把利器,方便我们对UI界面色调的处理,所以可以说他是Material Design必不可少的一部分。




    END
    demo效果:

                  


    展开全文
  • 工具栏 Toolbar 工具栏(Toolbars)常用来将一些构件分组,这样能够简化定制它们的外观和布局。典型情况下工具栏由带图标和标签以及工具提示的按钮组成,不过,其它构件也可以放在工具栏里面。最后,各工具栏组件...

    工具栏 Toolbar

    工具栏(Toolbars)常用来将一些构件分组,这样能够简化定制它们的外观和布局。典型情况下工具栏由带图标和标签以及工具提示的按钮组成,不过,其它构件也可以放在工具栏里面。最后,各工具栏组件可以水平或垂直排列,还可以显示图标或标签,或者两者都显示。

    用下面的函数创建一个工具栏(可能有些人已经猜到了):

    GtkWidget *gtk_toolbar_new( void );

    创 建工具栏以后,可以向其中追加、前插和插入工具栏项(这里意指简单文本字符串)或元素(这里意指任何构件类型)。要想描述一个工具栏上的对象,需要一个标 签文本、一个工具提示文本、一个私有工具提示文本、一个图标和一个回调函数。例如,要前插或追加一个按钮,应该使用下面的函数:

    GtkWidget *gtk_toolbar_append_item( GtkToolbar    *toolbar,
    const char *text,
    const char *tooltip_text,
    const char *tooltip_private_text,
    GtkWidget *icon,
    GtkSignalFunc callback,
    gpointer user_data );

    GtkWidget *gtk_toolbar_prepend_item( GtkToolbar *toolbar,
    const char *text,
    const char *tooltip_text,
    const char *tooltip_private_text,
    GtkWidget *icon,
    GtkSignalFunc callback,
    gpointer user_data );

    如果要使用 gtk_toolbar_insert_item(),除上面函数中要指定的参数以外,还要指定插入对象的位置,形式如下:

    GtkWidget *gtk_toolbar_insert_item( GtkToolbar    *toolbar,
    const char *text,
    const char *tooltip_text,
    const char *tooltip_private_text,
    GtkWidget *icon,
    GtkSignalFunc callback,
    gpointer user_data,
    gint position );

    要简单地在工具栏项之间添加空白区域,可以使用下面的函数:

    void gtk_toolbar_append_space( GtkToolbar *toolbar );

    void gtk_toolbar_prepend_space( GtkToolbar *toolbar );

    void gtk_toolbar_insert_space( GtkToolbar *toolbar,
    gint position );

    如果需要,工具栏的放置方向和它的式样可以在运行时用下面的函数设置:

    void gtk_toolbar_set_orientation( GtkToolbar     *toolbar,
    GtkOrientation orientation );

    void gtk_toolbar_set_style( GtkToolbar *toolbar,
    GtkToolbarStyle style );

    void gtk_toolbar_set_tooltips( GtkToolbar *toolbar,
    gint enable );

    上面的orientation 参数取GTK_ORIENTATION_HORIZONTALGTK_ORIENTATION_VERTICALstyle 参数用于设置工具栏项的外观,可以取GTK_TOOLBAR_ICONSGTK_TOOLBAR_TEXTGTK_TOOLBAR_BOTH

    要想了解工具栏还能做什么,看一看下面的程序(在代码之间我们插入了一些解释):

    #include <gtk/gtk.h>

    /* 这个函数连接到Close按钮或者从窗口管理器关闭窗口的事件上 */
    gint delete_event (GtkWidget *widget, GdkEvent *event, gpointer data)
    {
    gtk_main_quit ();
    return FALSE;
    }

    上面的代码和其它的 GTK 应用程序差别不大,有一点不同的是:我们包含了一个漂亮的 XPM 图片,用作所有按钮的图标。

    GtkWidget* close_button; /* 这个按钮将引发一个信号以
    * 关闭应用程序 */
    GtkWidget* tooltips_button; /* 启用/禁用工具提示 */
    GtkWidget* text_button,
    * icon_button,
    * both_button; /* 切换工具栏风格的单选按钮 */
    GtkWidget* entry; /* 一个文本输入构件,用于演示任何构件都可以组装到
    * 工具栏里 */

    事实上,不是上面所有的构件都是必须的,我把它们放在一起,是为了让事情更清晰。

    /* 很简单...当按钮进行状态切换时,我们检查哪一个按钮是活动的,依此设置工具栏的式样
    * 注意,工具栏是作为用户数据传递到回调函数的! */
    void radio_event (GtkWidget *widget, gpointer data)
    {
    if (GTK_TOGGLE_BUTTON (text_button)->active)
    gtk_toolbar_set_style (GTK_TOOLBAR (data), GTK_TOOLBAR_TEXT);
    else if (GTK_TOGGLE_BUTTON (icon_button)->active)
    gtk_toolbar_set_style (GTK_TOOLBAR (data), GTK_TOOLBAR_ICONS);
    else if (GTK_TOGGLE_BUTTON (both_button)->active)
    gtk_toolbar_set_style (GTK_TOOLBAR (data), GTK_TOOLBAR_BOTH);
    }

    /* 更简单,检查给定开关按钮的状态,依此启用或禁用工具提示 */
    void toggle_event (GtkWidget *widget, gpointer data)
    {
    gtk_toolbar_set_tooltips (GTK_TOOLBAR (data),
    GTK_TOGGLE_BUTTON (widget)->active );
    }

    上面只是当工具栏上的一个按钮被按下时要调用的两个回调函数。你应该已经熟悉了这些东西,如果你已经使用过开关按钮(以及单选按钮)。

    int main (int argc, char *argv[])
    {
    /* 下面是主窗口(一个对话框)和一个把柄盒(handlebox) */
    GtkWidget* dialog;
    GtkWidget* handlebox;

    /* 好了,我们需要一个工具栏,一个带掩码(mask)的图标(所有的按钮共用一个掩码)以及
    * 一个放图标的图标构件(但我们会为每个按钮创建一个分割构件) */
    GtkWidget * toolbar;
    GtkWidget * iconw;

    /* 这个在所有的 GTK 程序中都被调用。 */
    gtk_init (&argc, &argv);

    /* 用给定的标题和尺寸创建一个新窗口 */
    dialog = gtk_dialog_new ();
    gtk_window_set_title (GTK_WINDOW (dialog), "GTKToolbar Tutorial");
    gtk_widget_set_size_request (GTK_WIDGET (dialog), 600, 300);
    GTK_WINDOW (dialog)->allow_shrink = TRUE;

    /* 在关闭窗口时退出 */
    g_signal_connect (G_OBJECT (dialog), "delete_event",
    G_CALLBACK (delete_event), NULL);

    /* 需要实例化窗口,因为我们要在它的内容中为工具栏设置图片 */
    gtk_widget_realize (dialog);

    /* 我们将工具栏放在一个手柄构件(handle box)上,
    * 这样它可以从主窗口上移开 */
    handlebox = gtk_handle_box_new ();
    gtk_box_pack_start (GTK_BOX (GTK_DIALOG (dialog)->vbox),
    handlebox, FALSE, FALSE, 5);

    上 面的代码和任何其它Gtk应用程序都差不多。它们进行 GTK 初始化,创建主窗口等。唯一需要解释的是:一个手柄盒(a handle box)。手柄盒只是一个可以在其中组装构件的盒子。它和普通盒子的区别在于它能从一个父窗口移开(事实上,手柄盒保留在父窗口上,但是它缩小为一个非常 小的矩形,同时它的所有内容重新放在一个新的可自由移动的浮动窗口上)。拥有一个可浮动工具栏给人感觉非常好,所以这两种构件经常同时使用。

      /* 工具栏设置为水平的,同时带有图标和文本
    * 在每个项之间有5像素的间距,
    * 并且,我们也将它放在手柄盒上 */
    toolbar = gtk_toolbar_new ();
    gtk_toolbar_set_orientation (GTK_TOOLBAR (toolbar), GTK_ORIENTATION_HORIZONTAL);
    gtk_toolbar_set_style (GTK_TOOLBAR (toolbar), GTK_TOOLBAR_BOTH);
    gtk_container_set_border_width (GTK_CONTAINER (toolbar), 5);
    gtk_toolbar_set_space_size (GTK_TOOLBAR (toolbar), 5);
    gtk_container_add (GTK_CONTAINER (handlebox), toolbar);

    上面的代码初始化工具栏构件。

      /* 工具栏上第一项是<close>按钮 */
    iconw = gtk_image_new_from_file ("gtk.xpm"); /* 图标构件 */
    close_button =
    gtk_toolbar_append_item (GTK_TOOLBAR (toolbar), /* 工具栏 */
    "Close", /* 按钮标签 */
    "Closes this app", /* 按钮的工具提示 */
    "Private", /* 工具提示的私有信息 */
    iconw, /* 图标构件 */
    GTK_SIGNAL_FUNC (delete_event), /* 一个信号 */
    NULL);
    gtk_toolbar_append_space (GTK_TOOLBAR (toolbar)); /* 工具栏项后的空白 */

    在 上面的代码中,可以看到最简单的情况:在工具栏上增加一个按钮。在追加一个新的工具栏项前,必须构造一个图片(image)构件用作该项的图标,这个步骤 我们要对每一个工具栏项重复一次。在工具栏项之间还要增加间隔空间,这样后面的工具栏项就不会一个接一个紧挨着。可以看 到,gtk_toolbar_append_item()返回一个指向新创建的按钮构件的指针,所以我们可以用正常的方式使用它。

      /* 现在,我们创建单选按钮组... */
    iconw = gtk_image_new_from_file ("gtk.xpm");
    icon_button = gtk_toolbar_append_element (
    GTK_TOOLBAR (toolbar),
    GTK_TOOLBAR_CHILD_RADIOBUTTON, /* 元素类型 */
    NULL, /* 指向构件的指针 */
    "Icon", /* 标签 */
    "Only icons in toolbar", /* 工具提示 */
    "Private", /* 工具提示的私有字符串 */
    iconw, /* 图标 */
    GTK_SIGNAL_FUNC (radio_event), /* 信号 */
    toolbar); /* 信号传递的数据 */
    gtk_toolbar_append_space (GTK_TOOLBAR (toolbar));

    这里我们开始创建一个单选按钮组。用 gtk_toolbar_append_element 就行了。事实上,使用这个函数,我们能够添加简单的工具栏项或空白间隔(类型为GTK_TOOLBAR_CHILD_SPACEGTK_TOOLBAR_CHILD_BUTTON )。在上面的示例中,我们先创建了一个单选按钮组。要为这个组创建其它单选按钮,需要一个指向前一个按钮的指针,这样按钮的清单可以很容易组织起来(看在本文档前面部分的 单选按钮 节)。

      /* 后面的单选按钮引用前面创建的 */
    iconw = gtk_image_new_from_file ("gtk.xpm");
    text_button =
    gtk_toolbar_append_element (GTK_TOOLBAR (toolbar),
    GTK_TOOLBAR_CHILD_RADIOBUTTON,
    icon_button,
    "Text",
    "Only texts in toolbar",
    "Private",
    iconw,
    GTK_SIGNAL_FUNC (radio_event),
    toolbar);
    gtk_toolbar_append_space (GTK_TOOLBAR (toolbar));

    iconw = gtk_image_new_from_file ("gtk.xpm");
    both_button =
    gtk_toolbar_append_element (GTK_TOOLBAR (toolbar),
    GTK_TOOLBAR_CHILD_RADIOBUTTON,
    text_button,
    "Both",
    "Icons and text in toolbar",
    "Private",
    iconw,
    GTK_SIGNAL_FUNC (radio_event),
    toolbar);
    gtk_toolbar_append_space (GTK_TOOLBAR (toolbar));
    gtk_toggle_button_set_active (GTK_TOGGLE_BUTTON (both_button), TRUE);

    最后,我们必须手工设置其中一个按钮的状态(否则它们全部处于活动状态,并阻止我们在它们之间做出选择)。

      /* 下面只是一个简单的开关按钮 */
    iconw = gtk_image_new_from_file ("gtk.xpm");
    tooltips_button =
    gtk_toolbar_append_element (GTK_TOOLBAR (toolbar),
    GTK_TOOLBAR_CHILD_TOGGLEBUTTON,
    NULL,
    "Tooltips",
    "Toolbar with or without tips",
    "Private",
    iconw,
    GTK_SIGNAL_FUNC (toggle_event),
    toolbar);
    gtk_toolbar_append_space (GTK_TOOLBAR (toolbar));
    gtk_toggle_button_set_active (GTK_TOGGLE_BUTTON (tooltips_button), TRUE);

    开关按钮的创建方法就很明显了(如果你已经知道怎么创建单选按钮了)。

      /* 要将一个构件组装到工具栏上,只需创建它,然后将它追
    * 加到工具栏上,同时设置合适的工具提示 */
    entry = gtk_entry_new ();
    gtk_toolbar_append_widget (GTK_TOOLBAR (toolbar),
    entry,
    "This is just an entry",
    "Private");

    /* 因为它不是工具栏自己创建的,所以我们还需要显示它 */
    gtk_widget_show (entry);

    可以看到,将任何构件添加到工具栏上都是非常简单的。唯一要记住的是,这个构件必须手工显示(与此相反,工具栏自己创建的工具栏项随工具栏一起显示)。

      /* 好了,现在可以显示所有的东西了 */
    gtk_widget_show (toolbar);
    gtk_widget_show (handlebox);
    gtk_widget_show (dialog);

    /* 进入主循环,等待用户的操作 */
    gtk_main ();

    return 0;
    }

    这样,我们就到了工具栏教程的末尾。当然,还需要一个漂亮的XPM图标。下面就是:

    /* XPM */
    static char * gtk_xpm[] = {
    "32 39 5 1",
    ". c none",
    "+ c black",
    "@ c #3070E0",
    "# c #F05050",
    "$ c #35E035",
    "................+...............",
    "..............+++++.............",
    "............+++++@@++...........",
    "..........+++++@@@@@@++.........",
    "........++++@@@@@@@@@@++........",
    "......++++@@++++++++@@@++.......",
    ".....+++@@@+++++++++++@@@++.....",
    "...+++@@@@+++@@@@@@++++@@@@+....",
    "..+++@@@@+++@@@@@@@@+++@@@@@++..",
    ".++@@@@@@+++@@@@@@@@@@@@@@@@@@++",
    ".+#+@@@@@@++@@@@+++@@@@@@@@@@@@+",
    ".+##++@@@@+++@@@+++++@@@@@@@@$@.",
    ".+###++@@@@+++@@@+++@@@@@++$$$@.",
    ".+####+++@@@+++++++@@@@@+@$$$$@.",
    ".+#####+++@@@@+++@@@@++@$$$$$$+.",
    ".+######++++@@@@@@@++@$$$$$$$$+.",
    ".+#######+##+@@@@+++$$$$$$@@$$+.",
    ".+###+++##+##+@@++@$$$$$$++$$$+.",
    ".+###++++##+##+@@$$$$$$$@+@$$@+.",
    ".+###++++++#+++@$$@+@$$@++$$$@+.",
    ".+####+++++++#++$$@+@$$++$$$$+..",
    ".++####++++++#++$$@+@$++@$$$$+..",
    ".+#####+++++##++$$++@+++$$$$$+..",
    ".++####+++##+#++$$+++++@$$$$$+..",
    ".++####+++####++$$++++++@$$$@+..",
    ".+#####++#####++$$+++@++++@$@+..",
    ".+#####++#####++$$++@$$@+++$@@..",
    ".++####++#####++$$++$$$$$+@$@++.",
    ".++####++#####++$$++$$$$$$$$+++.",
    ".+++####+#####++$$++$$$$$$$@+++.",
    "..+++#########+@$$+@$$$$$$+++...",
    "...+++########+@$$$$$$$$@+++....",
    ".....+++######+@$$$$$$$+++......",
    "......+++#####+@$$$$$@++........",
    ".......+++####+@$$$$+++.........",
    ".........++###+$$$@++...........",
    "..........++##+$@+++............",
    "...........+++++++..............",
    ".............++++..............."};

    <<< Previous Home Next >>>
    按钮盒 Button Boxes Up 笔记本 Notebooks
    展开全文
  • firemonkey 去掉ios 虚拟键盘上的‘done’toolbarBY:乖鸟这个ios 虚拟键盘上的‘done’toolbar 简直太丑了,不过可以在这个toolbar上自己增加按钮,和功能,这倒不错~~~,首先uses: FMX.VirtualKeyboard 和 FMX....

    firemonkey 去掉ios 虚拟键盘上的‘done’toolbar

    BY:乖鸟

    这个ios 虚拟键盘上的‘done’toolbar 简直太丑了,不过可以在这个toolbar上自己增加按钮,和功能,这倒不错~~~,

    首先uses: FMX.VirtualKeyboard  和 FMX.Platform

    在 form的  private 中加入变量:

    FService: IFMXVirtualKeyboardToolbarService;

    然后在FormCreate 中加入:

    if TPlatformServices.Current.SupportsPlatformService(IFMXVirtualKeyboardToolbarService, IInterface(FService)) then

    begin

    showmessage('搞定啦!!');

    end

    else

    begin

    showmessage('还没搞定呢!!!!');

    end;

    这一句应该是 给FService一个实例指针。不加这一句,FService是nil ,是空的。

    这样后 IFMXVirtualKeyboardToolbarService 中的方法,FService就可以使用了,包括增加按钮等等。

    下面这一句就可以去掉这个丑陋的工具条了:

    if Assigned(FService) then

    FService.SetToolbarEnabled(false);

    展开全文
  • 好像最简单的方法就是修改theme文件,theme都放在./fluxbox/styles,比如说我用的是liquidglass,那就修改对应的liquidglass文件,删掉里面所有含有font的行,在文件末加上:*font: snap然后restart一下fluxbox就好. ...
  • Internet Explorer Developer Toolbar 是一款基于IE的开发辅助工具。 用过它的朋友肯定特别喜欢吧,但英文实在看着别扭,于是我把它小小的汉化了一下,欢迎喜欢它的朋友下载! 请解压后安装 声明: 使用...
  • 接触ToolBar

    2015-05-17 23:29:28
    转载请标明出处:  ...  本文出自:【张鸿洋的博客】 ...随着Material Design的逐渐的普及,业内也有很多具有分享精神的伙伴翻译了material design specification ,中文翻译地址:Material Design 中文
  • 在最后相应windows消息传递的时候,需要处理一下:STDMETHODIMP CMyIEToolbar::TranslateAcceleratorIO(LPMSG lpMsg){ //编辑框输入中文解决方法(抄来的,没研究) int nVirtkey = (int)lpMsg->wParam;...
  • toolbar插件 学习记录

    千次阅读 2018-07-24 19:52:39
    toolbar插件是按照学习慕课网的学习记录 课程名:侧栏工具条开发 讲师:Alex Wang 链接地址:https://www.imooc.com/video/8235 技术点: 使用sass编写css,koala编译(工具貌似不能识别中文路径的项目)。 ...
  • 1、Action关联菜单通过菜单创建的Action,已经与菜单自动关联,如果是单独创建的Action,需要与菜单挂接时,直接将...2、Action关联toolBar工具栏创建的Action对象,如果需要在toolBar中呈现,需要将Action与toolBa...
  • 大家都知道DrawerLayout 和toolbar 结合能出来高大上的效果。 使用到一个ActionBarDrawerToggle类。 那么怎么修改DrawerToggle的颜色呢,搜索了很多中文网站都没有找到,果断求助stackoverflow 得到以下...
  • Android 5.x Theme 与 ToolBar 实战

    万次阅读 多人点赞 2015-04-27 09:50:39
    随着Material Design的逐渐的普及,业内也有很多具有分享精神的伙伴翻译了material design specification ,中文翻译地址:Material Design 中文版。So,我们也开始Android 5.x相关的blog,那么首先了解的当然是其...
  • Android Material Design之Toolbar与Palette实践

    万次阅读 多人点赞 2014-11-24 10:28:50
    我们都知道Marterial Design是Google推出的全新UI设计规范,如果对其不太了解的可以看下:Material design非官方中文指导手册 ,或者我的前面几篇Material Design的译文,相比之前Google在Android Holo风格上平平...
  • Toolbar与Palette实践

    2015-08-10 14:15:24
    转载请注明出处:... bog】 ...我们都知道Marterial Design是Google推出的全新UI设计规范,如果对其不太了解的可以看下:Material design非官方中文指导手册 ,或者我的前面几篇Material
  • 详细示例进入:http://kendoui.io/examples/grid/toolbar-template.html KendoUI中文网:http://www.kendoui.io ...
  • ToolBar的进阶详细使用

    千次阅读 2016-06-02 21:34:51
    原文出处: 【张鸿洋的博客】 ...随着Material Design的逐渐的普及,业内也有很多具有分享精神的伙伴翻译了material design specification ,中文翻译地址:Material Design 中文版。So,我们也开始Androi
  • #### 前言 #### 如果你有关注Material Design,会发现国内的一些app也在使用material ... Google I/O 2014 发布 Material Design,1sters 于 2014-09-09 上线中文版,并稳稳占据百度和 Google material desig
  • 此次发布包含了中文在内的多种语言版本。Windows Live Toolbar 是MSN Toolbar的升级版本, 是微软新live战略的重要一环。这次发布的正式版在之前的预览版基础上又增加了对Live Local, Live Maps, OneCare和Live Ga...
  • MaterialDesign是Google在2014 I/O年发布的一种设计风格. android5.0也是开始使用这种设计风格 ...中文网站:http://wiki.jikexueyuan.com/project/material-design/ 今天我们主要学习toolbar,还有G
  • 在2014年Google IO 大会上,Google 推出了一套全新的设计规范Material Design,这也为广大的Android 开发者带来了福音,不用像以前一样照着... Design 中文版,而Google 也为我们提供符合Material Design 风格的一系列
  • 转载请标明出处:  ...  本文出自:【张鸿洋的博客】 ...随着Material Design的逐渐的普及,业内也有很多具有分享精神的伙伴翻译了material design specification ,中文翻译地址:Material Design 中文

空空如也

空空如也

1 2 3 4 5 ... 19
收藏数 370
精华内容 148
关键字:

toolbar中文