ลองใช้ Codelab เกี่ยวกับ AppCard

หน้านี้จะอธิบายวิธีติดตั้งใช้งาน AppCard

ขั้นตอนที่ 1: เพิ่มการนำเข้าทั้งหมด

  1. วิธีเพิ่มการนำเข้า

    static_libs: [
     …
     "car-app-card",
],

ขั้นตอนที่ 2: เพิ่ม SimpleAppCardContentProvider ลงในไฟล์ Manifest

  1. อย่าลืมแทนที่ android:authorities (ตัวหนา) ด้วยชื่อแพ็กเกจของคุณ

    <!-- App Card Content Provider that is required to communicate
     relevant App Cards with the system
     android.car.permission.BIND_APP_CARD_PROVIDER is an essential permission
     that will only allow the system to communicate with the
     AppCardContentProvider
     The content provider must also be exported and enabled -->
     <provider android:name=".SimpleAppCardContentProvider"
         android:authorities="com.example.appcard.sample" 
         android:permission="@string/host_permission"
         android:exported="true"
         android:enabled="true">
         <intent-filter>
            <!-- This intent filter will allow the system to find and
                 connect with the application's AppCardContentProvider -->
             <action android:name="com.android.car.appcard.APP_CARD_PROVIDER" />
            </intent-filter>
     </provider>

ขั้นตอนที่ 3: เพิ่ม SimpleAppCardContentProvider ลงในไฟล์ Manifest

  1. วิธีเพิ่ม SimpleAppCardContentProvider ลงในไฟล์ Manifest

    class SimpleAppCardContentProvider : AppCardContentProvider() {
  /** Must return same authority as defined in manifest */
  override val authority: String = AUTHORITY

  /** Setup [AppCardContentProvider] and its constituents */
  override fun onCreate(): Boolean {
    return super.onCreate()
  }

  /** Setup an [AppCard] that is being requested */
  override fun onAppCardAdded(id: String, ctx: AppCardContext): AppCard {
    return when (id) {
      APPCARD_ID -> //TODO: create app card

      else -> throw IllegalStateException("Unidentified app card ID: $id")
    }
  }

  /** List of supported [AppCard] IDs */
​   ​override val appCardIds: List<String> = listOf(APPCARD_ID).toMutableList()

  /** Clean up when an [AppCard] is removed */
  override fun onAppCardRemoved(id: String) {
    when (id) {
      APPCARD_ID -> //TODO: create app card
    }
  }

  /** Handle an [AppCardContext] change for a particular [AppCard] ID */
  override fun onAppCardContextChanged(
    id: String,
    appCardContext: AppCardContext
  ) {
     when (id) {
      APPCARD_ID -> //TODO: update AppCardContext
    }
  }

  companion object {
    private const val AUTHORITY = "com.example.appcard.sample"
    private const val APPCARD_ID = "sampleAppCard"
  }
}

ขั้นตอนที่ 4: สร้าง AppCard

  1. วิธีสร้าง AppCard

    override fun onAppCardAdded(id: String, ctx: AppCardContext): AppCard {
  return when (id) {
    APPCARD_ID -> createAppCard(ctx)

    else -> throw IllegalStateException("Unidentified app card ID: $id")
  }
}

private fun createAppCard(appCardContext: AppCardContext): ImageAppCard {
  return ImageAppCard.newBuilder(APPCARD_ID)
    .setPrimaryText("Hello")
    .setSecondaryText("World")
    .setHeader(
      Header.newBuilder("header")
        .setTitle("Code Lab")
        .build()
    )
    .addButton(
      Button.newBuilder(
        "button",
        Button.ButtonType.PRIMARY,
        object : OnClickListener {
          override fun onClick() {
            //no-op
          }
        }
      )
        .setText("Click me!")
        .build()
    )
   .build()
}

เช่น

สร้าง AppCard

รูปที่ 1 สร้าง AppCard

ขั้นตอนที่ 5: เปิดใช้โปรแกรมคลิกปุ่ม

