Bilah judul kustom (10.1.68) - Mobile Platform as a Service

Kontainer Nebula memungkinkan Anda menyesuaikan bilah navigasi, termasuk gaya posisi judul dan tombol Kembali. Topik ini menjelaskan cara menyesuaikan bilah navigasi pada baseline 10.1.68.

Prasyarat

Sebelum membaca panduan ini, perhatikan poin-poin berikut:

Untuk mengembangkan bilah navigasi yang digunakan bersama oleh Mini Program dan halaman HTML5, pertimbangkan penggunaannya di kedua platform. Jika hanya digunakan di salah satu platform, aturan ini dapat diabaikan.
Bilah navigasi kustom harus mematuhi proses standar pemanggilan Operasi API dalam kontainer. Bacalah dokumen ini dengan cermat dan kembangkan sesuai kebutuhan.
Secara default, Mini Program menggunakan bilah navigasi bawaan. Untuk menggunakan bilah navigasi kustom di Mini Program, lihat Konfigurasi Kontainer HTML5.
Warna bilah navigasi dapat diatur secara dinamis. Untuk pengalaman terbaik, siapkan dua set konfigurasi tema dan beralih di antara keduanya berdasarkan skenario.

Prosedur

Turunkan kelas abstrak AbsTitleView dan implementasikan bilah navigasi kustom.

Implementasikan H5ViewProvider. Dalam metode createTitleView, buat dan kembalikan instance bilah navigasi kustom.

public class H5ViewProviderImpl implements H5ViewProvider {
     @Override
     public H5TitleView createTitleView(Context context) {
         return new NewH5TitleViewImpl(context);
     }

     @Override
     public H5NavMenuView createNavMenu() {
         return null;
     }

     @Override
     public H5PullHeaderView createPullHeaderView(Context context, ViewGroup viewGroup) {
         return null;
     }

     @Override
     public H5WebContentView createWebContentView(Context context) {
         return null;
     }
 }

Atur H5ViewProvider di kontainer dalam skenario tertentu, seperti saat aplikasi dimulai.
```
MPNebula.setCustomViewProvider(new H5ViewProviderImpl());
```

Jika proyek Anda didasarkan pada arsitektur Portal dan Bundle, tambahkan konfigurasi tambahan.

H5Utils.setProvider(H5ReplaceResourceProvider.class.getName(), new H5ReplaceResourceProvider() {
     @Override
     public String getReplaceResourcesBundleName() {
         return BuildConfig.BUNDLE_NAME;
     }
 });

Informasi lebih lanjut

Warna latar belakang

/**
     * Mengembalikan nilai warna latar belakang bilah navigasi.
     * @return
     */
    public abstract int getBackgroundColor();

    /**
     * Atur transparansi bilah navigasi.
     * @param alpha
     */
    public abstract void setBackgroundAlphaValue(int alpha);

    /**
     * Mengatur warna latar belakang bilah navigasi tanpa menggunakan nilai Alpha.
     * @param color
     */
    public abstract void setBackgroundColor(int color);

    /**
     * Mengatur ulang bilah navigasi.
     */
    public abstract void resetTitle();

Operasi resetTitle dipicu ketika JSAPI bernama setTitleColor dipanggil pada halaman latar depan. Saran kami adalah mengatur ulang elemen tampilan ke nilai default, termasuk latar belakang bilah navigasi dan warna komponen lainnya yang disebutkan dalam topik ini.

Judul

Subjudul hanya didukung dalam halaman HTML5. Jika tidak diperlukan, implementasi subjudul dapat diabaikan.

Untuk membuat halaman HTML5 mendengarkan peristiwa mengetuk bilah judul, aktifkan bilah navigasi untuk memanggil metode invokeTitleClickEvent dalam skenario tertentu. Untuk mendengarkan peristiwa mengetuk bilah subjudul, aktifkan bilah navigasi untuk memanggil metode invokeSubTitleClickEvent.

/**
     * Mengembalikan teks judul utama.
     * @return
     */
    public abstract String getTitle();

    /**
     * Mengatur teks judul utama.
     * @param title
     */
    public abstract void setTitle(String title);

    /**
     * Mengatur teks subjudul.
     * @param subTitle
     */
    public abstract void setSubTitle(String subTitle);

    /**
     * Mengembalikan tampilan judul utama.
     * @return
     */
    public abstract TextView getMainTitleView();

    /**
     * Mengembalikan tampilan subjudul.
     * @return
     */
    public abstract TextView getSubTitleView();

Bagian kontrol sisi kiri

/**
     * Mengatur apakah akan menampilkan tombol Tutup.
     * @param visible
     */
    public abstract void showCloseButton(boolean visible);

    /**
     * Mengatur apakah akan menampilkan tombol Kembali.
     * @param visible
     */
    public abstract void showBackButton(boolean visible);

    /**
     * Mengatur apakah akan menampilkan tombol Beranda.
     * @param visible
     */
    public abstract void showBackHome(boolean visible);

    /**
     * Mengatur apakah akan menampilkan ikon kemajuan pemuatan di bilah judul.
     * @param visible
     */
    public abstract void showTitleLoading(boolean visible);

