Bagaimana cara membuat hamparan bantuan seperti yang Anda lihat di beberapa aplikasi Android dan ICS?

93

Saya ingin membuat bantuan overlay seperti yang Anda lihat saat ICS dimuat untuk pertama kalinya atau di aplikasi seperti ES File Explorer atau Apex Launcher (masih ada lagi, tetapi saya tidak dapat memikirkannya sekarang). Apakah ini hanya tata letak relatif dengan satu tampilan berada di atas yang lain? Saya belum dapat menemukan kode contoh untuk melakukan hal seperti itu. Adakah yang tahu bagaimana ini dilakukan atau punya ide?

ES File Explorer ES File Explorer

android ssuperz28.dll
sumber

Jawaban:

84

Anggaplah Anda biasanya akan menelepon setContentView(R.layout.main), tetapi saat pertama kali dijalankan, Anda ingin memiliki hamparan ini.

Langkah # 1: Buat FrameLayoutkode di Java dan teruskan ke setContentView().

Langkah # 2: Gunakan LayoutInflateruntuk mengembang R.layout.mainke file FrameLayout.

Langkah # 3: Gunakan LayoutInflateruntuk memompa overlay ke file FrameLayout.

Langkah # 4: Saat pengguna mengetuk tombol (atau apa pun) untuk menutup overlay, panggil removeView()untuk menghapus overlay dari FrameLayout.

Karena overlay adalah turunan selanjutnya dari FrameLayout, overlay akan melayang di atas konten R.layout.main.

CommonsWare
sumber
6
@ ssuperz28: Ya, kecuali untuk mata panah dan gelembung yang digambar tangan. Anda sendirian untuk itu. :-)
CommonsWare
Saya tidak tahu apakah Anda berhasil melakukan apa yang Anda inginkan, tetapi ini adalah alternatif lain. stackoverflow.com/questions/8841240/… Jika Anda mempertahankan solusi yang diberikan oleh CommonsWare, satu-satunya hal yang terjadi pada saya untuk mengatur panah, adalah untuk menentukan FrameLayout instruksi dengan resourceImage atau backgroundImage yang sudah ada dengan gambar dengan panah (dan transparansi).
Edison Santos
1
Apakah ada cara untuk melakukan ini tetapi melakukannya secara relatif terhadap posisi anak-anak yang berada di bawah dari FrameLayout?
4gus71n
@CommonsWare - Pak, ini akan berfungsi terlepas dari perangkat mana pun itu?
Rat-a-tat-a-tat Ratatouille
2
@ user3364963: Menyesuaikan posisi benda secara dinamis. Jawaban saya agak disederhanakan. Saya berasumsi bahwa mereka menentukan posisi elemen yang akan disorot dan menyesuaikan koordinat "tanda pelatih". Kustom ViewGroupuntuk lapisan "tanda pelatih" dapat menangani itu, dan ada pustaka (misalnya ShowcaseView) yang menawarkan implementasi terekam dari pola itu.
CommonsWare
80

"Tanda pelatih" adalah "Tampilan bantuan" dalam UX talk :-)

coach_mark.xml adalah tata letak tanda pelatih Anda

coach_mark_master_view adalah id dari tampilan paling atas (root) di coach_mark.xml

public void onCoachMark(){

    final Dialog dialog = new Dialog(this);
    dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
    dialog.getWindow().setBackgroundDrawable(new ColorDrawable(android.graphics.Color.TRANSPARENT));
    dialog.setContentView(R.layout.coach_mark);
    dialog.setCanceledOnTouchOutside(true);
    //for dismissing anywhere you touch
    View masterView = dialog.findViewById(R.id.coach_mark_master_view);
    masterView.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            dialog.dismiss();
        }
    });
    dialog.show();
}

Menambahkan contoh coach_mark.xml (ke solusi luar biasa yang diberikan oleh Oded Breiner), sehingga mudah bagi ppl untuk menyalin & menempel untuk melihat contoh yang berfungsi dengan cepat.

Contoh coach_mark.xml di sini, ubah -> drawable / coach_marks ke gambar Anda:

coach_mark.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:id="@+id/coach_mark_master_view">
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
         <ImageView
             android:id="@+id/coach_marks_image"
             android:layout_width="match_parent"
             android:layout_height="match_parent"
             android:layout_centerInParent="true"
             android:layout_gravity="center_horizontal"
             android:src="@drawable/coach_marks" />
    </RelativeLayout>
</LinearLayout>

Dan secara opsional gunakan tema ini untuk menghapus padding:

<style name="WalkthroughTheme" parent="Theme.AppCompat">
    <item name="android:windowIsTranslucent">true</item>
    <item name="android:windowBackground">@android:color/transparent</item>
    <item name="android:windowContentOverlay">@null</item>
    <item name="android:windowNoTitle">true</item>
    <item name="android:backgroundDimEnabled">false</item>
</style>
Oded Breiner
sumber
Halo, bagaimana Anda dapat meregangkan Dialog ini agar sesuai dengan layar? Dari dokumentasi A dialog is a small window that prompts [...]. A dialog does not fill the screen and is normally used for modal events [...].,. Jika saya menggunakan kode ini, saya mendapatkan tampilan utama saya dikompresi di sebagian kecil layar. Jika saya menetapkan android:layout_width="640dp" android:layout_height="480dp"(yaitu, nilai aktual layar yang saya uji), ini berfungsi dengan benar. (tentu saja ini bukan solusi yang layak)
ocramot
@ocramot: contoh di atas harus layar penuh karena match_parent dan Window.FEATURE_NO_TITLE
Oded Breiner
Maka pasti ada masalah lain, karena saya melihatnya dengan cara yang berbeda
ocramot
1
Saya tahu ini setidaknya berumur beberapa bulan tetapi apakah pertanyaan layar penuh itu pernah berhasil?
cbhedd
3
Bagi mereka yang tidak tahu cara menyetel tema dialog, new Dialog(getContext(), R.style.WalkthroughTheme);
buat
4

Anda dapat melakukannya dengan cukup cepat. Anda menambahkan, misalnya LinearLayout di mana Anda meletakkan gambar dengan alpha yang sesuai dengan informasi bantuan Anda dan apa yang ingin Anda gambar seperti overlay. Dalam xml aktivitas Anda, Anda meletakkan tata letak ini di RelativeLayout setelah tata letak aktivitas Anda dengan Gone visibility. Saat Anda ingin menggambar informasi bantuan, Anda hanya perlu mengatur visibilitas ini menjadi terlihat.

Saya harap, saya jelas, jika Anda memiliki pertanyaan, saya bersedia menjawabnya.

FUBU
sumber
Terima kasih atas masukan Anda. Beginilah cara saya membayangkan hal itu dilakukan. Saya harus menghargai jawaban di bawah ini karena itulah cara saya membangunnya. Tampaknya lebih mudah dikelola dan saya tidak perlu mengubah tata letak aktivitas utama saya.
ssuperz28
1

Lihat jawaban saya yang lain bagaimana secara terprogram menampilkan tata letak overlay di atas aktivitas saat ini. Layout.xml aktivitas tidak perlu mengetahui apa pun tentang skin overlay. Anda dapat meletakkan overlay semi-transparan, menutupi hanya sebagian layar, satu atau lebih textview dan tombol di atasnya ... Bagaimana cara melapisi tombol secara terprogram?

  • buat template res / layout / paused.xml RelativeLayout atau gunakan layout toplevel apa pun
  • buat fungsi untuk menampilkan kulit overlay
  • Kuncinya adalah menangani layout.xml, menggunakan kelas LayoutInflater untuk mengurai xml untuk melihat objek, menambahkan tampilan overlay ke struktur tata letak saat ini
  • Contoh saya menggunakan timer untuk menghancurkan objek overlay dengan menghapusnya sepenuhnya dari struktur tampilan. Ini mungkin yang Anda inginkan juga untuk menghilangkannya tanpa jejak.

Tujuan saya adalah bahwa aktivitas utama tidak mengetahui adanya skin overlay, overlay datang dan pergi, banyak overlay berbeda, masih dapat menggunakan file teks overlay1.xml sebagai template, dan konten harus diperbarui secara terprogram. Saya melakukan cukup banyak apa yang CommonsWare katakan kepada kami bahwa posting saya menunjukkan kode program yang sebenarnya untuk memulai.

disclaimer: OPs "Terima kasih atas masukan Anda. Ini adalah bagaimana saya membayangkan itu dilakukan. Saya harus memberikan kredit untuk jawaban di bawah ini" komentar bukan berarti jawaban saya tetapi jawaban CommonsWare. Stackoverflow telah mengubah pemesanan pos.

Siapa
sumber