Xcode Vector Image - Pdf

Yunus Tek
NSIstanbul
Published in
3 min readOct 4, 2018

Guncelleme 20.01.2023:

PDF kullanınca uygulamada görünmüyorsa sebebi Xcode 14 olabilir!

Apple’in yeni güncellemesiyle Xcode 14 ve üzeri sürümlerde build edilen projelerde PDF assetlerle ilgili şöyle bir sorun ortaya çıktı; Eğer yüklediğiniz PDF verktör olmayan bir görsel içeriyorsa çizilememesine ve görünmemesine sebep oluyor. Çözüm olarak bu tür asset’lerinizi PNG’ye çevirerek kullanabilirsiniz. Tamamen vektör olduğuna emin olduklarınızı sorunsuz olarak kullanmaya devam edebilirsiniz.

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.

Soldaki Vektörel. Sağdaki Vektörel değil.

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.

· Preserve Vector Data iOS 11 ve üzeri için desteklenir. iOS 10 veya daha önceki sürümleri hedeflediğinizde xcode sizi uyarmaz, ancak ölçekleme sırasında vektör verileri kullanılmaz. Bu nedenle iOS 11 öncesi sürümler için bulanık görüntüler elde edersiniz.

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.

--

--