Mobikwik儀表板儀表板

Question

我想實現這樣的事情... Mobikwik dashboard

我該如何實現它？有沒有用於創建類似的庫的庫？

Answer 1

它是傳送帶效果，主要在iOS上實現。

這是Android：

package com.carouseleffect; 

import android.content.Context; 
import android.support.v4.view.ViewPager; 
import android.view.View; 

public class CarouselEffectTransformer implements ViewPager.PageTransformer { 

    private int maxTranslateOffsetX; 
    private ViewPager viewPager; 

    public CarouselEffectTransformer(Context context) { 
     this.maxTranslateOffsetX = dp2px(context, 180); 
    } 


    public void transformPage(View view, float position) { 
     if (viewPager == null) { 
      viewPager = (ViewPager) view.getParent(); 
     } 

     int leftInScreen = view.getLeft() - viewPager.getScrollX(); 
     int centerXInViewPager = leftInScreen + view.getMeasuredWidth()/2; 
     int offsetX = centerXInViewPager - viewPager.getMeasuredWidth()/2; 
     float offsetRate = (float) offsetX * 0.48f/viewPager.getMeasuredWidth(); 
     float scaleFactor = 1 - Math.abs(offsetRate); 
     if (scaleFactor > 0.5) { 
      view.setScaleX(scaleFactor); 
      view.setScaleY(scaleFactor); 
      view.setTranslationX(-maxTranslateOffsetX * offsetRate); 
     } 

    } 

    private int dp2px(Context context, float dipValue) { 
     float m = context.getResources().getDisplayMetrics().density; 
     return (int) (dipValue * m + 0.5f); 
    } 
} 

主要活動是手柄尋呼機變壓器和適配器

package com.carouseleffect; 

import android.os.Bundle; 
import android.support.v4.view.ViewPager; 
import android.support.v7.app.AppCompatActivity; 
import android.view.View; 
import android.widget.Toast; 

public class MainActivity extends AppCompatActivity { 

    private ViewPager viewpagerTop, viewPagerBackground; 
    public static final int ADAPTER_TYPE_TOP = 1; 
    public static final int ADAPTER_TYPE_BOTTOM = 2; 

    private int[] listItems = {R.mipmap.img1, R.mipmap.img2, R.mipmap.img3, R.mipmap.img4, 
      R.mipmap.img5, R.mipmap.img6, R.mipmap.img7, R.mipmap.img8, R.mipmap.img9, R.mipmap.img10, R.mipmap.logo, R.mipmap.powered,R.mipmap.img1, R.mipmap.img2, R.mipmap.img3, R.mipmap.img4, 
      R.mipmap.img5, R.mipmap.img6, R.mipmap.img7, R.mipmap.img8, R.mipmap.img9, R.mipmap.img10, R.mipmap.logo, R.mipmap.powered,R.mipmap.img1, R.mipmap.img2, R.mipmap.img3, R.mipmap.img4, 
      R.mipmap.img5, R.mipmap.img6, R.mipmap.img7, R.mipmap.img8, R.mipmap.img9, R.mipmap.img10, R.mipmap.logo, R.mipmap.powered,R.mipmap.img1, R.mipmap.img2, R.mipmap.img3, R.mipmap.img4, 
      R.mipmap.img5, R.mipmap.img6, R.mipmap.img7, R.mipmap.img8, R.mipmap.img9, R.mipmap.img10, R.mipmap.logo, R.mipmap.powered}; 

    @Override 
    protected void onCreate(Bundle savedInstanceState) { 
     super.onCreate(savedInstanceState); 
     setContentView(R.layout.activity_main); 

     init(); 
     setupViewPager(); 
    } 

    /** 
    * Initialize all required variables 
    */ 
    private void init() { 
     viewpagerTop = (ViewPager) findViewById(R.id.viewpagerTop); 
     viewPagerBackground = (ViewPager) findViewById(R.id.viewPagerbackground); 

     viewpagerTop.setClipChildren(false); 
//  viewpagerTop.setPageMargin(getResources().getDimensionPixelOffset(R.dimen.pager_margin)); 
     viewpagerTop.setOffscreenPageLimit(5); 
     viewpagerTop.setPageTransformer(false, new CarouselEffectTransformer(this)); // Set transformer 
    } 

    /** 
    * Setup viewpager and it's events 
    */ 
    private void setupViewPager() { 
     // Set Top ViewPager Adapter 
     MyPagerAdapter adapter = new MyPagerAdapter(this, listItems, ADAPTER_TYPE_TOP); 
     viewpagerTop.setAdapter(adapter); 

     // Set Background ViewPager Adapter 
//  MyPagerAdapter adapterBackground = new MyPagerAdapter(this, listItems, ADAPTER_TYPE_BOTTOM); 
//  viewPagerBackground.setAdapter(adapterBackground); 


     viewpagerTop.addOnPageChangeListener(new ViewPager.OnPageChangeListener() { 

      private int index = 0; 

      @Override 
      public void onPageSelected(int position) { 
       index = position; 

      } 

      @Override 
      public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { 
       int width = viewPagerBackground.getWidth(); 
       viewPagerBackground.scrollTo((int) (width * position + width * positionOffset), 0); 
      } 

      @Override 
      public void onPageScrollStateChanged(int state) { 
       if (state == ViewPager.SCROLL_STATE_IDLE) { 
        viewPagerBackground.setCurrentItem(index); 
       } 

      } 
     }); 
    } 

    /** 
    * Handle all click event of activity 
    */ 
    public void clickEvent(View view) { 
     switch (view.getId()) { 
      case R.id.linMain: 
       if (view.getTag() != null) { 
        int poisition = Integer.parseInt(view.getTag().toString()); 
        Toast.makeText(getApplicationContext(), "Poistion: " + poisition, Toast.LENGTH_LONG).show(); 
       } 

       break; 
     } 
    } 
} 

適配器類別

package com.carouseleffect; 

import android.content.Context; 
import android.support.v4.view.PagerAdapter; 
import android.view.LayoutInflater; 
import android.view.View; 
import android.view.ViewGroup; 
import android.widget.ImageView; 
import android.widget.LinearLayout; 

import com.bumptech.glide.Glide; 

public class MyPagerAdapter extends PagerAdapter{ 

    Context context; 
    int[] listItems; 
    int adapterType; 

    public MyPagerAdapter(Context context, int[] listItems, int adapterType) { 
     this.context = context; 
     this.listItems = listItems; 
     this.adapterType=adapterType; 
    } 

    @Override 
    public Object instantiateItem(ViewGroup container, int position) { 
     View view = LayoutInflater.from(context).inflate(R.layout.item_cover, null); 
     try { 

      LinearLayout linMain = (LinearLayout) view.findViewById(R.id.linMain); 
      ImageView imageCover = (ImageView) view.findViewById(R.id.imageCover); 
      linMain.setTag(position); 

      switch (adapterType) 
      { 
       case MainActivity.ADAPTER_TYPE_TOP: 
        linMain.setBackgroundResource(R.drawable.shadow); 
        break; 
       case MainActivity.ADAPTER_TYPE_BOTTOM: 
        linMain.setBackgroundResource(0); 
        break; 
      } 

      Glide.with(context).load(listItems[position]).into(imageCover); 

      container.addView(view); 

     } catch (Exception e) { 
      e.printStackTrace(); 
     } 

     return view; 
    } 

    @Override 
    public void destroyItem(ViewGroup container, int position, Object object) { 
     container.removeView((View) object); 
    } 

    @Override 
    public int getCount() { 
     return listItems.length; 
    } 

    @Override 
    public boolean isViewFromObject(View view, Object object) { 
     return (view == object); 
    } 
}