Tombol Tutup

Seperti ditunjukkan dalam kotak merah pada gambar di atas, tombol Tutup hanya muncul di halaman HTML5. Ketika lebih dari satu halaman historis ada di browser, kontainer memanggil metode showCloseButton untuk mengontrol visibilitas tombol Tutup. Saat tombol diketuk, panggil metode invokePageCloseEvent untuk mematuhi spesifikasi perilaku kontainer.

Tombol Kembali

Tombol Kembali yang ditunjukkan dalam kotak merah pada gambar di atas adalah kontrol yang harus diimplementasikan dalam bilah navigasi kustom. Kontainer memanggil metode showBackButton untuk mengontrol visibilitas tombol Kembali. Saat tombol diketuk, panggil metode invokePageBackEvent untuk mematuhi spesifikasi perilaku kontainer.

Tombol Beranda

Tombol Beranda hanya digunakan di Mini Program. Ketika dialihkan ke halaman non-beranda dari Mini Program, kontainer memanggil metode showBackHome untuk mengontrol visibilitas tombol Beranda. Saat tombol diketuk, panggil metode invokeHomeClickEvent untuk mematuhi spesifikasi perilaku kontainer.

Ikon kemajuan pemuatan

Ketika halaman HTML5 atau Mini Program memanggil API animasi pemuatan di bilah navigasi, kontainer memanggil metode showTitleLoading untuk mengontrol visibilitas ikon kemajuan pemuatan.

Bagian kontrol sisi kanan

Bagian kontrol sisi kanan juga disebut sebagai bagian OptionMenu. Ini menyediakan lebih banyak operasi bagi pengguna.

Di kontainer HTML5:
Di Mini Program:

Seperti ditunjukkan dalam gambar-gambar di atas, sediakan dua bagian tampilan untuk bagian OptionMenu. Kontainer mengelola kedua bagian ini berdasarkan indeks, yang diurutkan dari kanan ke kiri dan dimulai dari 0.

public abstract void showOptionMenu(boolean visible);

    public abstract View getOptionMenuContainer(int index);

    public abstract void setOptionMenu(boolean reset, boolean override, boolean isTinyApp, List<MenuData> menus);

Kontainer memanggil metode showOptionMenu untuk mengontrol visibilitas bagian OptionMenu. Dalam beberapa kasus, kontainer harus mendapatkan tampilan di bagian ini dan melakukan operasi berdasarkan tampilan tersebut. Implementasikan metode getOptionMenuContainer dengan benar.

Untuk mengimplementasikan metode setOptionMenu, lihat parameter permintaan di Atur Tombol Kanan Atas. Parameter icontype adalah gaya tombol bawaan, yang hanya tersedia di halaman HTML5. Jika halaman HTML5 tidak digunakan dalam skenario akses Anda, abaikan parameter ini. Sebaliknya, konfigurasikan tombol untuk gaya yang berbeda. Mirip dengan parameter icontype, parameter redDot bersifat opsional.

Untuk membuat halaman HTML5 atau Mini Program mendengarkan peristiwa mengetuk tombol kanan atas, panggil metode invokeOptionClickEvent.

Perhatikan pengaturan berikut dalam Mini Program:

Untuk membedakan antara halaman HTML5 dan Mini Program, atur parameter isTinyApp dalam metode setOptionMenu menjadi true.
Ketika mengatur beberapa tombol, mulailah dari tombol kedua dari kanan.

Bagian kontrol kanan atas di Mini Program

Di Mini Program, implementasikan bagian sisi kanan dengan langkah-langkah berikut:

Gunakan kelas abstrak warisan AbsTinyOptionMenuView untuk mengimplementasikan bagian kontrol kustom.
Atur TinyOptionMenuViewProvider di kontainer dalam skenario tertentu, seperti saat aplikasi dimulai.

H5Utils.setProvider(TinyOptionMenuViewProvider.class.getName(), new TinyOptionMenuViewProvider() {
    @Override
    public AbsTinyOptionMenuView createView(Context context) {
        return new TinyOptionMenuView(context);
    }
});

Implementasikan dan konfigurasikan tampilan tombol Lainnya dan Tutup berdasarkan spesifikasi kontainer.

public abstract void setOptionMenuOnClickListener(View.OnClickListener listener);

    public abstract void setCloseButtonOnClickListener(View.OnClickListener listener);

    public abstract void setCloseButtonOnLongClickListener(View.OnLongClickListener listener);

    public abstract void onStateChanged(TinyAppActionState currentState);

    public abstract View getView();

Kontainer memanggil tiga metode pertama dalam kode di atas untuk mengatur callback respons yang masuk akal. Pastikan callback respons diatur dalam tampilan yang ditentukan.

