代码拉取完成，页面将自动刷新
同步操作将从 HarmonyOS-TPC/material-intro-screen 强制同步，此操作会覆盖自 Fork 仓库以来所做的任何修改，且无法恢复！！！
确定后同步将在后台操作，完成时将刷新页面，请耐心等待。
“视差”（Parallax）是2D游戏中通过让不同层上的图片用不同的速度移动，来创造视觉深度的方法。视差滚动（Parallax Scrolling） 是指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。
通过前景与背景在场景移动时产生不同的视差，从而达到简单的立体效果. 使页面上很多的元素在相互独立地滚动,但是滚动速度不一致，就做出了漂亮的差异滚动效果。
核心方法为Parallaxable：
/**
* 设置偏移量
* @param offset 偏移量比例
*/
void setOffset(float offset);
本库在entry里面添加了相关的代码，用于介绍ParallaxDirectionalLayout，ParallaxDependentLayout， ParallaxStackLayout在ComponentContainer，AbilitySlice，Fraction中如何使用。
| 代码入口 |
|---|
 |
通过library生成har包，添加har包到要集成的libs文件夹内
在entry的gradle内添加如下代码
implementation fileTree(dir: 'libs', include: ['*.jar', '*.har'])
allprojects{
repositories{
mavenCentral()
}
}
implementation 'io.openharmony.tpc.thirdlib:material-intro-screen:1.0.2'
| [AbilitySlice-ParallaxDependentLayout] |
|---|
 |
相关类：
一. 首先使用视差的AbilitySlice需要继承ParallaxAbilitySlice(例如:AbilitySliceDemoAbilitySlice)
public class AbilitySliceDemoAbilitySlice extends ParallaxAbilitySlice
二. 布局使用视差视图组件(ability_slice_demo.xml)
<?xml version="1.0" encoding="utf-8"?>
<agency.tango.materialintroscreen.parallax.ParallaxDependentLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
xmlns:zdy="http://schemas.huawei.com/res/ohos/zdy"
>
<Text
ohos:id="$+id:text"
zdy:layout_parallax_Factor="1"
/>
</agency.tango.materialintroscreen.parallax.ParallaxDependentLayout>
1.以ParallaxDependentLayout作为根布局
2.创建自定义命名空间 xmlns:zdy="http://schemas.huawei.com/res/ohos/zdy"
3.在需要滚动的组件上面设置视差因子 zdy:layout_parallax_Factor
tips:视差因子 zdy:layout_parallax_Factor不需要带单位，默认视为float类型
三. AbilitySliceDemoAbilitySlice实现三个方法getLayoutId，initView，getRootView
/**
* 获取布局ID
*
* @return 布局ID
*/
@Override
protected int getLayoutId() {
return ResourceTable.Layout_ability_slice_demo;
}
/**
* 初始化控件
*/
protected abstract void initView() ;
/**
* 获取根控件
*
* @return 根控件
*/
protected abstract @NotNull Component getRootView();
四. AbilitySliceDemoAbilitySlice设置偏移比例---setOffset(offset)
private void addOffset() {
if (offset <= 0.9f) {
offset += 0.1f;
setOffset(offset);
}
}
| [Fraction-ParallaxStackLayout] |
|---|
 |
相关类：
一. 首先使用视差的Ability需要继承FractionAbility(例如:FractionDemoAbility)
public class FractionDemoAbility extends FractionAbility
二. AbilitySlice里面加载替换Fraction(例如:FractionDemoAbilitySlice)
<?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">
<StackLayout
ohos:id="$+id:fragment_container"
ohos:height="match_parent"
ohos:width="match_parent"/>
</DirectionalLayout>
private void initView() {
((FractionAbility) getAbility()).getFractionManager()
.startFractionScheduler().add(ResourceTable.Id_fragment_container, new FractionDemo()).submit();
}
三. FractionDemo需要继承ParallaxFraction
public class FractionDemo extends ParallaxFraction
四. FractionDemo的布局使用视差视图组件(layout_fraction_demo.xml)
<?xml version="1.0" encoding="utf-8"?>
<agency.tango.materialintroscreen.parallax.ParallaxStackLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
xmlns:zdy="http://schemas.huawei.com/res/ohos/zdy"
>
<Text
ohos:id="$+id:text1_fraction1"
zdy:layout_parallax_Factor="0.7"/>
<Text
ohos:id="$+id:text2_fraction1"
zdy:layout_parallax_Factor="0.2"/>
</agency.tango.materialintroscreen.parallax.ParallaxStackLayout>
1.以ParallaxStackLayout作为根布局
2.创建自定义命名空间 xmlns:zdy="http://schemas.huawei.com/res/ohos/zdy"
3.在需要滚动的组件上面设置视差因子 zdy:layout_parallax_Factor
4.不同的组件可以设置不同的视差因子数据，偏移的距离也将不同(0.7,0.2)
tips:视差因子 zdy:layout_parallax_Factor不需要带单位，默认视为float类型
五. FractionDemo实现两个方法initView，getRootView
/**
* 初始化控件
*/
protected abstract Component initView(LayoutScatter scatter, ComponentContainer container, Intent intent);
/**
* 获取根控件
*
* @return 根控件
*/
protected @NotNull Component getRootView() {
return mRootView;
}
六. FractionDemo设置偏移比例---setOffset(offset)
/**
* 设置组件偏移比
*
*/
thisContainer.setTouchEventListener(new Component.TouchEventListener() {
@Override
public boolean onTouchEvent(Component component, TouchEvent touchEvent) {
int width = thisContainer.getWidth();
if (width <= 0) {
return false;
}
int action = touchEvent.getAction();
if (action == TouchEvent.PRIMARY_POINT_DOWN) {
originStartX = touchEvent.getPointerScreenPosition(0).getX();
} else if (action == TouchEvent.POINT_MOVE) {
tempX = touchEvent.getPointerScreenPosition(0).getX();
float offset = (tempX - originStartX) / width;
setOffset(offset);
} else if (action == TouchEvent.PRIMARY_POINT_UP) {
originStartX = 0;
tempX = 0;
setOffset(0);
} else if (action == TouchEvent.POINT_MOVE) {
originStartX = 0;
tempX = 0;
setOffset(0);
}
return true;
}
});
| [ComponentContainer-ParallaxDirectionalLayout] |
|---|
 |
