跳至正文

[Gnome-Shell扩展制作指北]第三篇:图标与图片加载

  • 2012-08-15

看了题目你可能会奇怪,这有什么不同吗?其实,这里只是两种不同的加载方式。

图标

第一种是图标,或者叫icon,加载的方式是通过系统搜索整个主题库来加载这一图标文件。很难懂?没关系,在/usr/share/icons/下面有很多的图标是吧,那咱们就来加载
face-smile效果图 和上节课有神马不同呢: git diff Lesson_2 Lesson_3_Chapter_1

//…此处省略一些………
+const Gtk = imports.gi.Gtk;
@@ -17,7 +18,17 @@ ExampleIndicator.prototype = {
PanelMenu.Button.prototype._init.call(this, St.Align.END);
this.label = new St.Label({text:"This is Example"});
- this.actor.add_actor(this.label);
+ this.label.add_style_class_name('example');
+
+ //this.actor.add_actor(this.label);
+
+ this.iconTheme = Gtk.IconTheme.get_default();
+ this._icon = new St.Icon({ icon_type: St.IconType.SYMBOLIC,
+ style_class: 'popup-menu-icon',
+ icon_name: 'face-smile',
+ icon_size: 26
+ });
+ this.actor.add_actor(this._icon);
Main.panel._rightBox.add_actor(this.actor);
},
//…此处又省略一些………

iconTheme = Gtk.IconTheme.get_default(),这里是告诉GTK主题系统去寻找当前的主题。也就是「主题设置会影响你的图标显示」。用户换了一个主题,你的图标也有可能改变哦。
你可能要问,如果要添加自定义的图标路径怎么办呢? 这也好办,跟Gtk主题说一声就行了: iconTheme.append_search_path (自定义的图标路径); St.Icon实例的基本组成:

  • icon_type:图标类型,也就两种,全彩(正常的),象征性的(例子里用的)
  • icon_name:图标的名字,这里我们挑了face-smile :)
  • icon_size:图标的大小,要注意这个大小指的高和宽同样的值,如下图

这里要注意图标的命名,如果你选择了象征性的图标,就要在图标文件名后面加上"-symbolic"这样的后缀,例如:face-smile- symbolic.svg 这样加载图标确实很方便,特别是系统本身自带的那些图标上,但是要是加载图片时,总不可能把图片塞进主题里对吧。

CSS式加载图片

当然不只是换了个图片,让我们看看它和Chapter
1有神马区别。 git diff Lesson_3_Chapter_1 Lesson_3_Chapter_2
除了添加了一个新文件以外,实际上只有短短的8行:

+.example_icon{
+ background-image: url(pic/applications-science-symbolic.svg);
+ background-size: contain;
+ width:26px;
+ height:26px;
+}
+ //this.actor.add_actor(this._icon);
+ this._css_icon = new St.Bin({ style_class: "example_icon" });
+ this.actor.add_actor(this._css_icon);

如果你写过CSS,这些对你简直就是小儿科了。不过我还是想罗嗦一下:
首先我们添加了一个St.Bin(暂且把这当容器用吧),然后给这货添加了一个"example_icon"的类。并在css里定义了这个类的表现形式,和第二课里做的其实差不多吧。这和图标式加载有些许不同,那就是Bin的大小不受父级元素控制哦。
其实加载图片还有两种方法,不过我都不推荐:

  • Clutter.Texture.new_from_file,因为要考虑绝对路径的问题,而css可以考虑相对路径
  • GdkPixbuf,actor不能接受这个实例,添加时要转换

当然你觉得好,你可以用哈~不过我觉得样式和程序分离是未来的设计趋势,再说了,CSS就是方便呗。

总结

本节我们学习了:

  • 图标通过GTK主题系统加载
  • 图片通过css加载

这样一来,大家就可以加载自己喜欢的GUI啦~

发表评论

您的电子邮箱地址不会被公开。

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据