• XCode 6 以后使用编程处理一些图片效果


    麻烦事No.1:“能改一下这个图片的颜色吗?”

    目前为止iOS已经提供了一些相当复杂的方法来处理工程中的图片,但很不幸的是,却没有用来处理这种情况的方法。现在在工程中全局改变UIColor已经不是什么难题了,但是我们还要改变工程中图片的颜色。

    在iOS7中,我们有了imageWithRenderingMode,这是UIImage的一个方法,参数是有三个选项的枚举值UIImageRenderingMode。

    typedef NS_ENUM(NSInteger, UIImageRenderingMode) {
      UIImageRenderingModeAutomatic, // Use the default rendering mode for the context where the image is used
      UIImageRenderingModeAlwaysOriginal, // Always draw the original image, without treating it as a template
      UIImageRenderingModeAlwaysTemplate, // Always draw the image as a template image, ignoring its color information
    } NS_ENUM_AVAILABLE_IOS(7_0);

    UIImageRenderingModeAlwaysOriginal 就和字面的意思一样,这个模式告诉系统按照图片文件原来的样子渲染图片。

    UIImageRenderingModeAlwaysTemplate 这是最有意思的模式。首先会扫描你的图片,然后从图片中所有不透明的像素创建一个模板。这同时也会忽略图片的所有颜色信息。你可以使用UIView子类的tintColor属性来给图片填充你选择的颜色。

    UIImageRenderingModeAutomatic 这个模式由系统根据图片的使用环境来决定如何渲染图片。如果你的图片是用在比如UITabBar、UINavigationBar、UIToolbar 和UISegmentedControl这些地方,图片使用AlwaysTemplate渲染模式。图片用在其他的地方则会使用AlwaysOriginal渲染模式。
    在了解了上面的内容之后,之前我们改变图片颜色的代码就可以简化成下面这样的了:

    if var imageToChange = imageView.image?.imageWithRenderingMode(.AlwaysTemplate) {
      imageView.image = imageToChange
      imageView.tintColor = .redColor() //Setting the tint color is what changes the color of the image itself!
    }

    是不是很神奇?用代码改变图片的颜色,现在变得简单多了。

    等等,还没完呢!其实不需要代码也可以改变图片的颜色。

    从Xcode 6开始,imageWithRenderingMode已经集成到Asset Catalog里了。如果你在Asset Catalog里选择了一个图片,在右边的Attributes Inspector里,就可以像下图那样把Render As选项改成Template Image。

    就是这么简单。甚至你还可以通过在Storyboard中,在Attributes Pane中改变UIImageView的tintColor属性,来改变imageView中的图片的颜色。

    麻烦事No.2:“能给我这个的3X分辨率的图吗?”

    这个的确很烦,因为每个app的每个设计师被问这个问题都至少一年了。貌似苹果每年都会增加一种新的屏幕分辨率,今年我也持怀疑态度。随着硬件技术的发展,苹果总是走在前沿,总是在尽可能地提高屏幕的ppi。很不幸,这意味着我们不能直接在“预览”中放大已有的图片,因为这会造成诸如图片像素化和产生锯齿等问题。

    在WWDC上提到的最好的消息,就是Xcode 6 及以上版本支持在Asset Catalog中使用矢量PDF了。PDF是矢量元素的事实标准。矢量文件包含一个元素的很多元数据,用来告诉系统如何渲染这些内容,而这些和屏幕分辨率无关。举个通俗易懂例子,一个圆形的矢量PDF图,当它渲染成5像素宽和渲染成5000000像素宽时是一样清晰的。

    在iOS平台,Xcode是在编译时,根据你的矢量PDF图的大小,生成1x、2x和3x图。如果你的PDF图是45*45px,那么Xcode会在编译时生成下面3个PNG:

    45*45px :1x设备用的(iPhone 3G and 3GS)
    90*90px :2x或Retina显示设备用的(iPhone 4, 4S, 5, 5S, and 6)
    135*135px :3x设备用的(iPhone 6 Plus 及以上)
    这也意味着当有更高的屏幕分辨率时,Xcode可以根据已有的矢量PDF放大图片,这样自动就支持以后的设备了。还有,如果你是OS X开发者,那么矢量PDF就更好用了,OS X app完全支持矢量PDF,你可以用代码缩放图片而不会失真。

    而你需要做的就是,找你的好基友设计师拿到这些矢量PDF文件,然后在Asset Catalog的Attribtues Pane中,在Scale Factor的下拉框中选择Single Vector就行了。

    你可以直接把PDF拖到Asset Catalog中,然后进行设置。

    麻烦事No.3:“能给我新设备的启动图吗?”

    启动图对于app来说还是蛮重要的。这是启动app后最先看到的,它会给用户一个app其余部分是如何设计的第一印象。对于iPhone 6 和 iPhone 6 Plus,如果你没有为这两个设备准备对应的启动图,那么app就会工作在放大模式。启动图还在Asset Catalog中,但是我建议把它拆出来,因为启动图也升级了。现在,你可以使用LaunchScreen xibs。

    在工程文件中,你可以指定app在启动时加载的xib,这样你就不需要准备9张启动图了。LaunchScreen.xib还支持自动布局,这样我们就能分块构建启动屏幕了。按如下这样设置:

    首先创建一个xib文件。你可以在如下图所示的地方选择Launch Screen类型的xib。

    然后打开工程文件,选择app的target,在Launch Screen file处选择你的Launch Screen .xib文件。

    麻烦事No.4:“能把这些按钮的图片拉长一点吗?”

    这种情况发生的概率得多。对于一张pattern image或者是有圆角的图片,考虑到有更大的屏幕,你需要重新调整图片的大小,以免图片拉伸出现失真。但是我们也可以在Xcode 6的Asset Catalog中搞定它。

    在之前,一般用类似下面的代码来获得可改变大小的图片:

    let edgeInsets = UIEdgeInsets(top: 8.0, left: 8.0, bottom: 8.0, right: 8.0)
    let backgroundButtonImage = UIImage(named:"purple_button")?.resizableImageWithCapInsets(edgeInsets)
    
    purpleButton.setBackgroundImage(backgroundButtonImage, forState: .Normal)


    这将会得到一张和下面类似的图片:

    在运行时,会拉伸距离UIImageView的container的边框8像素的中间部分,这样就能保留圆角,得到下面这样的:

    多亏了Xcode中Asset Catalog的slice和dice,我们不需要代码也能拉伸图片。首先在Xcode中选中图片,然后点击右下角的Show Slicing:

    你现在应该能看到slicing 面板和一个按钮"Start Slicing"

    在你点击按钮之后,会显示下面的三个选项:

    左边的按钮用于horizontal edge insets,右边的按钮用于vertical edge insets,中间的则是两个都有。在我们的例子中要保留圆角,所以我们按中间的按钮,告诉系统我们想要按钮的中间在水平和垂直方向拉伸。在按下按钮之后,就能看到一些可以拖动的细条,这可以设置从哪里开始拉伸图片。

    系统会保留深紫色的区域,浅紫色的区域会被拉伸。

    更厉害的是,Xcode自动找到了圆角,所以我们不需要设置从哪里开始拉伸图片。最后别忘了在Attribtues pane中设置图片是可拉伸的。

    有了这个,你就不用再在resizableImageWithCapInsets方法中填写那些神奇的数字了,也能帮助你分离view逻辑和app逻辑。

  • 相关阅读:
    mybatis动态拼接条件的技巧 where 1=1 或者where标签
    cron表达式
    java获取电脑mac物理地址
    js 正则表达式:价格的校验
    java 当前时间月份
    中文保存在properties乱码的解决
    java 手机号码+邮箱的验证
    27.openpyxl 向指定单元格添加图片并修改图片大小 以及修改单元格行高列宽
    26.python操作Excel
    25.xlrd、xlwt和openpyxl模块的比较和使用
  • 原文地址:https://www.cnblogs.com/allanliu/p/4938613.html
Copyright © 2020-2023  润新知