วิธีอัพโหลดภาพไปยัง Xcode

ในการใช้ภาพใน Xcode คุณต้องอัปโหลดไปที่Assets.xcassetsซึ่งอยู่ในSupporting Filesโฟลเดอร์ มีสองตัวเลือกที่คุณสามารถเลือกได้: bitmaps (aka. pngfiles) หรือ vectors (aka .pdffiles) ขั้นตอนแรกคือการตัดสินใจว่าคุณต้องการใช้ไฟล์ประเภทใด

ความแตกต่างระหว่างบิตแมปและเนื้อหาเวกเตอร์

บทช่วยสอนออนไลน์ส่วนใหญ่ใช้เนื้อหาบิตแมปซึ่งก็คือ.pngไฟล์ คุณต้องลากรูปภาพมากกว่า 3 ชุดลงใน Xcode

อย่างไรก็ตามมีโรงเรียนแห่งความคิดที่เชื่อว่าสินทรัพย์เวกเตอร์เหนือกว่า บทความนี้มีคำอธิบายที่ดีว่าเหตุใดจึงเป็นเช่นนั้น เนื้อหาเวกเตอร์คือ.svgไฟล์ (หรือ.pdfสำหรับ Xcode) หากคุณเลือกใช้เนื้อหาเวกเตอร์คุณจะต้องอัปโหลดรูปภาพไปยัง Xcode เพียงเวอร์ชันเดียว

นี่คือสิ่งที่ฉันได้ยินมาจากสิ่งที่ฉลาดกว่านั้นฉัน - โทรศัพท์ Android ใช้อัลกอริทึมจากเนื้อหาเวกเตอร์เพื่อสร้างภาพในขนาดใดก็ได้ที่ต้องการ เหมาะสมกับความกว้างของอุปกรณ์และขนาดหน้าจอสำหรับ Android

อย่างไรก็ตามเนื้อหาเวกเตอร์ใน iPhone ไม่ได้ปรับขนาดด้วยอัลกอริทึม (เห็นได้ชัด) ดังนั้นคุณจะไม่ได้ภาพที่มีคุณภาพสูงขึ้นโดยใช้เวกเตอร์บนบิตแมป สิ่งที่คุณจะได้รับกลับเป็นคุณภาพเช่นเดียวกับบิตแมป iPhone เพียงแค่ใช้เนื้อหา "เวกเตอร์" และแปลงเป็นบิตแมปสามขนาดเดียวกัน

นอกเหนือจากตรรกะของอัลกอริทึมข้างต้นแล้วยังมีบางส่วนประโยชน์เพิ่มเติมจากการใช้เนื้อหาเวกเตอร์สำหรับ iPhone

  1. ลดโอกาสที่จะเกิดข้อผิดพลาดจากมนุษย์ ตอนนี้มีขนาดบิตแมปสามขนาด (1x, 2x, 3x) นั่นหมายความว่าคุณต้องอัปโหลดภาพสามภาพไปยังเนื้อหาของคุณ นั่นเป็นสามโอกาสที่จะลากและวางภาพผิดโดยไม่ได้ตั้งใจ เมื่อคุณใช้เนื้อหาเวกเตอร์ (ซึ่งปรากฏเป็นสากลใน Xcode) คุณจะต้องอัปโหลดเพียงภาพเดียวแทนที่จะเป็นสามภาพ มีโอกาสน้อยกว่าที่จะอัปโหลดขนาดหรือรูปภาพที่ไม่ถูกต้อง
  2. ความเร็ว. เหตุผลเดียวกับ # 1 หากคุณใช้รูปภาพจำนวนมากในแอปการใช้เนื้อหาเวกเตอร์จะช่วยลดจำนวนภาพที่คุณต้องอัปโหลดลงหนึ่งในสาม
  3. การพิสูจน์ในอนาคต ปัจจุบัน iPhone ใช้ภาพสามขนาดเท่านั้น (1x, 2x, 3x) สิ่งนี้เกี่ยวข้องกับคุณภาพเรตินาที่เพิ่มขึ้นของหน้าจอ เมื่อ Apple เปิดตัวหน้าจอเรตินาสูงเมื่อไม่กี่ปีที่ผ่านมาจำนวนพิกเซลต่อจุดเพิ่มขึ้นเพื่อให้ได้ภาพที่คมชัดขึ้น

    ดูเหมือนว่าจะมีความเป็นไปได้สูงมากที่การเพิ่มขึ้นของเทคโนโลยีที่คล้ายคลึงกันจะยังคงเกิดขึ้น ในอนาคตเราอาจต้องอัปโหลดภาพ 4x, 5x และ 6x หากเราใช้เนื้อหาเวกเตอร์แอปจะปรับขนาดภาพให้เรา สิ่งนี้ช่วยให้เราไม่ต้องลดขนาดใหม่ของเนื้อหาบิตแมป

    แม้ว่าฉันต้องยอมรับว่าฉันสับสนเล็กน้อยเกี่ยวกับเรื่องนี้เนื่องจากเนื้อหาเวกเตอร์ของ iPhone ดูเหมือนจะไม่สามารถใช้งานอัลกอริทึมได้จริง ดังนั้นฉันไม่แน่ใจว่าพวกเขาจะปรับขนาดให้ใหญ่ขึ้นโดยอัตโนมัติได้อย่างไร แต่ที่ปรึกษาที่ชาญฉลาดของฉันอธิบายเรื่องนี้และฉันก็เชื่อใจเขา!

