Tata Letak yang Dapat Dilipat

Penting

Artikel ini menjelaskan fungsionalitas dan panduan yang ada dalam pratinjau publik dan dapat dimodifikasi secara substansial sebelum tersedia secara umum. Microsoft tidak memberikan jaminan, tersirat maupun tersurat, sehubungan dengan informasi yang diberikan di sini.

Penting

Konten tampilan ini akan tersedia hanya setelah tampilan akar Aktivitas dilampirkan ke jendela. Ini terjadi karena implementasi didasarkan pada pustaka Window Manager dan Manajer Jendela hanya berfungsi saat tampilan dilampirkan ke jendela.

Komponen FoldableLayout adalah tata letak kustom yang dapat memposisikan turunannya secara berbeda ketika aplikasi berjalan pada perangkat yang dapat dilipat. Komponen dapat membagi layar di dua area tergantung pada posisi dan orientasi fitur lipat. Ketika layar dipisahkan, layar dapat menampung dua kontainer anak baik berdampingan atau satu di atas yang lain.

Tata letak layar tunggal	Tata letak layar ganda

Atribut XML

• single_screen_layout_id - Menerima id tata letak yang akan ditampilkan dalam mode layar tunggal.
• dual_screen_start_layout_id - Menerima id tata letak yang akan ditampilkan dalam kontainer awal mode layar ganda.
• dual_screen_end_layout_id - Menerima id tata letak yang akan ditampilkan dalam kontainer awal mode layar ganda.

juga FoldableLayout memiliki kemampuan untuk membuat satu kontainer ketika aplikasi berjalan pada perangkat yang dapat dilipat.

Kami menambahkan empat atribut baru yang akan membantu Anda membuat UI yang Anda inginkan:

• dual_portrait_single_layout_id - Menerima id tata letak untuk kontainer tunggal potret ganda.
• is_dual_portrait_single_container - Membuat kontainer tunggal potret ganda kosong.
• dual_landscape_single_layout_id - Menerima id tata letak untuk kontainer tunggal lanskap ganda.
• is_dual_landscape_single_container - Membuat kontainer tunggal lanskap ganda kosong.

dukungan smallestScreenSize

Ketika Aktivitas beralih ke mode layar baru tetapi tidak dibuat ulang karena bendera smallestScreenSize diatur dalam file Manifes, tata letak akan mendeteksi konfigurasi baru dan secara otomatis mengubah ukuran kontainer atau bahkan menambahkan atau menghapus kontainer kedua tergantung pada konfigurasi FoldableLayout.

Pratinjau Android Studio

• tools_hinge_color - Pilih warna engsel dalam pratinjau tata letak.
• tools_screen_mode - Pilih mode layar dalam pratinjau tata letak.

Jika Anda menambahkan fragmen di dalam file xml ke FoldableLayout, Anda akan memerlukan atribut berikut untuk mempratinjau antarmuka pengguna fragmen:

• show_in_single_screen
• show_in_dual_screen_start
• show_in_dual_screen_end
• show_in_dual_portrait_single_container
• show_in_dual_landscape_single_container

ID Kontainer

Kontainer memiliki id:

• first_container_id
• second_container_id

Tidak peduli orientasi layar atau perilaku khusus yang diatur ke tata letak, jika tata letak hanya akan menampilkan satu kontainer, id-nya akan menjadi first_container_id. Jika akan menunjukkan dua kontainer juga akan second_container_idada .

Contohnya:

• Jika aplikasi dalam mode layar tunggal, id kontainer akan menjadi first_container_id.
• Jika transisi ke mode layar ganda dalam potret ganda dilakukan dan kita memiliki dual_portrait_single_layout_id atau is_dual_portrait_single_container mengatur maka hanya akan ada satu kontainer dalam mode layar ganda dan id-nya akan tetap first_container_id.
• Ketika transisi ke lanskap dual_landscape_single_layout_id ganda dilakukan tetapi kita tidak memiliki atribut dan is_dual_landscape_single_container mengatur, maka kedua kontainer dengan id first_container_id dan second_container_id akan ada.

Membuat FoldableLayout dalam kode

Kotlin

findViewById<FrameLayout>(R.id.parent).addView(
    FoldableLayout(this, FoldableLayout.Config().apply {
        singleScreenLayoutId = R.layout.single_screen
        dualScreenStartLayoutId = R.layout.dual_screen_start
        dualScreenEndLayoutId = R.layout.dual_screen_end
        dualLandscapeSingleLayoutId = R.layout.single_screen
    })
)

Java

FoldableLayout.Config config = new FoldableLayout.Config();
config.setSingleScreenLayoutId(R.layout.single_screen);
config.setDualScreenStartLayoutId(R.layout.dual_screen_start);
config.setDualScreenEndLayoutId(R.layout.dual_screen_end);
config.setDualLandscapeSingleLayoutId(R.layout.single_screen);

((FrameLayout) findViewById(R.id.parent)).addView(new FoldableLayout(this, config));

Mengganti konfigurasi FoldableLayout

Kode di bawah ini akan membuang konfigurasi lama, menggantinya dengan yang baru dan mengembang tampilan dengan konfigurasi baru.

Kotlin

findViewById<FoldableLayout>(R.id.surface_duo_layout)
    .newConfigCreator()
    .singleScreenLayoutId(R.layout.single_screen)
    .dualScreenStartLayoutId(R.layout.dual_screen_start)
    .dualScreenEndLayoutId(R.layout.dual_screen_end)
    .reInflate()

Java

((FoldableLayout) findViewById(R.id.surface_duo_layout))
    .newConfigCreator()
    .singleScreenLayoutId(R.layout.single_screen)
    .dualScreenStartLayoutId(R.layout.dual_screen_start)
    .dualScreenEndLayoutId(R.layout.dual_screen_end)
    .reInflate();

Memperbarui konfigurasi FoldableLayout

Kode di bawah ini akan memperbarui konfigurasi saat ini dengan atribut yang dipilih dan meningkatkan tampilan:

Kotlin

findViewById<FoldableLayout>(R.id.surface_duo_layout)
    .updateConfigCreator()
    .dualScreenStartLayoutId(R.layout.dual_screen_start)
    .reInflate()

Java

((FoldableLayout) findViewById(R.id.surface_duo_layout))
    .updateConfigCreator()
    .dualScreenStartLayoutId(R.layout.dual_screen_start)
    .reInflate();

Cara menggunakan komponen tata letak

Untuk membuat aplikasi, Anda dapat menggunakan Aktivitas atau Aktivitas dengan Fragmen untuk menangani UI. Fragmen juga dapat dideklarasikan dalam file sumber daya tata letak atau dapat langsung dibuat dalam Aktivitas. Kita akan berbicara tentang bagaimana komponen menangani kasus-kasus ini nanti.

Menggunakan Aktivitas

Di sini, kita melihat cara kerja komponen hanya dengan menggunakan Aktivitas untuk menangani UI.

1. Pertama, Anda harus menambahkan ke FoldableLayout file *.xml Aktivitas.

   <com.microsoft.device.dualscreen.layouts.FoldableLayout
       xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:app="http://schemas.android.com/apk/res-auto"
       android:id="@+id/enlightened_layout"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:animateLayoutChanges="true"
       app:single_screen_layout_id="@layout/single_screen_layout"
       app:dual_screen_start_layout_id="@layout/single_screen_layout"
       app:dual_screen_end_layout_id="@layout/dual_screen_end_layout"/>
   

2. Kemudian, buat tiga tata letak untuk mode layar yang berbeda.

3. Tautkan tata letak Anda ke aktivitas Anda.

   Kotlin

   class MainActivity : AppCompatActivity() {
       override fun onCreate(savedInstanceState: Bundle?) {
           super.onCreate(savedInstanceState)
           setContentView(R.layout.activity_main)
       }
   }
   

   Java

   public class MainActivity extends AppCompatActivity {
       @Override
       protected void onCreate(@Nullable Bundle savedInstanceState) {
           super.onCreate(savedInstanceState);
           setContentView(R.layout.activity_main);
       }
   }
   

Menggunakan Fragmen yang dideklarasikan dalam file sumber daya

Di sini, kita melihat cara kerja komponen dengan fragmen yang dideklarasikan dalam file *.xml.

1. Pertama, Anda harus menambahkan ke FoldableLayout file *.xml Aktivitas.

   <com.microsoft.device.dualscreen.layouts.FoldableLayout
       xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:app="http://schemas.android.com/apk/res-auto"
       android:id="@+id/activity_main"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       app:single_screen_layout_id="@layout/single_screen_layout"
       app:dual_screen_start_layout_id="@layout/dual_screen_start_layout"
       app:dual_screen_end_layout_id="@layout/dual_screen_end_layout" />
   

2. Selanjutnya, Anda mendeklarasikan fragmen Anda ke dalam file singlescreenlayout.xml, dualscreenstartlayout.xml, dan dualscreenendlayout.xml .

   <fragment
       xmlns:android="http://schemas.android.com/apk/res/android"
       android:id="@+id/single_list"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:name="com.microsoft.device.display.samples.contentcontext.MapPointListFragment" />
   

3. Tautkan tata letak Anda ke aktivitas Anda.

   Kotlin

   class MainActivity : AppCompatActivity() {
       override fun onCreate(savedInstanceState: Bundle?) {
           super.onCreate(savedInstanceState)
           setContentView(R.layout.activity_main)
       }
   }
   

   Java

   public class MainActivity extends AppCompatActivity {
       @Override
       protected void onCreate(@Nullable Bundle savedInstanceState) {
           super.onCreate(savedInstanceState);
           setContentView(R.layout.activity_main);
       }
   }
   

Menggunakan Fragmen yang dibuat dalam Aktivitas

Terakhir, kita akan melihat cara kerja komponen dengan fragmen yang ditambahkan menggunakan getSupportFragmentManager().beginTransaction().

1. Pertama, Anda harus menambahkan ke FoldableLayout file *.xml Aktivitas.

   <com.microsoft.device.dualscreen.layouts.FoldableLayout
       xmlns:android="http://schemas.android.com/apk/res/android"
       android:id="@+id/activity_main"
       android:layout_width="match_parent"
       android:layout_height="match_parent" />
   

   Ini membuat kontainer untuk tampilan tetapi tidak akan ada yang meningkat ke dalamnya.

2. Anda dapat memiliki akses ke kontainer FoldableLayout dengan menggunakan id mereka:

   • first_container_id
   • second_container_id

3. Selanjutnya silakan kunjungi pustaka penangan status manajer fragmen karena fragmen membutuhkan perawatan khusus saat berhadapan dengan transisi mode layar.

Menampilkan Pengikatan

Penting

Silakan gunakan findViewById seperti yang ditunjukkan pada cuplikan kode di bawah ini. Jangan mencoba menggunakan Pengikatan Google View.

FoldableLayout Karena konten meningkat ketika WindowManager memiliki informasi yang tersedia tentang tata letak jendela, Anda tidak dapat mengambil instans anak dan menggunakannya. Untuk mengikat tampilan anak, pertama-tama Anda perlu memastikan bahwa FoldableLayout konten siap digunakan. Untuk ini, Anda harus menggunakan metode berikut:

Kotlin

class MainActivity : AppCompatActivity() {
    private lateinit var binding: ActivityMainBinding

    private val contentChangedListener = object : FoldableLayout.ContentChangedListener {
        override fun contentChanged(screenMode: ScreenMode?) {
            // Here, you can retrieve the child instance
            val child = binding.foldableLayout.findViewById<View>(R.id.child_view)
        }
    }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)
    }

    override fun onResume() {
        super.onResume()
        binding.foldableLayout.addContentChangedListener(contentChangedListener)
    }

    override fun onPause() {
        super.onPause()
        binding.foldableLayout.removeContentChangedListener(contentChangedListener)
    }
}

Java

public class MainActivity extends AppCompatActivity {
    private ActivityMainBinding binding;

    private final FoldableLayout.ContentChangedListener contentChangedListener = new FoldableLayout.ContentChangedListener() {
        @Override
        public void contentChanged(@Nullable ScreenMode screenMode) {
            // Here, you can retrieve the child instance
            View child = binding.foldableLayout.findViewById(R.id.child_view);
        }
    };

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        binding = ActivityMainBinding.inflate(getLayoutInflater());
        setContentView(binding.getRoot());
    }

    @Override
    public void onResume() {
        super.onResume();
        binding.foldableLayout.addContentChangedListener(contentChangedListener);
    }

    @Override
    public void onPause() {
        super.onPause();
        binding.foldableLayout.removeContentChangedListener(contentChangedListener);
    }
}

di mana:

• FoldableLayout.ContentChangedListener adalah panggilan balik yang akan dipanggil setelah FoldableLayout konten meningkat.

• FoldableLayout.addContentChangedListener akan mendaftarkan panggilan balik yang diberikan FoldableLayout.ContentChangedListener .

• foldableLayout.removeContentChangedListener akan membatalkan pendaftaran panggilan balik yang diberikan FoldableLayout.ContentChangedListener .

Penting

Anda harus menambahkan kode ini di onResume dalam metode dan onPause dari Anda Activity atau Fragment untuk menghindari kebocoran memori.