BetterAndroid/Hikage
5
0
Fork 0
mirror of https://github.com/BetterAndroid/Hikage.git synced 2025-09-07 19:14:22 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity
Files
5dcdec35fb1558d0ba7b60354245836329dcb126
Hikage/assets/hikage-core.html-40Ix1r4x.js
github-actions[bot] 5dcdec35fb Deploy to GitHub pages
2025-08-19 07:52:22 +00:00

286 lines
79 KiB
JavaScript
Raw Blame History

import{_ as i,r as p,o as c,c as r,b as a,d as s,a as n,w as o,e}from"./app-Th5ZUiPV.js";const d={},y=e(`<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&amp;logoColor=orange&amp;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&amp;logo=apachemaven&amp;logoColor=orange&amp;label=highcapable-maven-releases&amp;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&amp;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&#39;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&#39;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&#39;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;">&quot;&lt;version&gt;&quot;</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;">&quot;com.highcapable.hikage:hikage-core&quot;</span><span style="color:#ADBAC7;">, version.ref = </span><span style="color:#96D0FF;">&quot;hikage-core&quot;</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&#39;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>&lt;version&gt;</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&#39;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;">&quot;com.highcapable.hikage:hikage-core:&lt;version&gt;&quot;</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>&lt;version&gt;</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>`,21),u={href:"https://betterandroid.github.io/Hikage/KDoc/hikage-core",target:"_blank",rel:"noopener noreferrer"},A=e(`<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;">&quot;Hello, World!&quot;</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&#39;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 &quot;player&quot; 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&#39;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&#39;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&#39;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;">&lt;</span><span style="color:#F69D50;">TextView</span><span style="color:#ADBAC7;">&gt;(</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;">&quot;my_text_view&quot;</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;">&quot;Hello, World!&quot;</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;">&lt;</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;">&gt;(</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;">&quot;my_linear_layout&quot;</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;">&lt;...&gt; {</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;">&lt;</span><span style="color:#F69D50;">MyLayoutBinding</span><span style="color:#ADBAC7;">&gt;()</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&#39;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;">&lt;</span><span style="color:#F69D50;">TextView</span><span style="color:#ADBAC7;">&gt;(id </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#96D0FF;">&quot;my_text_view&quot;</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;">&quot;Hello, World!&quot;</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&#39;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;">&quot;my_text_view&quot;</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;">&lt;</span><span style="color:#F69D50;">TextView</span><span style="color:#ADBAC7;">&gt;(</span><span style="color:#96D0FF;">&quot;my_text_view&quot;</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;">&lt;</span><span style="color:#F69D50;">TextView</span><span style="color:#ADBAC7;">&gt;(</span><span style="color:#96D0FF;">&quot;my_text_view&quot;</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>`,75),v=e(`<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;">&quot;my_linear_layout&quot;</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;">&quot;my_text_view&quot;</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;">&quot;Hello, World!&quot;</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;">&quot;Hello, World!&quot;</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;">&quot;Click Me!&quot;</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;">&quot;Clicked!&quot;</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 &lt;reified LP : ViewGroup.LayoutParams&gt; Hikage.Performer&lt;LP&gt;\`.</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;"> &lt;</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;">&gt; </span><span style="color:#F69D50;">Hikage</span><span style="color:#ADBAC7;">.</span><span style="color:#DCBDFB;">Performer</span><span style="color:#F47067;">&lt;</span><span style="color:#ADBAC7;">LP</span><span style="color:#F47067;">&gt;</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;">&lt;</span><span style="color:#F69D50;">MyCustomView</span><span style="color:#ADBAC7;">&gt; </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&lt;LP&gt; = {}</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;">&lt;</span><span style="color:#F69D50;">MyCustomView</span><span style="color:#ADBAC7;">&gt;(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>`,8),m=e(`<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&#39;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;">&quot;Hello, World!&quot;</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;">&lt;</span><span style="color:#F69D50;">LinearLayout</span><span style="color:#ADBAC7;">.</span><span style="color:#F69D50;">LayoutParams</span><span style="color:#ADBAC7;">&gt; {</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;">&quot;Hello, Sub World!&quot;</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;">&quot;Hello, World!&quot;</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;">&lt;</span><span style="color:#F69D50;">Drawable</span><span style="color:#ADBAC7;">&gt;()</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;">&quot;Click Me!&quot;</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;">&quot;Hello, Hikage!&quot;</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>&quot;Hello, World!&quot;</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>&quot;Hello, Hikage!&quot;</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;">-&gt;</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&#39;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;">-&gt;</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;">&quot;Hello, World!&quot;</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;">&quot;Hello, World!&quot;</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 &quot;Build &amp; Refresh&quot;. 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>`,35);function D(b,B){const t=p("ExternalLinkIcon"),l=p("RouterLink");return c(),r("div",null,[y,a("p",null,[s("You can view the KDoc "),a("a",u,[s("click here"),n(t)]),s(".")]),A,a("p",null,[s("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 "),n(l,{to:"/en/library/hikage-widget-androidx.html"},{default:o(()=>[s("hikage-widget-androidx")]),_:1}),s(" or "),n(l,{to:"/en/library/hikage-widget-material.html"},{default:o(()=>[s("hikage-widget-material")]),_:1}),s(" modules can be introduced.")]),v,a("p",null,[s("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 "),n(l,{to:"/en/library/hikage-compiler.html"},{default:o(()=>[s("hikage-compiler")]),_:1}),s(" module.")]),m])}const h=i(d,[["render",D],["__file","hikage-core.html.vue"]]);export{h as default};
Reference in New Issue View Git Blame Copy Permalink