สร้างไอคอนแอป (มุมมอง)

การติดตั้งใช้งาน Jetpack Compose

หน้านี้มีข้อมูลเกี่ยวกับการสร้างและการใช้ไอคอนแอปที่ ใช้ได้เฉพาะกับเลย์เอาต์ที่อิงตาม View ดูข้อมูลที่ครอบคลุมเพิ่มเติมเกี่ยวกับการสร้าง ไอคอนแอปได้ที่สร้างไอคอนแอป ซึ่งครอบคลุม เฟรมเวิร์ก UI ที่แนะนํา

สร้างแถบการดำเนินการหรือไอคอนแท็บ

ใช้ สตูดิโอเนื้อหารูปภาพ เพื่อสร้างไอคอนแถบการดำเนินการและแท็บ สำหรับเลย์เอาต์ที่อิงตาม View

ไอคอนแถบการดำเนินการเป็นองค์ประกอบกราฟิกที่อยู่ในแถบการดำเนินการและแสดงรายการการทำงานแต่ละรายการ ดูข้อมูลเพิ่มเติมได้ที่การเพิ่มและการจัดการ การดำเนินการ แถบแอป - Material Design {:.external} และการออกแบบแถบการดำเนินการ

ไอคอนแท็บเป็นองค์ประกอบกราฟิกที่ใช้แสดงแท็บแต่ละแท็บในอินเทอร์เฟซแบบหลายแท็บ ไอคอนแท็บแต่ละรายการมี 2 สถานะ ได้แก่ ไม่ได้เลือกและเลือกแล้ว ดูข้อมูลเพิ่มเติมได้ที่ การสร้างมุมมองการปัดด้วยแท็บและแท็บ - Material Design

สตูดิโอเนื้อหารูปภาพ จะวางไอคอนในตำแหน่งที่เหมาะสมใน res/drawable-<density>/ ไดเรกทอรี

เราขอแนะนำให้คุณใช้สไตล์ Material Design สำหรับไอคอนแถบการดำเนินการและแท็บ แม้ว่าคุณจะรองรับ Android เวอร์ชันเก่าก็ตาม ใช้ appcompat และไลบรารีสนับสนุนอื่นๆ เพื่อส่ง UI ของ Material Design ไปยังแพลตฟอร์มเวอร์ชันเก่า