相关类：
一. 首先自定义组件需要继承ParallaxComponentContainer(例如:DemoView)
public class DemoView extends ParallaxComponentContainer
二.DemoView实现两个方法initView，getRootView
/**
* 初始化控件
*/
protected abstract void initView();
/**
* 获取根控件
*
* @return 根控件
*/
public abstract @NotNull Component getRootView();
三. 自定义组件DemoView的根布局使用视差视图组件(layout_test_view.xml)
<?xml version="1.0" encoding="utf-8"?>
<agency.tango.materialintroscreen.parallax.ParallaxDirectionalLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
xmlns:zdy="http://schemas.huawei.com/res/ohos/zdy">
<Text
ohos:id="$+id:txt_title"
zdy:layout_parallax_Factor="0"/>
<Text
ohos:id="$+id:txt_title1"
zdy:layout_parallax_Factor="0.1"/>
<Text
ohos:id="$+id:txt_title2"
zdy:layout_parallax_Factor="0.3"/>
<Text
ohos:id="$+id:txt_title3"
zdy:layout_parallax_Factor="0.6"/>
<Text
ohos:id="$+id:txt_title4"
zdy:layout_parallax_Factor="0.9"/>
</agency.tango.materialintroscreen.parallax.ParallaxDirectionalLayout>
1.以ParallaxDirectionalLayout作为根布局
2.创建自定义命名空间 xmlns:zdy="http://schemas.huawei.com/res/ohos/zdy"
3.在需要滚动的组件上面设置视差因子 zdy:layout_parallax_Factor
4.不同的组件可以设置不同的视差因子数据，偏移的距离也将不同(0.9,0.3等)
tips:视差因子 zdy:layout_parallax_Factor不需要带单位，默认视为float类型
四. ComponentDemoAbilitySlice代码生成自定义组件对象DemoView-(也可以在XML布局文件使用自定义组件)
adapter.addItem(new DemoView(getContext(), 0));
adapter.addItem(new DemoView(getContext(), 1));
adapter.addItem(new DemoView(getContext(), 2));
adapter.addItem(new DemoView(getContext(), 3));
adapter.addItem(new DemoView(getContext(), 4));
adapter.addItem(new DemoView(getContext(), 5));
五. ComponentDemoAdapter如果是代码生成的自定义组件，需要将自定义组件放入容器
@Override
public Object createPageInContainer(ComponentContainer componentContainer, int position) {
DemoView view;
ComponentContainer.LayoutConfig config = new ComponentContainer.LayoutConfig
(ComponentContainer.LayoutConfig.MATCH_PARENT, ComponentContainer.LayoutConfig.MATCH_PARENT);
if (this.views != null && this.views.size() > position) {
view = this.views.get(position);
if (view != null && view.getRootView() != null) {
componentContainer.addComponent(view.getRootView(), config);
views.set(position, view);
return view.getRootView();
}
}
view = this.getItem(position);
while (this.views.size() <= position) {
this.views.add(null);
}
this.views.set(position, view);
if (view == null && view.getRootView() != null) {
componentContainer.addComponent(view.getRootView(), config);
return view.getRootView();
} else {
return new Component(componentContainer.getContext());
}
}
六. ComponentDemoAbilitySlice设置偏移比例---setOffset(offset)
viewPager.addPageChangedListener(new PageSlider.PageChangedListener() {
@Override
public void onPageSliding(int position, float positionOffset, int positionOffsetPixels) {
...
adapter.getItem(viewPager.getCurrentPage()).setOffset(tempPositionOffset);
}
});
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
