mirror of
https://github.com/BetterAndroid/Hikage.git
synced 2025-09-08 19:44:07 +08:00
319 lines
107 KiB
HTML
319 lines
107 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en-US">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<meta name="generator" content="VuePress 2.0.0-rc.0">
|
|
<style>
|
|
:root {
|
|
--c-bg: #fff;
|
|
}
|
|
html.dark {
|
|
--c-bg: #22272e;
|
|
}
|
|
html, body {
|
|
background-color: var(--c-bg);
|
|
}
|
|
</style>
|
|
<script>
|
|
const userMode = localStorage.getItem('vuepress-color-scheme');
|
|
const systemDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
if (userMode === 'dark' || (userMode !== 'light' && systemDarkMode)) {
|
|
document.documentElement.classList.toggle('dark', true);
|
|
}
|
|
</script>
|
|
<link rel="icon" href="/Hikage/images/logo.svg"><title>hikage-core | Hikage</title><meta name="description" content="An Android responsive UI building tool">
|
|
<link rel="preload" href="/Hikage/assets/style-Rgr8LWAc.css" as="style"><link rel="stylesheet" href="/Hikage/assets/style-Rgr8LWAc.css">
|
|
<link rel="modulepreload" href="/Hikage/assets/app-ZnF1aHNS.js"><link rel="modulepreload" href="/Hikage/assets/hikage-core.html-2POUBcJE.js"><link rel="modulepreload" href="/Hikage/assets/hikage-core.html-6tGPbRmk.js">
|
|
<link rel="prefetch" href="/Hikage/assets/index.html-l1SiVQn7.js" as="script"><link rel="prefetch" href="/Hikage/assets/index.html-UG_FDMyX.js" as="script"><link rel="prefetch" href="/Hikage/assets/index.html-FjffWWA4.js" as="script"><link rel="prefetch" href="/Hikage/assets/about.html--JeJn6VX.js" as="script"><link rel="prefetch" href="/Hikage/assets/changelog.html-XGYIsSRg.js" as="script"><link rel="prefetch" href="/Hikage/assets/contacts.html-uhRwpcjF.js" as="script"><link rel="prefetch" href="/Hikage/assets/future.html-Oos9rVeC.js" as="script"><link rel="prefetch" href="/Hikage/assets/r8-proguard.html-QTtfAIoi.js" as="script"><link rel="prefetch" href="/Hikage/assets/home.html-hszD4rJy.js" as="script"><link rel="prefetch" href="/Hikage/assets/quick-start.html-OQgpPsXK.js" as="script"><link rel="prefetch" href="/Hikage/assets/hikage-compiler.html-OOEYxzA1.js" as="script"><link rel="prefetch" href="/Hikage/assets/hikage-extension-betterandroid.html--TiJmBKm.js" as="script"><link rel="prefetch" href="/Hikage/assets/hikage-extension-compose.html-K6jgaZLv.js" as="script"><link rel="prefetch" href="/Hikage/assets/hikage-extension.html-lJSuuqUt.js" as="script"><link rel="prefetch" href="/Hikage/assets/hikage-widget-androidx.html-uy8ylSjq.js" as="script"><link rel="prefetch" href="/Hikage/assets/hikage-widget-material.html-SrWOBHqa.js" as="script"><link rel="prefetch" href="/Hikage/assets/about.html-aNmPduyK.js" as="script"><link rel="prefetch" href="/Hikage/assets/changelog.html-TDQcoCY9.js" as="script"><link rel="prefetch" href="/Hikage/assets/contacts.html-e3ZRLGK_.js" as="script"><link rel="prefetch" href="/Hikage/assets/future.html-REnhLrdo.js" as="script"><link rel="prefetch" href="/Hikage/assets/r8-proguard.html-_aL0ZPoj.js" as="script"><link rel="prefetch" href="/Hikage/assets/home.html-FkAIX882.js" as="script"><link rel="prefetch" href="/Hikage/assets/quick-start.html-duoa-o83.js" as="script"><link rel="prefetch" href="/Hikage/assets/hikage-compiler.html-_B_hgKuq.js" as="script"><link rel="prefetch" href="/Hikage/assets/hikage-core.html-gVi6UZx8.js" as="script"><link rel="prefetch" href="/Hikage/assets/hikage-extension-betterandroid.html-EgKZos03.js" as="script"><link rel="prefetch" href="/Hikage/assets/hikage-extension-compose.html-RxxykmCH.js" as="script"><link rel="prefetch" href="/Hikage/assets/hikage-extension.html-cbepB2QD.js" as="script"><link rel="prefetch" href="/Hikage/assets/hikage-widget-androidx.html-Kk_4er0h.js" as="script"><link rel="prefetch" href="/Hikage/assets/hikage-widget-material.html-Z3imNZV7.js" as="script"><link rel="prefetch" href="/Hikage/assets/404.html-6Yl8cQE3.js" as="script"><link rel="prefetch" href="/Hikage/assets/index.html-BxYx2COm.js" as="script"><link rel="prefetch" href="/Hikage/assets/index.html-WTe5lrNs.js" as="script"><link rel="prefetch" href="/Hikage/assets/index.html-u51qKXKB.js" as="script"><link rel="prefetch" href="/Hikage/assets/about.html-XwS73ZCx.js" as="script"><link rel="prefetch" href="/Hikage/assets/changelog.html-4cKSC36e.js" as="script"><link rel="prefetch" href="/Hikage/assets/contacts.html-ORTLlJQ8.js" as="script"><link rel="prefetch" href="/Hikage/assets/future.html-jTN_NVVj.js" as="script"><link rel="prefetch" href="/Hikage/assets/r8-proguard.html-e_rREoAD.js" as="script"><link rel="prefetch" href="/Hikage/assets/home.html-TsPnRHmC.js" as="script"><link rel="prefetch" href="/Hikage/assets/quick-start.html-3cWmD7u6.js" as="script"><link rel="prefetch" href="/Hikage/assets/hikage-compiler.html-4m7cGYK8.js" as="script"><link rel="prefetch" href="/Hikage/assets/hikage-extension-betterandroid.html-TeEkbGrP.js" as="script"><link rel="prefetch" href="/Hikage/assets/hikage-extension-compose.html-y9fgAlkJ.js" as="script"><link rel="prefetch" href="/Hikage/assets/hikage-extension.html-Wa92SmBq.js" as="script"><link rel="prefetch" href="/Hikage/assets/hikage-widget-androidx.html-ZxjbyKwp.js" as="script"><link rel="prefetch" href="/Hikage/assets/hikage-widget-material.html-aFxM7z7b.js" as="script"><link rel="prefetch" href="/Hikage/assets/about.html-ndlgo2Ul.js" as="script"><link rel="prefetch" href="/Hikage/assets/changelog.html-m9YESbx7.js" as="script"><link rel="prefetch" href="/Hikage/assets/contacts.html-X7jZzc8H.js" as="script"><link rel="prefetch" href="/Hikage/assets/future.html-BXK9B2jz.js" as="script"><link rel="prefetch" href="/Hikage/assets/r8-proguard.html-cESRxTSf.js" as="script"><link rel="prefetch" href="/Hikage/assets/home.html-yN_Nauvl.js" as="script"><link rel="prefetch" href="/Hikage/assets/quick-start.html-vLMpozQe.js" as="script"><link rel="prefetch" href="/Hikage/assets/hikage-compiler.html-1bP0HyAG.js" as="script"><link rel="prefetch" href="/Hikage/assets/hikage-core.html--xfNkeP6.js" as="script"><link rel="prefetch" href="/Hikage/assets/hikage-extension-betterandroid.html-07ZHN76T.js" as="script"><link rel="prefetch" href="/Hikage/assets/hikage-extension-compose.html-2czu0HQ5.js" as="script"><link rel="prefetch" href="/Hikage/assets/hikage-extension.html-O69pNHSL.js" as="script"><link rel="prefetch" href="/Hikage/assets/hikage-widget-androidx.html-7nnQMKXC.js" as="script"><link rel="prefetch" href="/Hikage/assets/hikage-widget-material.html-OG3AXf8w.js" as="script"><link rel="prefetch" href="/Hikage/assets/404.html-wbLsHMMI.js" as="script">
|
|
</head>
|
|
<body>
|
|
<div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/Hikage/en/" class=""><img class="logo" src="/Hikage/images/logo.svg" alt="Hikage"><span class="site-name can-hide">Hikage</span></a></span><div class="navbar-items-wrapper" style=""><!--[--><!--]--><nav class="navbar-items can-hide"><!--[--><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="Navigation"><span class="title">Navigation</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="Navigation"><span class="title">Navigation</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>Get Started</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/Hikage/en/guide/home.html" class="" aria-label="Introduction"><!--[--><!--]--> Introduction <!--[--><!--]--></a></li><li class="navbar-dropdown-subitem"><a href="/Hikage/en/guide/quick-start.html" class="" aria-label="Quick Start"><!--[--><!--]--> Quick Start <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>Libraries</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a aria-current="page" href="/Hikage/en/library/hikage-core.html" class="router-link-active router-link-exact-active router-link-active" aria-label="hikage-core"><!--[--><!--]--> hikage-core <!--[--><!--]--></a></li><li class="navbar-dropdown-subitem"><a href="/Hikage/en/library/hikage-compiler.html" class="" aria-label="hikage-compiler"><!--[--><!--]--> hikage-compiler <!--[--><!--]--></a></li><li class="navbar-dropdown-subitem"><a href="/Hikage/en/library/hikage-extension.html" class="" aria-label="hikage-extension"><!--[--><!--]--> hikage-extension <!--[--><!--]--></a></li><li class="navbar-dropdown-subitem"><a href="/Hikage/en/library/hikage-extension-betterandroid.html" class="" aria-label="hikage-extension-betterandroid"><!--[--><!--]--> hikage-extension-betterandroid <!--[--><!--]--></a></li><li class="navbar-dropdown-subitem"><a href="/Hikage/en/library/hikage-extension-compose.html" class="" aria-label="hikage-extension-compose"><!--[--><!--]--> hikage-extension-compose <!--[--><!--]--></a></li><li class="navbar-dropdown-subitem"><a href="/Hikage/en/library/hikage-widget-androidx.html" class="" aria-label="hikage-widget-androidx"><!--[--><!--]--> hikage-widget-androidx <!--[--><!--]--></a></li><li class="navbar-dropdown-subitem"><a href="/Hikage/en/library/hikage-widget-material.html" class="" aria-label="hikage-widget-material"><!--[--><!--]--> hikage-widget-material <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>Configs</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/Hikage/en/config/r8-proguard.html" class="" aria-label="R8 & Proguard Obfuscation"><!--[--><!--]--> R8 & Proguard Obfuscation <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>About</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/Hikage/en/about/changelog.html" class="" aria-label="Changelog"><!--[--><!--]--> Changelog <!--[--><!--]--></a></li><li class="navbar-dropdown-subitem"><a href="/Hikage/en/about/future.html" class="" aria-label="Looking Toward the Future"><!--[--><!--]--> Looking Toward the Future <!--[--><!--]--></a></li><li class="navbar-dropdown-subitem"><a href="/Hikage/en/about/contacts.html" class="" aria-label="Contact Us"><!--[--><!--]--> Contact Us <!--[--><!--]--></a></li><li class="navbar-dropdown-subitem"><a href="/Hikage/en/about/about.html" class="" aria-label="About This Document"><!--[--><!--]--> About This Document <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><!--]--></ul></div></div><div class="navbar-item"><a href="/Hikage/en/about/contacts" class="" aria-label="Contact Us"><!--[--><!--]--> Contact Us <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="Select language"><span class="title">English (US)</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="Select language"><span class="title">English (US)</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a aria-current="page" href="/Hikage/en/library/hikage-core.html" class="router-link-active router-link-exact-active router-link-active" aria-label="English"><!--[--><!--]--> English <!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a href="/Hikage/zh-cn/library/hikage-core.html" class="" aria-label="简体中文"><!--[--><!--]--> 简体中文 <!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a class="external-link" href="https://github.com/BetterAndroid/Hikage" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-color-mode-button" title="toggle color mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><form class="search-box" role="search"><input type="search" placeholder="Search" autocomplete="off" spellcheck="false" value><!----></form></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-items"><!--[--><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="Navigation"><span class="title">Navigation</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="Navigation"><span class="title">Navigation</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>Get Started</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/Hikage/en/guide/home.html" class="" aria-label="Introduction"><!--[--><!--]--> Introduction <!--[--><!--]--></a></li><li class="navbar-dropdown-subitem"><a href="/Hikage/en/guide/quick-start.html" class="" aria-label="Quick Start"><!--[--><!--]--> Quick Start <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>Libraries</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a aria-current="page" href="/Hikage/en/library/hikage-core.html" class="router-link-active router-link-exact-active router-link-active" aria-label="hikage-core"><!--[--><!--]--> hikage-core <!--[--><!--]--></a></li><li class="navbar-dropdown-subitem"><a href="/Hikage/en/library/hikage-compiler.html" class="" aria-label="hikage-compiler"><!--[--><!--]--> hikage-compiler <!--[--><!--]--></a></li><li class="navbar-dropdown-subitem"><a href="/Hikage/en/library/hikage-extension.html" class="" aria-label="hikage-extension"><!--[--><!--]--> hikage-extension <!--[--><!--]--></a></li><li class="navbar-dropdown-subitem"><a href="/Hikage/en/library/hikage-extension-betterandroid.html" class="" aria-label="hikage-extension-betterandroid"><!--[--><!--]--> hikage-extension-betterandroid <!--[--><!--]--></a></li><li class="navbar-dropdown-subitem"><a href="/Hikage/en/library/hikage-extension-compose.html" class="" aria-label="hikage-extension-compose"><!--[--><!--]--> hikage-extension-compose <!--[--><!--]--></a></li><li class="navbar-dropdown-subitem"><a href="/Hikage/en/library/hikage-widget-androidx.html" class="" aria-label="hikage-widget-androidx"><!--[--><!--]--> hikage-widget-androidx <!--[--><!--]--></a></li><li class="navbar-dropdown-subitem"><a href="/Hikage/en/library/hikage-widget-material.html" class="" aria-label="hikage-widget-material"><!--[--><!--]--> hikage-widget-material <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>Configs</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/Hikage/en/config/r8-proguard.html" class="" aria-label="R8 & Proguard Obfuscation"><!--[--><!--]--> R8 & Proguard Obfuscation <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>About</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/Hikage/en/about/changelog.html" class="" aria-label="Changelog"><!--[--><!--]--> Changelog <!--[--><!--]--></a></li><li class="navbar-dropdown-subitem"><a href="/Hikage/en/about/future.html" class="" aria-label="Looking Toward the Future"><!--[--><!--]--> Looking Toward the Future <!--[--><!--]--></a></li><li class="navbar-dropdown-subitem"><a href="/Hikage/en/about/contacts.html" class="" aria-label="Contact Us"><!--[--><!--]--> Contact Us <!--[--><!--]--></a></li><li class="navbar-dropdown-subitem"><a href="/Hikage/en/about/about.html" class="" aria-label="About This Document"><!--[--><!--]--> About This Document <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><!--]--></ul></div></div><div class="navbar-item"><a href="/Hikage/en/about/contacts" class="" aria-label="Contact Us"><!--[--><!--]--> Contact Us <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="Select language"><span class="title">English (US)</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="Select language"><span class="title">English (US)</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a aria-current="page" href="/Hikage/en/library/hikage-core.html" class="router-link-active router-link-exact-active router-link-active" aria-label="English"><!--[--><!--]--> English <!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a href="/Hikage/zh-cn/library/hikage-core.html" class="" aria-label="简体中文"><!--[--><!--]--> 简体中文 <!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a class="external-link" href="https://github.com/BetterAndroid/Hikage" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-items"><!--[--><li><p tabindex="0" class="sidebar-item sidebar-heading collapsible">Get Started <span class="right arrow"></span></p><ul style="display:none;" class="sidebar-item-children"><!--[--><li><a href="/Hikage/en/guide/home.html" class="sidebar-item" aria-label="Introduction"><!--[--><!--]--> Introduction <!--[--><!--]--></a><!----></li><li><a href="/Hikage/en/guide/quick-start.html" class="sidebar-item" aria-label="Quick Start"><!--[--><!--]--> Quick Start <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><p tabindex="0" class="sidebar-item sidebar-heading active collapsible">Libraries <span class="down arrow"></span></p><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/Hikage/en/library/hikage-core.html" class="router-link-active router-link-exact-active router-link-active sidebar-item active" aria-label="hikage-core"><!--[--><!--]--> hikage-core <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/Hikage/en/library/hikage-core.html#configure-dependency" class="router-link-active router-link-exact-active sidebar-item" aria-label="Configure Dependency"><!--[--><!--]--> Configure Dependency <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/Hikage/en/library/hikage-core.html#sweetdependency-recommended" class="router-link-active router-link-exact-active sidebar-item" aria-label="SweetDependency (Recommended)"><!--[--><!--]--> SweetDependency (Recommended) <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/Hikage/en/library/hikage-core.html#version-catalog" class="router-link-active router-link-exact-active sidebar-item" aria-label="Version Catalog"><!--[--><!--]--> Version Catalog <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/Hikage/en/library/hikage-core.html#traditional-method" class="router-link-active router-link-exact-active sidebar-item" aria-label="Traditional Method"><!--[--><!--]--> Traditional Method <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><a aria-current="page" href="/Hikage/en/library/hikage-core.html#function-introduction" class="router-link-active router-link-exact-active sidebar-item" aria-label="Function Introduction"><!--[--><!--]--> Function Introduction <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/Hikage/en/library/hikage-core.html#basic-usage" class="router-link-active router-link-exact-active sidebar-item" aria-label="Basic Usage"><!--[--><!--]--> Basic Usage <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/Hikage/en/library/hikage-core.html#layout-agreement" class="router-link-active router-link-exact-active sidebar-item" aria-label="Layout Agreement"><!--[--><!--]--> Layout Agreement <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/Hikage/en/library/hikage-core.html#basic-layout-components" class="router-link-active router-link-exact-active sidebar-item" aria-label="Basic Layout Components"><!--[--><!--]--> Basic Layout Components <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/Hikage/en/library/hikage-core.html#positioning-layout-components" class="router-link-active router-link-exact-active sidebar-item" aria-label="Positioning Layout Components"><!--[--><!--]--> Positioning Layout Components <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/Hikage/en/library/hikage-core.html#custom-layout-components" class="router-link-active router-link-exact-active sidebar-item" aria-label="Custom Layout Components"><!--[--><!--]--> Custom Layout Components <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/Hikage/en/library/hikage-core.html#combination-and-disassembly-layout" class="router-link-active router-link-exact-active sidebar-item" aria-label="Combination and Disassembly Layout"><!--[--><!--]--> Combination and Disassembly Layout <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/Hikage/en/library/hikage-core.html#state-management" class="router-link-active router-link-exact-active sidebar-item" aria-label="State Management"><!--[--><!--]--> State Management <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/Hikage/en/library/hikage-core.html#custom-layout-factory" class="router-link-active router-link-exact-active sidebar-item" aria-label="Custom Layout Factory"><!--[--><!--]--> Custom Layout Factory <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/Hikage/en/library/hikage-core.html#preview-layout" class="router-link-active router-link-exact-active sidebar-item" aria-label="Preview Layout"><!--[--><!--]--> Preview Layout <!--[--><!--]--></a><!----></li><!--]--></ul></li><!--]--></ul></li><li><a href="/Hikage/en/library/hikage-compiler.html" class="sidebar-item" aria-label="hikage-compiler"><!--[--><!--]--> hikage-compiler <!--[--><!--]--></a><!----></li><li><a href="/Hikage/en/library/hikage-extension.html" class="sidebar-item" aria-label="hikage-extension"><!--[--><!--]--> hikage-extension <!--[--><!--]--></a><!----></li><li><a href="/Hikage/en/library/hikage-extension-betterandroid.html" class="sidebar-item" aria-label="hikage-extension-betterandroid"><!--[--><!--]--> hikage-extension-betterandroid <!--[--><!--]--></a><!----></li><li><a href="/Hikage/en/library/hikage-extension-compose.html" class="sidebar-item" aria-label="hikage-extension-compose"><!--[--><!--]--> hikage-extension-compose <!--[--><!--]--></a><!----></li><li><a href="/Hikage/en/library/hikage-widget-androidx.html" class="sidebar-item" aria-label="hikage-widget-androidx"><!--[--><!--]--> hikage-widget-androidx <!--[--><!--]--></a><!----></li><li><a href="/Hikage/en/library/hikage-widget-material.html" class="sidebar-item" aria-label="hikage-widget-material"><!--[--><!--]--> hikage-widget-material <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><p tabindex="0" class="sidebar-item sidebar-heading collapsible">Configs <span class="right arrow"></span></p><ul style="display:none;" class="sidebar-item-children"><!--[--><li><a href="/Hikage/en/config/r8-proguard.html" class="sidebar-item" aria-label="R8 & Proguard Obfuscation"><!--[--><!--]--> R8 & Proguard Obfuscation <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><p tabindex="0" class="sidebar-item sidebar-heading collapsible">About <span class="right arrow"></span></p><ul style="display:none;" class="sidebar-item-children"><!--[--><li><a href="/Hikage/en/about/changelog.html" class="sidebar-item" aria-label="Changelog"><!--[--><!--]--> Changelog <!--[--><!--]--></a><!----></li><li><a href="/Hikage/en/about/future.html" class="sidebar-item" aria-label="Looking Toward the Future"><!--[--><!--]--> Looking Toward the Future <!--[--><!--]--></a><!----></li><li><a href="/Hikage/en/about/contacts.html" class="sidebar-item" aria-label="Contact Us"><!--[--><!--]--> Contact Us <!--[--><!--]--></a><!----></li><li><a href="/Hikage/en/about/about.html" class="sidebar-item" aria-label="About This Document"><!--[--><!--]--> About This Document <!--[--><!--]--></a><!----></li><!--]--></ul></li><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><!--]--><div><h1 id="hikage-core" tabindex="-1"><a class="header-anchor" href="#hikage-core" aria-hidden="true">#</a> hikage-core</h1><p><img src="https://img.shields.io/maven-central/v/com.highcapable.hikage/hikage-core?logo=apachemaven&logoColor=orange&style=flat-square" alt="Maven Central"><span style="margin-left:5px;"></span><img src="https://img.shields.io/maven-metadata/v?metadataUrl=https%3A%2F%2Fraw.githubusercontent.com%2FHighCapable%2Fmaven-repository%2Frefs%2Fheads%2Fmain%2Frepository%2Freleases%2Fcom%2Fhighcapable%2Fhikage%2Fhikage-core%2Fmaven-metadata.xml&logo=apachemaven&logoColor=orange&label=highcapable-maven-releases&style=flat-square" alt="Maven metadata URL"><span style="margin-left:5px;"></span><img src="https://img.shields.io/badge/Min SDK-21-orange?logo=android&style=flat-square" alt="Android Min SDK"></p><p>This is the core dependency of Hikage, and you need to introduce this module to use the basic features of Hikage.</p><h2 id="configure-dependency" tabindex="-1"><a class="header-anchor" href="#configure-dependency" aria-hidden="true">#</a> Configure Dependency</h2><p>You can add this module to your project using the following method.</p><h3 id="sweetdependency-recommended" tabindex="-1"><a class="header-anchor" href="#sweetdependency-recommended" aria-hidden="true">#</a> SweetDependency (Recommended)</h3><p>Add dependency in your project's <code>SweetDependency</code> configuration file.</p><div class="language-yaml line-numbers-mode" data-ext="yml"><pre class="shiki github-dark-dimmed" style="background-color:#22272e;" tabindex="0"><code><span class="line"><span style="color:#8DDB8C;">libraries</span><span style="color:#ADBAC7;">:</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#8DDB8C;">com.highcapable.hikage</span><span style="color:#ADBAC7;">:</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#8DDB8C;">hikage-core</span><span style="color:#ADBAC7;">:</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#8DDB8C;">version</span><span style="color:#ADBAC7;">: </span><span style="color:#96D0FF;">+</span></span>
|
|
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>Configure dependency in your project's <code>build.gradle.kts</code>.</p><div class="language-kotlin line-numbers-mode" data-ext="kt"><pre class="shiki github-dark-dimmed" style="background-color:#22272e;" tabindex="0"><code><span class="line"><span style="color:#DCBDFB;">implementation</span><span style="color:#ADBAC7;">(com.highcapable.hikage.hikage.core)</span></span>
|
|
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h3 id="version-catalog" tabindex="-1"><a class="header-anchor" href="#version-catalog" aria-hidden="true">#</a> Version Catalog</h3><p>Add dependency in your project's <code>gradle/libs.versions.toml</code>.</p><div class="language-toml line-numbers-mode" data-ext="toml"><pre class="shiki github-dark-dimmed" style="background-color:#22272e;" tabindex="0"><code><span class="line"><span style="color:#ADBAC7;">[</span><span style="color:#F69D50;">versions</span><span style="color:#ADBAC7;">]</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;">hikage-core = </span><span style="color:#96D0FF;">"<version>"</span></span>
|
|
<span class="line"></span>
|
|
<span class="line"><span style="color:#ADBAC7;">[</span><span style="color:#F69D50;">libraries</span><span style="color:#ADBAC7;">]</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;">hikage-core = { module = </span><span style="color:#96D0FF;">"com.highcapable.hikage:hikage-core"</span><span style="color:#ADBAC7;">, version.ref = </span><span style="color:#96D0FF;">"hikage-core"</span><span style="color:#ADBAC7;"> }</span></span>
|
|
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>Configure dependency in your project's <code>build.gradle.kts</code>.</p><div class="language-kotlin line-numbers-mode" data-ext="kt"><pre class="shiki github-dark-dimmed" style="background-color:#22272e;" tabindex="0"><code><span class="line"><span style="color:#DCBDFB;">implementation</span><span style="color:#ADBAC7;">(libs.hikage.core)</span></span>
|
|
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>Please change <code><version></code> to the version displayed at the top of this document.</p><h3 id="traditional-method" tabindex="-1"><a class="header-anchor" href="#traditional-method" aria-hidden="true">#</a> Traditional Method</h3><p>Configure dependency in your project's <code>build.gradle.kts</code>.</p><div class="language-kotlin line-numbers-mode" data-ext="kt"><pre class="shiki github-dark-dimmed" style="background-color:#22272e;" tabindex="0"><code><span class="line"><span style="color:#DCBDFB;">implementation</span><span style="color:#ADBAC7;">(</span><span style="color:#96D0FF;">"com.highcapable.hikage:hikage-core:<version>"</span><span style="color:#ADBAC7;">)</span></span>
|
|
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>Please change <code><version></code> to the version displayed at the top of this document.</p><h2 id="function-introduction" tabindex="-1"><a class="header-anchor" href="#function-introduction" aria-hidden="true">#</a> Function Introduction</h2><p>You can view the KDoc <a href="https://betterandroid.github.io/Hikage/KDoc/hikage-core" target="_blank" rel="noopener noreferrer">click here<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a>.</p><h3 id="basic-usage" tabindex="-1"><a class="header-anchor" href="#basic-usage" aria-hidden="true">#</a> Basic Usage</h3><p>Use the code below to create your first Hikage layout.</p><p>First, use <code>Hikageable</code> to create a <code>Hikage.Delegate</code> object.</p><blockquote><p>The following example</p></blockquote><div class="language-kotlin line-numbers-mode" data-ext="kt"><pre class="shiki github-dark-dimmed" style="background-color:#22272e;" tabindex="0"><code><span class="line"><span style="color:#F47067;">val</span><span style="color:#ADBAC7;"> myLayout </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#DCBDFB;">Hikageable</span><span style="color:#ADBAC7;"> {</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#DCBDFB;">LinearLayout</span><span style="color:#ADBAC7;"> {</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#DCBDFB;">TextView</span><span style="color:#ADBAC7;"> {</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> text </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#96D0FF;">"Hello, World!"</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> }</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> }</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;">}</span></span>
|
|
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>Then, set it to the parent or root layout you want to display.</p><blockquote><p>The following example</p></blockquote><div class="language-kotlin line-numbers-mode" data-ext="kt"><pre class="shiki github-dark-dimmed" style="background-color:#22272e;" tabindex="0"><code><span class="line"><span style="color:#768390;">// Assume that's your Activity.</span></span>
|
|
<span class="line"><span style="color:#F47067;">val</span><span style="color:#ADBAC7;"> activity: </span><span style="color:#F69D50;">Activity</span></span>
|
|
<span class="line"><span style="color:#768390;">// Instantiate the Hikage object.</span></span>
|
|
<span class="line"><span style="color:#F47067;">val</span><span style="color:#ADBAC7;"> hikage </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> myLayout.</span><span style="color:#DCBDFB;">create</span><span style="color:#ADBAC7;">(activity)</span></span>
|
|
<span class="line"><span style="color:#768390;">// Get the root layout.</span></span>
|
|
<span class="line"><span style="color:#F47067;">val</span><span style="color:#ADBAC7;"> root </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> hikage.root</span></span>
|
|
<span class="line"><span style="color:#768390;">// Content view set to Activity.</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;">activity.</span><span style="color:#DCBDFB;">setContentView</span><span style="color:#ADBAC7;">(root)</span></span>
|
|
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>In this way, we can complete a simple layout creation and configuration.</p><h3 id="layout-agreement" tabindex="-1"><a class="header-anchor" href="#layout-agreement" aria-hidden="true">#</a> Layout Agreement</h3><p>The basic layout elements of Hikage are based on the Android native <code>View</code> component.</p><p>All layout elements can be created directly using the Android native <code>View</code> component.</p><p>The creation process of all layouts will be limited to the specified scope <code>Hikage.Performer</code>, which is called the "player" of the layout, that is, the role object that plays the layout.</p><p>This object can be created and maintained in the following ways.</p><h4 id="hikageable" tabindex="-1"><a class="header-anchor" href="#hikageable" aria-hidden="true">#</a> Hikageable</h4><p>As shown in <a href="#basic-usage">Basic Usage</a>, <code>Hikageable</code> can directly create a <code>Hikage.Delegate</code> or <code>Hikage</code> object.</p><p>In DSL, you can get the <code>Hikage.Performer</code> object to create the layout content.</p><p>The first solution is created anywhere.</p><blockquote><p>The following example</p></blockquote><div class="language-kotlin line-numbers-mode" data-ext="kt"><pre class="shiki github-dark-dimmed" style="background-color:#22272e;" tabindex="0"><code><span class="line"><span style="color:#768390;">// myLayout is a Hikage.Delegate object.</span></span>
|
|
<span class="line"><span style="color:#F47067;">val</span><span style="color:#ADBAC7;"> myLayout </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#DCBDFB;">Hikageable</span><span style="color:#ADBAC7;"> {</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#768390;">// ...</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;">}</span></span>
|
|
<span class="line"><span style="color:#768390;">// Assume that's your Context.</span></span>
|
|
<span class="line"><span style="color:#F47067;">val</span><span style="color:#ADBAC7;"> context: </span><span style="color:#F69D50;">Context</span></span>
|
|
<span class="line"><span style="color:#768390;">// Instantiate the Hikage object where the Context is needed.</span></span>
|
|
<span class="line"><span style="color:#F47067;">val</span><span style="color:#ADBAC7;"> hikage </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> myLayout.</span><span style="color:#DCBDFB;">create</span><span style="color:#ADBAC7;">(context)</span></span>
|
|
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>The second solution is created directly where <code>Context</code> exists.</p><blockquote><p>The following example</p></blockquote><div class="language-kotlin line-numbers-mode" data-ext="kt"><pre class="shiki github-dark-dimmed" style="background-color:#22272e;" tabindex="0"><code><span class="line"><span style="color:#768390;">// Assume that's your Context.</span></span>
|
|
<span class="line"><span style="color:#F47067;">val</span><span style="color:#ADBAC7;"> context: </span><span style="color:#F69D50;">Context</span></span>
|
|
<span class="line"><span style="color:#768390;">// Create a layout, myLayout is a Hikage object.</span></span>
|
|
<span class="line"><span style="color:#F47067;">val</span><span style="color:#ADBAC7;"> myLayout </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#DCBDFB;">Hikageable</span><span style="color:#ADBAC7;">(context) {</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#768390;">// ...</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;">}</span></span>
|
|
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="hikagebuilder" tabindex="-1"><a class="header-anchor" href="#hikagebuilder" aria-hidden="true">#</a> HikageBuilder</h4><p>In addition to the above methods, you can also maintain a <code>HikageBuilder</code> object to pre-create the layout.</p><p>First, we need to create a <code>HikageBuilder</code> object and define it as a singleton.</p><blockquote><p>The following example</p></blockquote><div class="language-kotlin line-numbers-mode" data-ext="kt"><pre class="shiki github-dark-dimmed" style="background-color:#22272e;" tabindex="0"><code><span class="line"><span style="color:#F47067;">object</span><span style="color:#ADBAC7;"> </span><span style="color:#F69D50;">MyLayout</span><span style="color:#ADBAC7;"> : </span><span style="color:#F69D50;">HikageBuilder</span><span style="color:#ADBAC7;"> {</span></span>
|
|
<span class="line"></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#F47067;">override</span><span style="color:#ADBAC7;"> </span><span style="color:#F47067;">fun</span><span style="color:#ADBAC7;"> </span><span style="color:#DCBDFB;">build</span><span style="color:#ADBAC7;">() </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#DCBDFB;">Hikageable</span><span style="color:#ADBAC7;"> {</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#768390;">// ...</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> }</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;">}</span></span>
|
|
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>Then, use it where needed, there are two options as follows.</p><p>The first solution is to create a <code>Hikage.Delegate</code> object directly using <code>build</code>.</p><blockquote><p>The following example</p></blockquote><div class="language-kotlin line-numbers-mode" data-ext="kt"><pre class="shiki github-dark-dimmed" style="background-color:#22272e;" tabindex="0"><code><span class="line"><span style="color:#768390;">// myLayout is a Hikage.Delegate object.</span></span>
|
|
<span class="line"><span style="color:#F47067;">val</span><span style="color:#ADBAC7;"> myLayout </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> MyLayout.</span><span style="color:#DCBDFB;">build</span><span style="color:#ADBAC7;">()</span></span>
|
|
<span class="line"><span style="color:#768390;">// Assume that's your Context.</span></span>
|
|
<span class="line"><span style="color:#F47067;">val</span><span style="color:#ADBAC7;"> context: </span><span style="color:#F69D50;">Context</span></span>
|
|
<span class="line"><span style="color:#768390;">// Instantiate the Hikage object where the Context is needed.</span></span>
|
|
<span class="line"><span style="color:#F47067;">val</span><span style="color:#ADBAC7;"> hikage </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> myLayout.</span><span style="color:#DCBDFB;">create</span><span style="color:#ADBAC7;">(context)</span></span>
|
|
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>The second solution is to create the <code>Hikage</code> delegate object using <code>Context.lazyHikage</code>.</p><p>For example, we can use it like <code>ViewBinding</code> in <code>Activity</code>.</p><blockquote><p>The following example</p></blockquote><div class="language-kotlin line-numbers-mode" data-ext="kt"><pre class="shiki github-dark-dimmed" style="background-color:#22272e;" tabindex="0"><code><span class="line"><span style="color:#F47067;">class</span><span style="color:#ADBAC7;"> </span><span style="color:#F69D50;">MyActivity</span><span style="color:#ADBAC7;">: </span><span style="color:#F69D50;">AppCompatActivity</span><span style="color:#ADBAC7;">() {</span></span>
|
|
<span class="line"></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#F47067;">private</span><span style="color:#ADBAC7;"> </span><span style="color:#F47067;">val</span><span style="color:#ADBAC7;"> myLayout </span><span style="color:#F47067;">by</span><span style="color:#ADBAC7;"> </span><span style="color:#DCBDFB;">lazyHikage</span><span style="color:#ADBAC7;">(MyLayout)</span></span>
|
|
<span class="line"></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#F47067;">override</span><span style="color:#ADBAC7;"> </span><span style="color:#F47067;">fun</span><span style="color:#ADBAC7;"> </span><span style="color:#DCBDFB;">onCreate</span><span style="color:#ADBAC7;">(savedInstanceState: </span><span style="color:#F69D50;">Bundle</span><span style="color:#ADBAC7;">?) {</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#6CB6FF;">super</span><span style="color:#ADBAC7;">.</span><span style="color:#DCBDFB;">onCreate</span><span style="color:#ADBAC7;">(savedInstanceState)</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#768390;">// Get the root layout.</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#F47067;">val</span><span style="color:#ADBAC7;"> root </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> myLayout.root</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#768390;">// Content view set to Activity.</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#DCBDFB;">setContentView</span><span style="color:#ADBAC7;">(root)</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> }</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;">}</span></span>
|
|
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="basic-layout-components" tabindex="-1"><a class="header-anchor" href="#basic-layout-components" aria-hidden="true">#</a> Basic Layout Components</h3><p>Hikage uses a functional component creation scheme consistent with Jetpack Compose.</p><p>Its layout is done using two basic components, the <code>View</code> and <code>ViewGroup</code> functions. They correspond to Android native components based on <code>View</code> and <code>ViewGroup</code>, respectively.</p><h4 id="view" tabindex="-1"><a class="header-anchor" href="#view" aria-hidden="true">#</a> View</h4><p>The basic parameters of the <code>View</code> function are the following three, and the <code>View</code> object type created using generic definitions.</p><p>If the generic type is not declared, the default is to use <code>android.view.View</code> as the object type created.</p><table><thead><tr><th>Parameter Name</th><th>Description</th></tr></thead><tbody><tr><td><code>lparams</code></td><td>Layout parameter, i.e. <code>ViewGroup.LayoutParams</code>, created using <code>LayoutParams</code></td></tr><tr><td><code>id</code></td><td>Used to find the ID of the created object, defined using a string</td></tr><tr><td><code>init</code></td><td>The initialization method body of <code>View</code>, passed as the last DSL parameter</td></tr></tbody></table><blockquote><p>The following example</p></blockquote><div class="language-kotlin line-numbers-mode" data-ext="kt"><pre class="shiki github-dark-dimmed" style="background-color:#22272e;" tabindex="0"><code><span class="line"><span style="color:#DCBDFB;">View</span><span style="color:#ADBAC7;"><</span><span style="color:#F69D50;">TextView</span><span style="color:#ADBAC7;">>(</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> lparams </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#DCBDFB;">LayoutParams</span><span style="color:#ADBAC7;">(),</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> id </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#96D0FF;">"my_text_view"</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;">) {</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> text </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#96D0FF;">"Hello, World!"</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> textSize </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#6CB6FF;">16f</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> gravity </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> Gravity.CENTER</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;">}</span></span>
|
|
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="viewgroup" tabindex="-1"><a class="header-anchor" href="#viewgroup" aria-hidden="true">#</a> ViewGroup</h4><p>The basic parameters of the <code>ViewGroup</code> function are four, and compared with the <code>View</code> function, there is one more <code>performer</code> parameter.</p><p>It must declare a generic type because <code>ViewGroup</code> is an abstract class and requires a concrete implementation class.</p><p><code>ViewGroup</code> provides an additional generic parameter based on <code>ViewGroup.LayoutParams</code> to provide layout parameters for sub-layouts.</p><p><code>ViewGroup.LayoutParams</code> is used by default when not declared.</p><table><thead><tr><th>Parameter Name</th><th>Description</th></tr></thead><tbody><tr><td><code>lparams</code></td><td>Layout parameter, i.e. <code>ViewGroup.LayoutParams</code>, created using <code>LayoutParams</code></td></tr><tr><td><code>id</code></td><td>Used to find the ID of the created object, defined using a string</td></tr><tr><td><code>init</code></td><td>The initialization method body of <code>ViewGroup</code>, passed in as DSL parameter</td></tr><tr><td><code>performer</code></td><td><code>Hikage.Performer</code> object, passed as the last DSL parameter</td></tr></tbody></table><p>The function of the <code>performer</code> parameter is to pass a new <code>Hikage.Performer</code> object downward as the creator of the sub-layout.</p><blockquote><p>The following example</p></blockquote><div class="language-kotlin line-numbers-mode" data-ext="kt"><pre class="shiki github-dark-dimmed" style="background-color:#22272e;" tabindex="0"><code><span class="line"><span style="color:#DCBDFB;">ViewGroup</span><span style="color:#ADBAC7;"><</span><span style="color:#F69D50;">LinearLayout</span><span style="color:#ADBAC7;">, </span><span style="color:#F69D50;">LinearLayout</span><span style="color:#ADBAC7;">.</span><span style="color:#F69D50;">LayoutParams</span><span style="color:#ADBAC7;">>(</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> lparams </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#DCBDFB;">LayoutParams</span><span style="color:#ADBAC7;">(),</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> id </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#96D0FF;">"my_linear_layout"</span><span style="color:#ADBAC7;">,</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#768390;">// Initialization method body will be reflected here using `init`.</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> init </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> {</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> orientation </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> LinearLayout.VERTICAL</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> gravity </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> Gravity.CENTER</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> }</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;">) {</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#768390;">// You can continue to create sub-layouts here.</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#DCBDFB;">View</span><span style="color:#ADBAC7;">()</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;">}</span></span>
|
|
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="layoutparams" tabindex="-1"><a class="header-anchor" href="#layoutparams" aria-hidden="true">#</a> LayoutParams</h4><p>Layouts in Hikage can be set using the <code>LayoutParams</code> function, you can create it using the following parameters.</p><table><thead><tr><th>Parameter Name</th><th>Description</th></tr></thead><tbody><tr><td><code>width</code></td><td>Manually specify layout width</td></tr><tr><td><code>height</code></td><td>Manually specify layout height</td></tr><tr><td><code>matchParent</code></td><td>Whether to use <code>MATCH_PARENT</code> as layout width and height</td></tr><tr><td><code>wrapContent</code></td><td>Whether to use <code>WRAP_CONTENT</code> as layout width and height</td></tr><tr><td><code>widthMatchParent</code></td><td>Set width to <code>MATCH_PARENT</code> only</td></tr><tr><td><code>heightMatchParent</code></td><td>Set the height to <code>MATCH_PARENT</code> only</td></tr><tr><td><code>body</code></td><td>The initialization method body of the layout parameter, passed into as the last DSL parameter</td></tr></tbody></table><p>When you do not set the <code>LayoutParams</code> object or specify <code>width</code> and <code>height</code>, Hikage will automatically use <code>WRAP_CONTENT</code> as layout parameters.</p><p>The type of the <code>body</code> method body comes from the second generic parameter provided by the upper layer <a href="#viewgroup">ViewGroup</a>.</p><blockquote><p>The following example</p></blockquote><div class="language-kotlin line-numbers-mode" data-ext="kt"><pre class="shiki github-dark-dimmed" style="background-color:#22272e;" tabindex="0"><code><span class="line"><span style="color:#DCBDFB;">View</span><span style="color:#ADBAC7;">(</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#768390;">// Assume that the layout parameter type provided by the upper layer is LinearLayout.LayoutParams.</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> lparams </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#DCBDFB;">LayoutParams</span><span style="color:#ADBAC7;">(width </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#6CB6FF;">100</span><span style="color:#ADBAC7;">.dp) {</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> topMargin </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#6CB6FF;">20</span><span style="color:#ADBAC7;">.dp</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> }</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;">)</span></span>
|
|
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>If you only need a horizontally filled layout, you can use <code>widthMatchParent = true</code> directly.</p><blockquote><p>The following example</p></blockquote><div class="language-kotlin line-numbers-mode" data-ext="kt"><pre class="shiki github-dark-dimmed" style="background-color:#22272e;" tabindex="0"><code><span class="line"><span style="color:#DCBDFB;">View</span><span style="color:#ADBAC7;">(</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> lparams </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#DCBDFB;">LayoutParams</span><span style="color:#ADBAC7;">(widthMatchParent </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#6CB6FF;">true</span><span style="color:#ADBAC7;">)</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;">)</span></span>
|
|
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="layout" tabindex="-1"><a class="header-anchor" href="#layout" aria-hidden="true">#</a> Layout</h4><p>Hikage supports references to third-party layouts, you can pass in XML layout resource IDs, other Hikage objects, and <code>View</code> objects, and even <code>ViewBinding</code>.</p><blockquote><p>The following example</p></blockquote><div class="language-kotlin line-numbers-mode" data-ext="kt"><pre class="shiki github-dark-dimmed" style="background-color:#22272e;" tabindex="0"><code><span class="line"><span style="color:#DCBDFB;">ViewGroup</span><span style="color:#ADBAC7;"><...> {</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#768390;">// Quote XML layout resource ID.</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#DCBDFB;">Layout</span><span style="color:#ADBAC7;">(R.layout.my_layout)</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#768390;">// Quote ViewBinding.</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#DCBDFB;">Layout</span><span style="color:#ADBAC7;"><</span><span style="color:#F69D50;">MyLayoutBinding</span><span style="color:#ADBAC7;">>()</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#768390;">// Reference another Hikage or Hikage.Delegate object.</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#DCBDFB;">Layout</span><span style="color:#ADBAC7;">(myLayout)</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;">}</span></span>
|
|
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="positioning-layout-components" tabindex="-1"><a class="header-anchor" href="#positioning-layout-components" aria-hidden="true">#</a> Positioning Layout Components</h3><p>Hikage supports locating components using <code>id</code>. In the example above, we used the <code>id</code> parameter to set the component's ID.</p><p>After setting the ID, you can use the <code>Hikage.get</code> method to get them.</p><blockquote><p>The following example</p></blockquote><div class="language-kotlin line-numbers-mode" data-ext="kt"><pre class="shiki github-dark-dimmed" style="background-color:#22272e;" tabindex="0"><code><span class="line"><span style="color:#F47067;">val</span><span style="color:#ADBAC7;"> myLayout </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#DCBDFB;">Hikageable</span><span style="color:#ADBAC7;"> {</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#DCBDFB;">View</span><span style="color:#ADBAC7;"><</span><span style="color:#F69D50;">TextView</span><span style="color:#ADBAC7;">>(id </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#96D0FF;">"my_text_view"</span><span style="color:#ADBAC7;">) {</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> text </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#96D0FF;">"Hello, World!"</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> }</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;">}</span></span>
|
|
<span class="line"><span style="color:#768390;">// Assume that's your Context.</span></span>
|
|
<span class="line"><span style="color:#F47067;">val</span><span style="color:#ADBAC7;"> context: </span><span style="color:#F69D50;">Context</span></span>
|
|
<span class="line"><span style="color:#768390;">// Instantiate the Hikage object where the Context is needed.</span></span>
|
|
<span class="line"><span style="color:#F47067;">val</span><span style="color:#ADBAC7;"> hikage </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> myLayout.</span><span style="color:#DCBDFB;">create</span><span style="color:#ADBAC7;">(context)</span></span>
|
|
<span class="line"><span style="color:#768390;">// Get the specified component and return the View type.</span></span>
|
|
<span class="line"><span style="color:#F47067;">val</span><span style="color:#ADBAC7;"> textView </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> hikage[</span><span style="color:#96D0FF;">"my_text_view"</span><span style="color:#ADBAC7;">]</span></span>
|
|
<span class="line"><span style="color:#768390;">// Get the specified component and declare the component type.</span></span>
|
|
<span class="line"><span style="color:#F47067;">val</span><span style="color:#ADBAC7;"> textView </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> hikage.</span><span style="color:#DCBDFB;">get</span><span style="color:#ADBAC7;"><</span><span style="color:#F69D50;">TextView</span><span style="color:#ADBAC7;">>(</span><span style="color:#96D0FF;">"my_text_view"</span><span style="color:#ADBAC7;">)</span></span>
|
|
<span class="line"><span style="color:#768390;">// If you are not sure whether the ID exists, you can use the `getOrNull` method.</span></span>
|
|
<span class="line"><span style="color:#F47067;">val</span><span style="color:#ADBAC7;"> textView </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> hikage.</span><span style="color:#DCBDFB;">getOrNull</span><span style="color:#ADBAC7;"><</span><span style="color:#F69D50;">TextView</span><span style="color:#ADBAC7;">>(</span><span style="color:#96D0FF;">"my_text_view"</span><span style="color:#ADBAC7;">)</span></span>
|
|
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="custom-layout-components" tabindex="-1"><a class="header-anchor" href="#custom-layout-components" aria-hidden="true">#</a> Custom Layout Components</h3><p>Hikage provides functions corresponding to component class names for Android basic layout components.</p><p>You can directly use these functions to create components without using generics to declare them. If you need components provided by Jetpack or Material, the <a href="/Hikage/en/library/hikage-widget-androidx.html" class="">hikage-widget-androidx</a> or <a href="/Hikage/en/library/hikage-widget-material.html" class="">hikage-widget-material</a> modules can be introduced.</p><blockquote><p>The following example</p></blockquote><div class="language-kotlin line-numbers-mode" data-ext="kt"><pre class="shiki github-dark-dimmed" style="background-color:#22272e;" tabindex="0"><code><span class="line"><span style="color:#DCBDFB;">LinearLayout</span><span style="color:#ADBAC7;">(</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> lparams </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#DCBDFB;">LayoutParams</span><span style="color:#ADBAC7;">(),</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> id </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#96D0FF;">"my_linear_layout"</span><span style="color:#ADBAC7;">,</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> init </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> {</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> orientation </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> LinearLayout.VERTICAL</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> gravity </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> Gravity.CENTER</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> }</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;">) {</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#DCBDFB;">TextView</span><span style="color:#ADBAC7;">(</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> lparams </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#DCBDFB;">LayoutParams</span><span style="color:#ADBAC7;">(),</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> id </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#96D0FF;">"my_text_view"</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> ) {</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> text </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#96D0FF;">"Hello, World!"</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> textSize </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#6CB6FF;">16f</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> gravity </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> Gravity.CENTER</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> }</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;">}</span></span>
|
|
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>The initialized <code>View</code> or <code>ViewGroup</code> objects return instances of their own object type, which you can use in the following layout.</p><blockquote><p>The following example</p></blockquote><div class="language-kotlin line-numbers-mode" data-ext="kt"><pre class="shiki github-dark-dimmed" style="background-color:#22272e;" tabindex="0"><code><span class="line"><span style="color:#F47067;">val</span><span style="color:#ADBAC7;"> textView </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#DCBDFB;">TextView</span><span style="color:#ADBAC7;"> {</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> text </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#96D0FF;">"Hello, World!"</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> textSize </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#6CB6FF;">16f</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> gravity </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> Gravity.CENTER</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;">}</span></span>
|
|
<span class="line"><span style="color:#DCBDFB;">Button</span><span style="color:#ADBAC7;"> {</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> text </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#96D0FF;">"Click Me!"</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#DCBDFB;">setOnClickListener</span><span style="color:#ADBAC7;"> {</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#768390;">// Use the textView object directly.</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> textView.text </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#96D0FF;">"Clicked!"</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> }</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;">}</span></span>
|
|
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>If the provided components do not meet your needs, you can create your own components manually.</p><blockquote><p>The following example</p></blockquote><div class="language-kotlin line-numbers-mode" data-ext="kt"><pre class="shiki github-dark-dimmed" style="background-color:#22272e;" tabindex="0"><code><span class="line"><span style="color:#768390;">// Suppose you have defined your custom components.</span></span>
|
|
<span class="line"><span style="color:#F47067;">class</span><span style="color:#ADBAC7;"> </span><span style="color:#F69D50;">MyCustomView</span><span style="color:#ADBAC7;">(context: </span><span style="color:#F69D50;">Context</span><span style="color:#ADBAC7;">, attrs: </span><span style="color:#F69D50;">AttributeSet</span><span style="color:#ADBAC7;">? </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#6CB6FF;">null</span><span style="color:#ADBAC7;">) : </span><span style="color:#F69D50;">View</span><span style="color:#ADBAC7;">(</span><span style="color:#F69D50;">context</span><span style="color:#ADBAC7;">, </span><span style="color:#F69D50;">attrs</span><span style="color:#ADBAC7;">) {</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#768390;">// ...</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;">}</span></span>
|
|
<span class="line"></span>
|
|
<span class="line"><span style="color:#768390;">// Below, create the function corresponding to the component.</span></span>
|
|
<span class="line"><span style="color:#768390;">// Custom components must declare this annotation.</span></span>
|
|
<span class="line"><span style="color:#768390;">// Declaring the annotation of the component is contagious,</span></span>
|
|
<span class="line"><span style="color:#768390;">// and this annotation is required in every scope used to build the layout.</span></span>
|
|
<span class="line"><span style="color:#F69D50;">@Hikageable</span></span>
|
|
<span class="line"><span style="color:#768390;">// The naming of functions can be done at will, but it is recommended to use a big camel name.</span></span>
|
|
<span class="line"><span style="color:#768390;">// The signature part of the function needs to be fixedly</span></span>
|
|
<span class="line"><span style="color:#768390;">// declared as `inline fun <reified LP : ViewGroup.LayoutParams> Hikage.Performer<LP>`.</span></span>
|
|
<span class="line"><span style="color:#F47067;">inline</span><span style="color:#ADBAC7;"> </span><span style="color:#F47067;">fun</span><span style="color:#ADBAC7;"> <</span><span style="color:#F69D50;">reified</span><span style="color:#ADBAC7;"> </span><span style="color:#F69D50;">LP</span><span style="color:#ADBAC7;"> : </span><span style="color:#F69D50;">ViewGroup</span><span style="color:#ADBAC7;">.</span><span style="color:#F69D50;">LayoutParams</span><span style="color:#ADBAC7;">> </span><span style="color:#F69D50;">Hikage</span><span style="color:#ADBAC7;">.</span><span style="color:#DCBDFB;">Performer</span><span style="color:#F47067;"><</span><span style="color:#ADBAC7;">LP</span><span style="color:#F47067;">></span><span style="color:#ADBAC7;">.</span><span style="color:#DCBDFB;">MyCustomView</span><span style="color:#ADBAC7;">(</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> lparams: </span><span style="color:#F69D50;">Hikage</span><span style="color:#ADBAC7;">.LayoutParams? </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#6CB6FF;">null</span><span style="color:#ADBAC7;">,</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> id: </span><span style="color:#F69D50;">String</span><span style="color:#ADBAC7;">? </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#6CB6FF;">null</span><span style="color:#ADBAC7;">,</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> init: </span><span style="color:#F69D50;">HikageView</span><span style="color:#ADBAC7;"><</span><span style="color:#F69D50;">MyCustomView</span><span style="color:#ADBAC7;">> </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> {},</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#768390;">// If this component is a container, you can declare a `performer` parameter.</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#768390;">// performer: HikagePerformer<LP> = {}</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;">) </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#DCBDFB;">View</span><span style="color:#ADBAC7;"><</span><span style="color:#F69D50;">MyCustomView</span><span style="color:#ADBAC7;">>(lparams, id, init)</span></span>
|
|
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>It would seem tedious to implement such complex functions manually every time. If you want to be able to automatically generate component functions, you can introduce and refer to the <a href="/Hikage/en/library/hikage-compiler.html" class="">hikage-compiler</a> module.</p><h3 id="combination-and-disassembly-layout" tabindex="-1"><a class="header-anchor" href="#combination-and-disassembly-layout" aria-hidden="true">#</a> Combination and Disassembly Layout</h3><p>When building a UI, we usually use reusable layouts as components.</p><p>If you don't want each part to be customized separately using a native custom <code>View</code>, you can split the layout logic parts directly.</p><p>Hikage supports splitting layouts into multiple parts and combining them, you can use the <code>Hikageable</code> function anywhere to create a new <code>Hikage.Delegate</code> object.</p><blockquote><p>The following example</p></blockquote><div class="language-kotlin line-numbers-mode" data-ext="kt"><pre class="shiki github-dark-dimmed" style="background-color:#22272e;" tabindex="0"><code><span class="line"><span style="color:#768390;">// Assume this is your main layout.</span></span>
|
|
<span class="line"><span style="color:#F47067;">val</span><span style="color:#ADBAC7;"> mainLayout </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#DCBDFB;">Hikageable</span><span style="color:#ADBAC7;"> {</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#DCBDFB;">LinearLayout</span><span style="color:#ADBAC7;">(</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> lparams </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#DCBDFB;">LayoutParams</span><span style="color:#ADBAC7;">(matchParent </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#6CB6FF;">true</span><span style="color:#ADBAC7;">),</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> init </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> {</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> orientation </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> LinearLayout.VERTICAL</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> }</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> ) {</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#DCBDFB;">TextView</span><span style="color:#ADBAC7;"> {</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> text </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#96D0FF;">"Hello, World!"</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> }</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#768390;">// Combination sublayout.</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#DCBDFB;">Layout</span><span style="color:#ADBAC7;">(subLayout)</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> }</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;">}</span></span>
|
|
<span class="line"><span style="color:#768390;">// Assume this is your layout submodule.</span></span>
|
|
<span class="line"><span style="color:#768390;">// Since the upper layout uses LinearLayout,</span></span>
|
|
<span class="line"><span style="color:#768390;">// you can declare LinearLayout.LayoutParams for the sublayout.</span></span>
|
|
<span class="line"><span style="color:#F47067;">val</span><span style="color:#ADBAC7;"> subLayout </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#DCBDFB;">Hikageable</span><span style="color:#ADBAC7;"><</span><span style="color:#F69D50;">LinearLayout</span><span style="color:#ADBAC7;">.</span><span style="color:#F69D50;">LayoutParams</span><span style="color:#ADBAC7;">> {</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#DCBDFB;">TextView</span><span style="color:#ADBAC7;">(</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> lparams </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#DCBDFB;">LayoutParams</span><span style="color:#ADBAC7;"> {</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> topMargin </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#6CB6FF;">16</span><span style="color:#ADBAC7;">.dp</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> }</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> ) {</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> text </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#96D0FF;">"Hello, Sub World!"</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> }</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;">}</span></span>
|
|
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="state-management" tabindex="-1"><a class="header-anchor" href="#state-management" aria-hidden="true">#</a> State Management</h3><p>Hikage has a similar state management workaround to Jetpack Compose, which makes it easy to set up state listening for layout components.</p><p>Hikage provides two states, <code>NonNullState</code> and <code>NullableState</code>, which are divided into two states: holding non-null and nullable.</p><p>Unlike the recompose of Jetpack Compose, Hikage will not be recomposed, and the states takes effect through listening and callbacks.</p><p>You can use both states in the following scenarios.</p><blockquote><p>The following example</p></blockquote><div class="language-kotlin line-numbers-mode" data-ext="kt"><pre class="shiki github-dark-dimmed" style="background-color:#22272e;" tabindex="0"><code><span class="line"><span style="color:#F47067;">val</span><span style="color:#ADBAC7;"> myLayout </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#DCBDFB;">Hikageable</span><span style="color:#ADBAC7;"> {</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#768390;">// Declare a non-null variable state.</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#F47067;">val</span><span style="color:#ADBAC7;"> mTextState </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#DCBDFB;">mutableStateOf</span><span style="color:#ADBAC7;">(</span><span style="color:#96D0FF;">"Hello, World!"</span><span style="color:#ADBAC7;">)</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#768390;">// Declare a nullable and variable state.</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#F47067;">val</span><span style="color:#ADBAC7;"> mDrawState </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#DCBDFB;">mutableStateOfNull</span><span style="color:#ADBAC7;"><</span><span style="color:#F69D50;">Drawable</span><span style="color:#ADBAC7;">>()</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#768390;">// You can delegate the state to a variable.</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#F47067;">var</span><span style="color:#ADBAC7;"> mText </span><span style="color:#F47067;">by</span><span style="color:#ADBAC7;"> mTextState</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#F47067;">var</span><span style="color:#ADBAC7;"> mDraw </span><span style="color:#F47067;">by</span><span style="color:#ADBAC7;"> mDrawState</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#DCBDFB;">LinearLayout</span><span style="color:#ADBAC7;">(</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> lparams </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#DCBDFB;">LayoutParams</span><span style="color:#ADBAC7;">(matchParent </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#6CB6FF;">true</span><span style="color:#ADBAC7;">),</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> init </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> {</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> orientation </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> LinearLayout.VERTICAL</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> }</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> ) {</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#DCBDFB;">TextView</span><span style="color:#ADBAC7;"> {</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> textSize </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#6CB6FF;">16f</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> gravity </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> Gravity.CENTER</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#768390;">// Set (binding) state to text.</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#DCBDFB;">setState</span><span style="color:#ADBAC7;">(mTextState) {</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> text </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> it</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> }</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> }</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#DCBDFB;">ImageView</span><span style="color:#ADBAC7;"> {</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#768390;">// Set (binding) state to Drawable.</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#DCBDFB;">setState</span><span style="color:#ADBAC7;">(mDrawState) {</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#DCBDFB;">setImageDrawable</span><span style="color:#ADBAC7;">(it)</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> }</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> }</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#DCBDFB;">Button</span><span style="color:#ADBAC7;"> {</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> text </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#96D0FF;">"Click Me!"</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#DCBDFB;">setOnClickListener</span><span style="color:#ADBAC7;"> {</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#768390;">// Modify the value of non-null state.</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> mText </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#96D0FF;">"Hello, Hikage!"</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#768390;">// Modify the value of the nullable state.</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> mDraw </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#DCBDFB;">drawableResource</span><span style="color:#ADBAC7;">(R.drawable.ic_my_drawable)</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> }</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> }</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> }</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;">}</span></span>
|
|
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>In the example above, we declare a non-null state <code>mTextState</code> with <code>"Hello, World!"</code> with <code>mutableStateOf</code> Then continue to declare a nullable state <code>mDrawState</code> with <code>null</code> using <code>mutableStateOfNull</code>.</p><p>When clicking the button, we modify the value of <code>mTextState</code> to <code>"Hello, Hikage!"</code> and the value of <code>mDrawState</code> is the property resource <code>R.drawable.ic_my_drawable</code>. At this time, the text and images of <code>TextView</code> and <code>ImageView</code> will be automatically updated.</p><h3 id="custom-layout-factory" tabindex="-1"><a class="header-anchor" href="#custom-layout-factory" aria-hidden="true">#</a> Custom Layout Factory</h3><p>Hikage supports custom layout factories and is compatible with <code>LayoutInflater.Factory2</code>. You can customize events and listening during the Hikage layout inflating process in the following ways.</p><blockquote><p>The following example</p></blockquote><div class="language-kotlin line-numbers-mode" data-ext="kt"><pre class="shiki github-dark-dimmed" style="background-color:#22272e;" tabindex="0"><code><span class="line"><span style="color:#F47067;">val</span><span style="color:#ADBAC7;"> factory </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#DCBDFB;">HikageFactory</span><span style="color:#ADBAC7;"> { parent, base, context, params </span><span style="color:#F47067;">-></span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#768390;">// You can customize the behavior of the layout factory here.</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#768390;">// For example, create a new View object in your own way.</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#768390;">// `parent` is the ViewGroup object to which the current component is to be added,</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#768390;">// and if not, it is `null`.</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#768390;">// `base` is the View object created for the previous HikageFactory, if not, it is `null`.</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#768390;">// `params` object contains the component ID, AttributeSet and Class objects of View.</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#F47067;">val</span><span style="color:#ADBAC7;"> view </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> MyLayoutFactory.</span><span style="color:#DCBDFB;">createView</span><span style="color:#ADBAC7;">(context, params)</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#768390;">// You can also initialize and set the created View object here.</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> view.</span><span style="color:#DCBDFB;">setBackgroundColor</span><span style="color:#ADBAC7;">(Color.RED)</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#768390;">// Return the created View object.</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#768390;">// Return `null` will use the default component inflating method.</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> view</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;">}</span></span>
|
|
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>You can also pass in the <code>LayoutInflater</code> object directly to automatically inflate and use the <code>LayoutInflater.Factory2</code> in it.</p><blockquote><p>The following example</p></blockquote><div class="language-kotlin line-numbers-mode" data-ext="kt"><pre class="shiki github-dark-dimmed" style="background-color:#22272e;" tabindex="0"><code><span class="line"><span style="color:#768390;">// Assume that this is your LayoutInflater object.</span></span>
|
|
<span class="line"><span style="color:#F47067;">val</span><span style="color:#ADBAC7;"> layoutInflater: </span><span style="color:#F69D50;">LayoutInflater</span></span>
|
|
<span class="line"><span style="color:#768390;">// Create HikageFactory object through LayoutInflater.</span></span>
|
|
<span class="line"><span style="color:#F47067;">val</span><span style="color:#ADBAC7;"> factory </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#DCBDFB;">HikageFactory</span><span style="color:#ADBAC7;">(layoutInflater)</span></span>
|
|
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>Then set it to the Hikage layout you need to inflate.</p><blockquote><p>The following example</p></blockquote><div class="language-kotlin line-numbers-mode" data-ext="kt"><pre class="shiki github-dark-dimmed" style="background-color:#22272e;" tabindex="0"><code><span class="line"><span style="color:#768390;">// Assume that's your Context.</span></span>
|
|
<span class="line"><span style="color:#F47067;">val</span><span style="color:#ADBAC7;"> context: </span><span style="color:#F69D50;">Context</span></span>
|
|
<span class="line"><span style="color:#768390;">// Create Hikage object.</span></span>
|
|
<span class="line"><span style="color:#F47067;">val</span><span style="color:#ADBAC7;"> hikage </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#DCBDFB;">Hikageable</span><span style="color:#ADBAC7;">(</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> context </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> context,</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> factory </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> {</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#768390;">// Add a custom HikageFactory object.</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#DCBDFB;">add</span><span style="color:#ADBAC7;">(factory)</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#768390;">// Add directly.</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#DCBDFB;">add</span><span style="color:#ADBAC7;"> { parent, base, context, params </span><span style="color:#F47067;">-></span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#768390;">// ...</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#6CB6FF;">null</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> }</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#768390;">// Add multiple consecutively.</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#DCBDFB;">addAll</span><span style="color:#ADBAC7;">(factories)</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> }</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;">) {</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#DCBDFB;">LinearLayout</span><span style="color:#ADBAC7;"> {</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#DCBDFB;">TextView</span><span style="color:#ADBAC7;"> {</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> text </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#96D0FF;">"Hello, World!"</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> }</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> }</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;">}</span></span>
|
|
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="custom-container tip"><p class="custom-container-title">Tips</p><p>Hikage will inflate the layout according to the <code>LayoutInflater.Factory2</code> of the <code>Context</code> object, if you are using <code>AppCompatActivity</code>, Components in the layout will be automatically replaced with the corresponding Compat component or Material component, which is consistent with the characteristics of the XML layout.</p><p>If you do not need this feature to be effective by default, you can turn it off globally using the following method.</p><blockquote><p>The following example</p></blockquote><div class="language-kotlin line-numbers-mode" data-ext="kt"><pre class="shiki github-dark-dimmed" style="background-color:#22272e;" tabindex="0"><code><span class="line"><span style="color:#ADBAC7;">Hikage.isAutoProcessWithFactory2 </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#6CB6FF;">false</span></span>
|
|
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div></div><h3 id="preview-layout" tabindex="-1"><a class="header-anchor" href="#preview-layout" aria-hidden="true">#</a> Preview Layout</h3><p>Hikage supports previewing layouts in Android Studio.</p><p>With the help of the custom <code>View</code> preview plugin that comes with Android Studio, you can preview the layout using the following methods.</p><p>You just need to define a custom <code>View</code> for the preview layout and inherit from <code>HikagePreview</code>.</p><blockquote><p>The following example</p></blockquote><div class="language-kotlin line-numbers-mode" data-ext="kt"><pre class="shiki github-dark-dimmed" style="background-color:#22272e;" tabindex="0"><code><span class="line"><span style="color:#F47067;">class</span><span style="color:#ADBAC7;"> </span><span style="color:#F69D50;">MyLayoutPreview</span><span style="color:#ADBAC7;">(context: </span><span style="color:#F69D50;">Context</span><span style="color:#ADBAC7;">, attrs: </span><span style="color:#F69D50;">AttributeSet</span><span style="color:#ADBAC7;">?) : </span><span style="color:#F69D50;">HikagePreview</span><span style="color:#ADBAC7;">(</span><span style="color:#F69D50;">context</span><span style="color:#ADBAC7;">, </span><span style="color:#F69D50;">attrs</span><span style="color:#ADBAC7;">) {</span></span>
|
|
<span class="line"></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#F47067;">override</span><span style="color:#ADBAC7;"> </span><span style="color:#F47067;">fun</span><span style="color:#ADBAC7;"> </span><span style="color:#DCBDFB;">build</span><span style="color:#ADBAC7;">() </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#DCBDFB;">Hikageable</span><span style="color:#ADBAC7;"> {</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#DCBDFB;">LinearLayout</span><span style="color:#ADBAC7;"> {</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#DCBDFB;">TextView</span><span style="color:#ADBAC7;"> {</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> text </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#96D0FF;">"Hello, World!"</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> }</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> }</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;"> }</span></span>
|
|
<span class="line"><span style="color:#ADBAC7;">}</span></span>
|
|
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>Then the preview pane should appear on the right side of your current window. After opening, click "Build & Refresh". The preview will be automatically displayed after the compilation is completed.</p><div class="custom-container tip"><p class="custom-container-title">Tips</p><p><code>HikagePreview</code> implements the <code>HikageBuilder</code> interface, you can return any Hikage layout in the <code>build</code> method for preview.</p></div><div class="custom-container danger"><p class="custom-container-title">Pay Attention</p><p><code>HikagePreview</code> supports previewing layouts in Android Studio only, do not use it at runtime or add it to any XML layout.</p></div></div><!--[--><!--]--></div><footer class="page-meta"><div class="meta-item edit-link"><a class="external-link meta-item-label" href="https://github.com/BetterAndroid/Hikage/edit/main/docs-source/src/en/library/hikage-core.md" rel="noopener noreferrer" target="_blank" aria-label="Edit this page on GitHub"><!--[--><!--]--> Edit this page on GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span><!--[--><!--]--></a></div><div class="meta-item last-updated"><span class="meta-item-label">Last Updated: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">Contributors: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: qzmmcn@163.com">fankesyooni</span><!----><!--]--><!--]--></span></div></footer><nav class="page-nav"><p class="inner"><!----><span class="next"><a href="/Hikage/en/library/hikage-compiler.html" class="" aria-label="hikage-compiler"><!--[--><!--]--> hikage-compiler <!--[--><!--]--></a></span></p></nav><!--[--><!--]--></main><!--]--></div><!----><!--]--></div>
|
|
<script type="module" src="/Hikage/assets/app-ZnF1aHNS.js" defer></script>
|
|
</body>
|
|
</html>
|