卡片交互效果

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>