ข้อเสียใหญ่ประการหนึ่งสำหรับการใช้เนื้อหาเวกเตอร์ใน Xcode คือสถานที่ส่วนใหญ่ไม่ได้ให้.pdfไฟล์ คุณต้องแปลงจาก.svgตัวคุณเอง

อัปเดตเมื่อวันที่ 18 มิถุนายน 2560 : Apple ประกาศใน WWDC ว่าตอนนี้ iOS รองรับภาพสเกลาร์จริงแล้ว! หรืออย่างน้อยนั่นคือสิ่งที่ฉันคิดว่าพวกเขาประกาศ ตอนนี้มีเหตุผลมากขึ้นในการใช้เครื่องชั่งเดียว

วิธีอัปโหลดเนื้อหาเวกเตอร์

ไปที่เมนูแอตทริบิวต์ เปลี่ยนเครื่องชั่งเป็น "มาตราส่วนเดียว" และเลือกช่องปรับขนาดเพื่อ "เก็บรักษาข้อมูลเวกเตอร์" การดำเนินการนี้จะเปลี่ยนตัวเลือกการอัปโหลดเป็น "ทั้งหมด" แทนที่จะเป็น 1x, 2x, 3x

ถัดไปคุณลากและวาง.pdfไฟล์ของคุณลงในช่องเดียว ฉันยังไม่แน่ใจว่าจะแปลง.svgเป็น.pdfอย่างไร แต่ฉันคิดว่ามันค่อนข้างง่ายกับ Preview

วิธีการอัพโหลดไฟล์. png

หากคุณตัดสินใจที่จะดำเนินการต่อ.pngคุณจะต้องอัปโหลดไฟล์สามเวอร์ชัน เพื่อให้ครอบคลุมความละเอียดหน้าจอที่แตกต่างกันของ iPhone รุ่นต่างๆ

ขั้นแรกตรวจสอบให้แน่ใจว่าตัวเลือก "เครื่องชั่ง" ในเมนูแอตทริบิวต์ถูกตั้งค่าเป็น "เครื่องชั่งเดี่ยว" นี่เป็นตัวเลือกเริ่มต้นและจะแสดงช่องสามช่องที่คุณควรเติม:

อย่างที่สองค้นหารูปภาพที่คุณต้องการใช้ในแอปของคุณ สมมติว่าเป็นไอคอนนี้:

ว้าวมันใหญ่มาก เป็นเพราะฉันดาวน์โหลดเวอร์ชัน 512 พิกเซลจากไซต์ อย่างไรก็ตามฉันต้องการให้รูปภาพมีขนาด 20 x 20 พิกเซลในแอปของฉันเท่านั้น ในการแปลงภาพเป็น 20 พิกเซลฉันจะปรับขนาดใน Preview

ทำสำเนาภาพต้นฉบับสามชุด zen.pngชื่อของภาพของคุณควรมีลักษณะบางอย่างเช่นนี้ [email protected], [email protected], ส่วนที่สำคัญคือไฟล์ทั้งหมดที่มีชื่อเดียวกัน (ที่นี่ฉันใช้zen) และสองของพวกเขาจบลงด้วยและ@2x @3xเมื่อคุณใช้หลักการตั้งชื่อนี้ Xcode จะสามารถค้นหาขนาดที่ถูกต้องโดยอัตโนมัติตามประเภทอุปกรณ์

จากนั้นเปิดภาพใน Preview และไปที่ Tools> Adjust size เพื่อเปิดเมนูด้านล่าง ระบุ 20 x 20 พิกเซล กดตกลงและบันทึกการเปลี่ยนแปลง zen.pngนี่คือภาพฐานของคุณ

ทำสิ่งเดียวกันสำหรับ[email protected]. ควรมีขนาด 40 x 40 พิกเซลเท่านั้น อีกครั้งสำหรับ[email protected]. จะมีขนาด 60 x 60 พิกเซล

ตอนนี้คุณสามารถลากและวางภาพลงในกล่องที่ถูกต้องใน Xcode เสร็จแล้ว!