Metode onStateChanged dipanggil dalam skenario layanan berbasis lokasi (LBS) dan Bluetooth. Misalnya, ketika Mini Program menggunakan layanan berbasis lokasi (LBS), kontainer memanggil metode ini, dan Anda dapat merespons callback tersebut. Kode berikut menunjukkan gayanya.

Kode sampel berikut untuk referensi Anda.

public class TinyOptionMenuView extends AbsTinyOptionMenuView {

    private View container;

    private ImageView ivMore;

    private View ivClose;

    private Context context;

    public TinyOptionMenuView(Context context) {
        this.context = context;
        ViewGroup parent = null;
        if (context instanceof Activity) {
            parent = (ViewGroup) ((Activity) context).findViewById(android.R.id.content);
        }
        container = LayoutInflater.from(context).inflate(R.layout.layout_tiny_right, parent, false);
        ivClose = container.findViewById(R.id.close);
        ivMore = (ImageView) container.findViewById(R.id.more);

    }

    @Override
    public View getView() {
        return container;
    }

    @Override
    public void setOptionMenuOnClickListener(View.OnClickListener onClickListener) {
        ivMore.setOnClickListener(onClickListener);
    }

    @Override
    public void setCloseButtonOnClickListener(View.OnClickListener onClickListener) {
        ivClose.setOnClickListener(onClickListener);
    }

    @Override
    public void setCloseButtonOnLongClickListener(View.OnLongClickListener onLongClickListener) {
        ivClose.setOnLongClickListener(onLongClickListener);
    }

    @Override
    public void onStateChanged(TinyAppActionState state) {
        if (state == null) {
            ivMore.setImageDrawable(context.getResources().getDrawable(R.drawable.icon_more));
        } else if (state.getAction().equals(TinyAppActionState.ACTION_LOCATION)) {
            ivMore.setImageDrawable(context.getResources().getDrawable(R.drawable.icon_miniprogram_location));
        }
    }
}

Perubahan tema

Mini Program atau aplikasi HTML5 yang berbeda mungkin menggunakan warna latar belakang yang berbeda di bilah navigasi. Untuk meningkatkan pengalaman pengguna, sesuaikan elemen lain di bilah navigasi, seperti bagian kontrol kanan atas, sebagai respons terhadap perubahan warna latar belakang di bilah navigasi.

Dalam ekstensi ke bilah navigasi, bagian kontrol kanan atas dan bilah navigasi adalah komponen yang berbeda. Oleh karena itu, Operasi API disediakan agar bagian kontrol kanan atas dapat merespons perubahan di bilah navigasi.

Kelas AbsTinyOptionMenuView menyediakan metode onTitleChanged untuk memungkinkan Anda menggunakan override guna merespons perubahan di bilah navigasi. Ketika metode ini dipanggil, objek H5TitleView dapat dilewatkan untuk mendapatkan informasi tentang bilah navigasi, seperti warna latar belakang. Selain itu, kelas AbsTinyOptionMenuView menyediakan metode getTitleBar untuk memungkinkan Anda langsung mendapatkan objek bilah navigasi. Sebagai alternatif, Anda dapat mengonversi H5TitleView ke objek bilah navigasi yang dapat Anda implementasikan, karena kelas AbsTitleView mengimplementasikan kelas H5TitleView. Ini memungkinkan Anda mendapatkan lebih banyak informasi tentang bilah navigasi.
```
 protected void onTitleChange(H5TitleView title)
```

Panggil metode notifyTitleBarChanged yang disediakan oleh kelas AbsTitleView untuk memungkinkan operasi onTitleChange dipanggil, misalnya, ketika warna latar belakang bilah navigasi diatur. Kode sampel berikut untuk referensi Anda.

 package com.mpaas.demo.nebula;

  public class NewH5TitleViewImpl extends AbsTitleView {

      @Override
      public void setBackgroundAlphaValue(int i) {
          content.getContentBgView().setAlpha(i);
          notifyTitleBarChanged();
      }

      @Override
      public void setBackgroundColor(int i) {
          content.getContentBgView().setColor(i);
          notifyTitleBarChanged();
      }

      @Override
      public void resetTitle() {
          content.getContentBgView().setColor(context.getResources().getColor(R.color.h5_default_titlebar_color));
          notifyTitleBarChanged();
      }
  }

Dalam kode sampel di atas, ketika metode notifyTitleBarChange dipanggil, objek dari subclass AbsTinyOptionMenuView mungkin belum 100% diinisialisasi. Oleh karena itu, kami sarankan Anda mengoverride metode setH5Page untuk mendapatkan informasi tentang bilah navigasi dan menentukan tema saat ini. Kode sampel berikut untuk referensi Anda.

 public class TinyOptionMenuView extends AbsTinyOptionMenuView {

      @Override
      public void setH5Page(H5Page h5Page) {
          super.setH5Page(h5Page);
          // judul menjadi tersedia dari sini.
          if (getTitleBar().getBackgroundColor() == -1) {
              bgView.setBackgroundColor(Color.RED);
          }
      }
  }