Android實(shí)現(xiàn)駕考寶典做題翻頁(yè)效果
效果如圖所示：
思路：
a.利用ViewPager自帶的動(dòng)畫(huà)效果，略作修改，實(shí)現(xiàn)滑動(dòng)覆蓋翻頁(yè)效果。
b.移動(dòng)時(shí)加入陰影效果。
1.關(guān)鍵代碼如下所示：
public class ReaderViewPager extends ViewPager {public ReaderViewPager(Context context) {this(context, null);}public ReaderViewPager(Context context, AttributeSet attrs) {super(context, attrs);setReadEffect();setScrollerDuration();}private void setScrollerDuration() {try {Field field = ViewPager.class.getDeclaredField("mScroller");field.setAccessible(true);FixedSpeedScroller scroller = new FixedSpeedScroller(getContext(),new DecelerateInterpolator());field.set(this, scroller);scroller.setmDuration(300);} catch (Exception e) {Log.e("@", "", e);}}public void setReadEffect() {setPageTransformer(true, new PageTransformer() {private static final float MIN_SCALE = 0.75f;@Overridepublic void transformPage(View view, float position) {int pageWidth = view.getWidth();int pageHeight =view.getHeight();if (position < -1) { // [-Infinity,-1)// This page is way off-screen to the left.view.setAlpha(0);} else if (position <= 0) { // [-1,0]// Use the default slide transition when moving to the left pageview.setAlpha(1);view.setTranslationX(0);view.setScaleX(1);view.setScaleY(1);} else if (position <= 1) { // (0,1]// Fade the page out.// view.setAlpha(1 - position);//// // Counteract the default slide transitionview.setAlpha(1);view.setTranslationX(pageWidth * -position);//// // Scale the page down (between MIN_SCALE and 1)// float scaleFactor = MIN_SCALE// + (1 - MIN_SCALE) * (1 - Math.abs(position));// view.setScaleX(scaleFactor);// view.setScaleY(scaleFactor);} else { // (1,+Infinity]// This page is way off-screen to the right.view.setAlpha(0);}}});}}
2.陰影效果添加(其實(shí)陰影是一張圖片，本來(lái)是要在ReadViewPager內(nèi)部添加陰影效果，但是不顯示，貌似被ReadViewPage自己遮住了，就用笨辦法實(shí)現(xiàn)了_)：
<FrameLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"><com.example.zhangyipeng.anwerdemo.view.ReaderViewPagerandroid:id="@+id/readerViewPager"android:layout_width="match_parent"android:layout_height="match_parent" /><!--陰影--><ImageViewandroid:id="@+id/shadowView"android:layout_width="20dp"android:layout_height="match_parent"android:background="@mipmap/shadow_right"/></FrameLayout>
3.陰影隨翻頁(yè)而移動(dòng)效果實(shí)現(xiàn)
readerViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {@Overridepublic void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {shadowView.setTranslationX(readerViewPager.getWidth()-positionOffsetPixels);}@Overridepublic void onPageSelected(int position) {}@Overridepublic void onPageScrollStateChanged(int state) {}});
4.OK，就是這么簡(jiǎn)單,快去做一個(gè)自己的駕考寶典吧 。。。
5.我自己寫(xiě)了一些簡(jiǎn)單的實(shí)現(xiàn)方法，有3個(gè)View的實(shí)現(xiàn)方式，還有其他使用開(kāi)源控件實(shí)現(xiàn)的
源碼地址：
https://github.com/zzyyppqq/AnswerEffect
到這里就結(jié)束啦。
評(píng)論
圖片
表情