A Fraction is a component similar to a fragment

The basic concept

Fraction

Fraction can be placed in Ability or AbilitySlice as part of the UI and cannot be used alone. The life cycle state of a Fraction depends on its container. If the container is destroyed, all parts of it are also destroyed. Fraction can be used to define various layouts to enrich the application’s user interface.

FractionAbility

To use a Fraction, Ability must inherit FractionAbility

FractionManager

Provides methods for managing the life cycle of fractions.

FractionScheduler

Provides a method for performing a Fraction transaction

In actual combat

MainAbilitySlice.java

public class MainAbilitySlice extends AbilitySlice implements Component.ClickedListener { private IndexFraction indexFraction; private WorkFraction workFraction; private MineFraction mineFraction; private FractionManager fm; private Button index; private Button work; private Button mine; @Override public void onStart(Intent intent) { super.onStart(intent); super.setUIContent(ResourceTable.Layout_ability_main); index = (Button) findComponentById(ResourceTable.Id_main_index_btn); work = (Button) findComponentById(ResourceTable.Id_main_work_btn); mine = (Button) findComponentById(ResourceTable.Id_main_mine_btn); index.setClickedListener(this); mine.setClickedListener(this); work.setClickedListener(this); indexFraction = new IndexFraction(); workFraction = new WorkFraction(); mineFraction = new MineFraction(); fm = ((FractionAbility) getAbility()).getFractionManager(); fm.startFractionScheduler().add(ResourceTable.Id_main_stack, indexFraction) .add(ResourceTable.Id_main_stack, workFraction) .add(ResourceTable.Id_main_stack, mineFraction) .submit(); hideAll(); showFraction(0); } @Override public void onClick(Component component) { hideAll(); switch (component.getId()) { case ResourceTable.Id_main_index_btn: showFraction(0); break; case ResourceTable.Id_main_work_btn: showFraction(1); break; case ResourceTable.Id_main_mine_btn: showFraction(2); break; } } private void hideAll() { fm.startFractionScheduler().hide(indexFraction).submit(); fm.startFractionScheduler().hide(mineFraction).submit(); fm.startFractionScheduler().hide(workFraction).submit(); } private void showFraction(int p) { index.setTextColor(Color.BLACK); work.setTextColor(Color.BLACK); mine.setTextColor(Color.BLACK); switch (p) { case 0: index.setTextColor(Color.RED); fm.startFractionScheduler().show(indexFraction).submit(); break; case 1: work.setTextColor(Color.RED); fm.startFractionScheduler().show(workFraction).submit(); break; case 2: mine.setTextColor(Color.RED); fm.startFractionScheduler().show(mineFraction).submit(); break; } } @Override public void onActive() { super.onActive(); } @Override public void onForeground(Intent intent) { super.onForeground(intent); }}Copy the code

MainAbility.java

public class MainAbility extends FractionAbility {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setMainRoute(MainAbilitySlice.class.getName());
    }
}
Copy the code

IndexFraction.java

public class IndexFraction extends Fraction { @Override protected Component onComponentAttached(LayoutScatter scatter, ComponentContainer container, Intent intent) { Component component = scatter.parse(ResourceTable.Layout_index_fraction, container, false); return component; } @Override protected void onStart(Intent intent) { super.onStart(intent); }}Copy the code

WorkFraction.java

public class WorkFraction extends Fraction { @Override protected Component onComponentAttached(LayoutScatter scatter, ComponentContainer container, Intent intent) { Component component = scatter.parse(ResourceTable.Layout_work_fraction, container, false); return component; } @Override protected void onStart(Intent intent) { super.onStart(intent); }}Copy the code

MineFraction.java

public class MineFraction extends Fraction { @Override protected Component onComponentAttached(LayoutScatter scatter, ComponentContainer container, Intent intent) { Component component = scatter.parse(ResourceTable.Layout_mine_fraction, container, false); return component; } @Override protected void onStart(Intent intent) { super.onStart(intent); }}Copy the code

index_fraction.xml

<? The XML version = "1.0" encoding = "utf-8"? > <DependentLayout xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:height="match_parent" ohos:width="match_parent" ohos:orientation="vertical"> <StackLayout ohos:id="$+id:main_stack" ohos:height="match_parent" ohos:width="match_parent"  ohos:above="$id:company_page_dl" > </StackLayout> <DirectionalLayout ohos:id="$+id:company_page_dl" ohos:height="50vp" ohos:width="match_parent" ohos:orientation="horizontal" ohos:align_parent_bottom="true" > <Button Ohos :id="$+id:main_index_btn" ohos:width="0vp" ohos:height="match_parent" ohos:weight="1" ohos:text=" ohos:text_size="50" > </Button> <Button ohos:id="$+id:main_work_btn" ohos:width="0vp" ohos:height="match_parent" Ohos :weight="1" ohos:text=" worktable "ohos:text_size="50" /> <Button ohos:id="$+id:main_mine_btn" ohos:width="0vp" Ohos :text=" mY "ohos:text_size="50" > </Button> </DirectionalLayout> </DependentLayout>Copy the code

work_fraction.xml

<? The XML version = "1.0" encoding = "utf-8"? > <DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:height="match_parent" ohos:width="match_parent" ohos:alignment="center" ohos:orientation="vertical"> <Text ohos:id="$+id:text_helloworld" ohos:height="match_content" ohos:width="match_content" ohos:background_element="$graphic:background_ability_index" ohos:layout_alignment="horizontal_center" ohos:text="$string:hap_index" ohos:text_color="$ohos:color:id_color_badge_red_dark" ohos:text_size="40vp" /> </DirectionalLayout>Copy the code

mine_fraction.xml

<? The XML version = "1.0" encoding = "utf-8"? > <DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:height="match_parent" ohos:width="match_parent" ohos:alignment="center" ohos:orientation="vertical"> <Text ohos:id="$+id:text_helloworld" ohos:height="match_content" ohos:width="match_content" ohos:background_element="$graphic:background_ability_work" ohos:layout_alignment="horizontal_center" ohos:text="$string:hap_work" ohos:text_color="$ohos:color:id_color_badge_red_dark" ohos:text_size="40vp" /> </DirectionalLayout>Copy the code
<? The XML version = "1.0" encoding = "utf-8"? > <DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:height="match_parent" ohos:width="match_parent" ohos:alignment="center" ohos:orientation="vertical"> <Text ohos:id="$+id:text_helloworld" ohos:height="match_content" ohos:width="match_content" ohos:background_element="$graphic:background_ability_mine" ohos:layout_alignment="horizontal_center" ohos:text="$string:hap_mine" ohos:text_color="$ohos:color:id_color_badge_red_dark" ohos:text_size="40vp" /> </DirectionalLayout>Copy the code

The effect