Xcode Vector Image - Pdf

Yunus Tek
Yunus Tek
Oct 4, 2018 · 3 min read
Image for post
Image for post

Xcode Vector Images

Apple, PDF Vector Image’i Asset kataloğuna Xcode 6 sürümünde ekledi. PDF Vector Image, her bir dosyanın 1x, 2x ve 3x çözünürlükteki image asset’lerini oluşturma acısı olmayan pratik bir yoldur. Bu assets ile androidde kullanılan .swg dosyaları gibi, gerçekten ölçeklenebilir vektörel görüntüler alabilirsiniz. Bir görüntüyü taban büyüklüğünün üzerinde germek size kötü ve bulanık sonuçlar bırakabiliyordu.

PDF Vektör Asset, xcode 9 ile değişerek, vektör verilerini saklayabilme ve görüntüleri çalışma zamanında ölçekleyebilme olanağı sundu. Aynı zamanda dinamik tiplerle birlikte çalışabilen bazı erişilebilirlik iyileştirmeleri de ekledi.

Öncelikler şunu bilmemiz gerekiyor: Her pdf vektörel değildir.
Örneğin bir fotoğraf asla vektörel olamaz. Bunu için çizilmiş bir resim olması gerekiyor. Bunu en kolay şu şekilde anlayabilirsiniz. Açtığınız pdf dosyanızdaki objenin herhangi bir kenarını yapabildiğiniz kadar zoomlayın.
Eğer transparan pikseller (sağdaki görsel gibi) görürseniz bu dosya vektörel değildir.

Fuzzy Images

PDF Vector Image şeklinde bir asset katalog eklemek istiyorsanız, öncelikle pdf formatında kaydedilmiş vektörel bir dosyanız olması gerekiyor. Image Asset kataloğuna 1x çözünürlüklü pdf görüntünüzü ekleyip, özellikler penceresinden scales özelliği Single Scale olarak değiştirmeniz yeterlidir. Xcode build zamanında 2x ve 3x görüntülerini de sağlamış olacaktır.

Şu ana kadar PDF imagelerinin kullanılmasıyla ilgili problem, xcode’un ölçeklenmiş görüntüleri build süresinde oluşturmasıydı. Daha önce runtime da ölçeklenebilir görüntüler kullanmak için destek yoktu. Örneğin, normal koruduğunda iyi görünen 100x100 piksel boyutlarında bir yıldız resmine sahibim:

Eğer view i dolduracak kadar, imageView i genişletecek constraint eklerseniz görüntü kötü görünür. Ve işte aşağıda aynı görüntüyü görüyorsunuz. Content modunu Aspect Fit yapıldı, Bir iPhone 7 Plus ekranını doldurmak için 3 kat daha fazla ölçeklendirildi:

Sonuç, bir iPad üzerinde daha kötü görünen bulanık ve pürüzlü bir görüntüdür.

Preserve Vector Data

Xcode 9 ile, görüntüyü runtimeda bir vektör olarak işlemeyi seçmenize izin vererek bu durumu değiştirir. Bu, görüntünün keyfi boyutlara düzgün bir şekilde ölçeklenebileceği anlamına gelir. Yapmanız gereken tek değişiklik, Asset kataloğundaki PDF görüntüsü için Preserve Vector Data (Vektör Verilerini Koru) seçeneğini işaretlemektir:

Artık görüntü, geniş ekranlı bir iPhone ekranını doldurmak için ölçeklendiğinde bile keskin görünüyor:

Notlar:

· Interface Builder’da ölçeklenen görüntü hala bulanık görünebilir, ancak çalışma zamanında iyi bir sonuç verecektir.

· Pdf vektör iOS 11 ve üzerinde çalışır. Vektör verisini korumak ve ios 10 veya daha önceki değerleri hedeflediğinizde xcode sizi uyarmaz, ancak ölçekleme sırasında vektör verileri kullanılmaz, bu nedenle iOS 11 öncesi hedefler için 1x yerine 3x boyutunda bir pdf kullanmanız bulanık görüntüler elde etmenizi önleyecektir.

Accessibility

Vektör görüntüleri kullanıyorsanız desteklemenin kolay olduğu iki ekstra erişilebilirlik özelliği kullanıma sunuldu.

Adjusting Image Sizes For Accessibility

Apple iOS 11 de UIAccessibilityContentSizeCategoryImageAdjusting protokolünü ekledi. UIButton ve UIImageView ‘in her ikisinde de tek bir boolean özelliği eklenebilen adjustsImageSizeForAccessibilityContentSizeCategory protokolü kullanılabilir. Eğer bunu true olarak ayarlarsanız, daha büyük erişilebilirlik metin boyutlarından herhangi birini kullandığınızda, görüntü boyutu artar (normal içerik metni boyutlarının etkisi yoktur).

Bu özelliği eklemek için:

1. Asset Kataloğuna bir pdf görüntüsü ekleyin ve vektör verilerini önceki gibi koruduğunuzdan emin olun:

2. Image View veya Button’ı Storyboard’a eklerken Adjusts Image Size olarak ayarladığınızdan emin olun:

3. Image View’i kod içerisinde ekliyorsanız:

Bu şekilde kullanarak istediğiniz boyutlarda pürüzsüz bir görüntü elde edebilirsiniz.

Sonuç

Asset Katalogunuza bir PDF dosyası ekleyip Single Scale olarak ayarlamanız 1x, 2x ve 3x PNG dosyalarını oluşturması için yeterlidir. Bu şekilde 3 boyuta kadar kullanabilirsiniz.

Eğer daha büyük bir image ihtiyacınız var ise Preserve Vector Data seçeneğini de işaretleyerek runtime da istediğiniz kadar büyütebilir ve pürüzsüz bir görüntü elde edebilirsiniz.

NSIstanbul

A publication with content filled by NSIstanbul members

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store