\u6df1\u5ea6\u7814\u7a76\uff1aJetpack WindowManager<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n <style>\n \/* Custom styles for the 3D Foldable Simulator *\/\n .perspective-container {\n perspective: 1000px;\n }\n .device-half {\n transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);\n backface-visibility: hidden;\n }\n .hinge-line {\n background: linear-gradient(to bottom, #d6d3d1, #a8a29e, #d6d3d1);\n }\n \/* Chart container constraint *\/\n .chart-wrapper {\n position: relative;\n width: 100%;\n max-width: 600px;\n height: 300px;\n margin: 0 auto;\n }\n \/* Smooth scrolling *\/\n html {\n scroll-behavior: smooth;\n }\n body {\n font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;\n }\n <\/style>\n<\/head>\n<body class=\"bg-stone-50 text-stone-800 antialiased\">\n\n \n \n \n \n\n \n <nav class=\"sticky top-0 z-50 bg-white\/90 backdrop-blur-md border-b border-stone-200 shadow-sm\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"flex justify-between h-16 items-center\">\n <div class=\"flex items-center gap-2\">\n <span class=\"text-2xl\">\ud83d\udcf1<\/span>\n <span class=\"font-bold text-lg tracking-tight text-stone-900\">Jetpack WindowManager <span class=\"text-indigo-600\">\u6df1\u5ea6\u7814\u7a76<\/span><\/span>\n <\/div>\n <div class=\"hidden md:flex space-x-8 text-sm font-medium text-stone-600\">\n <a href=\"#context\" class=\"hover:text-indigo-600 transition\">\u5e02\u573a\u8d8b\u52bf<\/a>\n <a href=\"#simulator\" class=\"hover:text-indigo-600 transition\">\u6298\u53e0\u6001\u6a21\u62df<\/a>\n <a href=\"#metrics\" class=\"hover:text-indigo-600 transition\">\u7a97\u53e3\u9002\u914d<\/a>\n <a href=\"#embedding\" class=\"hover:text-indigo-600 transition\">Activity \u5d4c\u5165<\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/nav>\n\n \n <header class=\"bg-stone-100 py-16\">\n <div class=\"max-w-4xl mx-auto px-4 text-center\">\n <h1 class=\"text-4xl md:text-5xl font-extrabold text-stone-900 mb-6\">\n \u9002\u914d\u672a\u6765\u7684\u5f62\u6001\n <\/h1>\n <p class=\"text-xl text-stone-600 leading-relaxed mb-8\">\n Android \u8bbe\u5907\u5f62\u6001\u6b63\u5728\u53d1\u751f\u5267\u53d8\u3002Jetpack WindowManager \u662f\u8fde\u63a5\u4f20\u7edf UI \u4e0e\u6298\u53e0\u5c4f\u3001\u591a\u7a97\u53e3\u73af\u5883\u7684\u6865\u6881\u3002\n \u672c\u4ea4\u4e92\u5f0f\u62a5\u544a\u5c06\u5e26\u60a8\u6df1\u5165\u7406\u89e3\u6838\u5fc3 API\u3001\u6298\u53e0\u59ff\u6001\uff08Postures\uff09\u4ee5\u53ca\u54cd\u5e94\u5f0f\u5e03\u5c40\u7b56\u7565\u3002\n <\/p>\n <div class=\"flex justify-center gap-4\">\n <button onclick=\"document.getElementById('simulator').scrollIntoView()\" class=\"px-6 py-3 bg-indigo-600 text-white rounded-lg shadow-md hover:bg-indigo-700 transition font-semibold\">\n \u5f00\u59cb\u4ea4\u4e92\u4f53\u9a8c\n <\/button>\n <\/div>\n <\/div>\n <\/header>\n\n <main class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 space-y-20\">\n\n \n <section id=\"context\" class=\"scroll-mt-24\">\n <div class=\"grid md:grid-cols-2 gap-12 items-center\">\n <div>\n <div class=\"inline-block px-3 py-1 bg-indigo-100 text-indigo-700 rounded-full text-xs font-bold uppercase tracking-wide mb-4\">\n \u80cc\u666f\u4e0e\u8d8b\u52bf\n <\/div>\n <h2 class=\"text-3xl font-bold text-stone-900 mb-4\">\u4e3a\u4ec0\u4e48\u9700\u8981 WindowManager\uff1f<\/h2>\n <p class=\"text-stone-600 mb-6 leading-relaxed\">\n \u4f20\u7edf\u7684 <code>DisplayMetrics<\/code> \u5df2\u7ecf\u5931\u6548\u3002\u968f\u7740\u6298\u53e0\u5c4f\u51fa\u8d27\u91cf\u7684\u6fc0\u589e\uff0c\u5e94\u7528\u754c\u9762\u4e0d\u518d\u53ea\u662f\u7b80\u5355\u7684\u77e9\u5f62\u3002\n \u8bbe\u5907\u53ef\u80fd\u5728\u8fd0\u884c\u65f6\u6539\u53d8\u7269\u7406\u5f62\u6001\uff08\u5982\u4ece\u201c\u624b\u673a\u201d\u53d8\u4e3a\u201c\u5e73\u677f\u201d\uff09\uff0c\u6216\u8005\u4e2d\u95f4\u51fa\u73b0\u7269\u7406\u94f0\u94fe\u906e\u6321\u3002\n WindowManager \u5e93\u63d0\u4f9b\u4e86\u4e00\u5957\u6807\u51c6\u7684 API \u6765\u5904\u7406\u8fd9\u4e9b\u590d\u6742\u7684\u7a97\u53e3\u73af\u5883\u3002\n <\/p>\n <ul class=\"space-y-3 text-stone-700\">\n <li class=\"flex items-start\">\n <span class=\"mr-2 text-indigo-500\">\u2b24<\/span>\n <span><b>\u611f\u77e5\u6298\u53e0\u7279\u5f81\uff1a<\/b> \u8bc6\u522b\u94f0\u94fe\u4f4d\u7f6e\u3001\u7c7b\u578b\uff08\u6298\u53e0 vs \u94f0\u63a5\uff09\u3002<\/span>\n <\/li>\n <li class=\"flex items-start\">\n <span class=\"mr-2 text-indigo-500\">\u2b24<\/span>\n <span><b>\u7a97\u53e3\u5927\u5c0f\u4e3b\u8981\u53d8\u5316\uff1a<\/b> \u4e0d\u518d\u4f9d\u8d56\u7269\u7406\u5c4f\u5e55\u5c3a\u5bf8\uff0c\u800c\u662f\u5173\u6ce8\u5f53\u524d\u7a97\u53e3\uff08Window\uff09\u7684 Metrics\u3002<\/span>\n <\/li>\n <li class=\"flex items-start\">\n <span class=\"mr-2 text-indigo-500\">\u2b24<\/span>\n <span><b>\u5411\u540e\u517c\u5bb9\uff1a<\/b> \u652f\u6301\u4ece Android 4.0 (API 14) \u5f00\u59cb\u7684\u8bbe\u5907\u3002<\/span>\n <\/li>\n <\/ul>\n <\/div>\n \n <div class=\"bg-white p-6 rounded-2xl shadow-lg border border-stone-100\">\n <h3 class=\"text-lg font-semibold text-stone-800 mb-2\">\u5168\u7403\u6298\u53e0\u5c4f\u8bbe\u5907\u51fa\u8d27\u91cf\u9884\u6d4b (\u767e\u4e07\u53f0)<\/h3>\n <p class=\"text-xs text-stone-500 mb-4\">\u6570\u636e\u6765\u6e90\uff1a\u884c\u4e1a\u7efc\u5408\u5206\u6790 (\u6a21\u62df\u6570\u636e)<\/p>\n <div class=\"chart-wrapper\">\n <canvas id=\"marketChart\"><\/canvas>\n <\/div>\n <div class=\"mt-4 p-3 bg-stone-50 rounded text-sm text-stone-600\">\n <span class=\"font-bold text-indigo-600\">\u6d1e\u5bdf\uff1a<\/span> \n \u968f\u7740\u51fa\u8d27\u91cf\u5e74\u590d\u5408\u589e\u957f\u7387\u8d85\u8fc7 40%\uff0c\u9002\u914d\u6298\u53e0\u6001\u5df2\u4ece\u201c\u9526\u4e0a\u6dfb\u82b1\u201d\u53d8\u4e3a\u5934\u90e8\u5e94\u7528\u7684\u201c\u5fc5\u9009\u9879\u201d\u3002\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"simulator\" class=\"scroll-mt-24 bg-stone-900 text-stone-100 rounded-3xl p-8 md:p-12 overflow-hidden relative\">\n <div class=\"absolute top-0 right-0 p-32 bg-indigo-500 opacity-10 blur-[100px] rounded-full\"><\/div>\n \n <div class=\"mb-8\">\n <div class=\"inline-block px-3 py-1 bg-indigo-900 text-indigo-300 rounded-full text-xs font-bold uppercase tracking-wide mb-4\">\n \u6838\u5fc3 API \u5b9e\u9a8c\u5ba4\n <\/div>\n <h2 class=\"text-3xl font-bold mb-4\">FoldingFeature \u72b6\u6001\u6a21\u62df\u5668<\/h2>\n <p class=\"text-stone-400 max-w-2xl\">\n <code>FoldingFeature<\/code> \u5bf9\u8c61\u63cf\u8ff0\u4e86\u663e\u793a\u5c4f\u4e2d\u7684\u6298\u53e0\u90e8\u5206\u3002\u901a\u8fc7\u4e0b\u65b9\u7684\u63a7\u5236\u5668\uff0c\u6539\u53d8\u865a\u62df\u8bbe\u5907\u7684\u7269\u7406\u72b6\u6001\uff0c\u89c2\u5bdf WindowManager \u8bc6\u522b\u5230\u7684\u5173\u952e\u6570\u636e\u53d8\u5316\u3002\n <\/p>\n <\/div>\n\n <div class=\"grid lg:grid-cols-3 gap-8\">\n \n <div class=\"lg:col-span-1 space-y-6\">\n <div class=\"bg-stone-800 p-6 rounded-xl border border-stone-700\">\n <h4 class=\"text-sm font-semibold text-stone-300 uppercase mb-4\">\u7269\u7406\u59ff\u6001 (Device Posture)<\/h4>\n <div class=\"space-y-3\">\n <button onclick=\"setPosture('flat')\" class=\"w-full text-left px-4 py-3 rounded-lg bg-stone-700 hover:bg-indigo-600 transition flex items-center group active-posture\" id=\"btn-flat\">\n <span class=\"text-2xl mr-3\">\ud83d\udcf1<\/span>\n <div>\n <div class=\"font-bold group-hover:text-white\">\u5e73\u94fa (Flat)<\/div>\n <div class=\"text-xs text-stone-400\">\u666e\u901a\u7684\u5168\u9762\u5c4f\u4f53\u9a8c<\/div>\n <\/div>\n <\/button>\n <button onclick=\"setPosture('book')\" class=\"w-full text-left px-4 py-3 rounded-lg bg-stone-700 hover:bg-indigo-600 transition flex items-center group\" id=\"btn-book\">\n <span class=\"text-2xl mr-3\">\ud83d\udcd6<\/span>\n <div>\n <div class=\"font-bold group-hover:text-white\">\u4e66\u672c\u6a21\u5f0f (Book)<\/div>\n <div class=\"text-xs text-stone-400\">Vertical Hinge, Half-Opened<\/div>\n <\/div>\n <\/button>\n <button onclick=\"setPosture('tabletop')\" class=\"w-full text-left px-4 py-3 rounded-lg bg-stone-700 hover:bg-indigo-600 transition flex items-center group\" id=\"btn-tabletop\">\n <span class=\"text-2xl mr-3\">\ud83d\udcbb<\/span>\n <div>\n <div class=\"font-bold group-hover:text-white\">\u684c\u9762\u6a21\u5f0f (Tabletop)<\/div>\n <div class=\"text-xs text-stone-400\">Horizontal Hinge, Half-Opened<\/div>\n <\/div>\n <\/button>\n <\/div>\n <\/div>\n\n <div class=\"bg-stone-800 p-6 rounded-xl border border-stone-700\">\n <h4 class=\"text-sm font-semibold text-stone-300 uppercase mb-2\">API \u6570\u636e\u6d41<\/h4>\n <code class=\"block font-mono text-xs text-green-400 bg-black p-4 rounded-lg overflow-x-auto\" id=\"code-output\">\n \/\/ \u7b49\u5f85\u4ea4\u4e92...\n <\/code>\n <\/div>\n <\/div>\n\n \n <div class=\"lg:col-span-2 flex flex-col items-center justify-center min-h-[400px] perspective-container bg-stone-800\/50 rounded-xl border border-stone-700\/50 p-8\">\n \n \n <div id=\"device-mockup\" class=\"relative w-64 h-96 transition-all duration-700 transform-style-3d flex flex-col shadow-2xl\">\n \n <div id=\"screen-1\" class=\"device-half flex-1 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-t-2xl flex items-center justify-center border-x-4 border-t-4 border-stone-300 relative overflow-hidden origin-bottom\">\n <span class=\"text-white\/20 text-4xl font-black\">Content A<\/span>\n <div class=\"absolute inset-0 bg-black\/0 transition-colors duration-500\" id=\"shade-1\"><\/div>\n <\/div>\n \n \n <div id=\"hinge\" class=\"h-4 w-full bg-stone-800 flex items-center justify-center relative overflow-hidden transition-all duration-500\">\n <div class=\"w-full h-[1px] bg-stone-600\"><\/div>\n <\/div>\n\n \n <div id=\"screen-2\" class=\"device-half flex-1 bg-gradient-to-br from-indigo-600 to-purple-700 rounded-b-2xl flex items-center justify-center border-x-4 border-b-4 border-stone-300 origin-top\">\n <span class=\"text-white\/20 text-4xl font-black\">Content B<\/span>\n <\/div>\n <\/div>\n\n <div class=\"mt-8 text-center\">\n <div id=\"posture-label\" class=\"text-xl font-bold text-white mb-1\">STATE: FLAT<\/div>\n <div id=\"posture-desc\" class=\"text-stone-400 text-sm\">FoldingFeature \u4e3a null \u6216 isEmpty<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"metrics\" class=\"scroll-mt-24\">\n <div class=\"max-w-3xl mx-auto text-center mb-10\">\n <div class=\"inline-block px-3 py-1 bg-indigo-100 text-indigo-700 rounded-full text-xs font-bold uppercase tracking-wide mb-4\">\n \u54cd\u5e94\u5f0f\u5e03\u5c40\u57fa\u7840\n <\/div>\n <h2 class=\"text-3xl font-bold text-stone-900 mb-4\">WindowMetrics \u4e0e\u65ad\u70b9\u7cfb\u7edf<\/h2>\n <p class=\"text-stone-600\">\n \u4e0d\u8981\u518d\u4f7f\u7528\u7269\u7406\u5c4f\u5e55\u5c3a\u5bf8\u3002Android \u63a8\u8350\u4f7f\u7528 <b>WindowSizeClass<\/b> \u5c06\u7a97\u53e3\u5206\u4e3a Compact (\u7d27\u51d1), Medium (\u4e2d\u7b49), Expanded (\u5c55\u5f00) \u4e09\u7c7b\u3002\n \u62d6\u52a8\u4e0b\u65b9\u6ed1\u5757\uff0c\u4f53\u9a8c\u5e03\u5c40\u5982\u4f55\u968f\u7a97\u53e3\u5c3a\u5bf8\u53d8\u5316\u800c\u91cd\u6784\u3002\n <\/p>\n <\/div>\n\n \n <div class=\"bg-white rounded-2xl shadow-lg border border-stone-200 overflow-hidden\">\n <div class=\"bg-stone-100 p-4 border-b border-stone-200 flex flex-wrap gap-6 items-center justify-between\">\n <div class=\"flex gap-4 items-center flex-1\">\n <label class=\"text-sm font-bold text-stone-600\">\u7a97\u53e3\u5bbd\u5ea6:<\/label>\n <input type=\"range\" min=\"300\" max=\"1000\" value=\"400\" id=\"width-slider\" class=\"w-full h-2 bg-stone-300 rounded-lg appearance-none cursor-pointer accent-indigo-600\">\n <\/div>\n <div class=\"flex gap-2 text-sm font-mono bg-white px-3 py-1 rounded border border-stone-300\">\n <span id=\"width-display\">400dp<\/span> x <span id=\"height-display\">800dp<\/span>\n <\/div>\n <\/div>\n\n <div class=\"p-8 bg-stone-50 min-h-[500px] flex items-center justify-center relative overflow-hidden\">\n \n <div class=\"absolute inset-0\" style=\"background-image: radial-gradient(#d6d3d1 1px, transparent 1px); background-size: 20px 20px; opacity: 0.5;\"><\/div>\n\n \n <div id=\"demo-window\" class=\"bg-white shadow-2xl border-4 border-stone-800 rounded-xl flex flex-col transition-all duration-200 ease-out relative\" style=\"width: 400px; height: 500px;\">\n \n \n <div class=\"h-12 bg-stone-800 flex items-center px-4 justify-between\">\n <div class=\"flex gap-2\">\n <div class=\"w-3 h-3 rounded-full bg-red-500\"><\/div>\n <div class=\"w-3 h-3 rounded-full bg-yellow-500\"><\/div>\n <\/div>\n <div class=\"text-stone-400 text-xs font-mono\">MyActivity<\/div>\n <\/div>\n\n \n <div class=\"flex-1 p-4 overflow-hidden flex flex-col gap-4\">\n \n <div id=\"class-indicator\" class=\"bg-indigo-100 text-indigo-800 text-center py-2 rounded font-bold text-sm border border-indigo-200\">\n Compact Width\n <\/div>\n\n \n <div id=\"layout-container\" class=\"flex flex-col gap-4 h-full\">\n <div class=\"h-32 bg-stone-200 rounded-lg animate-pulse w-full\"><\/div>\n <div class=\"flex-1 bg-stone-100 rounded-lg p-4 text-stone-400 text-sm\">\n Main Content Area…\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"absolute -right-16 top-1\/2 transform -translate-y-1\/2 rotate-90 text-xs text-stone-400 font-mono hidden md:block\">\n HEIGHT\n <\/div>\n <div class=\"absolute bottom-[-2rem] left-1\/2 transform -translate-x-1\/2 text-xs text-stone-400 font-mono\">\n WIDTH\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"mt-6 grid grid-cols-1 md:grid-cols-3 gap-4\">\n <div class=\"p-4 bg-white border-l-4 border-red-400 shadow-sm rounded-r-lg\">\n <h4 class=\"font-bold text-stone-800\">Compact (width < 600dp)<\/h4>\n <p class=\"text-sm text-stone-500 mt-1\">\u5178\u578b\u7684\u624b\u673a\u7ad6\u5c4f\u3002\u4f7f\u7528\u5355\u5217\u5e03\u5c40\uff0c\u5e95\u90e8\u5bfc\u822a\u680f\u3002<\/p>\n <\/div>\n <div class=\"p-4 bg-white border-l-4 border-yellow-400 shadow-sm rounded-r-lg\">\n <h4 class=\"font-bold text-stone-800\">Medium (600dp \u2264 width < 840dp)<\/h4>\n <p class=\"text-sm text-stone-500 mt-1\">\u6298\u53e0\u5c4f\u5c55\u5f00\u6001\u6216\u5c0f\u578b\u5e73\u677f\u3002\u53ef\u5c1d\u8bd5\u7b80\u5355\u7684\u53cc\u5217\u5e03\u5c40\u6216\u4fa7\u8fb9\u680f\u3002<\/p>\n <\/div>\n <div class=\"p-4 bg-white border-l-4 border-green-400 shadow-sm rounded-r-lg\">\n <h4 class=\"font-bold text-stone-800\">Expanded (width \u2265 840dp)<\/h4>\n <p class=\"text-sm text-stone-500 mt-1\">\u684c\u9762\u5927\u5c4f\u6216\u5927\u578b\u5e73\u677f\u3002\u5fc5\u987b\u4f7f\u7528 Master-Detail \u5e03\u5c40\uff0c\u5229\u7528\u5269\u4f59\u7a7a\u95f4\u3002<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"embedding\" class=\"scroll-mt-24\">\n <div class=\"grid md:grid-cols-2 gap-12 items-start\">\n <div>\n <div class=\"inline-block px-3 py-1 bg-indigo-100 text-indigo-700 rounded-full text-xs font-bold uppercase tracking-wide mb-4\">\n \u5927\u5c4f\u4f18\u5316\u795e\u5668\n <\/div>\n <h2 class=\"text-3xl font-bold text-stone-900 mb-4\">Activity Embedding (\u6d3b\u52a8\u5d4c\u5165)<\/h2>\n <p class=\"text-stone-600 mb-6 leading-relaxed\">\n \u5bf9\u4e8e\u8bb8\u591a\u65e7\u9879\u76ee\uff0c\u5c06\u6240\u6709 Activity \u91cd\u6784\u4e3a Fragment \u6210\u672c\u5de8\u5927\u3002\n <b>Activity Embedding<\/b> \u5141\u8bb8\u5728\u4ece\u4e0d\u91cd\u6784\u4ee3\u7801\u7684\u60c5\u51b5\u4e0b\uff0c\u8ba9\u591a\u4e2a Activity \u5728\u5927\u5c4f\u8bbe\u5907\u4e0a\u5e76\u6392\u663e\u793a\u3002\n \u7cfb\u7edf\u4f1a\u81ea\u52a8\u5904\u7406 Activity \u6808\u3002\n <\/p>\n\n <div class=\"space-y-4\">\n <div class=\"p-4 bg-white rounded-lg shadow-sm border border-stone-200\">\n <h4 class=\"font-bold text-stone-800 flex items-center\">\n <span class=\"bg-stone-800 text-white rounded w-6 h-6 flex items-center justify-center text-xs mr-2\">1<\/span>\n \u914d\u7f6e XML \u89c4\u5219\n <\/h4>\n <p class=\"text-sm text-stone-500 mt-1 ml-8\">\n \u5b9a\u4e49 <code>SplitPairRule<\/code>\uff0c\u544a\u8bc9\u7cfb\u7edf\u54ea\u4e9b Activity \u5e94\u8be5\u6210\u5bf9\u51fa\u73b0\uff08\u4f8b\u5982 ListActivity \u548c DetailActivity\uff09\u3002\n <\/p>\n <\/div>\n <div class=\"p-4 bg-white rounded-lg shadow-sm border border-stone-200\">\n <h4 class=\"font-bold text-stone-800 flex items-center\">\n <span class=\"bg-stone-800 text-white rounded w-6 h-6 flex items-center justify-center text-xs mr-2\">2<\/span>\n \u5360\u4f4d\u7b26 (Placeholder)\n <\/h4>\n <p class=\"text-sm text-stone-500 mt-1 ml-8\">\n \u5f53\u7528\u6237\u8fd8\u6ca1\u70b9\u51fb\u5217\u8868\u9879\u65f6\uff0c\u53f3\u4fa7\u663e\u793a\u4ec0\u4e48\uff1f\u914d\u7f6e <code>SplitPlaceholderRule<\/code> \u6765\u5c55\u793a\u9ed8\u8ba4\u5185\u5bb9\u3002\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"bg-stone-900 rounded-2xl p-2 shadow-2xl\">\n <div class=\"flex justify-between items-center px-4 py-3 border-b border-stone-700\">\n <span class=\"text-stone-400 text-xs\">Activity Embedding \u6f14\u793a<\/span>\n <button id=\"toggle-screen-mode\" class=\"text-xs bg-indigo-600 hover:bg-indigo-500 text-white px-3 py-1 rounded transition\">\n \u5207\u6362\u6a21\u5f0f: \u5e73\u677f (Side-by-side)\n <\/button>\n <\/div>\n <div id=\"embedding-viewport\" class=\"relative bg-white w-full h-[400px] overflow-hidden transition-all duration-500 flex\">\n \n \n <div id=\"activity-a\" class=\"w-full md:w-1\/3 border-r border-stone-200 bg-stone-50 flex flex-col transition-all duration-300\">\n <div class=\"p-4 border-b border-stone-200 font-bold text-lg bg-white\">\u90ae\u4ef6\u5217\u8868<\/div>\n <div class=\"flex-1 overflow-y-auto p-2 space-y-2\">\n <div onclick=\"selectEmail(1)\" class=\"p-3 bg-white rounded shadow-sm hover:bg-indigo-50 cursor-pointer border border-transparent hover:border-indigo-200 transition\">\n <div class=\"font-bold text-sm text-stone-800\">Project Alpha<\/div>\n <div class=\"text-xs text-stone-500\">\u622a\u6b62\u65e5\u671f\u66f4\u65b0…<\/div>\n <\/div>\n <div onclick=\"selectEmail(2)\" class=\"p-3 bg-white rounded shadow-sm hover:bg-indigo-50 cursor-pointer border border-transparent hover:border-indigo-200 transition\">\n <div class=\"font-bold text-sm text-stone-800\">Team Building<\/div>\n <div class=\"text-xs text-stone-500\">\u672c\u5468\u4e94\u4e0b\u5348…<\/div>\n <\/div>\n <div onclick=\"selectEmail(3)\" class=\"p-3 bg-white rounded shadow-sm hover:bg-indigo-50 cursor-pointer border border-transparent hover:border-indigo-200 transition\">\n <div class=\"font-bold text-sm text-stone-800\">System Alert<\/div>\n <div class=\"text-xs text-stone-500\">\u670d\u52a1\u5668\u7ef4\u62a4\u901a\u77e5…<\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"activity-b\" class=\"absolute inset-0 md:static md:w-2\/3 bg-white flex flex-col transform translate-x-full md:translate-x-0 transition-transform duration-300 z-10\">\n <div class=\"p-4 border-b border-stone-200 flex items-center bg-white shadow-sm\">\n <button onclick=\"closeDetail()\" class=\"md:hidden mr-3 text-stone-500 hover:text-stone-800\">\u2190 \u8fd4\u56de<\/button>\n <span class=\"font-bold text-stone-800\">\u90ae\u4ef6\u8be6\u60c5<\/span>\n <\/div>\n <div class=\"flex-1 p-8 flex items-center justify-center text-center\">\n <div id=\"detail-content\">\n <span class=\"text-4xl block mb-4\">\ud83d\udce9<\/span>\n <p class=\"text-stone-400\">\u8bf7\u9009\u62e9\u5de6\u4fa7\u90ae\u4ef6\u67e5\u770b\u8be6\u60c5<br><span class=\"text-xs opacity-70\">(Placeholder Activity)<\/span><\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n <div class=\"bg-stone-800 px-4 py-2 text-xs font-mono text-green-400 rounded-b-xl\" id=\"embedding-log\">\n Current Layout: SplitPairRule(minWidth=600dp)\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <\/main>\n\n \n <footer class=\"bg-stone-900 text-stone-400 py-12 border-t border-stone-800\">\n <div class=\"max-w-7xl mx-auto px-4 text-center\">\n <h3 class=\"text-white font-bold text-lg mb-4\">Jetpack WindowManager Summary<\/h3>\n <div class=\"flex flex-wrap justify-center gap-8 text-sm mb-8\">\n <span>API Level: 1.0.0+<\/span>\n <span>Requires: Android 4.0+<\/span>\n <span>Integration: Gradle Implementation<\/span>\n <\/div>\n <p class=\"text-xs opacity-50\">\n Generated based on Android Developer Documentation concepts. <br>\n Interactive visualization for educational purposes.\n <\/p>\n <\/div>\n <\/footer>\n\n \n <script>\n \/\/ --- State Management ---\n const state = {\n posture: 'flat', \/\/ flat, book, tabletop\n windowWidth: 400,\n emailSelected: null,\n isTabletMode: false \/\/ for embedding demo\n };\n\n \/\/ --- Chart.js Initialization (Market Data) ---\n document.addEventListener('DOMContentLoaded', () => {\n const ctx = document.getElementById('marketChart').getContext('2d');\n new Chart(ctx, {\n type: 'bar',\n data: {\n labels: ['2020', '2021', '2022', '2023', '2024 (E)', '2025 (E)'],\n datasets: [{\n label: '\u6298\u53e0\u5c4f\u51fa\u8d27\u91cf (\u767e\u4e07\u53f0)',\n data: [2.5, 9.0, 14.2, 18.5, 30.0, 48.0],\n backgroundColor: '#4f46e5', \/\/ Indigo 600\n borderRadius: 4,\n hoverBackgroundColor: '#4338ca'\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n plugins: {\n legend: { display: false },\n tooltip: {\n callbacks: {\n label: function(context) {\n return context.parsed.y + ' \u767e\u4e07\u53f0';\n }\n }\n }\n },\n scales: {\n y: {\n beginAtZero: true,\n grid: { color: '#e7e5e4' } \/\/ Stone 200\n },\n x: {\n grid: { display: false }\n }\n }\n }\n });\n\n \/\/ Initialize simulators\n updateSimulatorUI();\n updateWindowMetrics();\n updateEmbeddingLayout();\n });\n\n \/\/ --- Section 2: FoldingFeature Simulator Logic ---\n function setPosture(newPosture) {\n state.posture = newPosture;\n updateSimulatorUI();\n }\n\n function updateSimulatorUI() {\n const device = document.getElementById('device-mockup');\n const hinge = document.getElementById('hinge');\n const screen1 = document.getElementById('screen-1');\n const screen2 = document.getElementById('screen-2');\n const shade1 = document.getElementById('shade-1');\n const label = document.getElementById('posture-label');\n const desc = document.getElementById('posture-desc');\n const code = document.getElementById('code-output');\n const btns = document.querySelectorAll('#simulator button');\n\n \/\/ Reset buttons\n btns.forEach(btn => btn.classList.remove('bg-indigo-600', 'text-white'));\n document.getElementById(`btn-${state.posture}`).classList.add('bg-indigo-600', 'text-white');\n\n \/\/ Reset Transforms\n device.style.transform = 'rotateX(0deg) rotateY(0deg)';\n device.style.flexDirection = 'column'; \/\/ Default portrait\n hinge.style.height = '16px';\n hinge.style.width = '100%';\n screen1.style.transform = 'none';\n screen2.style.transform = 'none';\n shade1.style.backgroundColor = 'rgba(0,0,0,0)';\n\n let codeText = \"\";\n\n if (state.posture === 'flat') {\n label.innerText = \"STATE: FLAT\";\n desc.innerText = \"FoldingFeature is null or state is FLAT\";\n codeText = `\nWindowLayoutInfo {\n displayFeatures = [] \n}`;\n } else if (state.posture === 'book') {\n \/\/ Visualize Book Mode (Vertical Hinge)\n device.style.flexDirection = 'row'; \n hinge.style.width = '16px';\n hinge.style.height = '100%';\n \n \/\/ 3D fold\n device.style.transform = 'rotateY(-20deg)';\n screen1.style.transform = 'rotateY(-30deg)';\n screen2.style.transform = 'rotateY(30deg)';\n shade1.style.backgroundColor = 'rgba(0,0,0,0.1)';\n\n label.innerText = \"STATE: HALF_OPEN (Book)\";\n desc.innerText = \"Orientation: VERTICAL, OcclusionType: HINGE\";\n codeText = `\nFoldingFeature {\n state: HALF_OPEN,\n orientation: VERTICAL,\n isSeparating: true\n}`;\n } else if (state.posture === 'tabletop') {\n \/\/ Visualize Tabletop Mode (Horizontal Hinge)\n device.style.flexDirection = 'column';\n \n \/\/ 3D fold\n device.style.transform = 'rotateX(10deg)';\n screen1.style.transform = 'rotateX(40deg)';\n screen2.style.transform = 'rotateX(-40deg)';\n shade1.style.backgroundColor = 'rgba(0,0,0,0.1)';\n\n label.innerText = \"STATE: HALF_OPEN (Tabletop)\";\n desc.innerText = \"Orientation: HORIZONTAL\";\n codeText = `\nFoldingFeature {\n state: HALF_OPEN,\n orientation: HORIZONTAL,\n isSeparating: true\n}`;\n }\n\n code.innerText = codeText;\n }\n\n \/\/ --- Section 3: Window Metrics Logic ---\n const slider = document.getElementById('width-slider');\n const demoWindow = document.getElementById('demo-window');\n const widthDisplay = document.getElementById('width-display');\n const indicator = document.getElementById('class-indicator');\n const layoutContainer = document.getElementById('layout-container');\n\n slider.addEventListener('input', (e) => {\n state.windowWidth = parseInt(e.target.value);\n updateWindowMetrics();\n });\n\n function updateWindowMetrics() {\n const w = state.windowWidth;\n demoWindow.style.width = `${w}px`;\n widthDisplay.innerText = `${w}dp`;\n\n \/\/ Logic logic for WindowSizeClass (approximate logic for demo)\n let sizeClass = \"\";\n let colorClass = \"\";\n let layoutHTML = \"\";\n\n if (w < 600) {\n sizeClass = \"COMPACT\";\n colorClass = \"bg-red-100 text-red-800 border-red-200\";\n layoutHTML = `\n <div class=\"h-full flex flex-col gap-2\">\n <div class=\"h-1\/3 bg-stone-300 rounded animate-pulse\"><\/div>\n <div class=\"h-1\/3 bg-stone-200 rounded\"><\/div>\n <div class=\"h-1\/3 bg-stone-200 rounded\"><\/div>\n <\/div>`;\n } else if (w < 840) {\n sizeClass = \"MEDIUM\";\n colorClass = \"bg-yellow-100 text-yellow-800 border-yellow-200\";\n layoutHTML = `\n <div class=\"h-full grid grid-cols-2 gap-2\">\n <div class=\"bg-stone-300 rounded animate-pulse\"><\/div>\n <div class=\"flex flex-col gap-2\">\n <div class=\"h-1\/2 bg-stone-200 rounded\"><\/div>\n <div class=\"h-1\/2 bg-stone-200 rounded\"><\/div>\n <\/div>\n <\/div>`;\n } else {\n sizeClass = \"EXPANDED\";\n colorClass = \"bg-green-100 text-green-800 border-green-200\";\n layoutHTML = `\n <div class=\"h-full flex gap-4\">\n <div class=\"w-1\/4 bg-stone-200 rounded flex flex-col gap-2 p-2\">\n <div class=\"h-8 bg-stone-300 rounded\"><\/div>\n <div class=\"h-8 bg-stone-300 rounded\"><\/div>\n <div class=\"h-8 bg-stone-300 rounded\"><\/div>\n <\/div>\n <div class=\"flex-1 bg-stone-300 rounded animate-pulse flex items-center justify-center text-stone-500\">Detail View<\/div>\n <\/div>`;\n }\n\n indicator.className = `text-center py-2 rounded font-bold text-sm border transition-colors ${colorClass}`;\n indicator.innerText = `Width Class: ${sizeClass}`;\n layoutContainer.innerHTML = layoutHTML;\n }\n\n \/\/ --- Section 4: Activity Embedding Logic ---\n const toggleBtn = document.getElementById('toggle-screen-mode');\n const activityA = document.getElementById('activity-a');\n const activityB = document.getElementById('activity-b');\n const detailContent = document.getElementById('detail-content');\n const embeddingLog = document.getElementById('embedding-log');\n const embeddingViewport = document.getElementById('embedding-viewport');\n\n toggleBtn.addEventListener('click', () => {\n state.isTabletMode = !state.isTabletMode;\n toggleBtn.innerText = state.isTabletMode ? \"\u5207\u6362\u6a21\u5f0f: \u624b\u673a (Stack)\" : \"\u5207\u6362\u6a21\u5f0f: \u5e73\u677f (Side-by-side)\";\n toggleBtn.classList.toggle('bg-indigo-600');\n toggleBtn.classList.toggle('bg-stone-600');\n \n \/\/ Reset selection when changing mode for clarity\n state.emailSelected = null;\n closeDetail(); \/\/ visual reset\n updateEmbeddingLayout();\n });\n\n function selectEmail(id) {\n state.emailSelected = id;\n const content = {\n 1: { title: \"Project Alpha\", body: \"\u56e2\u961f\u6b63\u5728\u5168\u529b\u63a8\u8fdb Project Alpha...\" },\n 2: { title: \"Team Building\", body: \"\u672c\u5468\u4e94\u4e0b\u5348 3 \u70b9\u5728\u4f11\u606f\u5ba4...\" },\n 3: { title: \"System Alert\", body: \"\u670d\u52a1\u5668\u5c06\u5728\u4eca\u665a 12 \u70b9\u8fdb\u884c\u7ef4\u62a4...\" }\n }[id];\n\n detailContent.innerHTML = `\n <div class=\"text-left animate-fade-in\">\n <h3 class=\"text-xl font-bold text-indigo-700 mb-2\">${content.title}<\/h3>\n <p class=\"text-stone-600\">${content.body}<\/p>\n <div class=\"mt-4 p-2 bg-stone-100 text-xs text-stone-500 rounded\">Activity ID: com.app.DetailActivity<\/div>\n <\/div>\n `;\n\n if (!state.isTabletMode) {\n \/\/ Phone mode: slide in Activity B\n activityB.classList.remove('translate-x-full');\n activityB.classList.add('translate-x-0');\n }\n }\n\n function closeDetail() {\n state.emailSelected = null;\n detailContent.innerHTML = `<span class=\"text-4xl block mb-4\">\ud83d\udce9<\/span><p class=\"text-stone-400\">\u8bf7\u9009\u62e9\u5de6\u4fa7\u90ae\u4ef6\u67e5\u770b\u8be6\u60c5<br><span class=\"text-xs opacity-70\">(Placeholder Activity)<\/span><\/p>`;\n \n if (!state.isTabletMode) {\n \/\/ Phone mode: slide out\n activityB.classList.remove('translate-x-0');\n activityB.classList.add('translate-x-full');\n }\n }\n\n function updateEmbeddingLayout() {\n if (state.isTabletMode) {\n \/\/ Tablet: A and B side by side\n activityA.classList.remove('w-full');\n activityA.classList.add('w-1\/3');\n \n activityB.classList.remove('absolute', 'inset-0', 'transform', 'translate-x-full');\n activityB.classList.add('static', 'w-2\/3', 'translate-x-0');\n \n embeddingLog.innerText = \"Current Layout: SplitPairRule (A | B) - Two Panes Visible\";\n embeddingLog.classList.remove('text-yellow-400');\n embeddingLog.classList.add('text-green-400');\n } else {\n \/\/ Phone: Stacked (A covers B or B covers A)\n activityA.classList.remove('w-1\/3');\n activityA.classList.add('w-full');\n\n activityB.classList.remove('static', 'w-2\/3', 'translate-x-0');\n activityB.classList.add('absolute', 'inset-0', 'transform', 'translate-x-full');\n\n embeddingLog.innerText = \"Current Layout: Stack (A -> B) - Single Pane Visible\";\n embeddingLog.classList.remove('text-green-400');\n embeddingLog.classList.add('text-yellow-400');\n }\n }\n\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u6df1\u5ea6\u7814\u7a76\uff1aJetpack WindowManager \ud83d\udcf1 Jetpack WindowManager \u6df1\u5ea6\u7814\u7a76 \u5e02\u573a\u8d8b\u52bf \u6298\u53e0\u6001\u6a21\u62df \u7a97\u53e3\u9002\u914d Activity \u5d4c\u5165 \u9002\u914d\u672a\u6765\u7684\u5f62\u6001 Android \u8bbe\u5907\u5f62\u6001\u6b63\u5728\u53d1\u751f\u5267\u53d8\u3002Jetpack WindowManager \u662f\u8fde\u63a5\u4f20\u7edf UI \u4e0e\u6298\u53e0\u5c4f\u3001\u591a\u7a97\u53e3\u73af\u5883\u7684\u6865\u6881\u3002 \u672c\u4ea4\u4e92\u5f0f\u62a5\u544a\u5c06\u5e26\u60a8\u6df1\u5165\u7406\u89e3\u6838\u5fc3 API\u3001\u6298\u53e0\u59ff\u6001\uff08Postures\uff09\u4ee5\u53ca\u54cd\u5e94\u5f0f\u5e03\u5c40\u7b56\u7565\u3002 \u5f00\u59cb\u4ea4\u4e92\u4f53\u9a8c \u80cc\u666f\u4e0e\u8d8b\u52bf \u4e3a\u4ec0\u4e48\u9700\u8981 WindowManager\uff1f \u4f20\u7edf\u7684 DisplayMetrics \u5df2\u7ecf\u5931\u6548\u3002\u968f\u7740\u6298\u53e0\u5c4f\u51fa\u8d27\u91cf\u7684\u6fc0\u589e\uff0c\u5e94\u7528\u754c\u9762\u4e0d\u518d\u53ea\u662f\u7b80\u5355\u7684\u77e9\u5f62\u3002 \u8bbe\u5907\u53ef\u80fd\u5728\u8fd0\u884c\u65f6\u6539\u53d8\u7269\u7406\u5f62\u6001\uff08\u5982\u4ece\u201c\u624b\u673a\u201d\u53d8\u4e3a\u201c\u5e73\u677f\u201d\uff09\uff0c\u6216\u8005\u4e2d\u95f4\u51fa\u73b0\u7269\u7406\u94f0\u94fe\u906e\u6321\u3002 WindowManager \u5e93\u63d0\u4f9b\u4e86\u4e00\u5957\u6807\u51c6\u7684 API \u6765\u5904\u7406\u8fd9\u4e9b\u590d\u6742\u7684\u7a97\u53e3\u73af\u5883\u3002 \u2b24 \u611f\u77e5\u6298\u53e0\u7279\u5f81\uff1a \u8bc6\u522b\u94f0\u94fe\u4f4d\u7f6e\u3001\u7c7b\u578b\uff08\u6298\u53e0 vs \u94f0\u63a5\uff09\u3002 \u2b24 \u7a97\u53e3\u5927\u5c0f\u4e3b\u8981\u53d8\u5316\uff1a \u4e0d\u518d\u4f9d\u8d56\u7269\u7406\u5c4f\u5e55\u5c3a\u5bf8\uff0c\u800c\u662f\u5173\u6ce8\u5f53\u524d\u7a97\u53e3\uff08Window\uff09\u7684 Metrics\u3002 \u2b24 \u5411\u540e\u517c\u5bb9\uff1a \u652f\u6301\u4ece Android 4.0 (API 14) \u5f00\u59cb\u7684\u8bbe\u5907\u3002 \u5168\u7403\u6298\u53e0\u5c4f\u8bbe\u5907\u51fa\u8d27\u91cf\u9884\u6d4b (\u767e\u4e07\u53f0) \u6570\u636e\u6765\u6e90\uff1a\u884c\u4e1a\u7efc\u5408\u5206\u6790 (\u6a21\u62df\u6570\u636e) \u6d1e\u5bdf\uff1a \u968f\u7740\u51fa\u8d27\u91cf\u5e74\u590d\u5408\u589e\u957f\u7387\u8d85\u8fc7 40%\uff0c\u9002\u914d\u6298\u53e0\u6001\u5df2\u4ece\u201c\u9526\u4e0a\u6dfb\u82b1\u201d\u53d8\u4e3a\u5934\u90e8\u5e94\u7528\u7684\u201c\u5fc5\u9009\u9879\u201d\u3002 \u6838\u5fc3 API \u5b9e\u9a8c\u5ba4 FoldingFeature \u72b6\u6001\u6a21\u62df\u5668 FoldingFeature \u5bf9\u8c61\u63cf\u8ff0\u4e86\u663e\u793a\u5c4f\u4e2d\u7684\u6298\u53e0\u90e8\u5206\u3002\u901a\u8fc7\u4e0b\u65b9\u7684\u63a7\u5236\u5668\uff0c\u6539\u53d8\u865a\u62df\u8bbe\u5907\u7684\u7269\u7406\u72b6\u6001\uff0c\u89c2\u5bdf WindowManager \u8bc6\u522b\u5230\u7684\u5173\u952e\u6570\u636e\u53d8\u5316\u3002 \u7269\u7406\u59ff\u6001 (Device Posture) \ud83d\udcf1 \u5e73\u94fa (Flat) \u666e\u901a\u7684\u5168\u9762\u5c4f\u4f53\u9a8c \ud83d\udcd6 \u4e66\u672c\u6a21\u5f0f (Book) Vertical Hinge, Half-Opened \ud83d\udcbb \u684c\u9762\u6a21\u5f0f (Tabletop) Horizontal Hinge, Half-Opened API \u6570\u636e\u6d41 \/\/ \u7b49\u5f85\u4ea4\u4e92… Content A Content B STATE: FLAT FoldingFeature \u4e3a null \u6216 isEmpty \u54cd\u5e94\u5f0f\u5e03\u5c40\u57fa\u7840 WindowMetrics \u4e0e\u65ad\u70b9\u7cfb\u7edf \u4e0d\u8981\u518d\u4f7f\u7528\u7269\u7406\u5c4f\u5e55\u5c3a\u5bf8\u3002Android \u63a8\u8350\u4f7f\u7528 WindowSizeClass \u5c06\u7a97\u53e3\u5206\u4e3a Compact (\u7d27\u51d1), Medium (\u4e2d\u7b49), Expanded (\u5c55\u5f00) \u4e09\u7c7b\u3002 \u62d6\u52a8\u4e0b\u65b9\u6ed1\u5757\uff0c\u4f53\u9a8c\u5e03\u5c40\u5982\u4f55\u968f\u7a97\u53e3\u5c3a\u5bf8\u53d8\u5316\u800c\u91cd\u6784\u3002 \u7a97\u53e3\u5bbd\u5ea6: 400dp x 800dp MyActivity Compact Width Main Content Area… HEIGHT WIDTH Compact (width < 600dp) \u5178\u578b\u7684\u624b\u673a\u7ad6\u5c4f\u3002\u4f7f\u7528\u5355\u5217\u5e03\u5c40\uff0c\u5e95\u90e8\u5bfc\u822a\u680f\u3002 Medium (600dp \u2264 width < 840dp) \u6298\u53e0\u5c4f\u5c55\u5f00\u6001\u6216\u5c0f\u578b\u5e73\u677f\u3002\u53ef\u5c1d\u8bd5\u7b80\u5355\u7684\u53cc\u5217\u5e03\u5c40\u6216\u4fa7\u8fb9\u680f\u3002 Expanded (width \u2265 840dp) \u684c\u9762\u5927\u5c4f\u6216\u5927\u578b\u5e73\u677f\u3002\u5fc5\u987b\u4f7f\u7528 Master-Detail \u5e03\u5c40\uff0c\u5229\u7528\u5269\u4f59\u7a7a\u95f4\u3002 \u5927\u5c4f\u4f18\u5316\u795e\u5668 Activity Embedding (\u6d3b\u52a8\u5d4c\u5165) \u5bf9\u4e8e\u8bb8\u591a\u65e7\u9879\u76ee\uff0c\u5c06\u6240\u6709 Activity \u91cd\u6784\u4e3a Fragment \u6210\u672c\u5de8\u5927\u3002 Activity Embedding \u5141\u8bb8\u5728\u4ece\u4e0d\u91cd\u6784\u4ee3\u7801\u7684\u60c5\u51b5\u4e0b\uff0c\u8ba9\u591a\u4e2a Activity \u5728\u5927\u5c4f\u8bbe\u5907\u4e0a\u5e76\u6392\u663e\u793a\u3002 \u7cfb\u7edf\u4f1a\u81ea\u52a8\u5904\u7406 Activity \u6808\u3002 1 \u914d\u7f6e XML \u89c4\u5219 \u5b9a\u4e49 SplitPairRule\uff0c\u544a\u8bc9\u7cfb\u7edf\u54ea\u4e9b Activity \u5e94\u8be5\u6210\u5bf9\u51fa\u73b0\uff08\u4f8b\u5982 ListActivity \u548c DetailActivity\uff09\u3002 2 \u5360\u4f4d\u7b26 (Placeholder) \u5f53\u7528\u6237\u8fd8\u6ca1\u70b9\u51fb\u5217\u8868\u9879\u65f6\uff0c\u53f3\u4fa7\u663e\u793a\u4ec0\u4e48\uff1f\u914d\u7f6e SplitPlaceholderRule \u6765\u5c55\u793a\u9ed8\u8ba4\u5185\u5bb9\u3002 Activity Embedding \u6f14\u793a \u5207\u6362\u6a21\u5f0f: \u5e73\u677f (Side-by-side) \u90ae\u4ef6\u5217\u8868 Project Alpha \u622a\u6b62\u65e5\u671f\u66f4\u65b0… Team Building \u672c\u5468\u4e94\u4e0b\u5348… System Alert \u670d\u52a1\u5668\u7ef4\u62a4\u901a\u77e5… \u2190 \u8fd4\u56de \u90ae\u4ef6\u8be6\u60c5 \ud83d\udce9 \u8bf7\u9009\u62e9\u5de6\u4fa7\u90ae\u4ef6\u67e5\u770b\u8be6\u60c5(Placeholder Activity) Current Layout: SplitPairRule(minWidth=600dp) Jetpack WindowManager Summary API Level: 1.0.0+ Requires: Android 4.0+ Integration: Gradle Implementation Generated based on Android Developer Documentation c...\n<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-630","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/trantor.ink\/index.php?rest_route=\/wp\/v2\/pages\/630","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/trantor.ink\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/trantor.ink\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/trantor.ink\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/trantor.ink\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=630"}],"version-history":[{"count":1,"href":"https:\/\/trantor.ink\/index.php?rest_route=\/wp\/v2\/pages\/630\/revisions"}],"predecessor-version":[{"id":631,"href":"https:\/\/trantor.ink\/index.php?rest_route=\/wp\/v2\/pages\/630\/revisions\/631"}],"wp:attachment":[{"href":"https:\/\/trantor.ink\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=630"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":630,"date":"2026-01-05T15:40:46","date_gmt":"2026-01-05T07:40:46","guid":{"rendered":"https:\/\/trantor.ink\/?page_id=630"},"modified":"2026-01-05T15:40:46","modified_gmt":"2026-01-05T07:40:46","slug":"%e6%b7%b1%e5%ba%a6%e7%a0%94%e7%a9%b6%ef%bc%9ajetpack-windowmanager","status":"publish","type":"page","link":"https:\/\/trantor.ink\/?page_id=630","title":{"rendered":"\u6df1\u5ea6\u7814\u7a76\uff1aJetpack WindowManager"},"content":{"rendered":"\n\n\n\n \n \n \u6df1\u5ea6\u7814\u7a76\uff1aJetpack WindowManager<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n <style>\n \/* Custom styles for the 3D Foldable Simulator *\/\n .perspective-container {\n perspective: 1000px;\n }\n .device-half {\n transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);\n backface-visibility: hidden;\n }\n .hinge-line {\n background: linear-gradient(to bottom, #d6d3d1, #a8a29e, #d6d3d1);\n }\n \/* Chart container constraint *\/\n .chart-wrapper {\n position: relative;\n width: 100%;\n max-width: 600px;\n height: 300px;\n margin: 0 auto;\n }\n \/* Smooth scrolling *\/\n html {\n scroll-behavior: smooth;\n }\n body {\n font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;\n }\n <\/style>\n<\/head>\n<body class=\"bg-stone-50 text-stone-800 antialiased\">\n\n \n \n \n \n\n \n <nav class=\"sticky top-0 z-50 bg-white\/90 backdrop-blur-md border-b border-stone-200 shadow-sm\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"flex justify-between h-16 items-center\">\n <div class=\"flex items-center gap-2\">\n <span class=\"text-2xl\">\ud83d\udcf1<\/span>\n <span class=\"font-bold text-lg tracking-tight text-stone-900\">Jetpack WindowManager <span class=\"text-indigo-600\">\u6df1\u5ea6\u7814\u7a76<\/span><\/span>\n <\/div>\n <div class=\"hidden md:flex space-x-8 text-sm font-medium text-stone-600\">\n <a href=\"#context\" class=\"hover:text-indigo-600 transition\">\u5e02\u573a\u8d8b\u52bf<\/a>\n <a href=\"#simulator\" class=\"hover:text-indigo-600 transition\">\u6298\u53e0\u6001\u6a21\u62df<\/a>\n <a href=\"#metrics\" class=\"hover:text-indigo-600 transition\">\u7a97\u53e3\u9002\u914d<\/a>\n <a href=\"#embedding\" class=\"hover:text-indigo-600 transition\">Activity \u5d4c\u5165<\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/nav>\n\n \n <header class=\"bg-stone-100 py-16\">\n <div class=\"max-w-4xl mx-auto px-4 text-center\">\n <h1 class=\"text-4xl md:text-5xl font-extrabold text-stone-900 mb-6\">\n \u9002\u914d\u672a\u6765\u7684\u5f62\u6001\n <\/h1>\n <p class=\"text-xl text-stone-600 leading-relaxed mb-8\">\n Android \u8bbe\u5907\u5f62\u6001\u6b63\u5728\u53d1\u751f\u5267\u53d8\u3002Jetpack WindowManager \u662f\u8fde\u63a5\u4f20\u7edf UI \u4e0e\u6298\u53e0\u5c4f\u3001\u591a\u7a97\u53e3\u73af\u5883\u7684\u6865\u6881\u3002\n \u672c\u4ea4\u4e92\u5f0f\u62a5\u544a\u5c06\u5e26\u60a8\u6df1\u5165\u7406\u89e3\u6838\u5fc3 API\u3001\u6298\u53e0\u59ff\u6001\uff08Postures\uff09\u4ee5\u53ca\u54cd\u5e94\u5f0f\u5e03\u5c40\u7b56\u7565\u3002\n <\/p>\n <div class=\"flex justify-center gap-4\">\n <button onclick=\"document.getElementById('simulator').scrollIntoView()\" class=\"px-6 py-3 bg-indigo-600 text-white rounded-lg shadow-md hover:bg-indigo-700 transition font-semibold\">\n \u5f00\u59cb\u4ea4\u4e92\u4f53\u9a8c\n <\/button>\n <\/div>\n <\/div>\n <\/header>\n\n <main class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 space-y-20\">\n\n \n <section id=\"context\" class=\"scroll-mt-24\">\n <div class=\"grid md:grid-cols-2 gap-12 items-center\">\n <div>\n <div class=\"inline-block px-3 py-1 bg-indigo-100 text-indigo-700 rounded-full text-xs font-bold uppercase tracking-wide mb-4\">\n \u80cc\u666f\u4e0e\u8d8b\u52bf\n <\/div>\n <h2 class=\"text-3xl font-bold text-stone-900 mb-4\">\u4e3a\u4ec0\u4e48\u9700\u8981 WindowManager\uff1f<\/h2>\n <p class=\"text-stone-600 mb-6 leading-relaxed\">\n \u4f20\u7edf\u7684 <code>DisplayMetrics<\/code> \u5df2\u7ecf\u5931\u6548\u3002\u968f\u7740\u6298\u53e0\u5c4f\u51fa\u8d27\u91cf\u7684\u6fc0\u589e\uff0c\u5e94\u7528\u754c\u9762\u4e0d\u518d\u53ea\u662f\u7b80\u5355\u7684\u77e9\u5f62\u3002\n \u8bbe\u5907\u53ef\u80fd\u5728\u8fd0\u884c\u65f6\u6539\u53d8\u7269\u7406\u5f62\u6001\uff08\u5982\u4ece\u201c\u624b\u673a\u201d\u53d8\u4e3a\u201c\u5e73\u677f\u201d\uff09\uff0c\u6216\u8005\u4e2d\u95f4\u51fa\u73b0\u7269\u7406\u94f0\u94fe\u906e\u6321\u3002\n WindowManager \u5e93\u63d0\u4f9b\u4e86\u4e00\u5957\u6807\u51c6\u7684 API \u6765\u5904\u7406\u8fd9\u4e9b\u590d\u6742\u7684\u7a97\u53e3\u73af\u5883\u3002\n <\/p>\n <ul class=\"space-y-3 text-stone-700\">\n <li class=\"flex items-start\">\n <span class=\"mr-2 text-indigo-500\">\u2b24<\/span>\n <span><b>\u611f\u77e5\u6298\u53e0\u7279\u5f81\uff1a<\/b> \u8bc6\u522b\u94f0\u94fe\u4f4d\u7f6e\u3001\u7c7b\u578b\uff08\u6298\u53e0 vs \u94f0\u63a5\uff09\u3002<\/span>\n <\/li>\n <li class=\"flex items-start\">\n <span class=\"mr-2 text-indigo-500\">\u2b24<\/span>\n <span><b>\u7a97\u53e3\u5927\u5c0f\u4e3b\u8981\u53d8\u5316\uff1a<\/b> \u4e0d\u518d\u4f9d\u8d56\u7269\u7406\u5c4f\u5e55\u5c3a\u5bf8\uff0c\u800c\u662f\u5173\u6ce8\u5f53\u524d\u7a97\u53e3\uff08Window\uff09\u7684 Metrics\u3002<\/span>\n <\/li>\n <li class=\"flex items-start\">\n <span class=\"mr-2 text-indigo-500\">\u2b24<\/span>\n <span><b>\u5411\u540e\u517c\u5bb9\uff1a<\/b> \u652f\u6301\u4ece Android 4.0 (API 14) \u5f00\u59cb\u7684\u8bbe\u5907\u3002<\/span>\n <\/li>\n <\/ul>\n <\/div>\n \n <div class=\"bg-white p-6 rounded-2xl shadow-lg border border-stone-100\">\n <h3 class=\"text-lg font-semibold text-stone-800 mb-2\">\u5168\u7403\u6298\u53e0\u5c4f\u8bbe\u5907\u51fa\u8d27\u91cf\u9884\u6d4b (\u767e\u4e07\u53f0)<\/h3>\n <p class=\"text-xs text-stone-500 mb-4\">\u6570\u636e\u6765\u6e90\uff1a\u884c\u4e1a\u7efc\u5408\u5206\u6790 (\u6a21\u62df\u6570\u636e)<\/p>\n <div class=\"chart-wrapper\">\n <canvas id=\"marketChart\"><\/canvas>\n <\/div>\n <div class=\"mt-4 p-3 bg-stone-50 rounded text-sm text-stone-600\">\n <span class=\"font-bold text-indigo-600\">\u6d1e\u5bdf\uff1a<\/span> \n \u968f\u7740\u51fa\u8d27\u91cf\u5e74\u590d\u5408\u589e\u957f\u7387\u8d85\u8fc7 40%\uff0c\u9002\u914d\u6298\u53e0\u6001\u5df2\u4ece\u201c\u9526\u4e0a\u6dfb\u82b1\u201d\u53d8\u4e3a\u5934\u90e8\u5e94\u7528\u7684\u201c\u5fc5\u9009\u9879\u201d\u3002\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"simulator\" class=\"scroll-mt-24 bg-stone-900 text-stone-100 rounded-3xl p-8 md:p-12 overflow-hidden relative\">\n <div class=\"absolute top-0 right-0 p-32 bg-indigo-500 opacity-10 blur-[100px] rounded-full\"><\/div>\n \n <div class=\"mb-8\">\n <div class=\"inline-block px-3 py-1 bg-indigo-900 text-indigo-300 rounded-full text-xs font-bold uppercase tracking-wide mb-4\">\n \u6838\u5fc3 API \u5b9e\u9a8c\u5ba4\n <\/div>\n <h2 class=\"text-3xl font-bold mb-4\">FoldingFeature \u72b6\u6001\u6a21\u62df\u5668<\/h2>\n <p class=\"text-stone-400 max-w-2xl\">\n <code>FoldingFeature<\/code> \u5bf9\u8c61\u63cf\u8ff0\u4e86\u663e\u793a\u5c4f\u4e2d\u7684\u6298\u53e0\u90e8\u5206\u3002\u901a\u8fc7\u4e0b\u65b9\u7684\u63a7\u5236\u5668\uff0c\u6539\u53d8\u865a\u62df\u8bbe\u5907\u7684\u7269\u7406\u72b6\u6001\uff0c\u89c2\u5bdf WindowManager \u8bc6\u522b\u5230\u7684\u5173\u952e\u6570\u636e\u53d8\u5316\u3002\n <\/p>\n <\/div>\n\n <div class=\"grid lg:grid-cols-3 gap-8\">\n \n <div class=\"lg:col-span-1 space-y-6\">\n <div class=\"bg-stone-800 p-6 rounded-xl border border-stone-700\">\n <h4 class=\"text-sm font-semibold text-stone-300 uppercase mb-4\">\u7269\u7406\u59ff\u6001 (Device Posture)<\/h4>\n <div class=\"space-y-3\">\n <button onclick=\"setPosture('flat')\" class=\"w-full text-left px-4 py-3 rounded-lg bg-stone-700 hover:bg-indigo-600 transition flex items-center group active-posture\" id=\"btn-flat\">\n <span class=\"text-2xl mr-3\">\ud83d\udcf1<\/span>\n <div>\n <div class=\"font-bold group-hover:text-white\">\u5e73\u94fa (Flat)<\/div>\n <div class=\"text-xs text-stone-400\">\u666e\u901a\u7684\u5168\u9762\u5c4f\u4f53\u9a8c<\/div>\n <\/div>\n <\/button>\n <button onclick=\"setPosture('book')\" class=\"w-full text-left px-4 py-3 rounded-lg bg-stone-700 hover:bg-indigo-600 transition flex items-center group\" id=\"btn-book\">\n <span class=\"text-2xl mr-3\">\ud83d\udcd6<\/span>\n <div>\n <div class=\"font-bold group-hover:text-white\">\u4e66\u672c\u6a21\u5f0f (Book)<\/div>\n <div class=\"text-xs text-stone-400\">Vertical Hinge, Half-Opened<\/div>\n <\/div>\n <\/button>\n <button onclick=\"setPosture('tabletop')\" class=\"w-full text-left px-4 py-3 rounded-lg bg-stone-700 hover:bg-indigo-600 transition flex items-center group\" id=\"btn-tabletop\">\n <span class=\"text-2xl mr-3\">\ud83d\udcbb<\/span>\n <div>\n <div class=\"font-bold group-hover:text-white\">\u684c\u9762\u6a21\u5f0f (Tabletop)<\/div>\n <div class=\"text-xs text-stone-400\">Horizontal Hinge, Half-Opened<\/div>\n <\/div>\n <\/button>\n <\/div>\n <\/div>\n\n <div class=\"bg-stone-800 p-6 rounded-xl border border-stone-700\">\n <h4 class=\"text-sm font-semibold text-stone-300 uppercase mb-2\">API \u6570\u636e\u6d41<\/h4>\n <code class=\"block font-mono text-xs text-green-400 bg-black p-4 rounded-lg overflow-x-auto\" id=\"code-output\">\n \/\/ \u7b49\u5f85\u4ea4\u4e92...\n <\/code>\n <\/div>\n <\/div>\n\n \n <div class=\"lg:col-span-2 flex flex-col items-center justify-center min-h-[400px] perspective-container bg-stone-800\/50 rounded-xl border border-stone-700\/50 p-8\">\n \n \n <div id=\"device-mockup\" class=\"relative w-64 h-96 transition-all duration-700 transform-style-3d flex flex-col shadow-2xl\">\n \n <div id=\"screen-1\" class=\"device-half flex-1 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-t-2xl flex items-center justify-center border-x-4 border-t-4 border-stone-300 relative overflow-hidden origin-bottom\">\n <span class=\"text-white\/20 text-4xl font-black\">Content A<\/span>\n <div class=\"absolute inset-0 bg-black\/0 transition-colors duration-500\" id=\"shade-1\"><\/div>\n <\/div>\n \n \n <div id=\"hinge\" class=\"h-4 w-full bg-stone-800 flex items-center justify-center relative overflow-hidden transition-all duration-500\">\n <div class=\"w-full h-[1px] bg-stone-600\"><\/div>\n <\/div>\n\n \n <div id=\"screen-2\" class=\"device-half flex-1 bg-gradient-to-br from-indigo-600 to-purple-700 rounded-b-2xl flex items-center justify-center border-x-4 border-b-4 border-stone-300 origin-top\">\n <span class=\"text-white\/20 text-4xl font-black\">Content B<\/span>\n <\/div>\n <\/div>\n\n <div class=\"mt-8 text-center\">\n <div id=\"posture-label\" class=\"text-xl font-bold text-white mb-1\">STATE: FLAT<\/div>\n <div id=\"posture-desc\" class=\"text-stone-400 text-sm\">FoldingFeature \u4e3a null \u6216 isEmpty<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"metrics\" class=\"scroll-mt-24\">\n <div class=\"max-w-3xl mx-auto text-center mb-10\">\n <div class=\"inline-block px-3 py-1 bg-indigo-100 text-indigo-700 rounded-full text-xs font-bold uppercase tracking-wide mb-4\">\n \u54cd\u5e94\u5f0f\u5e03\u5c40\u57fa\u7840\n <\/div>\n <h2 class=\"text-3xl font-bold text-stone-900 mb-4\">WindowMetrics \u4e0e\u65ad\u70b9\u7cfb\u7edf<\/h2>\n <p class=\"text-stone-600\">\n \u4e0d\u8981\u518d\u4f7f\u7528\u7269\u7406\u5c4f\u5e55\u5c3a\u5bf8\u3002Android \u63a8\u8350\u4f7f\u7528 <b>WindowSizeClass<\/b> \u5c06\u7a97\u53e3\u5206\u4e3a Compact (\u7d27\u51d1), Medium (\u4e2d\u7b49), Expanded (\u5c55\u5f00) \u4e09\u7c7b\u3002\n \u62d6\u52a8\u4e0b\u65b9\u6ed1\u5757\uff0c\u4f53\u9a8c\u5e03\u5c40\u5982\u4f55\u968f\u7a97\u53e3\u5c3a\u5bf8\u53d8\u5316\u800c\u91cd\u6784\u3002\n <\/p>\n <\/div>\n\n \n <div class=\"bg-white rounded-2xl shadow-lg border border-stone-200 overflow-hidden\">\n <div class=\"bg-stone-100 p-4 border-b border-stone-200 flex flex-wrap gap-6 items-center justify-between\">\n <div class=\"flex gap-4 items-center flex-1\">\n <label class=\"text-sm font-bold text-stone-600\">\u7a97\u53e3\u5bbd\u5ea6:<\/label>\n <input type=\"range\" min=\"300\" max=\"1000\" value=\"400\" id=\"width-slider\" class=\"w-full h-2 bg-stone-300 rounded-lg appearance-none cursor-pointer accent-indigo-600\">\n <\/div>\n <div class=\"flex gap-2 text-sm font-mono bg-white px-3 py-1 rounded border border-stone-300\">\n <span id=\"width-display\">400dp<\/span> x <span id=\"height-display\">800dp<\/span>\n <\/div>\n <\/div>\n\n <div class=\"p-8 bg-stone-50 min-h-[500px] flex items-center justify-center relative overflow-hidden\">\n \n <div class=\"absolute inset-0\" style=\"background-image: radial-gradient(#d6d3d1 1px, transparent 1px); background-size: 20px 20px; opacity: 0.5;\"><\/div>\n\n \n <div id=\"demo-window\" class=\"bg-white shadow-2xl border-4 border-stone-800 rounded-xl flex flex-col transition-all duration-200 ease-out relative\" style=\"width: 400px; height: 500px;\">\n \n \n <div class=\"h-12 bg-stone-800 flex items-center px-4 justify-between\">\n <div class=\"flex gap-2\">\n <div class=\"w-3 h-3 rounded-full bg-red-500\"><\/div>\n <div class=\"w-3 h-3 rounded-full bg-yellow-500\"><\/div>\n <\/div>\n <div class=\"text-stone-400 text-xs font-mono\">MyActivity<\/div>\n <\/div>\n\n \n <div class=\"flex-1 p-4 overflow-hidden flex flex-col gap-4\">\n \n <div id=\"class-indicator\" class=\"bg-indigo-100 text-indigo-800 text-center py-2 rounded font-bold text-sm border border-indigo-200\">\n Compact Width\n <\/div>\n\n \n <div id=\"layout-container\" class=\"flex flex-col gap-4 h-full\">\n <div class=\"h-32 bg-stone-200 rounded-lg animate-pulse w-full\"><\/div>\n <div class=\"flex-1 bg-stone-100 rounded-lg p-4 text-stone-400 text-sm\">\n Main Content Area…\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"absolute -right-16 top-1\/2 transform -translate-y-1\/2 rotate-90 text-xs text-stone-400 font-mono hidden md:block\">\n HEIGHT\n <\/div>\n <div class=\"absolute bottom-[-2rem] left-1\/2 transform -translate-x-1\/2 text-xs text-stone-400 font-mono\">\n WIDTH\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"mt-6 grid grid-cols-1 md:grid-cols-3 gap-4\">\n <div class=\"p-4 bg-white border-l-4 border-red-400 shadow-sm rounded-r-lg\">\n <h4 class=\"font-bold text-stone-800\">Compact (width < 600dp)<\/h4>\n <p class=\"text-sm text-stone-500 mt-1\">\u5178\u578b\u7684\u624b\u673a\u7ad6\u5c4f\u3002\u4f7f\u7528\u5355\u5217\u5e03\u5c40\uff0c\u5e95\u90e8\u5bfc\u822a\u680f\u3002<\/p>\n <\/div>\n <div class=\"p-4 bg-white border-l-4 border-yellow-400 shadow-sm rounded-r-lg\">\n <h4 class=\"font-bold text-stone-800\">Medium (600dp \u2264 width < 840dp)<\/h4>\n <p class=\"text-sm text-stone-500 mt-1\">\u6298\u53e0\u5c4f\u5c55\u5f00\u6001\u6216\u5c0f\u578b\u5e73\u677f\u3002\u53ef\u5c1d\u8bd5\u7b80\u5355\u7684\u53cc\u5217\u5e03\u5c40\u6216\u4fa7\u8fb9\u680f\u3002<\/p>\n <\/div>\n <div class=\"p-4 bg-white border-l-4 border-green-400 shadow-sm rounded-r-lg\">\n <h4 class=\"font-bold text-stone-800\">Expanded (width \u2265 840dp)<\/h4>\n <p class=\"text-sm text-stone-500 mt-1\">\u684c\u9762\u5927\u5c4f\u6216\u5927\u578b\u5e73\u677f\u3002\u5fc5\u987b\u4f7f\u7528 Master-Detail \u5e03\u5c40\uff0c\u5229\u7528\u5269\u4f59\u7a7a\u95f4\u3002<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"embedding\" class=\"scroll-mt-24\">\n <div class=\"grid md:grid-cols-2 gap-12 items-start\">\n <div>\n <div class=\"inline-block px-3 py-1 bg-indigo-100 text-indigo-700 rounded-full text-xs font-bold uppercase tracking-wide mb-4\">\n \u5927\u5c4f\u4f18\u5316\u795e\u5668\n <\/div>\n <h2 class=\"text-3xl font-bold text-stone-900 mb-4\">Activity Embedding (\u6d3b\u52a8\u5d4c\u5165)<\/h2>\n <p class=\"text-stone-600 mb-6 leading-relaxed\">\n \u5bf9\u4e8e\u8bb8\u591a\u65e7\u9879\u76ee\uff0c\u5c06\u6240\u6709 Activity \u91cd\u6784\u4e3a Fragment \u6210\u672c\u5de8\u5927\u3002\n <b>Activity Embedding<\/b> \u5141\u8bb8\u5728\u4ece\u4e0d\u91cd\u6784\u4ee3\u7801\u7684\u60c5\u51b5\u4e0b\uff0c\u8ba9\u591a\u4e2a Activity \u5728\u5927\u5c4f\u8bbe\u5907\u4e0a\u5e76\u6392\u663e\u793a\u3002\n \u7cfb\u7edf\u4f1a\u81ea\u52a8\u5904\u7406 Activity \u6808\u3002\n <\/p>\n\n <div class=\"space-y-4\">\n <div class=\"p-4 bg-white rounded-lg shadow-sm border border-stone-200\">\n <h4 class=\"font-bold text-stone-800 flex items-center\">\n <span class=\"bg-stone-800 text-white rounded w-6 h-6 flex items-center justify-center text-xs mr-2\">1<\/span>\n \u914d\u7f6e XML \u89c4\u5219\n <\/h4>\n <p class=\"text-sm text-stone-500 mt-1 ml-8\">\n \u5b9a\u4e49 <code>SplitPairRule<\/code>\uff0c\u544a\u8bc9\u7cfb\u7edf\u54ea\u4e9b Activity \u5e94\u8be5\u6210\u5bf9\u51fa\u73b0\uff08\u4f8b\u5982 ListActivity \u548c DetailActivity\uff09\u3002\n <\/p>\n <\/div>\n <div class=\"p-4 bg-white rounded-lg shadow-sm border border-stone-200\">\n <h4 class=\"font-bold text-stone-800 flex items-center\">\n <span class=\"bg-stone-800 text-white rounded w-6 h-6 flex items-center justify-center text-xs mr-2\">2<\/span>\n \u5360\u4f4d\u7b26 (Placeholder)\n <\/h4>\n <p class=\"text-sm text-stone-500 mt-1 ml-8\">\n \u5f53\u7528\u6237\u8fd8\u6ca1\u70b9\u51fb\u5217\u8868\u9879\u65f6\uff0c\u53f3\u4fa7\u663e\u793a\u4ec0\u4e48\uff1f\u914d\u7f6e <code>SplitPlaceholderRule<\/code> \u6765\u5c55\u793a\u9ed8\u8ba4\u5185\u5bb9\u3002\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"bg-stone-900 rounded-2xl p-2 shadow-2xl\">\n <div class=\"flex justify-between items-center px-4 py-3 border-b border-stone-700\">\n <span class=\"text-stone-400 text-xs\">Activity Embedding \u6f14\u793a<\/span>\n <button id=\"toggle-screen-mode\" class=\"text-xs bg-indigo-600 hover:bg-indigo-500 text-white px-3 py-1 rounded transition\">\n \u5207\u6362\u6a21\u5f0f: \u5e73\u677f (Side-by-side)\n <\/button>\n <\/div>\n <div id=\"embedding-viewport\" class=\"relative bg-white w-full h-[400px] overflow-hidden transition-all duration-500 flex\">\n \n \n <div id=\"activity-a\" class=\"w-full md:w-1\/3 border-r border-stone-200 bg-stone-50 flex flex-col transition-all duration-300\">\n <div class=\"p-4 border-b border-stone-200 font-bold text-lg bg-white\">\u90ae\u4ef6\u5217\u8868<\/div>\n <div class=\"flex-1 overflow-y-auto p-2 space-y-2\">\n <div onclick=\"selectEmail(1)\" class=\"p-3 bg-white rounded shadow-sm hover:bg-indigo-50 cursor-pointer border border-transparent hover:border-indigo-200 transition\">\n <div class=\"font-bold text-sm text-stone-800\">Project Alpha<\/div>\n <div class=\"text-xs text-stone-500\">\u622a\u6b62\u65e5\u671f\u66f4\u65b0…<\/div>\n <\/div>\n <div onclick=\"selectEmail(2)\" class=\"p-3 bg-white rounded shadow-sm hover:bg-indigo-50 cursor-pointer border border-transparent hover:border-indigo-200 transition\">\n <div class=\"font-bold text-sm text-stone-800\">Team Building<\/div>\n <div class=\"text-xs text-stone-500\">\u672c\u5468\u4e94\u4e0b\u5348…<\/div>\n <\/div>\n <div onclick=\"selectEmail(3)\" class=\"p-3 bg-white rounded shadow-sm hover:bg-indigo-50 cursor-pointer border border-transparent hover:border-indigo-200 transition\">\n <div class=\"font-bold text-sm text-stone-800\">System Alert<\/div>\n <div class=\"text-xs text-stone-500\">\u670d\u52a1\u5668\u7ef4\u62a4\u901a\u77e5…<\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"activity-b\" class=\"absolute inset-0 md:static md:w-2\/3 bg-white flex flex-col transform translate-x-full md:translate-x-0 transition-transform duration-300 z-10\">\n <div class=\"p-4 border-b border-stone-200 flex items-center bg-white shadow-sm\">\n <button onclick=\"closeDetail()\" class=\"md:hidden mr-3 text-stone-500 hover:text-stone-800\">\u2190 \u8fd4\u56de<\/button>\n <span class=\"font-bold text-stone-800\">\u90ae\u4ef6\u8be6\u60c5<\/span>\n <\/div>\n <div class=\"flex-1 p-8 flex items-center justify-center text-center\">\n <div id=\"detail-content\">\n <span class=\"text-4xl block mb-4\">\ud83d\udce9<\/span>\n <p class=\"text-stone-400\">\u8bf7\u9009\u62e9\u5de6\u4fa7\u90ae\u4ef6\u67e5\u770b\u8be6\u60c5<br><span class=\"text-xs opacity-70\">(Placeholder Activity)<\/span><\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n <div class=\"bg-stone-800 px-4 py-2 text-xs font-mono text-green-400 rounded-b-xl\" id=\"embedding-log\">\n Current Layout: SplitPairRule(minWidth=600dp)\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <\/main>\n\n \n <footer class=\"bg-stone-900 text-stone-400 py-12 border-t border-stone-800\">\n <div class=\"max-w-7xl mx-auto px-4 text-center\">\n <h3 class=\"text-white font-bold text-lg mb-4\">Jetpack WindowManager Summary<\/h3>\n <div class=\"flex flex-wrap justify-center gap-8 text-sm mb-8\">\n <span>API Level: 1.0.0+<\/span>\n <span>Requires: Android 4.0+<\/span>\n <span>Integration: Gradle Implementation<\/span>\n <\/div>\n <p class=\"text-xs opacity-50\">\n Generated based on Android Developer Documentation concepts. <br>\n Interactive visualization for educational purposes.\n <\/p>\n <\/div>\n <\/footer>\n\n \n <script>\n \/\/ --- State Management ---\n const state = {\n posture: 'flat', \/\/ flat, book, tabletop\n windowWidth: 400,\n emailSelected: null,\n isTabletMode: false \/\/ for embedding demo\n };\n\n \/\/ --- Chart.js Initialization (Market Data) ---\n document.addEventListener('DOMContentLoaded', () => {\n const ctx = document.getElementById('marketChart').getContext('2d');\n new Chart(ctx, {\n type: 'bar',\n data: {\n labels: ['2020', '2021', '2022', '2023', '2024 (E)', '2025 (E)'],\n datasets: [{\n label: '\u6298\u53e0\u5c4f\u51fa\u8d27\u91cf (\u767e\u4e07\u53f0)',\n data: [2.5, 9.0, 14.2, 18.5, 30.0, 48.0],\n backgroundColor: '#4f46e5', \/\/ Indigo 600\n borderRadius: 4,\n hoverBackgroundColor: '#4338ca'\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n plugins: {\n legend: { display: false },\n tooltip: {\n callbacks: {\n label: function(context) {\n return context.parsed.y + ' \u767e\u4e07\u53f0';\n }\n }\n }\n },\n scales: {\n y: {\n beginAtZero: true,\n grid: { color: '#e7e5e4' } \/\/ Stone 200\n },\n x: {\n grid: { display: false }\n }\n }\n }\n });\n\n \/\/ Initialize simulators\n updateSimulatorUI();\n updateWindowMetrics();\n updateEmbeddingLayout();\n });\n\n \/\/ --- Section 2: FoldingFeature Simulator Logic ---\n function setPosture(newPosture) {\n state.posture = newPosture;\n updateSimulatorUI();\n }\n\n function updateSimulatorUI() {\n const device = document.getElementById('device-mockup');\n const hinge = document.getElementById('hinge');\n const screen1 = document.getElementById('screen-1');\n const screen2 = document.getElementById('screen-2');\n const shade1 = document.getElementById('shade-1');\n const label = document.getElementById('posture-label');\n const desc = document.getElementById('posture-desc');\n const code = document.getElementById('code-output');\n const btns = document.querySelectorAll('#simulator button');\n\n \/\/ Reset buttons\n btns.forEach(btn => btn.classList.remove('bg-indigo-600', 'text-white'));\n document.getElementById(`btn-${state.posture}`).classList.add('bg-indigo-600', 'text-white');\n\n \/\/ Reset Transforms\n device.style.transform = 'rotateX(0deg) rotateY(0deg)';\n device.style.flexDirection = 'column'; \/\/ Default portrait\n hinge.style.height = '16px';\n hinge.style.width = '100%';\n screen1.style.transform = 'none';\n screen2.style.transform = 'none';\n shade1.style.backgroundColor = 'rgba(0,0,0,0)';\n\n let codeText = \"\";\n\n if (state.posture === 'flat') {\n label.innerText = \"STATE: FLAT\";\n desc.innerText = \"FoldingFeature is null or state is FLAT\";\n codeText = `\nWindowLayoutInfo {\n displayFeatures = [] \n}`;\n } else if (state.posture === 'book') {\n \/\/ Visualize Book Mode (Vertical Hinge)\n device.style.flexDirection = 'row'; \n hinge.style.width = '16px';\n hinge.style.height = '100%';\n \n \/\/ 3D fold\n device.style.transform = 'rotateY(-20deg)';\n screen1.style.transform = 'rotateY(-30deg)';\n screen2.style.transform = 'rotateY(30deg)';\n shade1.style.backgroundColor = 'rgba(0,0,0,0.1)';\n\n label.innerText = \"STATE: HALF_OPEN (Book)\";\n desc.innerText = \"Orientation: VERTICAL, OcclusionType: HINGE\";\n codeText = `\nFoldingFeature {\n state: HALF_OPEN,\n orientation: VERTICAL,\n isSeparating: true\n}`;\n } else if (state.posture === 'tabletop') {\n \/\/ Visualize Tabletop Mode (Horizontal Hinge)\n device.style.flexDirection = 'column';\n \n \/\/ 3D fold\n device.style.transform = 'rotateX(10deg)';\n screen1.style.transform = 'rotateX(40deg)';\n screen2.style.transform = 'rotateX(-40deg)';\n shade1.style.backgroundColor = 'rgba(0,0,0,0.1)';\n\n label.innerText = \"STATE: HALF_OPEN (Tabletop)\";\n desc.innerText = \"Orientation: HORIZONTAL\";\n codeText = `\nFoldingFeature {\n state: HALF_OPEN,\n orientation: HORIZONTAL,\n isSeparating: true\n}`;\n }\n\n code.innerText = codeText;\n }\n\n \/\/ --- Section 3: Window Metrics Logic ---\n const slider = document.getElementById('width-slider');\n const demoWindow = document.getElementById('demo-window');\n const widthDisplay = document.getElementById('width-display');\n const indicator = document.getElementById('class-indicator');\n const layoutContainer = document.getElementById('layout-container');\n\n slider.addEventListener('input', (e) => {\n state.windowWidth = parseInt(e.target.value);\n updateWindowMetrics();\n });\n\n function updateWindowMetrics() {\n const w = state.windowWidth;\n demoWindow.style.width = `${w}px`;\n widthDisplay.innerText = `${w}dp`;\n\n \/\/ Logic logic for WindowSizeClass (approximate logic for demo)\n let sizeClass = \"\";\n let colorClass = \"\";\n let layoutHTML = \"\";\n\n if (w < 600) {\n sizeClass = \"COMPACT\";\n colorClass = \"bg-red-100 text-red-800 border-red-200\";\n layoutHTML = `\n <div class=\"h-full flex flex-col gap-2\">\n <div class=\"h-1\/3 bg-stone-300 rounded animate-pulse\"><\/div>\n <div class=\"h-1\/3 bg-stone-200 rounded\"><\/div>\n <div class=\"h-1\/3 bg-stone-200 rounded\"><\/div>\n <\/div>`;\n } else if (w < 840) {\n sizeClass = \"MEDIUM\";\n colorClass = \"bg-yellow-100 text-yellow-800 border-yellow-200\";\n layoutHTML = `\n <div class=\"h-full grid grid-cols-2 gap-2\">\n <div class=\"bg-stone-300 rounded animate-pulse\"><\/div>\n <div class=\"flex flex-col gap-2\">\n <div class=\"h-1\/2 bg-stone-200 rounded\"><\/div>\n <div class=\"h-1\/2 bg-stone-200 rounded\"><\/div>\n <\/div>\n <\/div>`;\n } else {\n sizeClass = \"EXPANDED\";\n colorClass = \"bg-green-100 text-green-800 border-green-200\";\n layoutHTML = `\n <div class=\"h-full flex gap-4\">\n <div class=\"w-1\/4 bg-stone-200 rounded flex flex-col gap-2 p-2\">\n <div class=\"h-8 bg-stone-300 rounded\"><\/div>\n <div class=\"h-8 bg-stone-300 rounded\"><\/div>\n <div class=\"h-8 bg-stone-300 rounded\"><\/div>\n <\/div>\n <div class=\"flex-1 bg-stone-300 rounded animate-pulse flex items-center justify-center text-stone-500\">Detail View<\/div>\n <\/div>`;\n }\n\n indicator.className = `text-center py-2 rounded font-bold text-sm border transition-colors ${colorClass}`;\n indicator.innerText = `Width Class: ${sizeClass}`;\n layoutContainer.innerHTML = layoutHTML;\n }\n\n \/\/ --- Section 4: Activity Embedding Logic ---\n const toggleBtn = document.getElementById('toggle-screen-mode');\n const activityA = document.getElementById('activity-a');\n const activityB = document.getElementById('activity-b');\n const detailContent = document.getElementById('detail-content');\n const embeddingLog = document.getElementById('embedding-log');\n const embeddingViewport = document.getElementById('embedding-viewport');\n\n toggleBtn.addEventListener('click', () => {\n state.isTabletMode = !state.isTabletMode;\n toggleBtn.innerText = state.isTabletMode ? \"\u5207\u6362\u6a21\u5f0f: \u624b\u673a (Stack)\" : \"\u5207\u6362\u6a21\u5f0f: \u5e73\u677f (Side-by-side)\";\n toggleBtn.classList.toggle('bg-indigo-600');\n toggleBtn.classList.toggle('bg-stone-600');\n \n \/\/ Reset selection when changing mode for clarity\n state.emailSelected = null;\n closeDetail(); \/\/ visual reset\n updateEmbeddingLayout();\n });\n\n function selectEmail(id) {\n state.emailSelected = id;\n const content = {\n 1: { title: \"Project Alpha\", body: \"\u56e2\u961f\u6b63\u5728\u5168\u529b\u63a8\u8fdb Project Alpha...\" },\n 2: { title: \"Team Building\", body: \"\u672c\u5468\u4e94\u4e0b\u5348 3 \u70b9\u5728\u4f11\u606f\u5ba4...\" },\n 3: { title: \"System Alert\", body: \"\u670d\u52a1\u5668\u5c06\u5728\u4eca\u665a 12 \u70b9\u8fdb\u884c\u7ef4\u62a4...\" }\n }[id];\n\n detailContent.innerHTML = `\n <div class=\"text-left animate-fade-in\">\n <h3 class=\"text-xl font-bold text-indigo-700 mb-2\">${content.title}<\/h3>\n <p class=\"text-stone-600\">${content.body}<\/p>\n <div class=\"mt-4 p-2 bg-stone-100 text-xs text-stone-500 rounded\">Activity ID: com.app.DetailActivity<\/div>\n <\/div>\n `;\n\n if (!state.isTabletMode) {\n \/\/ Phone mode: slide in Activity B\n activityB.classList.remove('translate-x-full');\n activityB.classList.add('translate-x-0');\n }\n }\n\n function closeDetail() {\n state.emailSelected = null;\n detailContent.innerHTML = `<span class=\"text-4xl block mb-4\">\ud83d\udce9<\/span><p class=\"text-stone-400\">\u8bf7\u9009\u62e9\u5de6\u4fa7\u90ae\u4ef6\u67e5\u770b\u8be6\u60c5<br><span class=\"text-xs opacity-70\">(Placeholder Activity)<\/span><\/p>`;\n \n if (!state.isTabletMode) {\n \/\/ Phone mode: slide out\n activityB.classList.remove('translate-x-0');\n activityB.classList.add('translate-x-full');\n }\n }\n\n function updateEmbeddingLayout() {\n if (state.isTabletMode) {\n \/\/ Tablet: A and B side by side\n activityA.classList.remove('w-full');\n activityA.classList.add('w-1\/3');\n \n activityB.classList.remove('absolute', 'inset-0', 'transform', 'translate-x-full');\n activityB.classList.add('static', 'w-2\/3', 'translate-x-0');\n \n embeddingLog.innerText = \"Current Layout: SplitPairRule (A | B) - Two Panes Visible\";\n embeddingLog.classList.remove('text-yellow-400');\n embeddingLog.classList.add('text-green-400');\n } else {\n \/\/ Phone: Stacked (A covers B or B covers A)\n activityA.classList.remove('w-1\/3');\n activityA.classList.add('w-full');\n\n activityB.classList.remove('static', 'w-2\/3', 'translate-x-0');\n activityB.classList.add('absolute', 'inset-0', 'transform', 'translate-x-full');\n\n embeddingLog.innerText = \"Current Layout: Stack (A -> B) - Single Pane Visible\";\n embeddingLog.classList.remove('text-green-400');\n embeddingLog.classList.add('text-yellow-400');\n }\n }\n\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u6df1\u5ea6\u7814\u7a76\uff1aJetpack WindowManager \ud83d\udcf1 Jetpack WindowManager \u6df1\u5ea6\u7814\u7a76 \u5e02\u573a\u8d8b\u52bf \u6298\u53e0\u6001\u6a21\u62df \u7a97\u53e3\u9002\u914d Activity \u5d4c\u5165 \u9002\u914d\u672a\u6765\u7684\u5f62\u6001 Android \u8bbe\u5907\u5f62\u6001\u6b63\u5728\u53d1\u751f\u5267\u53d8\u3002Jetpack WindowManager \u662f\u8fde\u63a5\u4f20\u7edf UI \u4e0e\u6298\u53e0\u5c4f\u3001\u591a\u7a97\u53e3\u73af\u5883\u7684\u6865\u6881\u3002 \u672c\u4ea4\u4e92\u5f0f\u62a5\u544a\u5c06\u5e26\u60a8\u6df1\u5165\u7406\u89e3\u6838\u5fc3 API\u3001\u6298\u53e0\u59ff\u6001\uff08Postures\uff09\u4ee5\u53ca\u54cd\u5e94\u5f0f\u5e03\u5c40\u7b56\u7565\u3002 \u5f00\u59cb\u4ea4\u4e92\u4f53\u9a8c \u80cc\u666f\u4e0e\u8d8b\u52bf \u4e3a\u4ec0\u4e48\u9700\u8981 WindowManager\uff1f \u4f20\u7edf\u7684 DisplayMetrics \u5df2\u7ecf\u5931\u6548\u3002\u968f\u7740\u6298\u53e0\u5c4f\u51fa\u8d27\u91cf\u7684\u6fc0\u589e\uff0c\u5e94\u7528\u754c\u9762\u4e0d\u518d\u53ea\u662f\u7b80\u5355\u7684\u77e9\u5f62\u3002 \u8bbe\u5907\u53ef\u80fd\u5728\u8fd0\u884c\u65f6\u6539\u53d8\u7269\u7406\u5f62\u6001\uff08\u5982\u4ece\u201c\u624b\u673a\u201d\u53d8\u4e3a\u201c\u5e73\u677f\u201d\uff09\uff0c\u6216\u8005\u4e2d\u95f4\u51fa\u73b0\u7269\u7406\u94f0\u94fe\u906e\u6321\u3002 WindowManager \u5e93\u63d0\u4f9b\u4e86\u4e00\u5957\u6807\u51c6\u7684 API \u6765\u5904\u7406\u8fd9\u4e9b\u590d\u6742\u7684\u7a97\u53e3\u73af\u5883\u3002 \u2b24 \u611f\u77e5\u6298\u53e0\u7279\u5f81\uff1a \u8bc6\u522b\u94f0\u94fe\u4f4d\u7f6e\u3001\u7c7b\u578b\uff08\u6298\u53e0 vs \u94f0\u63a5\uff09\u3002 \u2b24 \u7a97\u53e3\u5927\u5c0f\u4e3b\u8981\u53d8\u5316\uff1a \u4e0d\u518d\u4f9d\u8d56\u7269\u7406\u5c4f\u5e55\u5c3a\u5bf8\uff0c\u800c\u662f\u5173\u6ce8\u5f53\u524d\u7a97\u53e3\uff08Window\uff09\u7684 Metrics\u3002 \u2b24 \u5411\u540e\u517c\u5bb9\uff1a \u652f\u6301\u4ece Android 4.0 (API 14) \u5f00\u59cb\u7684\u8bbe\u5907\u3002 \u5168\u7403\u6298\u53e0\u5c4f\u8bbe\u5907\u51fa\u8d27\u91cf\u9884\u6d4b (\u767e\u4e07\u53f0) \u6570\u636e\u6765\u6e90\uff1a\u884c\u4e1a\u7efc\u5408\u5206\u6790 (\u6a21\u62df\u6570\u636e) \u6d1e\u5bdf\uff1a \u968f\u7740\u51fa\u8d27\u91cf\u5e74\u590d\u5408\u589e\u957f\u7387\u8d85\u8fc7 40%\uff0c\u9002\u914d\u6298\u53e0\u6001\u5df2\u4ece\u201c\u9526\u4e0a\u6dfb\u82b1\u201d\u53d8\u4e3a\u5934\u90e8\u5e94\u7528\u7684\u201c\u5fc5\u9009\u9879\u201d\u3002 \u6838\u5fc3 API \u5b9e\u9a8c\u5ba4 FoldingFeature \u72b6\u6001\u6a21\u62df\u5668 FoldingFeature \u5bf9\u8c61\u63cf\u8ff0\u4e86\u663e\u793a\u5c4f\u4e2d\u7684\u6298\u53e0\u90e8\u5206\u3002\u901a\u8fc7\u4e0b\u65b9\u7684\u63a7\u5236\u5668\uff0c\u6539\u53d8\u865a\u62df\u8bbe\u5907\u7684\u7269\u7406\u72b6\u6001\uff0c\u89c2\u5bdf WindowManager \u8bc6\u522b\u5230\u7684\u5173\u952e\u6570\u636e\u53d8\u5316\u3002 \u7269\u7406\u59ff\u6001 (Device Posture) \ud83d\udcf1 \u5e73\u94fa (Flat) \u666e\u901a\u7684\u5168\u9762\u5c4f\u4f53\u9a8c \ud83d\udcd6 \u4e66\u672c\u6a21\u5f0f (Book) Vertical Hinge, Half-Opened \ud83d\udcbb \u684c\u9762\u6a21\u5f0f (Tabletop) Horizontal Hinge, Half-Opened API \u6570\u636e\u6d41 \/\/ \u7b49\u5f85\u4ea4\u4e92… Content A Content B STATE: FLAT FoldingFeature \u4e3a null \u6216 isEmpty \u54cd\u5e94\u5f0f\u5e03\u5c40\u57fa\u7840 WindowMetrics \u4e0e\u65ad\u70b9\u7cfb\u7edf \u4e0d\u8981\u518d\u4f7f\u7528\u7269\u7406\u5c4f\u5e55\u5c3a\u5bf8\u3002Android \u63a8\u8350\u4f7f\u7528 WindowSizeClass \u5c06\u7a97\u53e3\u5206\u4e3a Compact (\u7d27\u51d1), Medium (\u4e2d\u7b49), Expanded (\u5c55\u5f00) \u4e09\u7c7b\u3002 \u62d6\u52a8\u4e0b\u65b9\u6ed1\u5757\uff0c\u4f53\u9a8c\u5e03\u5c40\u5982\u4f55\u968f\u7a97\u53e3\u5c3a\u5bf8\u53d8\u5316\u800c\u91cd\u6784\u3002 \u7a97\u53e3\u5bbd\u5ea6: 400dp x 800dp MyActivity Compact Width Main Content Area… HEIGHT WIDTH Compact (width < 600dp) \u5178\u578b\u7684\u624b\u673a\u7ad6\u5c4f\u3002\u4f7f\u7528\u5355\u5217\u5e03\u5c40\uff0c\u5e95\u90e8\u5bfc\u822a\u680f\u3002 Medium (600dp \u2264 width < 840dp) \u6298\u53e0\u5c4f\u5c55\u5f00\u6001\u6216\u5c0f\u578b\u5e73\u677f\u3002\u53ef\u5c1d\u8bd5\u7b80\u5355\u7684\u53cc\u5217\u5e03\u5c40\u6216\u4fa7\u8fb9\u680f\u3002 Expanded (width \u2265 840dp) \u684c\u9762\u5927\u5c4f\u6216\u5927\u578b\u5e73\u677f\u3002\u5fc5\u987b\u4f7f\u7528 Master-Detail \u5e03\u5c40\uff0c\u5229\u7528\u5269\u4f59\u7a7a\u95f4\u3002 \u5927\u5c4f\u4f18\u5316\u795e\u5668 Activity Embedding (\u6d3b\u52a8\u5d4c\u5165) \u5bf9\u4e8e\u8bb8\u591a\u65e7\u9879\u76ee\uff0c\u5c06\u6240\u6709 Activity \u91cd\u6784\u4e3a Fragment \u6210\u672c\u5de8\u5927\u3002 Activity Embedding \u5141\u8bb8\u5728\u4ece\u4e0d\u91cd\u6784\u4ee3\u7801\u7684\u60c5\u51b5\u4e0b\uff0c\u8ba9\u591a\u4e2a Activity \u5728\u5927\u5c4f\u8bbe\u5907\u4e0a\u5e76\u6392\u663e\u793a\u3002 \u7cfb\u7edf\u4f1a\u81ea\u52a8\u5904\u7406 Activity \u6808\u3002 1 \u914d\u7f6e XML \u89c4\u5219 \u5b9a\u4e49 SplitPairRule\uff0c\u544a\u8bc9\u7cfb\u7edf\u54ea\u4e9b Activity \u5e94\u8be5\u6210\u5bf9\u51fa\u73b0\uff08\u4f8b\u5982 ListActivity \u548c DetailActivity\uff09\u3002 2 \u5360\u4f4d\u7b26 (Placeholder) \u5f53\u7528\u6237\u8fd8\u6ca1\u70b9\u51fb\u5217\u8868\u9879\u65f6\uff0c\u53f3\u4fa7\u663e\u793a\u4ec0\u4e48\uff1f\u914d\u7f6e SplitPlaceholderRule \u6765\u5c55\u793a\u9ed8\u8ba4\u5185\u5bb9\u3002 Activity Embedding \u6f14\u793a \u5207\u6362\u6a21\u5f0f: \u5e73\u677f (Side-by-side) \u90ae\u4ef6\u5217\u8868 Project Alpha \u622a\u6b62\u65e5\u671f\u66f4\u65b0… Team Building \u672c\u5468\u4e94\u4e0b\u5348… System Alert \u670d\u52a1\u5668\u7ef4\u62a4\u901a\u77e5… \u2190 \u8fd4\u56de \u90ae\u4ef6\u8be6\u60c5 \ud83d\udce9 \u8bf7\u9009\u62e9\u5de6\u4fa7\u90ae\u4ef6\u67e5\u770b\u8be6\u60c5(Placeholder Activity) Current Layout: SplitPairRule(minWidth=600dp) Jetpack WindowManager Summary API Level: 1.0.0+ Requires: Android 4.0+ Integration: Gradle Implementation Generated based on Android Developer Documentation c...\n<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-630","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/trantor.ink\/index.php?rest_route=\/wp\/v2\/pages\/630","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/trantor.ink\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/trantor.ink\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/trantor.ink\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/trantor.ink\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=630"}],"version-history":[{"count":1,"href":"https:\/\/trantor.ink\/index.php?rest_route=\/wp\/v2\/pages\/630\/revisions"}],"predecessor-version":[{"id":631,"href":"https:\/\/trantor.ink\/index.php?rest_route=\/wp\/v2\/pages\/630\/revisions\/631"}],"wp:attachment":[{"href":"https:\/\/trantor.ink\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=630"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}