درس تطبيقي حول الترميز SystemUIOverlayWindow

توضّح هذه الصفحة كيفية إنشاء طريقة عرض في SystemUIOverlayWindow.

قبل البدء

يفترض المحتوى المقدم أدناه أنك قرأت مقالات واجهة مستخدم النظام هذه:

هذه المقالة:

  • افتراض أنّك على دراية بحالات الاستخدام لنظام التشغيل Android Automotive SystemUIOverlayWindow
  • توفّر هذه السمة أمثلة على فئات فرعية معيّنة من السمة OverlayViewController.
  • لا يعالج الفئات الفرعية من OverlayViewController.
  • عدم توضيح كيفية إعداد Android للتطوير
  • لا يصف كل خيار يمكن تجاوزه في الفئات الأساسية. بل إنه يصف فقط تلك اللازمة لإعداد طريقة عرض أساسية.

إكمال الدرس التطبيقي حول الترميز

الخطوة 1: إنشاء تخطيط لـ OverlayViewController

إنشاء ملف باسم frameworks/base/packages/CarSystemUI/res/layout/codelab_layout.xml على ما يلي: 

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/codelab_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/black">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:gravity="center"
            android:text="Code Lab View!"
            android:color="@*android:color/car_accent"
            android:textStyle="italic"
            android:textSize="34sp"/>
        <Button
            android:id="@+id/codelab_button"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="0"
            android:text="Hide!"
            android:background="@*android:color/car_accent"/>
    </LinearLayout>
</FrameLayout>

يُنشئ هذا التنسيق العرض التالي:

وحدة تحكّم المركّبة
الشكل 1. OverlayViewController

الخطوة 2: إضافة ViewStub إلى SysUIOverlayWindow

أضف طريقة العرض إلى نافذتك عن طريق إضافة ViewStub إلى SystemUIOverlayWindow.

أضف التعليمة البرمجية التالية إلى frameworks/base/packages/CarSystemUI/res/layout/sysui_overlay_window.xml في الجذر FrameLayout: 

<ViewStub android:id="@+id/codelab_stub"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:layout="@layout/codelab_layout"/>

يُحدد ترتيب تعريف ViewStubs في الجذر FrameLayout سمة ترتيب Z للعروض في النافذة. نظرًا لأن هذا الدرس التطبيقي لا يتضمن طرق عرض متعددة الطبقات، يمكنك أضِف مقتطف الرمز في أي مكان في جذر FrameLayout.

الخطوة 3: إنشاء OverlayViewController

ولإظهاره وإخفائه، يجب ربط التنسيق الجديد بـ OverlayViewController:

لإنشاء OverlayViewController قابل الحقن باسمه frameworks/base/packages/CarSystemUI/src/com/android/systemui/car/codelab/CodeLabViewController.java تشتمل على المحتوى التالي:

package com.android.systemui.car.codelab;

import com.android.systemui.R;
import com.android.systemui.car.window.OverlayViewController;
import com.android.systemui.car.window.OverlayViewGlobalStateController;
import com.android.systemui.dagger.SysUISingleton;

import javax.inject.Singleton;

@SysUISingleton
public class CodeLabViewController extends OverlayViewController {

    @Inject
    public CodeLabViewController(
            OverlayViewGlobalStateController overlayViewGlobalStateController) {
        super(R.id.codelab_stub, overlayViewGlobalStateController);
    }
}

الخطوة 4: إنشاء OverlayViewMediator

إنّ OverlayViewMediator لتشغيله عند إظهار طريقة عرض جديدة أو إخفائها.

إنشاء OverlayViewMediator جديد قابل للحقن اسمه frameworks/base/packages/CarSystemUI/src/com/android/systemui/car/codelab/CodeLabViewMediator.java تشتمل على المحتوى التالي: 
package com.android.systemui.car.codelab;


