1
ich so etwas wie dies erreichen wollen ... Mobikwik dashboardMobikwik Armaturenbrett Armaturenbrett
Wie kann ich es erreichen? Gibt es Bibliotheken, um so etwas zu erstellen?
ich so etwas wie dies erreichen wollen ... Mobikwik dashboardMobikwik Armaturenbrett Armaturenbrett
Wie kann ich es erreichen? Gibt es Bibliotheken, um so etwas zu erstellen?
Es ist Karussell-Effekt, der hauptsächlich für iOS implementiert ist.
Hier ist es für 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);
}
}
Hauptaktivität, die Pager Transformator und Adapter Griff
istpackage 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;
}
}
}
Adapter Klasse
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);
}
}
Siehe diese http://stackoverflow.com/questions/36005695/cover-flow-feature-using-view-pager-android – KarthiKeyan