前言
最近公司在做個(gè)短視頻的項(xiàng)目酥馍，其中借鑒了很多抖音的設(shè)計(jì)，其中就有抖音的上下滑切換視頻。
- 【Android 進(jìn)階】仿抖音系列之翻頁(yè)上下滑切換視頻（一）
- 【Android 進(jìn)階】仿抖音系列之列表播放視頻（二）
- 【Android 進(jìn)階】仿抖音系列之列表播放視頻（三）
- 【Android 進(jìn)階】仿抖音系列之翻頁(yè)上下滑切換視頻（四）
- 【Android 進(jìn)階】仿抖音系列之視頻預(yù)覽和錄制（五）
思路
- ViewPager
這里用重寫了ViewPager的onInterceptTouchEvent和onTouchEvent方法周崭，使其可以上下滑動(dòng)切換視圖。
代碼如下：
/**
* 作者： ch
* 時(shí)間： 2018/7/30 0030-下午 2:53
* 描述：
* 來(lái)源：
*/
public class VerticalViewPager extends ViewPager {
private boolean isVertical = false;
public VerticalViewPager(@NonNull Context context) {
super(context);
}
public VerticalViewPager(@NonNull Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
}
private void init() {
// The majority of the magic happens here
setPageTransformer(true, new HorizontalVerticalPageTransformer());
// The easiest way to get rid of the over scroll drawing that happens on the left and right
setOverScrollMode(OVER_SCROLL_NEVER);
}
public boolean isVertical() {
return isVertical;
}
public void setVertical(boolean vertical) {
isVertical = vertical;
init();
}
private class HorizontalVerticalPageTransformer implements PageTransformer {
private static final float MIN_SCALE = 0.75f;
@Override
public void transformPage(View page, float position) {
if (isVertical) {
if (position < -1) {
page.setAlpha(0);
} else if (position <= 1) {
page.setAlpha(1);
// Counteract the default slide transition
float xPosition = page.getWidth() * -position;
page.setTranslationX(xPosition);
//set Y position to swipe in from top
float yPosition = position * page.getHeight();
page.setTranslationY(yPosition);
} else {
page.setAlpha(0);
}
} else {
int pageWidth = page.getWidth();
if (position < -1) { // [-Infinity,-1)
// This page is way off-screen to the left.
page.setAlpha(0);
} else if (position <= 0) { // [-1,0]
// Use the default slide transition when moving to the left page
page.setAlpha(1);
page.setTranslationX(0);
page.setScaleX(1);
page.setScaleY(1);
} else if (position <= 1) { // (0,1]
// Fade the page out.
page.setAlpha(1 - position);
// Counteract the default slide transition
page.setTranslationX(pageWidth * -position);
page.setTranslationY(0);
// Scale the page down (between MIN_SCALE and 1)
float scaleFactor = MIN_SCALE
+ (1 - MIN_SCALE) * (1 - Math.abs(position));
page.setScaleX(scaleFactor);
page.setScaleY(scaleFactor);
} else { // (1,+Infinity]
// This page is way off-screen to the right.
page.setAlpha(0);
}
}
}
}
/**
* Swaps the X and Y coordinates of your touch event.
*/
private MotionEvent swapXY(MotionEvent ev) {
float width = getWidth();
float height = getHeight();
float newX = (ev.getY() / height) * width;
float newY = (ev.getX() / width) * height;
ev.setLocation(newX, newY);
return ev;
}
@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
if (isVertical) {
boolean intercepted = super.onInterceptTouchEvent(swapXY(ev));
swapXY(ev); // return touch coordinates to original reference frame for any child views
return intercepted;
} else {
return super.onInterceptTouchEvent(ev);
}
}
@Override
public boolean onTouchEvent(MotionEvent ev) {
if (isVertical) {
return super.onTouchEvent(swapXY(ev));
} else {
return super.onTouchEvent(ev);
}
}
}
在上下滑的時(shí)候喳张，不可見(jiàn)時(shí)续镇，要暫停視頻，可見(jiàn)時(shí)重新播放销部，這里使用的是fragment磨取，通過(guò)其生命周期來(lái)控制視頻的播放與暫停。
private void initView() {
VerticalViewPagerAdapter pagerAdapter = new VerticalViewPagerAdapter(getSupportFragmentManager());
vvpBackPlay.setVertical(true);
//設(shè)置viewpager 緩存數(shù)柴墩，可以根據(jù)需要調(diào)整
vvpBackPlay.setOffscreenPageLimit(10);
pagerAdapter.setUrlList(urlList);
vvpBackPlay.setAdapter(pagerAdapter);
}
public class VerticalViewPagerAdapter extends PagerAdapter {
private FragmentManager fragmentManager;
private FragmentTransaction mCurTransaction;
private Fragment mCurrentPrimaryItem = null;
private List<String> urlList;
public void setUrlList(List<String> urlList) {
this.urlList = urlList;
}
public VerticalViewPagerAdapter(FragmentManager fm) {
this.fragmentManager = fm;
}
@Override
public int getCount() {
return Integer.MAX_VALUE;
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
if (mCurTransaction == null) {
mCurTransaction = fragmentManager.beginTransaction();
}
VideoFragment fragment = new VideoFragment();
if (urlList != null && urlList.size() > 0) {
Bundle bundle = new Bundle();
if (position >= urlList.size()) {
bundle.putString(VideoFragment.URL, urlList.get(position % urlList.size()));
} else {
bundle.putString(VideoFragment.URL, urlList.get(position));
}
fragment.setArguments(bundle);
}
mCurTransaction.add(container.getId(), fragment,
makeFragmentName(container.getId(), position));
fragment.setUserVisibleHint(false);
return fragment;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
if (mCurTransaction == null) {
mCurTransaction = fragmentManager.beginTransaction();
}
mCurTransaction.detach((Fragment) object);
mCurTransaction.remove((Fragment) object);
}
@Override
public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {
return ((Fragment) object).getView() == view;
}
private String makeFragmentName(int viewId, int position) {
return "android:switcher:" + viewId + position;
}
@Override
public void setPrimaryItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
Fragment fragment = (Fragment) object;
if (fragment != mCurrentPrimaryItem) {
if (mCurrentPrimaryItem != null) {
mCurrentPrimaryItem.setMenuVisibility(false);
mCurrentPrimaryItem.setUserVisibleHint(false);
}
if (fragment != null) {
fragment.setMenuVisibility(true);
fragment.setUserVisibleHint(true);
}
mCurrentPrimaryItem = fragment;
}
}
@Override
public void finishUpdate(ViewGroup container) {
if (mCurTransaction != null) {
mCurTransaction.commitNowAllowingStateLoss();
mCurTransaction = null;
}
}
}
通過(guò)setUserVisibleHint忙厌、onResume、onPause江咳、onDestroy 4個(gè)方法處理視頻的播放逢净、暫停、重新播放歼指、銷毀邏輯
tip: 這里使用的是 JiaoZiVideoPlayer ,可以替換成其他播放器爹土。
public class VideoFragment extends BaseFragment {
@BindView(R.id.txv_video)
MyVideoPlayer txvVideo;
@BindView(R.id.rl_back_right)
RelativeLayout rlBackRight;
@BindView(R.id.dl_back_play)
DrawerLayout dlBackPlay;
private String url;
public static final String URL = "URL";
@Override
protected int getLayoutId() {
return R.layout.fm_video;
}
@Override
protected void initView() {
url = getArguments().getString(URL);
Glide.with(context)
.load(url)
.into(txvVideo.thumbImageView);
txvVideo.rl_touch_help.setVisibility(View.GONE);
txvVideo.setUp(url, url);
}
@Override
protected void loadData() {
txvVideo.startVideo();
}
@Override
public void setUserVisibleHint(boolean isVisibleToUser) {
super.setUserVisibleHint(isVisibleToUser);
if (txvVideo == null) {
return;
}
if (isVisibleToUser) {
txvVideo.goOnPlayOnResume();
} else {
txvVideo.goOnPlayOnPause();
}
}
@Override
public void onResume() {
super.onResume();
if (txvVideo != null) {
txvVideo.goOnPlayOnResume();
}
}
@Override
public void onPause() {
super.onPause();
if (txvVideo != null) {
txvVideo.goOnPlayOnPause();
}
}
@Override
public void onDestroy() {
super.onDestroy();
if (txvVideo != null) {
txvVideo.releaseAllVideos();
}
}
}
缺陷
自定義的ViewPager滑動(dòng)不太順滑，推薦使用 VerticalViewPager
- RecyclerView + PagerSnapHelper
詳情請(qǐng)移步另外一篇博客
【Android 進(jìn)階】仿抖音系列之翻頁(yè)上下滑切換視頻（四）
問(wèn)題
- 1.如果要實(shí)現(xiàn)抖音那種可以無(wú)限上滑的踩身，可以在
ViewPager的onPageSelected中判斷position
mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
if (position == list.size() - 2) {
//倒數(shù)第2個(gè) 加載數(shù)據(jù)
page++;
addData();
}
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
- 2.關(guān)于在大屏手機(jī)上滑動(dòng)不靈敏的問(wèn)題胀茵，可以嘗試將
MIN_SCALE設(shè)置為0.5，或者更低挟阻。 - 3.建議使用RecyclerView + PagerSnapHelper來(lái)實(shí)現(xiàn)琼娘。
