带项目预览的ViewPager

Question

我想ViewPager在一周中的所有日期中显示，并预览当前项目的以下和上一项。我已经尝试了很多来自stackoverflow的解决方案，但是都没有用。我不会在中使用片段，ViewPager所以我使用了PagerAdapter。

看到这张图片：

我的出发点是：

• activity_main.xml

  <TextView
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:gravity="center_horizontal"
      android:text="Choose a day of the week:" />
  <android.support.v4.view.ViewPager
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:id="@+id/weekOfTheDayPager"/>
  

• MainActivity.java

  public class MainActivity extends AppCompatActivity {
  
  @Override
  protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
      setUpAdapter();
  }
  
  private void setUpAdapter() {
      ViewPager _mViewPager = (ViewPager) findViewById(R.id.weekOfTheDayPager);
  
      final String[] daysOfTheWeek = {"Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"};
      final Context myContext = getBaseContext();
  
      _mViewPager.setAdapter(new PagerAdapter() {
          @Override
          public int getCount() {
              return daysOfTheWeek.length;
          }
  
          @Override
          public boolean isViewFromObject(View view, Object object) {
              return view == object;
          }
  
          @Override
          public Object instantiateItem(ViewGroup collection, int position) {
              LayoutInflater inflater = LayoutInflater.from(myContext);
              ViewGroup layout = (ViewGroup) inflater.inflate(R.layout.dayoftheweeklayout, collection, false);
              ((TextView) layout.findViewById(R.id.dayOfTheWeekTextView)).setText(daysOfTheWeek[position]);
              collection.addView(layout);
              return layout;
          }
  
          @Override
          public void destroyItem(ViewGroup collection, int position, Object view) {
              collection.removeView((View) view);
          }
      });
  }}
  

最后是ViewPager项的布局：

• dayoftheweeklayout.xml

  <?xml version="1.0" encoding="utf-8"?>
  <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:tools="http://schemas.android.com/tools"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content">
      <TextView
          android:id="@+id/dayOfTheWeekTextView"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:gravity="center"
          android:text="Sunday"
          android:layout_gravity="center_horizontal"/>
  </FrameLayout>
  

任何建议将不胜感激。

Answer 1

所以看起来您想要一个轮播视图。

这是食谱：

First, in order to show pages to the side in ViewPager, you need to provide some padding on the sides and then set clipToPadding to false:

    <android.support.v4.view.ViewPager
        android:id="@+id/weekOfTheDayPager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:clipToPadding="false"
        android:paddingEnd="@dimen/view_pager_padding"
        android:paddingLeft="@dimen/view_pager_padding"
        android:paddingRight="@dimen/view_pager_padding"
        android:paddingStart="@dimen/view_pager_padding"/>

Next, you need to override getPageWidth in your PagerAdapter to tell the ViewPager that you want to display three pages at a time:

    @Override
    public float getPageWidth(int position) {
        return 1F / 3F;
    }

Then you need to tell the ViewPager to use a custom PageTransformer:

    viewPager.setPageTransformer(false, new MyPageTransformer());

...

public static class MyPageTransformer implements ViewPager.PageTransformer {

    private ArgbEvaluator mColorFade = new ArgbEvaluator();

    @Override
    public void transformPage(View page, float position) {

         // position is 0 when page is centered (current)
         // -1 when page is all the way to the left 
         // +1 when page is all the way to right

         // Here's an example of how you might morph the color
         int color = mColorFade(Math.abs(position), Color.RED, Color.GRAY);
         TextView tv = (TextView) page.findViewById(R.id.dayOfTheWeekTextView);
         tv.setTextColor(color);
    }
}

There's probably something I forgot, but search SO for "android viewpager carousel" and you will find an answer in there somewhere.