คุณสามารถใช้ Vector Asset Studio เพื่อสร้างไอคอนแถบการดำเนินการและแท็บแทนการใช้สตูดิโอเนื้อหารูปภาพได้ Vector drawables เหมาะสำหรับไอคอนที่เรียบง่ายและช่วยลดขนาดของแอปได้

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

  1. ในช่องประเภทไอคอน ให้เลือกไอคอนแถบการดำเนินการและแท็บ

  2. เลือกประเภทชิ้นงาน แล้วระบุชิ้นงานในช่อง ด้านล่าง

    • คลิกปุ่มในช่องภาพคลิปอาร์ต

      ในกล่องโต้ตอบเลือกไอคอน ให้เลือกไอคอน Material แล้วคลิกตกลง

    • ในช่องเส้นทาง ให้ระบุเส้นทางและชื่อไฟล์ของรูปภาพ คลิก ... เพื่อใช้กล่องโต้ตอบ

    • ในช่องข้อความ ให้พิมพ์สตริงข้อความและเลือกแบบอักษร

    ไอคอนจะปรากฏในส่วนชิ้นงานต้นฉบับทางด้านขวา และใน พื้นที่แสดงตัวอย่างที่ด้านล่างของวิซาร์ด

  3. เปลี่ยนชื่อและตัวเลือกการแสดงผล (ไม่บังคับ)

    • ชื่อ - หากไม่ต้องการใช้ชื่อเริ่มต้น ให้พิมพ์ชื่อใหม่ หากชื่อทรัพยากรนั้นมีอยู่ในโปรเจ็กต์แล้วตามที่ระบุโดยข้อผิดพลาดที่ด้านล่างของวิซาร์ด ระบบจะเขียนทับชื่อทรัพยากรนั้น ชื่อมีได้เฉพาะอักขระตัวพิมพ์เล็ก ขีดล่าง และตัวเลขเท่านั้น

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

    • ระยะห่างจากขอบ - หากต้องการปรับระยะห่างจากขอบของชิ้นงานต้นฉบับในทั้ง 4 ด้าน ให้เลื่อนแถบเลื่อน เลือกค่าระหว่าง -10% ถึง 50% หากคุณเลือกตัดด้วย ระบบจะตัดก่อน

    • ธีม - เลือก HOLO_LIGHT หรือ HOLO_DARK หรือหากต้องการ ระบุสีในกล่องโต้ตอบเลือกสี ให้เลือกกำหนดเอง แล้ว คลิกช่องสีที่กำหนดเอง

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

  4. คลิกถัดไป

  5. เปลี่ยนไดเรกทอรีทรัพยากร (ไม่บังคับ)

    • ไดเรกทอรี Res - เลือกชุดซอร์สทรัพยากรที่คุณต้องการ เพิ่มชิ้นงานรูปภาพ: src/main/res, src/debug/res, src/release/res หรือชุดซอร์สที่ผู้ใช้กำหนด ชุดซอร์สหลัก ใช้กับตัวแปรบิลด์ทั้งหมด รวมถึงตัวแปรบิลด์สำหรับดีบักและรีลีส ชุดซอร์สสำหรับดีบักและชุดซอร์สสำหรับรุ่นจะลบล้างชุดซอร์สหลักและมีผลกับบิลด์เวอร์ชันใดเวอร์ชันหนึ่ง ชุดซอร์สการแก้ไขข้อบกพร่องมีไว้สำหรับการแก้ไขข้อบกพร่องเท่านั้น หากต้องการ กำหนดชุดซอร์สใหม่ ให้เลือกไฟล์ > โครงสร้างโปรเจ็กต์ > แอป > ประเภทบิลด์ เช่น คุณอาจกำหนดชุดแหล่งข้อมูลเบต้า และสร้างไอคอนเวอร์ชันที่มีข้อความ "เบต้า" ที่ มุมขวาล่าง ดูข้อมูลเพิ่มเติมได้ที่กำหนดค่า Build Variants

    ส่วนไดเรกทอรีเอาต์พุตจะแสดงรูปภาพและโฟลเดอร์ที่รูปภาพจะปรากฏในมุมมองไฟล์โปรเจ็กต์ของหน้าต่างโปรเจ็กต์

  6. คลิกเสร็จสิ้น

    สตูดิโอเนื้อหารูปภาพ จะเพิ่มรูปภาพในโฟลเดอร์ drawable สำหรับความหนาแน่นต่างๆ

อ้างอิงถึงทรัพยากรรูปภาพในโค้ด

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

  • ในกรณีส่วนใหญ่ คุณสามารถอ้างอิงทรัพยากรรูปภาพเป็น @drawable ในโค้ด XML หรือ Drawable ในโค้ด Java

    ตัวอย่างเช่น โค้ด XML ของเลย์เอาต์ต่อไปนี้จะแสดง Drawable ใน ImageView

    <ImageView
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:src="@drawable/myimage" />

    โค้ด Java ต่อไปนี้จะดึงรูปภาพเป็น Drawable

    Kotlin

    val drawable = resources.getDrawable(R.drawable.myimage, theme)

    Java

    Resources res = getResources();
Drawable drawable = res.getDrawable(R.drawable.myimage, getTheme());

    เมธอด getResources() อยู่ในคลาส Context ซึ่งใช้กับออบเจ็กต์ UI เช่น กิจกรรม, Fragment, เลย์เอาต์, View และอื่นๆ

  • หากแอปใช้ไลบรารีการสนับสนุน คุณสามารถอ้างอิงทรัพยากรรูปภาพในโค้ด XML ด้วยคำสั่ง app:srcCompat ได้ เช่น

    <ImageView
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    app:srcCompat="@drawable/myimage" />

คุณเข้าถึงทรัพยากรรูปภาพได้จากเทรดหลักเท่านั้น

หลังจากมีทรัพยากรรูปภาพในไดเรกทอรี res/ ของโปรเจ็กต์แล้ว คุณจะอ้างอิงรูปภาพจากโค้ด Java หรือเลย์เอาต์ XML ได้โดยใช้รหัสทรัพยากร โค้ด Java ต่อไปนี้ตั้งค่า ImageView ให้ใช้ทรัพยากร drawable/myimage.png

Kotlin

findViewById<ImageView>(R.id.myimageview).apply {
    setImageResource(R.drawable.myimage)
}

Java

ImageView imageView = (ImageView) findViewById(R.id.myimageview);
imageView.setImageResource(R.drawable.myimage);

ดูข้อมูลเพิ่มเติมได้ที่เข้าถึงแหล่งข้อมูลของแอป