คู่มือเริ่มต้นเกี่ยวกับวิธีการออกแบบแอพมือถือ Ionic 2

ไงพวก! ในโพสต์นี้ฉันจะแนะนำคุณอย่างละเอียดทีละขั้นตอนเกี่ยวกับวิธีการออกแบบแอปพลิเคชัน Ionic 2 โดยใช้ SCSS

เพื่อให้ได้ประโยชน์สูงสุดจากคำแนะนำนี้มันเป็นการดีที่จะมีความรู้มาก่อนเกี่ยวกับ CSS และ Ionic แต่ก็ไม่จำเป็น หากคุณไม่คุ้นเคยกับกรอบ Ionic 2 ฉันขอแนะนำให้ตรวจสอบเอกสารของ Ionic 2

คำแนะนำแบบ

Ionic 2 นำสิ่งต่าง ๆ มากมายมาไว้บนโต๊ะ (ถ้าคุณไม่ได้เริ่มจากนั่งร้านเปล่า) คุณได้รับแอพและมันก็มีสไตล์ที่สวยมากอยู่แล้ว แต่ถ้าคุณต้องการเปลี่ยนแปลงมันจะยุ่งยากเล็กน้อยถ้าคุณเป็นมือใหม่

ในการติดตั้งปลั๊กอินที่จำเป็นเราต้องเริ่มทำงานกับ Ionic เราต้องดาวน์โหลดและติดตั้ง NodeJS หลังจากนั้นคุณสามารถติดตั้ง Cordova และ Ionic จากเทอร์มินัลของคุณโดยรันคำสั่งนี้:

$ npm ติดตั้ง -g ionic cordova

เราจะต้องติดตั้ง Typescript ซึ่งเป็นภาษา Ionic 2 ที่ถูกสร้างขึ้นด้วย เรียกใช้คำสั่งนี้:

$ npm install -g typescript

เพื่อให้คำแนะนำแบบเน้นส่วนใหญ่นี้เกี่ยวกับการออกแบบเราจะใช้แอพพลิเคชั่นที่สร้างไว้ล่วงหน้าพร้อมกับการออกแบบขั้นพื้นฐาน

สร้างแอปพลิเคชันแท็บ Ionic 2 โดยใช้คำสั่งนี้ในเทอร์มินัลของคุณ:

$ ionic เริ่มแท็บ myTabs --v2

คุณจะได้รับแอปพลิเคชันพร้อมแท็บเพื่อให้คุณสามารถนำทางระหว่างมุมมองต่างๆ คุณสามารถทดสอบมันในเบราว์เซอร์โดยการพิมพ์ใน terminal ของคุณ!

บริการ $ ionic
อย่างที่คุณเห็นไอออนิกจะปรับแต่งส่วนประกอบต่าง ๆ สำหรับแต่ละแพลตฟอร์ม ฉันจะอธิบายเพิ่มเติมเกี่ยวกับวิธีการออกแบบเฉพาะแพลตฟอร์มด้านล่าง คุณยังได้ชุดสีมาตรฐานอีกด้วยและมันก็ดูค่อนข้างธรรมดา

เปลี่ยนชุดรูปแบบสีด้วย $ colours

เปิดแอพขึ้นมาในโปรแกรมแก้ไขข้อความ (ฉันใช้ WebStorm IDE โดย Jetbrains btw)

จากนั้นเริ่มต้นโดยไปที่ไฟล์นี้:

src ธีม / / variables.scss

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

หากต้องการแสดงให้คุณเห็นว่ามันทำงานอย่างไรเพียงแค่เปลี่ยนสีฐานสิบหกบนตัวหลักด้วยตัวอย่างเช่น "สีแดง"

มันจะส่งผลในสิ่งนี้:

ส่วนประกอบทั้งหมดที่ใช้สีหลักจะถูกตั้งค่าเป็นสีหลักซึ่งเป็นสีแดง

คุณสามารถใช้สีเหล่านี้ได้อย่างง่ายดายในองค์ประกอบใด ๆ ตอนนี้ฉันจะแสดงให้คุณเห็นว่าคุณทำได้อย่างไร!

นำทางไปยังไฟล์นี้:

src / หน้า / home / home.scss

ในไฟล์นี้เราเพิ่ม SCSS เฉพาะหน้าซึ่งหมายความว่าสไตล์ที่คุณเพิ่มที่นี่จะถูกนำไปใช้กับหน้าแรกเท่านั้น

เราจะเปลี่ยนสีของข้อความ h2“ ยินดีต้อนรับสู่อิออน!” เป็นสีหลัก (สีแดง) ในการทำเช่นนั้นเราจะต้องเพิ่มแท็ก h2 ในหน้าแรกและแทนที่สีเพื่อ map-get ($ colours, primary) สิ่งนี้จะดึงตัวแปร $ colors และค่าของคีย์“ primary”

นี่คือผลลัพธ์ที่ได้จาก:

ตอนนี้สี h2 ก็เป็นสีแดงเช่นกัน! ภารกิจสำเร็จแล้ว!

ในขณะนี้คุณอาจทราบแล้วว่าคุณสามารถใช้ปุ่มใด ๆ ในตัวแปร $ colors ลองเล่นกับมันสักหน่อยแม้แต่เพิ่มใหม่บ้าง!

การใช้ $ colours เป็นวิธีที่ดีในการติดตามสีทั้งหมดในแอพ คุณสามารถเปลี่ยนสีขององค์ประกอบขนาดใหญ่ในเวลาเดียวกันได้อย่างง่ายดาย แทนที่จะต้องซูมเข้าองค์ประกอบที่แตกต่างกันทั้งหมดและเปลี่ยนสีด้วยตนเองเช่นเดียวกับที่คุณต้องทำถ้าไม่ใช้ SCSS

การเอาชนะตัวแปร Ionic

ใน“ src / theme / ตัวแปร.scss” คุณสามารถเปลี่ยนการออกแบบที่ทำไว้ล่วงหน้าของ Ionics จำนวนมาก ตัวอย่างเช่นเราต้องการเปลี่ยนสีของแถบเครื่องมือที่ไอออนิกได้ออกแบบมาสำหรับเรา เราสามารถนำทางไปยังเอกสาร Ionic 2 และค้นหา“ แถบเครื่องมือ” หากคุณเลื่อนลงมาเล็กน้อยคุณจะพบ“ แถบเครื่องมือ - พื้นหลัง” นี่คือสิ่งที่เราต้องการ ที่นี่คุณจะเห็นว่าสีชุดรูปแบบเริ่มต้นถูกตั้งค่าเป็น“ # f8f8f8”

เราจะเปลี่ยนสีของแถบเครื่องมือนี้เป็นสีหลักของเรา นำทางไปยังไฟล์“ variables.scss” ของคุณและเพิ่มสิ่งนี้:

$ แถบเครื่องมือพื้นหลัง: แผนที่รับ ($ สีหลัก);

และ voila พื้นหลังแถบเครื่องมือทั้งหมดของคุณในแอปของคุณจะกลายเป็นสีหลักของเราซึ่งก่อนหน้านี้เราตั้งค่าเป็นสีแดง!

หืม แต่ถ้าหากคุณคิดว่าแถบเครื่องมือนั้นเล็กเกินไป และต้องการเพิ่มความสูงของมัน? คุณสามารถทำสิ่งนี้ในวิธีที่คล้ายกันมาก!

ไปที่หน้าตัวแปรการเอาชนะในเอกสารคู่มือ Ionic 2 และค้นหาความสูงของแถบเครื่องมือ

ที่ด้านล่างคุณจะเห็น $ toolbar-ios-height, $ toolbar-md-height และ $ toolbar-wp-height เหล่านี้เป็นแถบเครื่องมือที่แตกต่างกันสำหรับทั้งสามแพลตฟอร์มที่คุณกำลังพัฒนา! ios = Iphone, md = Android และ wp = Windows Phone หากต้องการทดสอบให้เลือกแถบเครื่องมือ iOS แล้ววางลงใน“ variable.scss” และเพียงแค่ตั้งค่าใหม่ให้กับมันดังนี้:

ที่จะส่งผลในเรื่องนี้:

อย่างที่คุณเห็นแถบเครื่องมือบน iOS มีขนาดใหญ่มาก อย่าลังเลที่จะทดลองใช้สิ่งนี้และลองค้นหาส่วนประกอบเพิ่มเติมที่คุณสามารถแทนที่สไตล์ได้ หากคุณไม่ทราบชื่อส่วนประกอบที่คุณกำลังค้นหาคุณสามารถคลิกขวาที่ส่วนประกอบในเบราว์เซอร์และค้นหาชื่อคลาสของส่วนประกอบจากนั้นใช้สิ่งนั้นเพื่อค้นหาในเอกสาร Ionic 2!

นอกจากนี้คุณยังสามารถกระตุ้นใน github repo ของ Gonic สำหรับองค์ประกอบที่แตกต่างกันและดูว่ามีตัวแปรใดบ้าง

ใช้ประโยชน์จากการออกแบบเฉพาะแพลตฟอร์มที่กำหนดเอง

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

เพื่อแสดงให้เห็นสิ่งนี้เราจะเปลี่ยนสีของข้อความ

บนแพลตฟอร์ม iOS

นำทางไปยังไฟล์นี้:

src / app / app.scss

ที่นี่คุณสามารถเพิ่มตัวแปร SCSS ทั่วโลกได้ หมายความว่าสไตล์ที่คุณใส่ที่นี่จะถูกนำไปใช้กับแอพทั้งหมด

ในการทำให้ข้อความ“

” บน iOS เป็นสีเขียวเพียงแค่เพิ่ม SCSS นี้ลงในไฟล์นั้น:

.ios {
  p {
    สี: สีเขียว;
  }
}

นั่นจะส่งผลให้เกิดสิ่งนี้! :)

ฉันคิดว่านี่เป็นหนึ่งในคุณสมบัติที่มีค่าที่สุดในสไตล์ของ Ionic 2

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

ฉันจะจบคำแนะนำแบบของฉันที่นี่และปล่อยให้คุณทำมัน! ลองเล่นให้มากที่สุดเท่าที่จะทำได้และยังมีอีกมากมายให้เรียนรู้เกี่ยวกับ Ionic 2 ฉันเพิ่งจะครอบคลุมพื้นฐานการออกแบบ

แต่จำไว้ว่าเมื่อคุณเข้าใจวิธีการทำสิ่งนี้ทั้งหมดคุณจะสามารถรวมทุกสิ่งเพื่อสร้างแอปพลิเคชันที่ดูดีมาก ๆ !

ฉันจะทำโพสต์ที่คล้ายกันในอนาคตเกี่ยวกับด้านอื่น ๆ ของกรอบ Ionic 2 เช่นวิธีการใช้ Api ของการทดสอบ E2E และสิ่งที่สนุกอื่น ๆ

ฉันผลักผลลัพธ์ของคำแนะนำนี้ไปที่ Github ของฉันหากคุณต้องการลองดู!

แล้วพบกันเร็ว ๆ นี้!