برنامه کد AppCard را امتحان کنید

این صفحه نحوه پیاده‌سازی AppCard را شرح می‌دهد.

مرحله ۱: تمام ایمپورت‌ها را اضافه کنید

1. برای اضافه کردن ایمپورت‌ها:

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

مرحله 2: SimpleAppCardContentProvider را به مانیفست خود اضافه کنید

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 را به مانیفست اضافه کنید

1. برای افزودن SimpleAppCardContentProvider به مانیفست:

   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"
     }
   }
   

مرحله ۴: ایجاد یک 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.

مرحله ۵: فعال کردن کلیک دکمه

برای فعال کردن کلیکر:

   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
      }
    }

برای مثال:

شکل ۲. فعال کردن کلیک دکمه.

مرحله ۶: تصویر هدر را به‌روزرسانی کنید

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. این فرآیند را برای افزودن تصویر به هر مؤلفه‌ای که از آن پشتیبانی می‌کند، تکرار کنید.

مرحله ۷: تعاملات بیشتری اضافه کنید

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")

شکل ۴. یک دکمه اضافه کنید.

شکل ۵. دکمه رندر شده.

مرحله ۸: شروع فعالیت

1. در صورتی که برنامه شما با [ background-starts#exceptions ][1 ] مطابقت داشته باشد، می‌توانید یک اکتیویتی را از 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. برای شروع activity، یک دکمه در AppCard اضافه کنید. اگر هیچ دکمه‌ای وجود ندارد، یک activity مسیریابی به برنامه خود اضافه کنید:

   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 حذف شد. AppCard به شکل زیر نمایش داده می‌شود:

شکل ۶. AppCard بدون دکمه کلیک.

[1]: https://developer.android.com/guide/components/activities/background-starts#exceptions