import android.bluetooth.BluetoothAdapter;
import android.content.BroadcastReceiver;
import android.content.Context;
import android.content.Intent;
import android.content.IntentFilter;


import com.android.systemui.car.window.OverlayViewMediator;
import com.android.systemui.dagger.SysUISingleton;


import javax.inject.Inject;


@SysUISingleton
public class CodeLabViewMediator implements OverlayViewMediator {
    Context mContext;
    CodeLabViewController mCodeLabViewController;


    @Inject
    public CodeLabViewMediator(Context context, CodeLabViewController codeLabViewController) {
        mContext = context;
        mCodeLabViewController = codeLabViewController;
    }


    @Override
    public void registerListeners() {
        // no-op
    }


    @Override
    public void setupOverlayContentViewControllers() {
        // no-op
    }
}

الخطوة 5: إظهار طريقة العرض

لتسهيل الفهم وتشغيل العرض، استخدِم البلوتوث عندما تكون الحالة غير مفعَّلة.

استبدال // no-op في CodeLabViewMediator#registerListeners بـ ما يلي:

// Register Show Listener
mContext.registerReceiver(new BroadcastReceiver() {
    @Override
    public void onReceive(Context context, Intent intent) {
        final String action = intent.getAction();


        if (action.equals(BluetoothAdapter.ACTION_STATE_CHANGED)) {
            final int state = intent.getIntExtra(BluetoothAdapter.EXTRA_STATE,
                    BluetoothAdapter.ERROR);
            switch (state) {
                case BluetoothAdapter.STATE_OFF:
                    // Show OverlayViewController
                    mCodeLabViewController.start();
                    break;
            }
        }
    }
}, new IntentFilter(BluetoothAdapter.ACTION_STATE_CHANGED));

الخطوة 6: إخفاء العرض

سيتم إخفاء العرض عند النقر على زر "إخفاء!" النقر فوقه. نظرًا لأن هذا الإجراء فقط على زر العرض المضخَّم، أضِف هذا العنصر مباشرةً إلى OverlayViewController.

أضِف الطريقة التالية إلى CodeLabViewController:

@Override
protected void onFinishInflate() {
    getLayout().findViewById(R.id.codelab_button).setOnClickListener(v -> {
        stop();
    });
}

الخطوة 7: تهيئة OverlayViewMediator الجديد

  1. لإضافة OverlayViewMediator الجديد إلى OverlayWindowModule، أضف التعليمة البرمجية التالية إلى OverlayWindowModule: 
    /** Injects CodeLabViewMediator. */
@Binds
@IntoMap
@ClassKey(CodeLabViewMediator.class)
public abstract OverlayViewMediator bindCodeLabViewMediator(
        CodeLabViewMediator overlayViewsMediator);
  2. لإضافة طريقة OverlayViewMediator الجديدة إلى config_carSystemUIOverlayViewsMediators، أضف السطر التالي إلى config_carSystemUIOverlayViewsMediators في frameworks/base/packages/CarSystemUI/res/values/config.xml: 
    <item>com.android.systemui.car.codelab.CodeLabViewMediator</item>

النتيجة

تهانينا! لقد أنشأت ملفًا شخصيًا في SystemUIOverlayWindow:

واجهة SystemUIOverlayWindow
الشكل 2. SystemUIOverlayWindow

مصادر إضافية

لمزيد من المعلومات، يمكنك الاطّلاع على المراجع المتوفّرة أدناه.

نموذج OverlayViewController

شاهد مبدل المستخدم بملء الشاشة كتطبيق مباشر SystemUIOverlayWindow::

أدوات OverlayViewController الأخرى

وحدة التحكم في OverlayPanViewController

إنّ OverlayPartnerViewController لتوفير رسم متحرك أساسي عند إظهار وإخفاء طرق العرض داخل SystemUIOverlayWindow يمكنك الاطّلاع على لوحة الإشعارات للحصول على مزيد من المعلومات: