diff --git a/README.md b/README.md index 941deb6aee3ae5004357b0d7ac867ab00b70162b..299c3e03035e244f38a5ee71916ce2a2c59cee62 100644 --- a/README.md +++ b/README.md @@ -133,7 +133,9 @@ public class IntroSlice extends MaterialIntroSlice /> ``` - 此处显示了简单SlideComponet中没有的所有功能： [Custom Slide] + - [视察视图详细使用方法请点击这里(For details about how to use the parallax view,click here.)][Parallax link] + + #### 此处显示了简单SlideComponet中没有的所有功能： [Custom Slide] ## License @@ -168,23 +170,24 @@ public class IntroSlice extends MaterialIntroSlice -[Custom Slide]: -[Material Intro]: -[simple_slide]: -[customer_slide]: -[permission_slide]: -[finish_slide]: - - - -[Intro Slice]: -[Parallax Slide]: -[PermissionSlide]: -[FinishSlide]: -[SimpleSlide]: -[ParallaxStack]: -[ParallaxDirectiona]: -[ParallaxDependent]: -[ParallaxFactor]: -[config]: -[TranslationWrapper]: +[Custom Slide]: +[Material Intro]: +[simple_slide]: +[customer_slide]: +[permission_slide]: +[finish_slide]: + + + +[Intro Slice]: +[Parallax Slide]: +[PermissionSlide]: +[FinishSlide]: +[SimpleSlide]: +[ParallaxStack]: +[ParallaxDirectiona]: +[ParallaxDependent]: +[ParallaxFactor]: +[config]: +[TranslationWrapper]: +[Parallax link]: \ No newline at end of file diff --git a/README_PARALLAX.md b/README_PARALLAX.md new file mode 100644 index 0000000000000000000000000000000000000000..97bb61ca7bbfa48288a6e1db535462a521dbde3d --- /dev/null +++ b/README_PARALLAX.md @@ -0,0 +1,468 @@ +# Parallax-视差视图 + +“视差”（Parallax）是2D游戏中通过让不同层上的图片用不同的速度移动，来创造视觉深度的方法。视差滚动（Parallax Scrolling） +是指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。 + +## 1.实现方式 + 通过前景与背景在场景移动时产生不同的视差，从而达到简单的立体效果. + 使页面上很多的元素在相互独立地滚动,但是滚动速度不一致，就做出了漂亮的差异滚动效果。 + + 核心方法为[Parallaxable][Parallaxable link]： +``` + /** + * 设置偏移量 + * @param offset 偏移量比例 + */ + void setOffset(float offset); +``` +## 2.核心类库 +### 2.1 以系统三种布局为基础改造的视差视图(Parallax view based on three layouts of the system) + - [ParallaxDirectionalLayout][ParallaxDirectionalLayout link] + - [ParallaxDependentLayout][ParallaxDependentLayout link] + - [ParallaxStackLayout][ParallaxStackLayout link] + +### 2.2 以ComponentContainer,AbilitySlice,Fraction为基础改造的视差基类(Parallax Base Class Reconstructed Based on ComponentContainer,AbilitySlice,Fraction) + - [ParallaxComponentContainer][ParallaxComponentContainer link] + - [ParallaxAbilitySlice][ParallaxAbilitySlice link] + - [ParallaxFraction][ParallaxFraction link] + +## 3.如何使用 + + + + ### 3.1 demo代码： + 本库在entry里面添加了相关的代码，用于介绍ParallaxDirectionalLayout，ParallaxDependentLayout， + ParallaxStackLayout在ComponentContainer，AbilitySlice，Fraction中如何使用。 + #### demo涉及的类： + - [ShowDemoAbility][ShowDemoAbility link] + - [ComponentDemoAbility][ComponentDemoAbility link] + - [AbilitySliceDemoAbility][AbilitySliceDemoAbility link] + - [FractionDemoAbility][FractionDemoAbility link] + - [ShowDemoAbilitySlice][ShowDemoAbilitySlice link] + - [ComponentDemoAbilitySlice][ComponentDemoAbilitySlice link] + - [AbilitySliceDemoAbilitySlice][AbilitySliceDemoAbilitySlice link] + - [FractionDemoAbilitySlice][FractionDemoAbilitySlice link] + - [FractionDemo][FractionDemo link] + - [ComponentDemoAdapter][ComponentDemoAdapter link] + - [DemoView][DemoView link] + #### demo入口： + + | [代码入口][entrance link] | + |:-:| + | ![entrance_link] | + + ### 3.2 使用步骤： + #### 3.2.1 引入类库： + ##### 方法1-使用har包 + ``` + 通过library生成har包，添加har包到要集成的libs文件夹内 + 在entry的gradle内添加如下代码 + implementation fileTree(dir: 'libs', include: ['*.jar', '*.har']) + ``` + + ##### 方法2-使用implementation依赖 + ``` + allprojects{ + repositories{ + mavenCentral() + } + } + implementation 'io.openharmony.tpc.thirdlib:material-intro-screen:1.0.2' + ``` + + ##### 方法3-直接拷贝library(material-intro-screen)中parallax文件夹下的所有内容粘贴到需要引用的module即可 + + + + #### 3.2.2 使用视差视图： + + ##### 3.2.2.1 在AbilitySlice里面使用视差视图 + + | [AbilitySlice-ParallaxDependentLayout] | + |:-:| + | ![DependentLayout_link] | + + 相关类： + - [AbilitySliceDemoAbility][AbilitySliceDemoAbility link] + - [AbilitySliceDemoAbilitySlice][AbilitySliceDemoAbilitySlice link] + - [ParallaxAbilitySlice][ParallaxAbilitySlice link] + - [ParallaxDependentLayout][ParallaxDependentLayout link] + +一. 首先使用视差的AbilitySlice需要继承ParallaxAbilitySlice(例如:AbilitySliceDemoAbilitySlice) + ```java +public class AbilitySliceDemoAbilitySlice extends ParallaxAbilitySlice + ``` +二. 布局使用视差视图组件(ability_slice_demo.xml) +```xml + + + + + + + + +``` + +- 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 +```java + /** + * 获取布局ID + * + * @return 布局ID + */ + @Override + protected int getLayoutId() { + return ResourceTable.Layout_ability_slice_demo; + } +``` + +```java + /** + * 初始化控件 + */ + protected abstract void initView() ; +``` + +```java + + /** + * 获取根控件 + * + * @return 根控件 + */ + protected abstract @NotNull Component getRootView(); +``` + +四. AbilitySliceDemoAbilitySlice设置偏移比例---setOffset(offset) + + ```java + private void addOffset() { + if (offset <= 0.9f) { + offset += 0.1f; + setOffset(offset); + } + } + ``` + + + + + ##### 3.2.2.2 在Fraction里面使用视差视图 + + | [Fraction-ParallaxStackLayout] | + |:-:| + | ![StackLayout_link] | + + 相关类： + - [FractionDemoAbility][FractionDemoAbility link] + - [FractionDemoAbilitySlice][FractionDemoAbilitySlice link] + - [FractionDemo][FractionDemo link] + + +一. 首先使用视差的Ability需要继承FractionAbility(例如:FractionDemoAbility) + +```java + public class FractionDemoAbility extends FractionAbility +``` + +二. AbilitySlice里面加载替换Fraction(例如:FractionDemoAbilitySlice) + +- 1.FractionDemoAbilitySlice里面的布局XML设置Fraction的容器(例如下面的StackLayout) + +```xml + + + + + + + ``` + +- 2.FractionDemoAbilitySlice加载Fraction +```java + private void initView() { + ((FractionAbility) getAbility()).getFractionManager() + .startFractionScheduler().add(ResourceTable.Id_fragment_container, new FractionDemo()).submit(); + } +``` + + 三. FractionDemo需要继承ParallaxFraction + ```java +public class FractionDemo extends ParallaxFraction + ``` + + 四. FractionDemo的布局使用视差视图组件(layout_fraction_demo.xml) + ```xml + + + + + + + + + + + ``` + + - 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 + + +```java + /** + * 初始化控件 + */ + protected abstract Component initView(LayoutScatter scatter, ComponentContainer container, Intent intent); +``` + + +```java + /** + * 获取根控件 + * + * @return 根控件 + */ + protected @NotNull Component getRootView() { + return mRootView; + } +``` + +六. FractionDemo设置偏移比例---setOffset(offset) + +```java + /** + * 设置组件偏移比 + * + */ + 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; + } + }); +``` + + + ##### 3.2.2.3 自定义ComponentContainer使用视差视图 + + | [ComponentContainer-ParallaxDirectionalLayout] | + |:-:| + | ![DirectionalLayout_link] | + + + 相关类： + - [ComponentDemoAbility][ComponentDemoAbility link] + - [ComponentDemoAbilitySlice][ComponentDemoAbilitySlice link] + - [ComponentDemoAdapter][ComponentDemoAdapter link] + - [DemoView][DemoView link] + + + 一. 首先自定义组件需要继承ParallaxComponentContainer(例如:DemoView) + + ```java + public class DemoView extends ParallaxComponentContainer + ``` + + 二.DemoView实现两个方法initView，getRootView + + +```java + /** + * 初始化控件 + */ + protected abstract void initView(); +``` + + +```java + /** + * 获取根控件 + * + * @return 根控件 + */ + public abstract @NotNull Component getRootView(); +``` + + 三. 自定义组件DemoView的根布局使用视差视图组件(layout_test_view.xml) +```xml + + + + + + + + + + + + + + + + + + +``` + + - 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布局文件使用自定义组件) +```java + 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如果是代码生成的自定义组件，需要将自定义组件放入容器 + +```java + @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) + + ```java + viewPager.addPageChangedListener(new PageSlider.PageChangedListener() { + @Override + public void onPageSliding(int position, float positionOffset, int positionOffsetPixels) { + ... + adapter.getItem(viewPager.getCurrentPage()).setOffset(tempPositionOffset); + } + + + }); + ``` + + +[Parallaxable link]: + +[ParallaxDirectionalLayout link]: +[ParallaxDependentLayout link]: +[ParallaxStackLayout link]: +[ParallaxComponentContainer link]: +[ParallaxAbilitySlice link]: +[ParallaxFraction link]: + +[ShowDemoAbility link]: +[ComponentDemoAbility link]: +[AbilitySliceDemoAbility link]: +[FractionDemoAbility link]: +[ShowDemoAbilitySlice link]: +[ComponentDemoAbilitySlice link]: +[AbilitySliceDemoAbilitySlice link]: +[FractionDemoAbilitySlice link]: + +[FractionDemo link]: +[ComponentDemoAdapter link]: +[DemoView link]: +[entrance link]: + +[entrance_link]: +[DependentLayout_link]: +[StackLayout_link]: +[DirectionalLayout_link]: \ No newline at end of file diff --git a/entry/src/main/config.json b/entry/src/main/config.json index d32d3e9f24b70724f719ef0216bd09f8a46b9c9a..9319e21adf6b72e90b6bf971a0ff013836751485 100644 --- a/entry/src/main/config.json +++ b/entry/src/main/config.json @@ -94,7 +94,7 @@ { "orientation": "unspecified", "visible": true, - "name": "agency.tango.materialintro.ShowAbility", + "name": "agency.tango.materialintro.ShowDemoAbility", "icon": "$media:icon", "description": "$string:mainability_description", "label": "$string:parallaxdemo_MainAbility", diff --git a/entry/src/main/java/agency/tango/materialintro/ComponentDemoAdapter.java b/entry/src/main/java/agency/tango/materialintro/ComponentDemoAdapter.java index af304a63581ce2100791185604e38c8b6143134a..55c5907e98528257db252f5e89a08e7508a1e364 100644 --- a/entry/src/main/java/agency/tango/materialintro/ComponentDemoAdapter.java +++ b/entry/src/main/java/agency/tango/materialintro/ComponentDemoAdapter.java @@ -10,7 +10,7 @@ import java.util.List; public class ComponentDemoAdapter extends PageSliderProvider { private Context context; - private List views; + private List views; public ComponentDemoAdapter(Context context) { this.context = context; @@ -24,7 +24,7 @@ public class ComponentDemoAdapter extends PageSliderProvider { @Override public Object createPageInContainer(ComponentContainer componentContainer, int position) { - TestView view; + DemoView view; ComponentContainer.LayoutConfig config = new ComponentContainer.LayoutConfig (ComponentContainer.LayoutConfig.MATCH_PARENT, ComponentContainer.LayoutConfig.MATCH_PARENT); if (this.views != null && this.views.size() > position) { @@ -61,14 +61,14 @@ public class ComponentDemoAdapter extends PageSliderProvider { return component == o; } - public TestView getItem(int position) { + public DemoView getItem(int position) { if (this.views == null || position < 0 || position >= views.size() || views.get(position) == null) { return null; } return views.get(position); } - public void addItem(TestView view) { + public void addItem(DemoView view) { if (this.views == null || view == null) { return; } diff --git a/entry/src/main/java/agency/tango/materialintro/TestView.java b/entry/src/main/java/agency/tango/materialintro/DemoView.java similarity index 85% rename from entry/src/main/java/agency/tango/materialintro/TestView.java rename to entry/src/main/java/agency/tango/materialintro/DemoView.java index e8d2021c1094a5e39bf1da4be97d855ea39504b2..379f2be6ebbc11cc57b15c87fe80a1a9f0494f41 100644 --- a/entry/src/main/java/agency/tango/materialintro/TestView.java +++ b/entry/src/main/java/agency/tango/materialintro/DemoView.java @@ -9,12 +9,12 @@ import ohos.app.Context; import org.jetbrains.annotations.NotNull; import agency.tango.materialintro.ResourceTable; -public class TestView extends ParallaxComponentContainer { +public class DemoView extends ParallaxComponentContainer { private int index; private Text mTv; - public TestView(Context context, int index) { + public DemoView(Context context, int index) { super(context); this.index = index; setPageNum(); @@ -26,13 +26,13 @@ public class TestView extends ParallaxComponentContainer { } } - public TestView(Context context, AttrSet attrSet, int index) { + public DemoView(Context context, AttrSet attrSet, int index) { super(context, attrSet); this.index = index; setPageNum(); } - public TestView(Context context, AttrSet attrSet, String styleName, int index) { + public DemoView(Context context, AttrSet attrSet, String styleName, int index) { super(context, attrSet, styleName); this.index = index; setPageNum(); diff --git a/entry/src/main/java/agency/tango/materialintro/ShowAbility.java b/entry/src/main/java/agency/tango/materialintro/ShowDemoAbility.java similarity index 87% rename from entry/src/main/java/agency/tango/materialintro/ShowAbility.java rename to entry/src/main/java/agency/tango/materialintro/ShowDemoAbility.java index 0b54df3149848a22874f600100179f765bc3a8c7..7831a45a574b810925225acc11556aab1fed0537 100644 --- a/entry/src/main/java/agency/tango/materialintro/ShowAbility.java +++ b/entry/src/main/java/agency/tango/materialintro/ShowDemoAbility.java @@ -4,7 +4,7 @@ import agency.tango.materialintro.slice.ShowAbilitySlice; import ohos.aafwk.ability.Ability; import ohos.aafwk.content.Intent; -public class ShowAbility extends Ability { +public class ShowDemoAbility extends Ability { @Override public void onStart(Intent intent) { super.onStart(intent); diff --git a/entry/src/main/java/agency/tango/materialintro/slice/ComponentDemoAbilitySlice.java b/entry/src/main/java/agency/tango/materialintro/slice/ComponentDemoAbilitySlice.java index 5e545eb373449b4ab1f43a44ec6ac724742b5ac8..dcdaf9af79530e9853e08790509df097b825f032 100644 --- a/entry/src/main/java/agency/tango/materialintro/slice/ComponentDemoAbilitySlice.java +++ b/entry/src/main/java/agency/tango/materialintro/slice/ComponentDemoAbilitySlice.java @@ -2,7 +2,7 @@ package agency.tango.materialintro.slice; import agency.tango.materialintro.ComponentDemoAdapter; import agency.tango.materialintro.ResourceTable; -import agency.tango.materialintro.TestView; +import agency.tango.materialintro.DemoView; import ohos.aafwk.ability.AbilitySlice; import ohos.aafwk.content.Intent; import ohos.agp.components.PageSlider; @@ -23,13 +23,11 @@ public class ComponentDemoAbilitySlice extends AbilitySlice { viewPager.addPageChangedListener(new PageSlider.PageChangedListener() { @Override public void onPageSliding(int position, float positionOffset, int positionOffsetPixels) { - System.out.println("测试打印===onPageSliding===1" ); int tempPosition = position; float tempPositionOffset = positionOffset; if (adapter == null) { return; } - System.out.println("测试打印===onPageSliding===2" ); float width = (float) viewPager.getWidth(); int currentPage = viewPager.getCurrentPage(); float scrollX = 0f; @@ -40,7 +38,6 @@ public class ComponentDemoAbilitySlice extends AbilitySlice { float itemX = (float) adapter.getItem(currentPage).getRootView().getLocationOnScreen()[0]; scrollX = itemX - parentLeft; } - System.out.println("测试打印===onPageSliding===3" ); if (width > 0) { if (scrollX <= 0f) { tempPosition = currentPage; @@ -62,13 +59,11 @@ public class ComponentDemoAbilitySlice extends AbilitySlice { if (tempPositionOffset > 1) { tempPositionOffset = 1; } - System.out.println("测试打印===onPageSliding===4" ); if (scrollX <= 0f) { adapter.getItem(viewPager.getCurrentPage()).setOffset(tempPositionOffset); } else { adapter.getItem(viewPager.getCurrentPage()).setOffset(tempPositionOffset - 1); } - System.out.println("测试打印===onPageSliding===5" ); } @Override @@ -84,12 +79,12 @@ public class ComponentDemoAbilitySlice extends AbilitySlice { }); adapter = new ComponentDemoAdapter(getContext()); viewPager.setProvider(adapter); - adapter.addItem(new TestView(getContext(), 0)); - adapter.addItem(new TestView(getContext(), 1)); - adapter.addItem(new TestView(getContext(), 2)); - adapter.addItem(new TestView(getContext(), 3)); - adapter.addItem(new TestView(getContext(), 4)); - adapter.addItem(new TestView(getContext(), 5)); + 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)); } @Override diff --git a/entry/src/main/java/agency/tango/materialintro/slice/MainAbilitySlice.java b/entry/src/main/java/agency/tango/materialintro/slice/MainAbilitySlice.java index 48043a90bdf94742234182c68b719103e400a32f..f20202f5c9a7cb1f519290b72fa949802c64f589 100644 --- a/entry/src/main/java/agency/tango/materialintro/slice/MainAbilitySlice.java +++ b/entry/src/main/java/agency/tango/materialintro/slice/MainAbilitySlice.java @@ -62,12 +62,12 @@ public class MainAbilitySlice extends AbilitySlice { Operation operation = new Intent.OperationBuilder() .withDeviceId("") .withBundleName("agency.tango.materialintro") - .withAbilityName("agency.tango.materialintro.ShowAbility") + .withAbilityName("agency.tango.materialintro.ShowDemoAbility") .build(); secondIntent.setOperation(operation); startAbility(secondIntent); // 通过AbilitySlice的startAbility } catch (Exception e) { - System.out.println("测试打印===Exception===" + e.toString()); + LogUtil.info("MainAbilitySlice", e.toString()); } // 接口实现启动另一个页面 }); diff --git a/entry/src/main/java/agency/tango/materialintro/slice/ShowAbilitySlice.java b/entry/src/main/java/agency/tango/materialintro/slice/ShowDemoAbilitySlice.java similarity index 100% rename from entry/src/main/java/agency/tango/materialintro/slice/ShowAbilitySlice.java rename to entry/src/main/java/agency/tango/materialintro/slice/ShowDemoAbilitySlice.java diff --git a/images/dependentlayout_link.gif b/images/dependentlayout_link.gif new file mode 100644 index 0000000000000000000000000000000000000000..5efb58190181406d74e05417832a0a5494e89db5 Binary files /dev/null and b/images/dependentlayout_link.gif differ diff --git a/images/directionallayout_link.gif b/images/directionallayout_link.gif new file mode 100644 index 0000000000000000000000000000000000000000..d183b2659091bb6ea549dac8974fceb0ef2b37f3 Binary files /dev/null and b/images/directionallayout_link.gif differ diff --git a/images/entrance_link.jpg b/images/entrance_link.jpg new file mode 100644 index 0000000000000000000000000000000000000000..e60ea2fc6693e2803065dd2ff8f483c7cb83507b Binary files /dev/null and b/images/entrance_link.jpg differ diff --git a/images/stacklayout_link.gif b/images/stacklayout_link.gif new file mode 100644 index 0000000000000000000000000000000000000000..f2584b52a9150bfcf96f9ffe0ffbf03a06542faa Binary files /dev/null and b/images/stacklayout_link.gif differ