仿最美应用-每日最美 钢琴律动效果(二)
2015-07-29 22:04 288 0
原文：http://minxiaoming.com/2015/07/24/NiceApp2/
GitHub:https://github.com/minxiaoming/NiceAppDemo
一、可以侧拉刷新加载的ViewPager
首先需要添加ViewPager，这个是一个可以侧拉加载刷新的ViewPager，这里最美使用的是GitHub上的一个开源项目:Android-PullToRefresh
修改我们的activity_main.xml布局文件
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:ptr="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#00aac6">
<com.handmark.pulltorefresh.library.extras.viewpager.PullToRefreshViewPager
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="50.0dip"
ptr:ptrAnimationStyle="rotate_and_anim"
ptr:ptrDrawable="@drawable/loading_1"
ptr:ptrMode="both"
ptr:ptrScrollingWhileRefreshingEnabled="false" />
<com.shine.niceapp.control.RhythmLayout
android:id="@+id/box_rhythm"
android:layout_width="match_parent"
android:layout_height="@dimen/rhythm_layout_height"
android:layout_alignParentBottom="true"
android:scrollbars="none">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="horizontal" />
</com.shine.niceapp.control.RhythmLayout>
</RelativeLayout>
-
ptrAnimationStyle设置侧拉到底部或顶部时出现的图案将要执行的动画方式,这里我选择的是旋转动画
-
ptrDrawable设置出现的图案,这里我设置成了loading_1这是从最美应用里拿来的图片
-
ptrMode设置所支持的上拉下拉方式,这里我选择上拉下拉都支持
-
ptrScrollingWhileRefreshingEnabled设置刷新时是否允许ViewPager滚动,这里我选择不允许
接下来就是为ViewPager创建一个适配器，这里使用的适配器是FragmentStatePagerAdapter所以需要一个Fragment，先来看下这个Fragment的布局:fragment_card.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:background="@drawable/home_card_bg">
</RelativeLayout>
</FrameLayout>
其实就是一个FrameLayout中套了一层RelativeLayout，当然在最美应用的布局中，RelativeLayout里还有很多的控件的，但是这些对于我们来说并不是重点，所以我仅仅拿了最外层的2层布局,接下来看看这个Fragment中的内容
public class CardFragment extends Fragment {
public static CardFragment getInstance(Card card) {
CardFragment fragment = new CardFragment();
Bundle bundle = new Bundle();
bundle.putSerializable("card", card);
fragment.setArguments(bundle);
return fragment;
}
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
return inflater.inflate(R.layout.fragment_card, null);
}
}
同上，在此中本来是有很多加载数据的操作的，getInstance中的card就是数据源，但是对于我们来说并不需要，所以我只是简单的写了个getInstance，复写了onCreateView而已，之后便是适配器了
public class CardPagerAdapter extends FragmentStatePagerAdapter {
private List<Card> mCardList;
private List<Fragment> mFragments = new ArrayList();
public CardPagerAdapter(FragmentManager fragmentManager, List<Card> cardList) {
super(fragmentManager);
//使用迭代器遍历List,
Iterator iterator = cardList.iterator();
while (iterator.hasNext()) {
Card card = (Card) iterator.next();
//得到相应的Fragment实例并添加到List中
mFragments.add(CardFragment.getInstance(card));
}
mCardList = cardList;
}
public int getCount() {
return mFragments.size();
}
@Override
public Fragment getItem(int position) {
return mFragments.get(position);
}
}
这只是一些很简单的代码，我想并不需要多说什么，最后修改MainActivity中的代码如下
public class MainActivity extends FragmentActivity {
/**
* 钢琴布局
*/
private RhythmLayout mRhythmLayout;
/**
* 钢琴布局的适配器
*/
private RhythmAdapter mRhythmAdapter;
/**
* 接收PullToRefreshViewPager中的ViewPager控件
*/
private ViewPager mViewPager;
/**
* 可以侧拉刷新的ViewPager，其实是一个LinearLayout控件
*/
private PullToRefreshViewPager mPullToRefreshViewPager;
/**
* ViewPager的适配器
*/
private CardPagerAdapter mPagerAdapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
init();
}
private void init() {
//实例化控件
mRhythmLayout = (RhythmLayout) findViewById(R.id.box_rhythm);
mPullToRefreshViewPager = (PullToRefreshViewPager) findViewById(R.id.pager);
//获取PullToRefreshViewPager中的ViewPager控件
mViewPager = mPullToRefreshViewPager.getRefreshableView();
//设置钢琴布局的高度 高度为钢琴布局item的宽度+10dp
int height = (int) mRhythmLayout.getRhythmItemWidth() + (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 10.0F, getResources().getDisplayMetrics());
mRhythmLayout.getLayoutParams().height = height;
//设置<span style="font-family: Arial;">mPullToRefreshViewPager距离底部的距离为钢琴控件的高
((RelativeLayout.LayoutParams) this.mPullToRefreshViewPager.getLayoutParams()).bottomMargin = height;
List<Card> cardList = new ArrayList<Card>();
for (int i = 0; i < 30; i++) {
Card card = new Card();
cardList.add(card);
}
//设置ViewPager的适配器
mPagerAdapter = new CardPagerAdapter(getSupportFragmentManager(), cardList);
mViewPager.setAdapter(mPagerAdapter);
//设置钢琴布局的适配器
mRhythmAdapter = new RhythmAdapter(this, cardList);
mRhythmLayout.setAdapter(mRhythmAdapter);
}
}
运行后的效果如下
二、钢琴按钮的滚动动画
在写这个动画之前我们需要分析一下这个动画都有哪些步骤
观察上面的Gif图,当滑动ViewPager页时，底部的钢琴界面首先会进行一次位移，将ViewPager对应的底部Item移动到中心，之后将此Item升起，将之前的Item降下所以我们总共需要3个动画，一个滚动动画，一个升起动画，一个降下动画，而且在上图中可以看出动画的执行实在ViewPager切换后执行的所以我们需要设置它的OnPageChangeListener。在OnPageSelected方法中执行组合动画
在RhythmLayout中添加方法以供外部调用这个组合动画
/**
* 位移到所选中的item位置，并进行相应的动画
*
* @param position 被选中的item位置
*/
public void showRhythmAtPosition(int position) {
//如果所要移动的位置和上一次一样则退出方法
if (this.mLastDisplayItemPosition == position)
return;
//ScrollView的滚动条位移动画
Animator scrollAnimator;
//item的弹起动画
Animator bounceUpAnimator;
//item的降下动画
Animator shootDownAnimator;
if ((this.mLastDisplayItemPosition < 0) || (mAdapter.getCount() <= 7) || (position <= 3)) {
//当前要位移到的位置为前3个时或者总的item数量小于7个
scrollAnimator = scrollToPosition(0, mScrollStartDelayTime, false);
} else if (mAdapter.getCount() - position <= 3) {
//当前要位移到的位置为最后3个
scrollAnimator = scrollToPosition(mAdapter.getCount() - 7, mScrollStartDelayTime, false);
} else {
//当前位移到的位置既不是前3个也不是后3个
scrollAnimator = scrollToPosition(position - 3, mScrollStartDelayTime, false);
}
//获取对应item升起动画
bounceUpAnimator = bounceUpItem(position, false);
//获取对应item降下动画
shootDownAnimator = shootDownItem(mLastDisplayItemPosition, false);
//动画合集 弹起动画和降下动画的组合
AnimatorSet animatorSet1 = new AnimatorSet();
if (bounceUpAnimator != null) {
animatorSet1.playTogether(bounceUpAnimator);
}
if (shootDownAnimator != null) {
animatorSet1.playTogether(shootDownAnimator);
}
//3个动画的组合
AnimatorSet animatorSet2 = new AnimatorSet();
animatorSet2.playSequentially(new Animator\[\]{scrollAnimator, animatorSet1});
animatorSet2.start();
mLastDisplayItemPosition = position;
}
mLastDisplayItemPosition为上次选中的item的位置，mScrollStartDelayTime为动画延迟执行的时间，其他都有详细的注释，并不难理解scrollToPosition()方法中调用的是AnimatorUtils中的moveScrollViewToX()方法它将会移动ScrollView的x轴到指定的位置
修改后RhythmLayout的代码如下:
public class RhythmLayout extends HorizontalScrollView {
/**
* ScrollView的子控件
*/
private LinearLayout mLinearLayout;
/**
* item的宽度，为屏幕的1/7
*/
private float mItemWidth;
/**
* 屏幕宽度
*/
private int mScreenWidth;
/**
* 当前被选中的的Item的位置
*/
private int mCurrentItemPosition;
/**
* 适配器
*/
private RhythmAdapter mAdapter;
/**
* item在Y轴位移的单位，以这个值为基础开始阶梯式位移动画
*/
private int mIntervalHeight;
/**
* item在Y轴位移最大的高度
*/
private int mMaxTranslationHeight;
/**
* 每个图标加上左右2边边距的尺寸
*/
private int mEdgeSizeForShiftRhythm;
/**
* 按下屏幕的时间
*/
private long mFingerDownTime;
/**
* 上一次所选中的item的位置
*/
private int mLastDisplayItemPosition;
/**
* ScrollView滚动动画延迟执行的时间
*/
private int mScrollStartDelayTime;
private Context mContext;
private Handler mHandler;
private ShiftMonitorTimer mTimer;
public RhythmLayout(Context context) {
this(context, null);
}
public RhythmLayout(Context context, AttributeSet attrs) {
super(context, attrs);
mContext = context;
init();
}
private void init() {
//获得屏幕大小
DisplayMetrics displayMetrics = new DisplayMetrics();
((Activity) mContext).getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);
mScreenWidth = displayMetrics.widthPixels;
//获取Item的宽度，为屏幕的七分之一
mItemWidth = mScreenWidth / 7;
//初始化时将手指当前所在的位置置为-1
mCurrentItemPosition = -1;
mMaxTranslationHeight = (int) mItemWidth;
mIntervalHeight = (mMaxTranslationHeight / 6);
mEdgeSizeForShiftRhythm = getResources().getDimensionPixelSize(R.dimen.rhythm_edge_size_for_shift);
mFingerDownTime = 0;
mHandler = new Handler();
mTimer = new ShiftMonitorTimer();
mTimer.startMonitor();
mLastDisplayItemPosition = -1;
mScrollStartDelayTime = 0;
}
public void setAdapter(RhythmAdapter adapter) {
this.mAdapter = adapter;
//如果获取HorizontalScrollView下的LinearLayout控件
if (mLinearLayout == null) {
mLinearLayout = (LinearLayout) getChildAt(0);
}
//循环获取adapter中的View，设置item的宽度并且add到mLinearLayout中
mAdapter.setItemWidth(mItemWidth);
for (int i = 0; i < this.mAdapter.getCount(); i++) {
mLinearLayout.addView(mAdapter.getView(i, null, null));
}
}
@Override
public boolean dispatchTouchEvent(MotionEvent ev) {
switch (ev.getAction()) {
case MotionEvent.ACTION_MOVE://移动
mTimer.monitorTouchPosition(ev.getX(), ev.getY());
updateItemHeight(ev.getX());
break;
case MotionEvent.ACTION_DOWN://按下
mTimer.monitorTouchPosition(ev.getX(), ev.getY());
//得到按下时的时间戳
mFingerDownTime = System.currentTimeMillis();
updateItemHeight(ev.getX());
break;
case MotionEvent.ACTION_UP://抬起
actionUp();
break;
}
return true;
}
//更新钢琴按钮的高度
private void updateItemHeight(float scrollX) {
//得到屏幕上可见的7个钢琴按钮的视图
List viewList = getVisibleViews();
//当前手指所在的item
int position = (int) (scrollX / mItemWidth);
//如果手指位置没有发生变化或者大于childCount的则跳出方法不再继续执行
if (position == mCurrentItemPosition || position >= mLinearLayout.getChildCount())
return;
mCurrentItemPosition = position;
makeItems(position, viewList);
}
/**
* 得到当前可见的7个钢琴按钮
*/
private List<View> getVisibleViews() {
ArrayList arrayList = new ArrayList();
if (mLinearLayout == null)
return arrayList;
//当前可见的第一个钢琴按钮的位置
int firstPosition = getFirstVisibleItemPosition();
//当前可见的最后一个钢琴按钮的位置
int lastPosition = firstPosition + 7;
if (mLinearLayout.getChildCount() < 7) {
lastPosition = mLinearLayout.getChildCount();
}
//取出当前可见的7个钢琴按钮
for (int i = firstPosition; i < lastPosition; i++)
arrayList.add(mLinearLayout.getChildAt(i));
return arrayList;
}
/**
* 获得firstPosition-1 和 lastPosition +1 在当前可见的7个总共9个钢琴按钮
*
* @param isForward 是否获取firstPosition - 1 位置的钢琴按钮
* @param isBackward 是否获取lastPosition + 1 位置的钢琴按钮
* @return
*/
private List<View> getVisibleViews(boolean isForward, boolean isBackward) {
ArrayList viewList = new ArrayList();
if (this.mLinearLayout == null)
return viewList;
int firstPosition = getFirstVisibleItemPosition();
int lastPosition = firstPosition + 7;
if (mLinearLayout.getChildCount() < 7) {
lastPosition = mLinearLayout.getChildCount();
}
if ((isForward) && (firstPosition > 0))
firstPosition--;
if ((isBackward) && (lastPosition < mLinearLayout.getChildCount()))
lastPosition++;
for (int i = firstPosition; i < lastPosition; i++)
viewList.add(mLinearLayout.getChildAt(i));
return viewList;
}
/**
* 得到可见的第一个钢琴按钮的位置
*/
public int getFirstVisibleItemPosition() {
if (mLinearLayout == null) {
return 0;
}
//获取钢琴按钮的数量
int size = mLinearLayout.getChildCount();
for (int i = 0; i < size; i++) {
View view = mLinearLayout.getChildAt(i);
//当出现钢琴按钮的x轴比当前ScrollView的x轴大时，这个钢琴按钮就是当前可见的第一个
if (getScrollX() < view.getX() + mItemWidth / 2.0F)
return i;
}
return 0;
}
/**
* 计算出个个钢琴按钮需要的高度并开始动画
*/
private void makeItems(int fingerPosition, List<View> viewList) {
if (fingerPosition >= viewList.size()) {
return;
}
int size = viewList.size();
for (int i = 0; i < size; i++) {
//根据钢琴按钮的位置计算出在Y轴需要位移的大小
int translationY = Math.min(Math.max(Math.abs(fingerPosition - i) * mIntervalHeight, 10), mMaxTranslationHeight);
//位移动画
updateItemHeightAnimator(viewList.get(i), translationY);
}
}
/**
* 根据给定的值进行Y轴位移的动画
*
* @param view
* @param translationY
*/
private void updateItemHeightAnimator(View view, int translationY) {
if (view != null)
AnimatorUtils.showUpAndDownBounce(view, translationY, 180, true, true);
}
/**
* 手指抬起时将其他钢琴按钮落下，重置到初始位置
*/
private void actionUp() {
mTimer.monitorTouchPosition(-1.0F, -1.0F);
if (mCurrentItemPosition < 0) {
return;
}
int firstPosition = getFirstVisibleItemPosition();
int lastPosition = firstPosition + mCurrentItemPosition;
final List viewList = getVisibleViews();
int size = viewList.size();
//将当前钢琴按钮从要落下的ViewList中删除
if (size > mCurrentItemPosition) {
viewList.remove(mCurrentItemPosition);
}
if (firstPosition - 1 >= 0) {
viewList.add(mLinearLayout.getChildAt(firstPosition - 1));
}
if (lastPosition + 1 <= mLinearLayout.getChildCount()) {
viewList.add(mLinearLayout.getChildAt(lastPosition + 1));
}
//200毫秒后执行动画
this.mHandler.postDelayed(new Runnable() {
public void run() {
for (int i = 0; i < viewList.size(); i++) {
View downView = (View) viewList.get(i);
shootDownItem(downView, true);
}
}
}, 200L);
mCurrentItemPosition = -1;
//使设备震动
vibrate(20L);
}
/**
* 位移到Y轴'最低'的动画
*
* @param view 需要执行动画的视图
* @param isStart 是否开始动画
* @return
*/
public Animator shootDownItem(View view, boolean isStart) {
if (view != null)
return AnimatorUtils.showUpAndDownBounce(view, mMaxTranslationHeight, 350, isStart, true);
return null;
}
/**
* 位移到Y轴'最低'的动画
*
* @param viewPosition view的位置
* @param isStart 是否开始动画
* @return
*/
public Animator shootDownItem(int viewPosition, boolean isStart) {
if ((viewPosition >= 0) && (mLinearLayout != null) && (mLinearLayout.getChildCount() > viewPosition))
return shootDownItem(mLinearLayout.getChildAt(viewPosition), isStart);
return null;
}
/**
* @param position 要移动到的view的位置
* @param duration 动画持续时间
* @param startDelay 延迟动画开始时间
* @param isStart 动画是否开始
* @return
*/
public Animator scrollToPosition(int position, int duration, int startDelay, boolean isStart) {
int viewX = (int) mLinearLayout.getChildAt(position).getX();
return smoothScrollX(viewX, duration, startDelay, isStart);
}
/**
* ScrollView滚动动画X轴位移
*
* @param position view的位置
* @param startDelay 延迟动画开始时间
* @param isStart 动画是否开始
* @return
*/
public Animator scrollToPosition(int position, int startDelay, boolean isStart) {
int viewX = (int) mLinearLayout.getChildAt(position).getX();
return smoothScrollX(viewX, 300, startDelay, isStart);
}
private Animator smoothScrollX(int position, int duration, int startDelay, boolean isStart) {
return AnimatorUtils.moveScrollViewToX(this, position, duration, startDelay, isStart);
}
/**
* 位移到Y轴'最高'的动画
*
* @param viewPosition view的位置
* @param isStart 是否开始动画
* @return
*/
public Animator bounceUpItem(int viewPosition, boolean isStart) {
if (viewPosition >= 0)
return bounceUpItem(mLinearLayout.getChildAt(viewPosition), isStart);
return null;
}
public Animator bounceUpItem(View view, boolean isStart) {
if (view != null)
return AnimatorUtils.showUpAndDownBounce(view, 10, 350, isStart, true);
return null;
}
/**
* 让移动设备震动
*
* @param l 震动的时间
*/
private void vibrate(long l) {
((Vibrator) mContext.getSystemService(Context.VIBRATOR_SERVICE)).vibrate(new long\[\]{0L, l}, -1);
}
/**
* 计时器，实现爬楼梯效果
*/
class ShiftMonitorTimer extends Timer {
private TimerTask timerTask;
/**
*
*/
private boolean canShift = false;
private float x;
private float y;
void monitorTouchPosition(float x, float y) {
this.x = x;
this.y = y;
//当按下位置在第一个后最后一个，或x<0,y<0时，canShift为false，使计时器线程中的代码不能执行
if ((x < 0.0F) || ((x > mEdgeSizeForShiftRhythm) && (x < mScreenWidth - mEdgeSizeForShiftRhythm)) || (y < 0.0F)) {
mFingerDownTime = System.currentTimeMillis();
canShift = false;
} else {
canShift = true;
}
}
void startMonitor() {
if (this.timerTask == null) {
timerTask = new TimerTask() {
@Override
public void run() {
long duration = System.currentTimeMillis() - mFingerDownTime;
//按下时间大于1秒，且按下的是第一个或者最后一个等式成立
if (canShift && duration > 1000) {
int firstPosition = getFirstVisibleItemPosition();
int toPosition = 0; //要移动到的钢琴按钮的位置
boolean isForward = false; //是否获取第firstPosition-1个钢琴按钮
boolean isBackward = false;//是否获取第lastPosition+1个钢琴按钮
final List<View> localList;
if (x <= mEdgeSizeForShiftRhythm && x >= 0.0F) {//第一个
if (firstPosition - 1 >= 0) {
mCurrentItemPosition = 0;
toPosition = firstPosition - 1;
isForward = true;
isBackward = false;
}
} else if (x > mScreenWidth - mEdgeSizeForShiftRhythm) {//最后一个
if (mLinearLayout.getChildCount() >= 1 + (firstPosition + 7)) {
mCurrentItemPosition = 7;
toPosition = firstPosition + 1;
isForward = false;
isBackward = true;
}
}
//当按下的是第一个的时候isForward为true，最后一个时isBackward为true
if (isForward || isBackward) {
localList = getVisibleViews(isForward, isBackward);
final int finalToPosition = toPosition;
mHandler.post(new Runnable() {
public void run() {
makeItems(mCurrentItemPosition, localList);//设置每个Item的高度
scrollToPosition(finalToPosition, 200, 0, true);//设置ScrollView在x轴的坐标
vibrate(10L);
}
});
}
}
}
};
}
//200毫秒之后开始执行，每隔250毫秒执行一次
schedule(timerTask, 200L, 250L);
}
}
/**
* 位移到所选中的item位置，并进行相应的动画
*
* @param position 前往的item位置
*/
public void showRhythmAtPosition(int position) {
//如果所要移动的位置和上一次一样则退出方法
if (this.mLastDisplayItemPosition == position)
return;
//ScrollView的滚动条位移动画
Animator scrollAnimator;
//item的弹起动画
Animator bounceUpAnimator;
//item的降下动画
Animator shootDownAnimator;
if ((this.mLastDisplayItemPosition < 0) || (mAdapter.getCount() <= 7) || (position <= 3)) {
//当前要位移到的位置为前3个时或者总的item数量小于7个
scrollAnimator = scrollToPosition(0, mScrollStartDelayTime, false);
} else if (mAdapter.getCount() - position <= 3) {
//当前要位移到的位置为最后3个
scrollAnimator = scrollToPosition(mAdapter.getCount() - 7, mScrollStartDelayTime, false);
} else {
//当前位移到的位置既不是前3个也不是后3个
scrollAnimator = scrollToPosition(position - 3, mScrollStartDelayTime, false);
}
//获取对应item升起动画
bounceUpAnimator = bounceUpItem(position, false);
//获取对应item降下动画
shootDownAnimator = shootDownItem(mLastDisplayItemPosition, false);
//动画合集 弹起动画和降下动画的组合
AnimatorSet animatorSet1 = new AnimatorSet();
if (bounceUpAnimator != null) {
animatorSet1.playTogether(bounceUpAnimator);
}
if (shootDownAnimator != null) {
animatorSet1.playTogether(shootDownAnimator);
}
//3个动画的组合
AnimatorSet animatorSet2 = new AnimatorSet();
animatorSet2.playSequentially(new Animator\[\]{scrollAnimator, animatorSet1});
animatorSet2.start();
mLastDisplayItemPosition = position;
}
/*
* 得到每个键冒（控件）的宽度
*/
public float getRhythmItemWidth() {
return mItemWidth;
}
/**
* 设置滚动动画延迟执行时间
*
* @param scrollStartDelayTime 延迟时间毫秒为单位
*/
public void setScrollRhythmStartDelayTime(int scrollStartDelayTime) {
this.mScrollStartDelayTime = scrollStartDelayTime;
}
}
AnimatorUtils的代码如下:
public class AnimatorUtils {
/**
* @param view 需要设置动画的view
* @param translationY 偏移量
* @param animatorTime 动画时间
* @param isStartAnimator 是否开启指示器
* @param isStartInterpolator 是否开始动画
* @return 平移动画
*/
public static Animator showUpAndDownBounce(View view, int translationY, int animatorTime, boolean isStartAnimator, boolean isStartInterpolator) {
ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(view, "translationY", translationY);
if (isStartInterpolator) {
objectAnimator.setInterpolator(new OvershootInterpolator());
}
objectAnimator.setDuration(animatorTime);
if (isStartAnimator) {
objectAnimator.start();
}
return objectAnimator;
}
/**
* 移动ScrollView的x轴
* @param view 要移动的ScrollView
* @param toX 要移动到的X轴坐标
* @param time 动画持续时间
* @param delayTime 延迟开始动画的时间
* @param isStart 是否开始动画
* @return
*/
public static Animator moveScrollViewToX(View view, int toX, int time, int delayTime, boolean isStart) {
ObjectAnimator objectAnimator = ObjectAnimator.ofInt(view, "scrollX", new int\[\]{toX});
objectAnimator.setDuration(time);
objectAnimator.setInterpolator(new AccelerateDecelerateInterpolator());
objectAnimator.setStartDelay(delayTime);
if (isStart)
objectAnimator.start();
return objectAnimator;
}
}
接下来修改MainActivity中的代码
public class MainActivity extends FragmentActivity {
/**
* 钢琴布局
*/
private RhythmLayout mRhythmLayout;
/**
* 钢琴布局的适配器
*/
private RhythmAdapter mRhythmAdapter;
/**
* 接收PullToRefreshViewPager中的ViewPager控件
*/
private ViewPager mViewPager;
/**
* 可以侧拉刷新的ViewPager，其实是一个LinearLayout控件
*/
private PullToRefreshViewPager mPullToRefreshViewPager;
/**
* ViewPager的适配器
*/
private CardPagerAdapter mPagerAdapter;
private ViewPager.OnPageChangeListener onPageChangeListener = new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
mRhythmLayout.showRhythmAtPosition(position);
}
@Override
public void onPageScrollStateChanged(int state) {
}
};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
init();
}
private void init() {
//实例化控件
mRhythmLayout = (RhythmLayout) findViewById(R.id.box_rhythm);
mPullToRefreshViewPager = (PullToRefreshViewPager) findViewById(R.id.pager);
//获取PullToRefreshViewPager中的ViewPager控件
mViewPager = mPullToRefreshViewPager.getRefreshableView();
//设置钢琴布局的高度 高度为钢琴布局item的宽度+10dp
int height = (int) mRhythmLayout.getRhythmItemWidth() + (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 10.0F, getResources().getDisplayMetrics());
mRhythmLayout.getLayoutParams().height = height;
((RelativeLayout.LayoutParams) this.mPullToRefreshViewPager.getLayoutParams()).bottomMargin = height;
List<Card> cardList = new ArrayList<Card>();
for (int i = 0; i < 30; i++) {
Card card = new Card();
cardList.add(card);
}
//设置ViewPager的适配器
mPagerAdapter = new CardPagerAdapter(getSupportFragmentManager(), cardList);
mViewPager.setAdapter(mPagerAdapter);
//设置钢琴布局的适配器
mRhythmAdapter = new RhythmAdapter(this, cardList);
mRhythmLayout.setAdapter(mRhythmAdapter);
//设置ViewPager的滚动速度
setViewPagerScrollSpeed(this.mViewPager, 400);
//设置控件的监听
mViewPager.setOnPageChangeListener(onPageChangeListener);
//设置ScrollView滚动动画延迟执行的时间
mRhythmLayout.setScrollRhythmStartDelayTime(400);
//初始化时将第一个键帽弹出
mRhythmLayout.showRhythmAtPosition(0);
}
/**
* 设置ViewPager的滚动速度，即每个选项卡的切换速度
* @param viewPager ViewPager控件
* @param speed 滚动速度，毫秒为单位
*/
private void setViewPagerScrollSpeed(ViewPager viewPager, int speed) {
try {
Field field = ViewPager.class.getDeclaredField("mScroller");
field.setAccessible(true);
ViewPagerScroller viewPagerScroller = new ViewPagerScroller(viewPager.getContext(), new OvershootInterpolator(0.6F));
field.set(viewPager, viewPagerScroller);
viewPagerScroller.setDuration(speed);
} catch (NoSuchFieldException e) {
e.printStackTrace();
} catch (IllegalAccessException e) {
e.printStackTrace();
}
}
}
值得注意的是第78行调用的setViewPagerScrollSpeed方法，这个方法的作用就是放缓ViewPager切换页的速度，否则太快的切换速度会出现不和谐的感觉,这个方法中使用的ViewPagerScroller的代码如下
public class ViewPagerScroller extends Scroller {
private int mDuration;
public ViewPagerScroller(Context context) {
super(context);
}
public ViewPagerScroller(Context context, Interpolator interpolator) {
super(context, interpolator);
}
public ViewPagerScroller(Context context, Interpolator interpolator, boolean flywheel) {
super(context, interpolator, flywheel);
}
public void setDuration(int duration) {
this.mDuration = duration;
}
public void startScroll(int startX, int startY, int dx, int dy) {
super.startScroll(startX, startY, dx, dy, this.mDuration);
}
}
运行后可以看到切换ViewPager的页卡时底部的钢琴控件就会执行相应的动画，已经将钢琴控件’绑’在了ViewPager上了，但是点击底部的钢琴控件，却并没有执行相应的动画效果，也就是说：可以通过ViewPager控制钢琴控件，但是不能通过钢琴控件控制ViewPager，想要实现这样的相互联系就需要我们在钢琴控件RhythmLayout中监听手指抬起的动作。创建一个抽象接口如下
public abstract interface IRhythmItemListener {
public abstract void onSelected(int position);
}
在RhythmLayout中添加这个监听的成员变量以及一个set方法,如下代码
/**
* 监听器，监听手指离开屏幕时的位置
*/
private IRhythmItemListener mListener;
/**
* 设置监听器
*/
public void setRhythmListener(IRhythmItemListener listener) {
mListener = listener;
}
监听手指抬起的动作只要把触发监听放在actionUp()方法中就可以了,修改actionUp()方法
/**
* 手指抬起时将其他钢琴按钮落下，重置到初始位置
*/
private void actionUp() {
mTimer.monitorTouchPosition(-1.0F, -1.0F);
if (mCurrentItemPosition < 0) {
return;
}
int firstPosition = getFirstVisibleItemPosition();
int lastPosition = firstPosition + mCurrentItemPosition;
final List viewList = getVisibleViews();
int size = viewList.size();
//将当前钢琴按钮从要落下的ViewList中删除
if (size > mCurrentItemPosition) {
viewList.remove(mCurrentItemPosition);
}
if (firstPosition - 1 >= 0) {
viewList.add(mLinearLayout.getChildAt(firstPosition - 1));
}
if (lastPosition + 1 <= mLinearLayout.getChildCount()) {
viewList.add(mLinearLayout.getChildAt(lastPosition + 1));
}
//200毫秒后执行动画
this.mHandler.postDelayed(new Runnable() {
public void run() {
for (int i = 0; i < viewList.size(); i++) {
View downView = (View) viewList.get(i);
shootDownItem(downView, true);
}
}
}, 200L);
//触发监听
if (mListener != null)
mListener.onSelected(lastPosition);
mCurrentItemPosition = -1;
//使设备震动
vibrate(20L);
}
在里仅仅是在33行和34行添加了2段代码，来触发监听，最后我们只要在MainActivity中调用setRhythmListener这个监听器就做好了,修改后的MainActivity如下
public class MainActivity extends FragmentActivity {
/**
* 钢琴布局
*/
private RhythmLayout mRhythmLayout;
/**
* 钢琴布局的适配器
*/
private RhythmAdapter mRhythmAdapter;
/**
* 接收PullToRefreshViewPager中的ViewPager控件
*/
private ViewPager mViewPager;
/**
* 可以侧拉刷新的ViewPager，其实是一个LinearLayout控件
*/
private PullToRefreshViewPager mPullToRefreshViewPager;
/**
* ViewPager的适配器
*/
private CardPagerAdapter mPagerAdapter;
private IRhythmItemListener iRhythmItemListener = new IRhythmItemListener() {
@Override
public void onSelected(final int position) {
new Handler().postDelayed(new Runnable() {
public void run() {
mViewPager.setCurrentItem(position);
}
}, 100L);
}
};
private ViewPager.OnPageChangeListener onPageChangeListener = new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
mRhythmLayout.showRhythmAtPosition(position);
}
@Override
public void onPageScrollStateChanged(int state) {
}
};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
init();
}
private void init() {
//实例化控件
mRhythmLayout = (RhythmLayout) findViewById(R.id.box_rhythm);
mPullToRefreshViewPager = (PullToRefreshViewPager) findViewById(R.id.pager);
//获取PullToRefreshViewPager中的ViewPager控件
mViewPager = mPullToRefreshViewPager.getRefreshableView();
//设置钢琴布局的高度 高度为钢琴布局item的宽度+10dp
int height = (int) mRhythmLayout.getRhythmItemWidth() + (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 10.0F, getResources().getDisplayMetrics());
mRhythmLayout.getLayoutParams().height = height;
((RelativeLayout.LayoutParams) this.mPullToRefreshViewPager.getLayoutParams()).bottomMargin = height;
List<Card> cardList = new ArrayList<Card>();
for (int i = 0; i < 30; i++) {
Card card = new Card();
cardList.add(card);
}
//设置ViewPager的适配器
mPagerAdapter = new CardPagerAdapter(getSupportFragmentManager(), cardList);
mViewPager.setAdapter(mPagerAdapter);
//设置钢琴布局的适配器
mRhythmAdapter = new RhythmAdapter(this, cardList);
mRhythmLayout.setAdapter(mRhythmAdapter);
//设置ViewPager的滚动速度
setViewPagerScrollSpeed(this.mViewPager, 400);
//设置控件的监听
mRhythmLayout.setRhythmListener(iRhythmItemListener);
mViewPager.setOnPageChangeListener(onPageChangeListener);
//设置ScrollView滚动动画延迟执行的时间
mRhythmLayout.setScrollRhythmStartDelayTime(400);
//初始化时将第一个键帽弹出
mRhythmLayout.showRhythmAtPosition(0);
}
/**
* 设置ViewPager的滚动速度，即每个选项卡的切换速度
* @param viewPager ViewPager控件
* @param speed 滚动速度，毫秒为单位
*/
private void setViewPagerScrollSpeed(ViewPager viewPager, int speed) {
try {
Field field = ViewPager.class.getDeclaredField("mScroller");
field.setAccessible(true);
ViewPagerScroller viewPagerScroller = new ViewPagerScroller(viewPager.getContext(), new OvershootInterpolator(0.6F));
field.set(viewPager, viewPagerScroller);
viewPagerScroller.setDuration(speed);
} catch (NoSuchFieldException e) {
e.printStackTrace();
} catch (IllegalAccessException e) {
e.printStackTrace();
}
}
}
运行后的效果如下
至此RhythmLayou这个自定义控件我们已经完成了，最后的任务就是背景颜色的转换
三、背景颜色的转换
因为每个选项卡的颜色都是不一样的所以我们需要在我们的数据源Card这个类中添加一个背景颜色的属性
public class Card implements Serializable {
private static final long serialVersionUID = -5376313495678563362L;
private int backgroundColor;
public int getBackgroundColor() {
return backgroundColor;
}
public void setBackgroundColor(int backgroundColor) {
this.backgroundColor = backgroundColor;
}
}
在MainActivity的init()方法的添加数据的for循环中设置不同的颜色
for (int i = 0; i < 30; i++) {
Card card = new Card();
//随机生成颜色值
card.setBackgroundColor((int) -(Math.random() * (16777216 - 1) + 1));
mCardList.add(card);
}
为了让背景颜色转换的更加和谐我们需要一个过渡动画在AnimationUtils中添加如下方法
/**
* 将View的背景颜色更改，使背景颜色转换更和谐的过渡动画
* @param view 要改变背景颜色的View
* @param preColor 上个颜色值
* @param currColor 当前颜色值
* @param duration 动画持续时间
*/
public static void showBackgroundColorAnimation(View view, int preColor, int currColor, int duration) {
ObjectAnimator objectAnimator = ObjectAnimator.ofInt(view, "backgroundColor", new int\[\]{preColor, currColor});
objectAnimator.setDuration(duration);
objectAnimator.setEvaluator(new ArgbEvaluator());
objectAnimator.start();
}
之后只要在初始化的时候设置背景颜色，然后在切换ViewPager的页卡时执行动画就ok了，修改后的MainActivity代码如下
public class MainActivity extends FragmentActivity {
/**
* 钢琴布局
*/
private RhythmLayout mRhythmLayout;
/**
* 钢琴布局的适配器
*/
private RhythmAdapter mRhythmAdapter;
/**
* 接收PullToRefreshViewPager中的ViewPager控件
*/
private ViewPager mViewPager;
/**
* 可以侧拉刷新的ViewPager，其实是一个LinearLayout控件
*/
private PullToRefreshViewPager mPullToRefreshViewPager;
/**
* ViewPager的适配器
*/
private CardPagerAdapter mPagerAdapter;
/**
* 最外层的View，为了设置背景颜色而使用
*/
private View mMainView;
private List<Card> mCardList;
/**
* 记录上一个选项卡的颜色值
*/
private int mPreColor;
private IRhythmItemListener iRhythmItemListener = new IRhythmItemListener() {
@Override
public void onSelected(final int position) {
new Handler().postDelayed(new Runnable() {
public void run() {
mViewPager.setCurrentItem(position);
}
}, 100L);
}
};
private ViewPager.OnPageChangeListener onPageChangeListener = new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
int currColor = mCardList.get(position).getBackgroundColor();
AnimatorUtils.showBackgroundColorAnimation(mMainView, mPreColor, currColor, 400);
mPreColor = currColor;
mMainView.setBackgroundColor(mCardList.get(position).getBackgroundColor());
mRhythmLayout.showRhythmAtPosition(position);
}
@Override
public void onPageScrollStateChanged(int state) {
}
};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
init();
}
private void init() {
//实例化控件
mMainView = findViewById(R.id.main_view);
mRhythmLayout = (RhythmLayout) findViewById(R.id.box_rhythm);
mPullToRefreshViewPager = (PullToRefreshViewPager) findViewById(R.id.pager);
//获取PullToRefreshViewPager中的ViewPager控件
mViewPager = mPullToRefreshViewPager.getRefreshableView();
//设置钢琴布局的高度 高度为钢琴布局item的宽度+10dp
int height = (int) mRhythmLayout.getRhythmItemWidth() + (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 10.0F, getResources().getDisplayMetrics());
mRhythmLayout.getLayoutParams().height = height;
((RelativeLayout.LayoutParams) this.mPullToRefreshViewPager.getLayoutParams()).bottomMargin = height;
mCardList = new ArrayList<Card>();
for (int i = 0; i < 30; i++) {
Card card = new Card();
//随机生成颜色值
card.setBackgroundColor((int) -(Math.random() * (16777216 - 1) + 1));
mCardList.add(card);
}
//设置ViewPager的适配器
mPagerAdapter = new CardPagerAdapter(getSupportFragmentManager(), mCardList);
mViewPager.setAdapter(mPagerAdapter);
//设置钢琴布局的适配器
mRhythmAdapter = new RhythmAdapter(this, mCardList);
mRhythmLayout.setAdapter(mRhythmAdapter);
//设置ViewPager的滚动速度
setViewPagerScrollSpeed(this.mViewPager, 400);
//设置控件的监听
mRhythmLayout.setRhythmListener(iRhythmItemListener);
mViewPager.setOnPageChangeListener(onPageChangeListener);
//设置ScrollView滚动动画延迟执行的时间
mRhythmLayout.setScrollRhythmStartDelayTime(400);
//初始化时将第一个键帽弹出,并设置背景颜色
mRhythmLayout.showRhythmAtPosition(0);
mPreColor = mCardList.get(0).getBackgroundColor();
mMainView.setBackgroundColor(mPreColor);
}
/**
* 设置ViewPager的滚动速度，即每个选项卡的切换速度
*
* @param viewPager ViewPager控件
* @param speed 滚动速度，毫秒为单位
*/
private void setViewPagerScrollSpeed(ViewPager viewPager, int speed) {
try {
Field field = ViewPager.class.getDeclaredField("mScroller");
field.setAccessible(true);
ViewPagerScroller viewPagerScroller = new ViewPagerScroller(viewPager.getContext(), new OvershootInterpolator(0.6F));
field.set(viewPager, viewPagerScroller);
viewPagerScroller.setDuration(speed);
} catch (NoSuchFieldException e) {
e.printStackTrace();
} catch (IllegalAccessException e) {
e.printStackTrace();
}
}
}
到此已经基本仿照了最美应用的界面了,最后运行后的效果如下
