鸿蒙 Fraction 的基础用法

Fraction 是类似于fragment的组件

基本概念

Fraction

Fraction可以作为UI的一部分放在Ability或者AbilitySlice中，不能单独使用。Fraction的生命周期状态取决于它的容器。如果容器被销毁，其中的所有部分也将被销毁。可以Fraction使用定义各种布局，以丰富应用程序的用户界面。

FractionAbility

要想使用Fraction，必须让Ability继承FractionAbility

FractionManager

提供管理Fraction生命周期的方法。

FractionScheduler

提供执行Fraction事务的方法

实战

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);
    }

}

MainAbility.java

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

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);

    }

}

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);

    }

}

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);

    }

}

index_fraction.xml

<?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="工作台"
            ohos:text_size="50"
            />
        <Button
            ohos:id="$+id:main_mine_btn"
            ohos:width="0vp"
            ohos:height="match_parent"
            ohos:weight="1"
            ohos:text="我的"
            ohos:text_size="50"
            >
        </Button>

    </DirectionalLayout>
</DependentLayout>

work_fraction.xml

<?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>

mine_fraction.xml

<?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>

<?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>

效果