卡片交互效果

modules/mogo-module-apps/build.gradle

@@ -43,10 +43,10 @@ dependencies {
     implementation rootProject.ext.dependencies.material
     annotationProcessor rootProject.ext.dependencies.aroutercompiler
     implementation rootProject.ext.dependencies.androidxrecyclerview
-
     if (Boolean.valueOf(RELEASE)) {
         implementation rootProject.ext.dependencies.mogomap
         implementation rootProject.ext.dependencies.mogomapapi
+        implementation rootProject.ext.dependencies.mogomapapi
         implementation rootProject.ext.dependencies.mogoutils
         api rootProject.ext.dependencies.mogocommons
         api rootProject.ext.dependencies.mogoserviceapi
@@ -58,6 +58,8 @@ dependencies {
         api project(":foudations:mogo-commons")
         api project(':services:mogo-service-api')
         implementation project(':modules:mogo-module-common')
+        implementation project(":libraries:card-library")
+
     }
 }
 

modules/mogo-module-apps/src/main/java/com/mogo/module/apps/AppNavigatorFragment.java

@@ -14,6 +14,7 @@ import androidx.recyclerview.widget.RecyclerView;
 import com.alibaba.android.arouter.launcher.ARouter;
 import com.mogo.commons.mvp.MvpFragment;
 import com.mogo.module.apps.adapter.AppIndicatorAdapter;
+import com.mogo.module.apps.utils.CardScaleTransformer;
 import com.mogo.module.apps.utils.LaunchUtils;
 import com.mogo.module.common.MogoModulePaths;
 import com.mogo.service.MogoServicePaths;
@@ -23,6 +24,8 @@ import com.mogo.service.fragmentmanager.IMogoFragmentManager;
 import com.mogo.service.module.IMogoModuleProvider;
 import com.mogo.utils.TipToast;
 
+import com.yarolegovich.discretescrollview.DiscreteScrollView;
+import com.yarolegovich.discretescrollview.transform.ScaleTransformer;
 import java.util.ArrayList;
 import java.util.HashMap;
 import java.util.Map;
@@ -34,7 +37,8 @@ import java.util.Map;
  * 描述
  */
 public class AppNavigatorFragment extends MvpFragment<AppNavigatorView, AppNavigatorPresenter>
-    implements AppNavigatorView {
+    implements AppNavigatorView, DiscreteScrollView.OnItemChangedListener<RecyclerView.ViewHolder>,
+    DiscreteScrollView.ScrollStateChangeListener<RecyclerView.ViewHolder> {
 
     private View mApps;
 
@@ -46,7 +50,7 @@ public class AppNavigatorFragment extends MvpFragment<AppNavigatorView, AppNavig
     private IMogoModuleProvider mSearchProvider;
 
     private IMogoAnalytics mMogoAnalytics;
-    private RecyclerView scroller;
+    private DiscreteScrollView scroller;
 
     @Override
     protected int getLayoutId() {
@@ -63,26 +67,31 @@ public class AppNavigatorFragment extends MvpFragment<AppNavigatorView, AppNavig
         mApps = findViewById(R.id.module_apps_id_apps);
 
         scroller = findViewById(R.id.module_apps_id_scroller);
-
-        LinearLayoutManager linearLayoutManager =
-            new LinearLayoutManager(getContext(), LinearLayoutManager.HORIZONTAL, false);
-
-        scroller.setLayoutManager(linearLayoutManager);
+        scroller.setSlideOnFling(true);
+        scroller.addOnItemChangedListener(this);
+        scroller.addScrollStateChangeListener(this);
+        //scroller.setItemTransitionTimeMillis(DiscreteScrollViewOptions.getTransitionTime());
+        scroller.setItemTransformer(new CardScaleTransformer.Builder()
+            .setMinScale(0.84f)
+            .build());
+        //
+        //
+        //LinearLayoutManager linearLayoutManager =
+        //    new LinearLayoutManager(getContext(), LinearLayoutManager.HORIZONTAL, false);
+        //
+        //scroller.setLayoutManager(linearLayoutManager);
 
         ArrayList<Integer> integers = new ArrayList<>(10);
 
-        integers.add(R.drawable.module_apps_ic_navigation);
+        integers.add(R.drawable.module_apps_ic_interest);
+        integers.add(R.drawable.module_apps_ic_online_car);
+        integers.add(R.drawable.module_apps_ic_news);
+        integers.add(R.drawable.module_apps_ic_tanlu);
         integers.add(R.drawable.module_apps_ic_media_center);
-        integers.add(R.drawable.module_apps_ic_car_settings);
-        integers.add(R.drawable.module_apps_ic_car_settings);
-        integers.add(R.drawable.module_apps_ic_car_settings);
 
         AppIndicatorAdapter appIndicatorAdapter = new AppIndicatorAdapter(getContext(), integers);
         scroller.setAdapter(appIndicatorAdapter);
-        LinearSnapHelper snapHelper = new LinearSnapHelper();
-        snapHelper.attachToRecyclerView(scroller);
-
-        scroller.scrollToPosition(Integer.MAX_VALUE / 2);
+        scroller.scrollToPosition(Integer.MAX_VALUE / 2-1);
         //mNavigation.setOnClickListener( view -> {
         //    openSearchPanel();
         //    trackNavigatorClickEvent( 1 );
@@ -163,4 +172,23 @@ public class AppNavigatorFragment extends MvpFragment<AppNavigatorView, AppNavig
             mPresenter.onDestroy(getViewLifecycleOwner());
         }
     }
+
+    @Override
+    public void onCurrentItemChanged(@Nullable RecyclerView.ViewHolder viewHolder, int i) {
+
+    }
+
+    @Override public void onScrollStart(@NonNull RecyclerView.ViewHolder viewHolder, int i) {
+
+    }
+
+    @Override public void onScrollEnd(@NonNull RecyclerView.ViewHolder viewHolder, int i) {
+
+    }
+
+    @Override
+    public void onScroll(float v, int i, int i1, @Nullable RecyclerView.ViewHolder viewHolder,
+        @Nullable RecyclerView.ViewHolder t1) {
+
+    }
 }

modules/mogo-module-apps/src/main/java/com/mogo/module/apps/adapter/AppIndicatorAdapter.java

@@ -28,5 +28,7 @@ public class AppIndicatorAdapter extends RecycleBaseAdapter<Integer> {
     @Override public void onBindViewHolder(RecycleViewHolder holder, Integer integer) {
         ImageView ivIndicator = holder.getView(R.id.module_apps_id_app_icon);
         ivIndicator.setImageResource(integer);
+        holder.setText(R.id.module_apps_id_app_name,names[holder.getLayoutPosition()%5] );
     }
+    private String[] names=new String[]{"新鲜事","在线车辆","首页","探路","车聊聊"};
 }

modules/mogo-module-apps/src/main/java/com/mogo/module/apps/utils/CardScaleTransformer.java

@@ -0,0 +1,91 @@
+package com.mogo.module.apps.utils;
+
+import android.view.View;
+import androidx.annotation.FloatRange;
+import com.mogo.module.apps.R;
+import com.yarolegovich.discretescrollview.transform.DiscreteScrollItemTransformer;
+import com.yarolegovich.discretescrollview.transform.Pivot;
+import com.yarolegovich.discretescrollview.transform.ScaleTransformer;
+
+/**
+ * @author zyz
+ * 2020-03-11.
+ */
+public class CardScaleTransformer implements DiscreteScrollItemTransformer {
+
+    private Pivot pivotX;
+    private Pivot pivotY;
+    private float minScale;
+    private float maxMinDiff;
+
+    public CardScaleTransformer() {
+        pivotX = Pivot.X.CENTER.create();
+        pivotY = Pivot.Y.BOTTOM.create();
+        minScale = 0.8f;
+        maxMinDiff = 0.2f;
+    }
+
+    @Override
+    public void transformItem(View item, float position) {
+
+        item=  item.findViewById(R.id.module_apps_id_app_icon);
+        pivotX.setOn(item);
+        pivotY.setOn(item);
+        float closenessToCenter = 1f - Math.abs(position);
+        float scale = minScale + maxMinDiff * closenessToCenter;
+        item.setScaleX(scale);
+        item.setScaleY(scale);
+    }
+
+    public static class Builder {
+
+        private CardScaleTransformer transformer;
+        private float maxScale;
+
+        public Builder() {
+            transformer = new CardScaleTransformer();
+            maxScale = 1f;
+        }
+
+        public Builder setMinScale(@FloatRange(from = 0.01) float scale) {
+            transformer.minScale = scale;
+            return this;
+        }
+
+        public Builder setMaxScale(@FloatRange(from = 0.01) float scale) {
+            maxScale = scale;
+            return this;
+        }
+
+        public Builder setPivotX(Pivot.X pivotX) {
+            return setPivotX(pivotX.create());
+        }
+
+        public Builder setPivotX(Pivot pivot) {
+            assertAxis(pivot, Pivot.AXIS_X);
+            transformer.pivotX = pivot;
+            return this;
+        }
+
+        public Builder setPivotY(Pivot.Y pivotY) {
+            return setPivotY(pivotY.create());
+        }
+
+        public Builder setPivotY(Pivot pivot) {
+            assertAxis(pivot, Pivot.AXIS_Y);
+            transformer.pivotY = pivot;
+            return this;
+        }
+
+        public CardScaleTransformer build() {
+            transformer.maxMinDiff = maxScale - transformer.minScale;
+            return transformer;
+        }
+
+        private void assertAxis(Pivot pivot, @Pivot.Axis int axis) {
+            if (pivot.getAxis() != axis) {
+                throw new IllegalArgumentException("You passed a Pivot for wrong axis.");
+            }
+        }
+    }
+}

modules/mogo-module-apps/src/main/res/layout/module_apps_fragment_apps_navigator.xml

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
-<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
@@ -7,19 +7,40 @@
     android:paddingBottom="@dimen/module_apps_navigation_icon_paddingBottom"
     >
 
-  <androidx.recyclerview.widget.RecyclerView
+  <com.yarolegovich.discretescrollview.DiscreteScrollView
       android:id="@+id/module_apps_id_scroller"
-      android:layout_width="@dimen/dp_480"
-      android:layout_height="@dimen/module_apps_navigation_icon_height"
+      android:layout_width="@dimen/dp_523"
+      app:layout_constraintBottom_toBottomOf="parent"
+      app:layout_constraintLeft_toLeftOf="parent"
+      android:layout_height="@dimen/module_apps_navigation_icon_container_height"
       >
-  </androidx.recyclerview.widget.RecyclerView>
+  </com.yarolegovich.discretescrollview.DiscreteScrollView>
+
+
+
   <ImageView
       android:id="@+id/module_apps_id_apps"
       android:layout_width="@dimen/module_apps_navigation_icon_width"
+      android:layout_marginTop="@dimen/dp_18"
       android:layout_height="@dimen/module_apps_navigation_icon_height"
+      app:layout_constraintLeft_toRightOf="@id/module_apps_id_scroller"
+      app:layout_constraintTop_toTopOf="@id/module_apps_id_scroller"
       android:layout_marginLeft="@dimen/module_apps_navigation_icon_marginLeft"
       android:src="@drawable/module_apps_ic_apps"
       />
+  <TextView
+      android:layout_width="wrap_content"
+      android:gravity="center"
+      android:layout_marginLeft="@dimen/dp_37"
+      app:layout_constraintLeft_toRightOf="@id/module_apps_id_scroller"
+      app:layout_constraintTop_toBottomOf="@id/module_apps_id_apps"
+      android:layout_height="wrap_content"
+      android:text="全部应用"
+      android:maxLines="1"
+      android:layout_marginTop="24px"
+      android:textColor="#FFFFFFFF"
+      android:textSize="26.25px"
+      />
 
 
-</LinearLayout>
+</androidx.constraintlayout.widget.ConstraintLayout>

modules/mogo-module-apps/src/main/res/layout/module_apps_item_app_indicator.xml

@@ -1,26 +1,24 @@
 <?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
-    android:layout_width="wrap_content"
-    android:layout_height="wrap_content"
-    android:gravity="center"
-    android:layout_marginLeft="@dimen/dp_30"
-    android:layout_marginRight="@dimen/dp_30"
+    android:layout_width="@dimen/dp_137"
+    android:layout_height="match_parent"
+    android:gravity="center|bottom"
     android:orientation="vertical">
 
     <ImageView
         android:id="@+id/module_apps_id_app_icon"
-        android:layout_width="@dimen/module_apps_navigation_icon_width"
+        android:layout_width="@dimen/dp_112"
         android:scaleType="fitXY"
-        android:layout_height="@dimen/module_apps_navigation_icon_height" />
+        android:layout_height="@dimen/dp_112" />
 
     <TextView
         android:id="@+id/module_apps_id_app_name"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
-        android:layout_marginTop="@dimen/module_apps_app_name_marginTop"
+        android:layout_marginTop="@dimen/dp_24"
         android:gravity="center"
         android:maxLines="1"
         android:textColor="#FFFFFF"
-        android:textSize="@dimen/module_apps_app_name_textSize" />
+        android:textSize="@dimen/dp_26" />
 </LinearLayout>

modules/mogo-module-apps/src/main/res/values-xhdpi/dimens.xml

@@ -5,9 +5,9 @@
     <dimen name="module_apps_indicator_width">30px</dimen>
     <dimen name="module_apps_indicator_interval">4px</dimen>
     <dimen name="module_apps_indicator_marginBottom">103px</dimen>
-    <dimen name="module_apps_navigation_icon_width">120px</dimen>
-    <dimen name="module_apps_navigation_icon_height">120px</dimen>
-    <dimen name="module_apps_navigation_icon_marginLeft">60px</dimen>
+    <dimen name="module_apps_navigation_icon_width">94px</dimen>
+    <dimen name="module_apps_navigation_icon_height">94px</dimen>
+    <dimen name="module_apps_navigation_icon_marginLeft">43px</dimen>
     <dimen name="module_apps_navigation_icon_paddingBottom">60px</dimen>
     <dimen name="module_apps_app_name_marginTop">32px</dimen>
     <dimen name="module_apps_app_name_textSize">32px</dimen>

modules/mogo-module-apps/src/main/res/values/dimens.xml

@@ -14,4 +14,5 @@
     <dimen name="module_apps_page_paddingLeft">220px</dimen>
     <dimen name="module_apps_page_paddingRight">220px</dimen>
     <dimen name="module_apps_page_item_verticalSpacing">154px</dimen>
+  <dimen name="module_apps_navigation_icon_container_height">174px</dimen>
 </resources>

modules/mogo-module-main/src/main/java/com/mogo/module/main/MainActivity.java

@@ -69,7 +69,7 @@ public class MainActivity extends MvpActivity< MainView, MainPresenter > impleme
     private IMogoStatusManager mMogoStatusManager;
 
     private OrientedViewPager mCardsContainer;
-    private VerticalStackTransformer mTransformer;
+    //private VerticalStackTransformer mTransformer;
     private CardModulesAdapter mCardModulesAdapter;
 
     private View mHeader;
@@ -101,7 +101,7 @@ public class MainActivity extends MvpActivity< MainView, MainPresenter > impleme
     protected void initViews() {
         mCardsContainer = findViewById( R.id.module_main_id_cards_container );
         mCardsContainer.setOrientation( OrientedViewPager.Orientation.HORIZONTAL );
-        mTransformer = new VerticalStackTransformer( this );
+        //mTransformer = new VerticalStackTransformer( this );
         mCardsContainer.setOnPageChangeListener( mOnPageChangeListener = new OnPageChangeListenerAdapter() {
             private boolean mIsLast = true;
             private boolean mCardFlipStatus = false;
@@ -134,7 +134,7 @@ public class MainActivity extends MvpActivity< MainView, MainPresenter > impleme
                     }
                 } else if ( state == ViewPager.SCROLL_STATE_IDLE ) {
                     mCardFlipStatus = false;
-                    mTransformer.resetOffsetScroll();
+                    //mTransformer.resetOffsetScroll();
                 }
 
                 int cardSize = mCardModulesAdapter.getCount();
@@ -159,7 +159,7 @@ public class MainActivity extends MvpActivity< MainView, MainPresenter > impleme
                                         int positionOffsetPixels ) {
                 super.onPageScrolled( position, positionOffset, positionOffsetPixels );
                 Logger.d( TAG, "pageScrolled : offset --- " + positionOffset );
-                mTransformer.offsetScrollChanged( positionOffset );
+                //mTransformer.offsetScrollChanged( positionOffset );
             }
         } );
 