วิธีเปิดใช้คลิกเกอร์

   private var clickCounter = 0

   private fun createAppCard(appCardContext: AppCardContext): ImageAppCard {
      ...
       .addButton(
        Button.newBuilder(
          "button",
           Button.ButtonType.PRIMARY,
           object : OnClickListener {
             override fun onClick() {
               clickCounter++
               sendAppCardUpdate(createAppCard(appCardContext))
             }
           }
         )
           .setText(
             if (clickCounter == 0) "Click me!" else "Clicked: $clickCounter"
           )
           .build()
         )
      ...
    }

    override fun onAppCardRemoved(id: String) {
      when (id) {
        APPCARD_ID -> clickCounter = 0
      }
    }

เช่น

เปิดใช้โปรแกรมคลิกปุ่ม

รูปที่ 2 เปิดใช้โปรแกรมคลิกปุ่ม

ขั้นตอนที่ 6: อัปเดตรูปภาพส่วนหัว

  1. วิธีอัปเดตรูปภาพในส่วนหัว

      private fun createAppCard(appCardContext: AppCardContext): ImageAppCard {
    val headerImageSize = appCardContext.imageAppCardContext.getMaxImageSize(Header::class.java)
    val logo = resToBitmap(
     android.R.drawable.ic_menu_compass,
       headerImageSize.width,
       headerImageSize.height
    )

 ...
   .setHeader(
     Header.newBuilder("header")
       .setTitle("Code Lab")
       .setImage(
         Image.newBuilder("image")
           .setContentScale(Image.ContentScale.FILL_BOUNDS)
           .setColorFilter(Image.ColorFilter.TINT)
           .setImageData(logo)
           .build()
       )
       .build()
    )
  ...
  }

  private fun resToBitmap(res: Int, width: Int, height: Int): Bitmap {
    val drawable = context?.getDrawable(res)

    return drawableToBitmap(drawable!!, width, height)
  }

  private fun drawableToBitmap(d: Drawable, width: Int, height: Int): Bitmap {
    val bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888)

    val canvas = Canvas(bitmap)
    val left = 0
    val top = 0
    d.setBounds(left, top, canvas.width, canvas.height)
    d.draw(canvas)

    return bitmap
 }
 ```

For example:

![Change the image in the header](/docs/automotive/unbundled_apps/appcards/images/ceramic-06.png)

**Figure 3.** Change the name to the header.

  2. ทำขั้นตอนนี้ซ้ำเพื่อเพิ่มรูปภาพลงในคอมโพเนนต์ที่รองรับ

ขั้นตอนที่ 7: เพิ่มการโต้ตอบ

  1. วิธีสร้างแถบความคืบหน้าพร้อมตัวควบคุม

     private var progressOn = false

 private var progressTimer: Timer? = null

 private var progressCounter = 0

 override fun onAppCardRemoved(id: String) {
   when (id) {
     APPCARD_ID -> {
       clickCounter = 0
       progressCounter = 0
       progressTimer?.cancel()
     }
   }
 }

 private fun createAppCard(appCardContext: AppCardContext): ImageAppCard {
   val buttonImageSize = appCardContext.imageAppCardContext.getMaxImageSize(Button::class.java)
   val progressPlayPauseImage = resToBitmap(
     if (progressOn) {
       android.R.drawable.ic_media_pause
     } else {
       android.R.drawable.ic_media_play
     },
     buttonImageSize.width,
     buttonImageSize.height
   )
   ...
     .setProgressBar(
       createProgressBar()
     )
     .addButton(
       Button.newBuilder(
         "progressButton",
         Button.ButtonType.NO_BACKGROUND,
         object : OnClickListener {
           override fun onClick() {
             progressOn = !progressOn
             if (progressOn) {
               progressTimer = Timer()
               progressTimer?.scheduleAtFixedRate(object : TimerTask() {
                 override fun run() {
                 progressCounter++
                 if (progressCounter > 60) progressCounter = 0
                 sendAppCardComponentUpdate(APPCARD_ID, createProgressBar())
               }
             }, SECONDS_TO_MS, SECONDS_TO_MS)
           } else {
             progressTimer?.cancel()
             progressTimer = null
           }
           sendAppCardUpdate(createAppCard(appCardContext))
         }
       }
     )
       .setImage(
         Image.newBuilder("buttonImage")
           .setContentScale(Image.ContentScale.FILL_BOUNDS)
           .setColorFilter(Image.ColorFilter.TINT)
           .setImageData(progressPlayPauseImage)
           .build()
       )
       .build()
   )
 ...
 }

 private fun createProgressBar(): ProgressBar {
   return ProgressBar.newBuilder(PROGRESS_BAR_ID, 0, 60)
     .setProgress(progressCounter)
     .build()
 }

 companion object {
   ...
   private const val PROGRESS_BAR_ID = "progress"
   private const val SECONDS_TO_MS = 1000L
 }

เราได้เพิ่มปุ่มเล่นหรือหยุดชั่วคราวลงในแถบความคืบหน้าซึ่งอัปเดตได้ทุกวินาที เนื่องจากข้อจำกัดด้านขนาด โปรดดูsetTextที่ปุ่มคลิกเกอร์ ที่เพิ่มเข้ามาเพื่อแสดงจำนวนคลิก .setText("$clickCounter")

รูปที่ 4 เพิ่มปุ่ม

รูปที่ 5 ปุ่มที่แสดง

ขั้นตอนที่ 8: เปิดตัวกิจกรรม

  1. หากแอปของคุณเป็นไปตามbackground-starts#exceptions คุณจะเปิดกิจกรรมจาก onClickListener ของปุ่มได้

    class SampleRoutingActivity : AppCompatActivity() {
  override fun onStart() {
    super.onStart()
    val intent = Intent(ACTION_LOCATION_SOURCE_SETTINGS).apply {
      setFlags(FLAG_ACTIVITY_CLEAR_TOP)
    }
    startActivity(intent)
    finish()
  }
}

  2. หากต้องการเริ่มกิจกรรม ให้เพิ่มปุ่มใน AppCard หากไม่มี ให้เพิ่ม กิจกรรมการกำหนดเส้นทางลงในแอปโดยทำดังนี้

    override fun onStart() {
super.onStart()
val intent = Intent(ACTION_LOCATION_SOURCE_SETTINGS).apply {
  setFlags(FLAG_ACTIVITY_CLEAR_TOP)
}
startActivity(intent)
finish()
 }
}

    เมื่อเรียกใช้คลาส ระบบจะเปลี่ยนเส้นทางผู้ใช้ไปยังการตั้งค่าตำแหน่ง setFlags(FLAG_ACTIVITY_CLEAR_TOP) เพื่อให้มั่นใจว่าผู้ใช้จะไม่สามารถ กลับไปที่กิจกรรมเดิมได้

  3. เพิ่มปุ่มใน AppCard เพื่อเริ่มกิจกรรมโดยทำดังนี้

     private fun createAppCard(appCardContext: AppCardContext): ImageAppCard {
   val locationImage = resToBitmap(
     android.R.drawable.ic_menu_call,
     buttonImageSize.width,
     buttonImageSize.height
   )
   ...
     .addButton(
       Button.newBuilder(
        "activityButton",
        Button.ButtonType.SECONDARY,
        object : OnClickListener {
          override fun onClick() {
            // no-op
          }
        }
       )
        .setImage(
          Image.newBuilder("locationButtonImage")
            .setContentScale(Image.ContentScale.FILL_BOUNDS)
            .setColorFilter(Image.ColorFilter.TINT)
            .setImageData(locationImage)
            .build()
        )
        .setIntent(
          RoutingActivityIntent
            .newBuilder("com.example.appcard.sample.SampleRoutingActivity")
            .build()
        )
        .build()
      )
    ...
}

เนื่องจากข้อจำกัดด้านพื้นที่ เราจึงนำปุ่มคลิกเกอร์ออกใน AppCard host AppCard จะปรากฏดังนี้

นำปุ่มออกแล้ว

รูปที่ 6 AppCard ที่ไม่มีปุ่มคลิก