使用可缩放的选定卡片滑动水平卡片

时间:2018-09-23 06:42:26

标签: android user-interface xamarin.android

我正在尝试水平滑动卡片,使所选卡片或选项居中并放大。 以下是我想要实现的屏幕截图,但找不到任何相关的内容。 enter image description here

2 个答案:

答案 0 :(得分:1)

您可以像这样在此视图中使用pagerContainer

PagerContainer类:

public class PagerContainer extends FrameLayout implements ViewPager.OnPageChangeListener {

private ViewPager mPager;
boolean mNeedsRedraw = false;

public PagerContainer(Context context) {
    super(context);
    init();
}

public PagerContainer(Context context, AttributeSet attrs) {
    super(context, attrs);
    init();
}

public PagerContainer(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
    init();
}

private void init() {
    //Disable clipping of children so non-selected pages are visible
    setClipChildren(false);

    //Child clipping doesn't work with hardware acceleration in Android 3.x/4.x
    //You need to set this value here if using hardware acceleration in an
    // application targeted at these releases.
    setLayerType(View.LAYER_TYPE_SOFTWARE, null);
}

@Override
protected void onFinishInflate() {
    super.onFinishInflate();
    try {
        mPager = (ViewPager) getChildAt(0);
        mPager.setOnPageChangeListener(this);
    } catch (Exception e) {
        throw new IllegalStateException("The root child of PagerContainer must be a ViewPager");
    }
}

public ViewPager getViewPager() {
    return mPager;
}

private Point mCenter = new Point();
private Point mInitialTouch = new Point();

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    mCenter.x = w / 2;
    mCenter.y = h / 2;
}

@Override
public boolean onTouchEvent(MotionEvent ev) {
    //We capture any touches not already handled by the ViewPager
    // to implement scrolling from a touch outside the pager bounds.
    switch (ev.getAction()) {
        case MotionEvent.ACTION_DOWN:
            mInitialTouch.x = (int)ev.getX();
            mInitialTouch.y = (int)ev.getY();
        default:
            ev.offsetLocation(mCenter.x - mInitialTouch.x, mCenter.y - mInitialTouch.y);
            break;
    }

    return mPager.dispatchTouchEvent(ev);
}

@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
    //Force the container to redraw on scrolling.
    //Without this the outer pages render initially and then stay static
    if (mNeedsRedraw) invalidate();
}

@Override
public void onPageSelected(int position) { }

@Override
public void onPageScrollStateChanged(int state) {
    mNeedsRedraw = (state != ViewPager.SCROLL_STATE_IDLE);
}}

MainActivity类:

public class MainActivity extends AppCompatActivity {

PagerContainer mContainer;


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


    mContainer = (PagerContainer) findViewById(R.id.pager_container);

    ViewPager pager = mContainer.getViewPager();
    PagerAdapter adapter = new MyPagerAdapter();
    pager.setAdapter(adapter);
    //Necessary or the pager will only have one extra page to show
    // make this at least however many pages you can see
    pager.setOffscreenPageLimit(adapter.getCount());
    //A little space between pages
    pager.setPageMargin(15);

    //If hardware acceleration is enabled, you should also remove
    // clipping on the pager for its children.
    pager.setClipChildren(false);

}



//Nothing special about this adapter, just throwing up colored views for demo
private class MyPagerAdapter extends PagerAdapter {

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        TextView view = new TextView(MainActivity.this);
        view.setText("Item " + position);
        view.setGravity(Gravity.CENTER);
        view.setBackgroundColor(Color.argb(255, position * 50, position * 10, position * 50));

        container.addView(view);
        return view;
    }

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

    @Override
    public int getCount() {
        return 5;
    }

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

然后在您的主要活动布局中使用它,如下所示:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="ir.kamangroup.containerpager.MainActivity">



<ir.kamangroup.containerpager.PagerContainer
    android:id="@+id/pager_container"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#CCC">

    <android.support.v4.view.ViewPager
        android:layout_marginRight="80dp"
        android:layout_width="match_parent"
        android:layout_height="100dp" />

</ir.kamangroup.containerpager.PagerContainer>

答案 1 :(得分:1)

该库可能对您有用- Discrete ScrollView