Asset Catalog Help (十)---Specifying a Resizable Area of an Image

Specifying a Resizable Area of an Image

Use the Xcode Slicing feature to specify the dimensions of a resizable center area of the image and to optionally specify end caps, which are areas of the image that should not be filled by the resizable area.

使用Xcode的Slicing功能来指定图片的可调整大小(resizable)的中心区域， 并可选择性的指定end caps，它是该图片不能被调整大小的区域。

1. Select an asset catalog to display its contents.

   选择asset catalog显示其内容。

2. In the set list, select the set containing the image to slice.

   在图片集列表中，选择需要切片图片所在的图片集

3. In the set viewer, select the image representation to slice, and choose Editor > Show Slicing.

   在图片集查看区(set viewer)， 选择需要切片的图片，选择Editor > Show Slicing.

   

4. Click the Start Slicing button that is displayed over the center of the image.

   点击图片中央的Start Slicing按钮。

5. Click the appropriate button for the slicing operation you want to perform—horizontal, vertical, or both horizontal and vertical.

   Use the Zoom In and Zoom Out buttons to increase or decrease the magnification of the image.

   点击你想要调整大小的方向的切片操作---水平，垂直或两者都选。使用放大和缩小按钮来增加或缩小图片的尺寸。

   

6. Drag the inner slicing handle to specify a resizable center area.

   拖动内部的切片手柄(inner slicing handle)来指定一个可调整大小中心区域。

   In the horizontal slicing example shown below, the resizable area is the 2-pixel-wide sliver specified between the left slicing handle and the inner slicing handle. At runtime, the resizable area replaces the opaque area of the image.

   在下面显示的横向切片例子中，可调整大小区域是Left slicing handle 和 Inner slicing handle之间的2个像素宽的小条。 运行时，可调整大小区域将填充图片的不透明区域。

   

7. Drag the outer slicing handles to adjust the size of the end caps.

   拖动外面的切片手柄(slicing handle)来调整end caps(不可调整大小区域)的尺寸。

8. Use the Attributes inspector to fine-tune the size of the areas and to specify whether the resizable center area should stretch or tile.

   使用Attributes inspector 来微调(fine-tune)区域的尺寸，并指定可调整大小中心区域是该拉伸(stretch)或平铺(tile)。

To improve app performance, you can use resizable images for the background of many UI elements, including buttons, tab bars, and popovers. For example, you can create a resizable image that includes four end caps to define the four corners of a button. When the image is resized to fill the button’s background area, the portions defined by the end caps are drawn unchanged.

为了增强应用程序的性能，你可以给很多UI元素的背景使用可调整大小的图片，包括按钮，标签栏(tab bars)以及popovers。 比如，你可以创建一个使用可调整大小的图片的按钮，它包含四个end cap来定义按钮的四个角。 当该图片被用作按钮的背景图片时，由end caps定义的四个角绘制时不会改变。

Slicing is available only for projects with a target destination greater than iOS 7 or OS X v10.10.

切片功能只在iOS7 或 OS X v10.10版本或以上版本的项目中才能使用。

Related Articles

相关文章

• About Asset Catalogs
• Customizing Image Sets for Size Classes
• Customizing Image Sets for Devices