@@ -299,7 +299,7 @@ public class MainActivity extends MvpActivity< MainView, MainPresenter > impleme
         List< IMogoModuleProvider > providers = mMogoModuleHandler.loadCardsModule();
         mCardModulesAdapter = new CardModulesAdapter( this, providers );
         mCardsContainer.setOffscreenPageLimit( providers.size() );
-        mCardsContainer.setPageTransformer( true, mTransformer );
+        //mCardsContainer.setPageTransformer( true, mTransformer );
         mCardsContainer.setAdapter( mCardModulesAdapter );
 
         mCardCoverUpBottomLayout.setVisibility( View.VISIBLE );

modules/mogo-module-main/src/main/res/layout/module_main_activity_main.xml

@@ -37,14 +37,18 @@
         android:layout_marginLeft="@dimen/module_main_card_container_marginLeft"
         android:layout_marginTop="@dimen/module_main_card_container_marginTop">
 
+        <ImageView
+            android:layout_width="match_parent"
+            android:src="@drawable/module_apps_bg_card"
+            android:layout_height="@dimen/dp_797"/>
         <com.mogo.module.main.cards.OrientedViewPager
             android:id="@+id/module_main_id_cards_container"
             android:layout_width="match_parent"
-            android:layout_height="@dimen/module_main_card_container_height"
-            android:layout_marginBottom="@dimen/module_main_card_container_marginBottom"
+            android:layout_marginLeft="@dimen/dp_30"
+            android:layout_marginRight="@dimen/dp_30"
+            android:layout_height="@dimen/dp_600"
             android:clipToPadding="false"
-            android:overScrollMode="never"
-            android:paddingBottom="@dimen/module_main_card_container_paddingBottom" />
+            android:overScrollMode="never" />
 
         <!--  应用入口-->
         <FrameLayout
@@ -57,12 +61,12 @@
         <FrameLayout
             android:id="@+id/module_main_id_card_cover_up_bottom"
             android:layout_width="match_parent"
-            android:layout_height="20px"
-            android:layout_marginLeft="15px"
-            android:layout_marginTop="@dimen/module_main_card_cover_up_margin"
-            android:layout_marginRight="15px"
+            android:layout_height="@dimen/dp_26"
+            android:layout_marginTop="@dimen/dp_600"
+            android:layout_marginLeft="@dimen/dp_64"
+            android:layout_marginRight="@dimen/dp_64"
             android:background="@drawable/module_main_card_cover_up_bottom"
-            android:visibility="gone" />
+             />
 
     </FrameLayout>