AppCard कोडलैब आज़माएं

इस पेज पर, AppCard को लागू करने का तरीका बताया गया है.

पहला चरण: सभी इंपोर्ट जोड़ें

1. इंपोर्ट जोड़ने के लिए:

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

दूसरा चरण: अपने मेनिफ़ेस्ट में 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>
   

तीसरा चरण: मेनिफ़ेस्ट में 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 का पालन करता है, तो बटन के 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()
         )
       ...
   }
   

जगह की कमी की वजह से, AppCardHost में क्लिकर बटन हटा दिया गया है. AppCard इस तरह दिखता है:

छठी इमेज. क्लिकर बटन के बिना AppCard.