Xcode Vector Image - Pdf

Yunus Tek
Yunus Tek
Oct 4, 2018 · 3 min read

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.

· 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.

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

Yunus Tek

Written by

Yunus Tek

iOS Developer

NSIstanbul

A publication with content filled by NSIstanbul members

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade