दो पैनल वाला लेआउट बनाना

लिखने का तरीका आज़माएं

Android के लिए, Jetpack Compose हमारा सुझाया गया यूज़र इंटरफ़ेस (यूआई) टूलकिट है. Compose में लेआउट इस्तेमाल करने का तरीका जानें.

अडैप्टिव लेआउट →

आपके ऐप्लिकेशन की हर स्क्रीन रिस्पॉन्सिव होनी चाहिए और उसे उपलब्ध जगह के हिसाब से उसमें बदलाव करना चाहिए. इसके साथ रिस्पॉन्सिव यूज़र इंटरफ़ेस (यूआई) बनाया जा सकता है ConstraintLayout, जो एक पैनल की सुविधा देता है अलग-अलग साइज़ के लिए, अप्रोच स्केल का इस्तेमाल किया जाता है. हालांकि, बड़े डिवाइसों को छोटे-छोटे हिस्सों में बांटने की सुविधा से फ़ायदा हो सकता है को कई पैनल में बदल दिया जाता है. उदाहरण के लिए, हो सकता है कि आप किसी स्क्रीन पर आइटम की सूची चुनें.

कॉन्टेंट बनाने SlidingPaneLayout कॉम्पोनेंट, बड़े डिवाइसों पर दो पैनल को साथ-साथ दिखाने की सुविधा देता है. फ़ोल्ड किए जा सकने वाले डिवाइस, जो एक बार में सिर्फ़ एक पैनल दिखाने के लिए अपने-आप काम करते हैं जैसे कि फ़ोन.

डिवाइस के हिसाब से सलाह पाने के लिए, यहां जाएं: स्क्रीन के साथ काम करने की खास जानकारी.

ध्यान दें: टू-पैन लेआउट बनाने का सिलसिलेवार तरीका जानने के लिए, यहां देखें अडैप्टिव लेआउट कोडलैब का इस्तेमाल करें.

सेटअप

SlidingPaneLayout का इस्तेमाल करने के लिए, अपने ऐप्लिकेशन में नीचे दी गई डिपेंडेंसी शामिल करें build.gradle फ़ाइल:

ग्रूवी

dependencies {
    implementation "androidx.slidingpanelayout:slidingpanelayout:1.2.0"
}

Kotlin

dependencies {
    implementation("androidx.slidingpanelayout:slidingpanelayout:1.2.0")
}

एक्सएमएल लेआउट कॉन्फ़िगरेशन

SlidingPaneLayout सबसे ऊपर इस्तेमाल करने के लिए, हॉरिज़ॉन्टल और दो पैनल वाला लेआउट उपलब्ध कराता है एक यूज़र इंटरफ़ेस (यूआई) लेवल है. यह लेआउट पहले पैनल का इस्तेमाल कॉन्टेंट की सूची या ब्राउज़र के तौर पर करता है, दूसरे पैनल में कॉन्टेंट दिखाने के लिए, मुख्य जानकारी वाले व्यू के तहत आता है.

पहली इमेज. इसकी मदद से बनाए गए लेआउट का उदाहरण SlidingPaneLayout.

SlidingPaneLayout, दो पैनल की चौड़ाई का इस्तेमाल करके यह तय करता है कि पेज को दिखाना है या नहीं कर सकते हैं. उदाहरण के लिए, अगर सूची पैनल का आकलन साइज़ कम से कम 200 dp और जानकारी वाले पैनल का साइज़ 400 dp होना चाहिए. इसके बाद, SlidingPaneLayout अपने-आप दो पैनल साथ-साथ दिखाता है कम से कम 600 dp की चौड़ाई हो.

चाइल्ड व्यू तब ओवरलैप करते हैं, जब उनकी संयुक्त चौड़ाई, SlidingPaneLayout. इस मामले में, चाइल्ड व्यू की संख्या, उपलब्ध कॉन्टेंट को पूरा करने के लिए बढ़ती है SlidingPaneLayout में चौड़ाई. उपयोगकर्ता सूची में सबसे ऊपर के व्यू को खींचकर स्क्रीन के किनारे से खींचकर छोड़ें.

अगर व्यू ओवरलैप नहीं होते हैं, तो SlidingPaneLayout पर लेआउट का इस्तेमाल किया जा सकता है बचे हुए स्पेस को बांटने का तरीका तय करने के लिए, चाइल्ड व्यू पर पैरामीटर layout_weight मेज़रमेंट पूरा होने के बाद. यह पैरामीटर सिर्फ़ चौड़ाई के लिए काम का है.

फ़ोल्ड किए जा सकने वाले डिवाइस पर, जहां स्क्रीन पर दोनों व्यू साथ-साथ दिख सकते हैं साइड में, SlidingPaneLayout दो पैनल के साइज़ को अपने-आप अडजस्ट कर देता है. इन्हें ओवरलैप करने वाले फ़ोल्ड या हिंज के किसी भी ओर लगाया जाता है. इसमें केस में, सेट की गई चौड़ाई को वह कम से कम चौड़ाई माना जाता है जो हर पेज के लिए को फ़ोल्ड करने की सुविधा के एक हिस्से से दूसरे हिस्से में ले जाएं. अगर इसे बनाए रखने के लिए ज़रूरी जगह नहीं है कम से कम साइज़, SlidingPaneLayout व्यू को ओवरलैप करने पर वापस स्विच करता है.

यहां SlidingPaneLayout का इस्तेमाल करने का उदाहरण दिया गया है, जिसमें RecyclerView बायां पैनल और FragmentContainerView यह बाएं पैनल से कॉन्टेंट दिखाने के लिए, ब्यौरे वाले मुख्य व्यू के तौर पर काम करता है:

<!-- two_pane.xml -->
<androidx.slidingpanelayout.widget.SlidingPaneLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/sliding_pane_layout"
   android:layout_width="match_parent"
   android:layout_height="match_parent">

   <!-- The first child view becomes the left pane. When the combined needed
        width, expressed using android:layout_width, doesn't fit on-screen at
        once, the right pane is permitted to overlap the left. -->

   <androidx.recyclerview.widget.RecyclerView
             android:id="@+id/list_pane"
             android:layout_width="280dp"
             android:layout_height="match_parent"
             android:layout_gravity="start"/>

   <!-- The second child becomes the right (content) pane. In this example,
        android:layout_weight is used to expand this detail pane to consume
        leftover available space when the entire window is wide enough to fit
        the left and right pane.-->
   <androidx.fragment.app.FragmentContainerView
       android:id="@+id/detail_container"
       android:layout_width="300dp"
       android:layout_weight="1"
       android:layout_height="match_parent"
       android:background="#ff333333"
       android:name="com.example.SelectAnItemFragment" />
</androidx.slidingpanelayout.widget.SlidingPaneLayout>

इस उदाहरण में, FragmentContainerView पर android:name एट्रिब्यूट शुरुआती फ़्रैगमेंट, जो पक्का करता है कि उपयोगकर्ता बड़ी स्क्रीन पर ऐप्लिकेशन के पहली बार लॉन्च होने पर, डिवाइसों पर कोई खाली पैनल नहीं दिखता.

प्रोग्राम के हिसाब से, जानकारी वाले पैनल को प्रोग्राम के हिसाब से बदलना

पिछले एक्सएमएल उदाहरण में, RecyclerView में किसी एलिमेंट पर टैप करना विवरण पैनल में कोई बदलाव ट्रिगर करता है. फ़्रैगमेंट का इस्तेमाल करते समय, इसके लिए ज़रूरी है FragmentTransaction जो दाएं पैनल को बदल देता है. open() नए दिखने वाले फ़्रैगमेंट से स्वैप करने के लिए SlidingPaneLayout पर:

Kotlin

// A method on the Fragment that owns the SlidingPaneLayout,called by the
// adapter when an item is selected.
fun openDetails(itemId: Int) {
    childFragmentManager.commit {
        setReorderingAllowed(true)
        replace<ItemFragment>(R.id.detail_container,
            bundleOf("itemId" to itemId))
        // If it's already open and the detail pane is visible, crossfade
        // between the fragments.
        if (binding.slidingPaneLayout.isOpen) {
            setTransition(FragmentTransaction.TRANSIT_FRAGMENT_FADE)
        }
    }
    binding.slidingPaneLayout.open()
}

Java

// A method on the Fragment that owns the SlidingPaneLayout, called by the
// adapter when an item is selected.
void openDetails(int itemId) {
    Bundle arguments = new Bundle();
    arguments.putInt("itemId", itemId);
    FragmentTransaction ft = getChildFragmentManager().beginTransaction()
            .setReorderingAllowed(true)
            .replace(R.id.detail_container, ItemFragment.class, arguments);
    // If it's already open and the detail pane is visible, crossfade
    // between the fragments.
    if (binding.getSlidingPaneLayout().isOpen()) {
        ft.setTransition(FragmentTransaction.TRANSIT_FRAGMENT_FADE);
    }
    ft.commit();
    binding.getSlidingPaneLayout().open();
}

यह कोड खास तौर पर addToBackStack() FragmentTransaction पर. ऐसा करने से, बैक स्टैक बनाने से बचा जा सकता है पैनल.

नेविगेशन कॉम्पोनेंट को लागू करना

इस पेज पर दिए गए उदाहरण सीधे तौर पर, SlidingPaneLayout का इस्तेमाल करते हैं. इसके लिए, आपको ये काम करने होंगे फ़्रैगमेंट ट्रांज़ैक्शन को मैन्युअल तरीके से मैनेज करें. हालांकि, नेविगेशन कॉम्पोनेंट पहले से मौजूद दो पैनल वाला लेआउट AbstractListDetailFragment, ऐसी एपीआई क्लास जो आपकी सूची को मैनेज करने के लिए, हुड के तहत SlidingPaneLayout का इस्तेमाल करती है और ब्यौरे वाले पैनल.

इससे आपके एक्सएमएल लेआउट को आसान बनाया जा सकता है. स्पष्ट रूप से SlidingPaneLayout और आपके दोनों पैनल का एलान करते हुए, आपके लेआउट को सिर्फ़ AbstractListDetailFragment होल्ड करने के लिए FragmentContainerView लागू करना:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <androidx.fragment.app.FragmentContainerView
        android:id="@+id/two_pane_container"
        <!-- The name of your AbstractListDetailFragment implementation.-->
        android:name="com.example.testapp.TwoPaneFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        <!-- The navigation graph for your detail pane.-->
        app:navGraph="@navigation/two_pane_navigation" />
</FrameLayout>

लागू करना onCreateListPaneView() और onListPaneViewCreated() का इस्तेमाल करें. ब्यौरे वाले पैनल के लिए, AbstractListDetailFragment, NavHostFragment. इसका मतलब है कि आप एक नेविगेशन ग्राफ़ जिसमें सिर्फ़ गंतव्य पैनल में दिखाए जाने वाले गंतव्य. इसके बाद, अगर आपको स्वैप करने के लिए NavController सेल्फ़-कंटेन्ड नेविगेशन ग्राफ़ में, डेस्टिनेशन के बीच की जानकारी वाला पैनल:

Kotlin

fun openDetails(itemId: Int) {
    val navController = navHostFragment.navController
    navController.navigate(
        // Assume the itemId is the android:id of a destination in the graph.
        itemId,
        null,
        NavOptions.Builder()
            // Pop all destinations off the back stack.
            .setPopUpTo(navController.graph.startDestination, true)
            .apply {
                // If it's already open and the detail pane is visible,
                // crossfade between the destinations.
                if (binding.slidingPaneLayout.isOpen) {
                    setEnterAnim(R.animator.nav_default_enter_anim)
                    setExitAnim(R.animator.nav_default_exit_anim)
                }
            }
            .build()
    )
    binding.slidingPaneLayout.open()
}

Java

void openDetails(int itemId) {
    NavController navController = navHostFragment.getNavController();
    NavOptions.Builder builder = new NavOptions.Builder()
            // Pop all destinations off the back stack.
            .setPopUpTo(navController.getGraph().getStartDestination(), true);
    // If it's already open and the detail pane is visible, crossfade between
    // the destinations.
    if (binding.getSlidingPaneLayout().isOpen()) {
        builder.setEnterAnim(R.animator.nav_default_enter_anim)
                .setExitAnim(R.animator.nav_default_exit_anim);
    }
    navController.navigate(
        // Assume the itemId is the android:id of a destination in the graph.
        itemId,
        null,
        builder.build()
    );
    binding.getSlidingPaneLayout().open();
}

ज़्यादा जानकारी वाले पैनल के नेविगेशन ग्राफ़ में डेस्टिनेशन मौजूद नहीं होने चाहिए किसी भी बाहरी, ऐप्लिकेशन-वाइड नेविगेशन ग्राफ़ के लिए. हालांकि, ब्यौरे में मौजूद कोई भी डीप लिंक पैनल का नेविगेशन ग्राफ़, उस डेस्टिनेशन से अटैच होना चाहिए जो SlidingPaneLayout. इससे यह पक्का करने में मदद मिलती है कि बाहरी डीप लिंक पहले SlidingPaneLayout डेस्टिनेशन पर जाएं. इसके बाद, सही जानकारी पर जाएं पैनल डेस्टिनेशन.

ज़्यादा जानकारी के लिए, टूPaneफ़्रैगमेंट का उदाहरण नेविगेशन कॉम्पोनेंट का इस्तेमाल करके, दो पैनल वाले लेआउट को पूरी तरह लागू करने के लिए.

'सिस्टम में वापस जाएं' बटन की मदद से इंटिग्रेट करें

इसलिए, यह पक्का करें कि छोटे डिवाइसों पर सूची और ज़्यादा जानकारी वाले पैनल ओवरलैप हो रहे हों. 'वापस जाएं' बटन, उपयोगकर्ता को ज़्यादा जानकारी वाले पैनल से वापस सूची पैनल पर ले जाता है. यह करें कस्टम बैक उपलब्ध कराकर नेविगेशन और OnBackPressedCallback से SlidingPaneLayout की मौजूदा स्थिति:

Kotlin

class TwoPaneOnBackPressedCallback(
    private val slidingPaneLayout: SlidingPaneLayout
) : OnBackPressedCallback(
    // Set the default 'enabled' state to true only if it is slidable, such as
    // when the panes overlap, and open, such as when the detail pane is
    // visible.
    slidingPaneLayout.isSlideable && slidingPaneLayout.isOpen
), SlidingPaneLayout.PanelSlideListener {

    init {
        slidingPaneLayout.addPanelSlideListener(this)
    }

    override fun handleOnBackPressed() {
        // Return to the list pane when the system back button is tapped.
        slidingPaneLayout.closePane()
    }

    override fun onPanelSlide(panel: View, slideOffset: Float) { }

    override fun onPanelOpened(panel: View) {
        // Intercept the system back button when the detail pane becomes
        // visible.
        isEnabled = true
    }

    override fun onPanelClosed(panel: View) {
        // Disable intercepting the system back button when the user returns to
        // the list pane.
        isEnabled = false
    }
}

Java

class TwoPaneOnBackPressedCallback extends OnBackPressedCallback
        implements SlidingPaneLayout.PanelSlideListener {

    private final SlidingPaneLayout mSlidingPaneLayout;

    TwoPaneOnBackPressedCallback(@NonNull SlidingPaneLayout slidingPaneLayout) {
        // Set the default 'enabled' state to true only if it is slideable, such
        // as when the panes overlap, and open, such as when the detail pane is
        // visible.
        super(slidingPaneLayout.isSlideable() && slidingPaneLayout.isOpen());
        mSlidingPaneLayout = slidingPaneLayout;
        slidingPaneLayout.addPanelSlideListener(this);
    }

    @Override
    public void handleOnBackPressed() {
        // Return to the list pane when the system back button is tapped.
        mSlidingPaneLayout.closePane();
    }

    @Override
    public void onPanelSlide(@NonNull View panel, float slideOffset) { }

    @Override
    public void onPanelOpened(@NonNull View panel) {
        // Intercept the system back button when the detail pane becomes
        // visible.
        setEnabled(true);
    }

    @Override
    public void onPanelClosed(@NonNull View panel) {
        // Disable intercepting the system back button when the user returns to
        // the list pane.
        setEnabled(false);
    }
}

आप कॉलबैक को OnBackPressedDispatcher इसका उपयोग कर रहा है addCallback():

Kotlin

class TwoPaneFragment : Fragment(R.layout.two_pane) {

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        val binding = TwoPaneBinding.bind(view)

        // Connect the SlidingPaneLayout to the system back button.
        requireActivity().onBackPressedDispatcher.addCallback(viewLifecycleOwner,
            TwoPaneOnBackPressedCallback(binding.slidingPaneLayout))

        // Set up the RecyclerView adapter.
    }
}

Java

class TwoPaneFragment extends Fragment {

    public TwoPaneFragment() {
        super(R.layout.two_pane);
    }

    @Override
    public void onViewCreated(@NonNull View view,
             @Nullable Bundle savedInstanceState) {
        TwoPaneBinding binding = TwoPaneBinding.bind(view);

        // Connect the SlidingPaneLayout to the system back button.
        requireActivity().getOnBackPressedDispatcher().addCallback(
            getViewLifecycleOwner(),
            new TwoPaneOnBackPressedCallback(binding.getSlidingPaneLayout()));

        // Set up the RecyclerView adapter.
    }
}

लॉक मोड

SlidingPaneLayout आपको मैन्युअल तरीके से open() को कॉल करने की सुविधा देता है. close() का उपयोग करें. इन तरीकों में कोई का असर तब होता है, जब दोनों पैनल दिखते हों और ओवरलैप नहीं होते.

जब सूची और ज़्यादा जानकारी वाले पैनल ओवरलैप होते हैं, तो उपयोगकर्ता डिफ़ॉल्ट रूप से, जेस्चर का इस्तेमाल न होने पर भी दो पैनल के बीच आसानी से स्विच किया जा सकता है" नेविगेशन. स्वाइप करने की दिशा कंट्रोल की जा सकती है SlidingPaneLayout का लॉक मोड सेट करके:

Kotlin

binding.slidingPaneLayout.lockMode = SlidingPaneLayout.LOCK_MODE_LOCKED

Java

binding.getSlidingPaneLayout().setLockMode(SlidingPaneLayout.LOCK_MODE_LOCKED);

ध्यान दें: लॉक मोड सिर्फ़ यह कंट्रोल करता है कि उपयोगकर्ता के हाथ के कौनसे जेस्चर (हाव-भाव) इस्तेमाल किए जा सकते हैं. आप SlidingPaneLayout को प्रोग्राम के हिसाब से हमेशा खोलता या बंद करता है, भले ही कौनसा लॉक मोड सेट किया गया है.

ज़्यादा जानें

अलग-अलग डिवाइस टाइप के हिसाब से लेआउट डिज़ाइन करने के बारे में जानने के लिए, नीचे दिए गए दस्तावेज़:

• स्क्रीन के साथ काम करने की सुविधा के बारे में खास जानकारी
• अलग-अलग डिवाइस टाइप के हिसाब से डिज़ाइन करना

अन्य संसाधन

• अडैप्टिव लेआउट के लिए कोडलैब
• SlidingPaneLayout का उदाहरण GitHub पर.