Cool Android interactive animation and visual effects: High imitation of the Yinyuetai playback page

The new version of the Yin Yue Tai APP has a very interesting interactive playback page. You can drag the player down, and the page will become transparent and gradient. Then you can drag it left or right to close the player at the bottom. Then click on the video list and a page will pop up. It's very cool, so I implemented this interactive and cool player page by myself.

[[181643]]

1. Without further ado, let’s demonstrate the effect

1.1. Click on a video, then drag your finger up and down, the player will change its size ratio gradually, and the video-related information will change its transparency gradually

1.2. The player can only be dragged left and right when it is at the bottom. At this time, the player has a gradual transparency change. Dragging within a certain range can close the player; then it can only be dragged upward within a short distance of the original position.

1.3. When you click on the video list, if the last video was closed by dragging left or right, there will be a pop-up play page effect; if it is the back key or the back arrow, there will be no effect

2. Explanation of the implementation ideas

Undoubtedly, you need to customize a container, handle its touch events, and handle its child Views differently. Touch event handling is best done with ViewDragHelper, and then you need to implement the container onMeasure and onLayout. Due to the use of ViewDragHelper, some pitfalls will be explained during code analysis.

The playback page is a question of whether to use a new Activity or just the View of the current Activity. Since the user can slide the video list when the player is reduced to the bottom, I personally think that you can just place a custom container in the current Activity. Therefore, for efficiency considerations, you can use ViewStub for lazy loading. For the convenience of demonstration here, I will directly use the View format.

3. Code analysis

3.1. Required variables

3.2. Initialize ViewDragHelper, then post to get two child Views. It is mandatory to have only two child elements here.

3.3. ViewDragHelper callback needs to do a lot of things. When mFlexView is dragged, the corresponding change effects of mFlexView and mFollowView need to be set at the same time. When mFlexView is released, the closing or folding effects need to be processed.

3.4. Next is to deal with measurement and positioning. The arrangement effect we achieved is similar to the vertical arrangement effect of LinearLayout. Here, the heightUse of measureChildWithMargins is a problem. When onLayout is called and the position cache is not empty, it is directly positioned because ViewDragHelper is processing touch events and the child elements are doing some translation. If an element updates the UI, it will cause a re-layout. For example, my player will do this when updating the time TextView. Therefore, the position is recorded in the onViewPositionChanged method of FlexCallback, and the position can be restored when re-layout. This has also been a pit for a long time.

3.5. Touch event processing. Since scaling will not affect the real width and height of mFlexView, ViewDragHelper will still block the real width and height of mFlexView. Therefore, it is necessary to determine whether the finger falls within the visual range of mFlexView before calling the shouldInterceptTouchEvent method of ViewDragHelper.

3.6. In computeScroll, if mIsClosing is true, the entire translation is closed and the callback event is notified

3.7. The container is implemented. Next, we inherit YytLayout to implement the combined control of the player page, and then encapsulate some common methods. Here we use the famous Ijkplayer to implement the player, shielding the touch events of IjkVideoView and handling them by ourselves; by the way, in order to achieve the effect of the player Controller following the drag and zoom, the commonly used PopupWindow implementation idea is abandoned. IjkController is directly added to IjkVideoView, otherwise it is too troublesome to implement the pop-up window following the player

 /**
 * Created by Oubowu on 2016/12/27 17:32.<p>
 * Specific implementation of the playback page of the imitation music platform, in the form of combined controls
 */
 public class YytPlayer extends YytLayout {
    private IjkController mIjkController;
    private IjkVideoView mIjkVideoView;
    private ImageView mIvAvatar;
 private TextView mTvName;
 private TextView mTvTime;
    private TextView mTvTitle;
 private TextView mTvDesc;
    private RecyclerView mYytRecyclerView;
    private VideoListAdapter mVideoListAdapter;
 public YytPlayer(Context context, AttributeSet attrs) {
        super(context, attrs);
 init(context, attrs);
 }
    private void init(Context context, AttributeSet attrs) {
 // Inherit YytLayout and reduce the level through the merge tag to realize the combination of controls
        LayoutInflater. from (context).inflate(R.layout.yyt_player, this, true );
        setOnLayoutStateListener(new OnLayoutStateListener() {
 @Override
 public void onClose() {
                setVisibility( View .INVISIBLE);
                mIjkVideoView.release( true );
 }
 });
        mIjkVideoView = (IjkVideoView) findViewById(R.id.ijk_player_view);
        final int scaledTouchSlop = ViewConfiguration.get(getContext()).getScaledTouchSlop();
        mIjkVideoView.setOnTouchListener(new OnTouchListener() {
 float mDownX = 0;
 float mDownY = 0;
            boolean mClickCancel;
 @Override
 public boolean onTouch( View v, MotionEvent event) {
 float x = event.getX();
 float y = event.getY();
                switch (event.getAction()) {
 case MotionEvent.ACTION_DOWN:
                        mDownX = x;
                        mDownY = y;
                        break;
 case MotionEvent.ACTION_MOVE:
                        if (Math. abs (mDownX - x) > scaledTouchSlop || Math. abs (mDownY - y) > scaledTouchSlop) {
                            mClickCancel = true ;
 }
                        break;
 case MotionEvent.ACTION_UP:
                        if (!mClickCancel && Math. abs (mDownX - x) <= scaledTouchSlop && Math. abs (mDownY - y) <= scaledTouchSlop) {
 // Click events occasionally fail, so I have to solve it myself here
                            if (isHorizontalDragEnable()) {
                                expand();
                            } else {
                                mIjkVideoView.toggleMediaControlsVisibility();
 }
 }
                        mClickCancel = false ;
                        break;
 case MotionEvent.ACTION_CANCEL:
                        mClickCancel = false ;
                        break;
 }
 return   true ;
 }
 });
        mIvAvatar = (ImageView) findViewById(R.id.iv_avatar);
        mTvName = (TextView) findViewById(R.id.tv_name);
        mTvTime = (TextView) findViewById(R.id.tv_time);
        mTvTitle = (TextView) findViewById(R.id.tv_title);
        mTvDesc = (TextView) findViewById(R.id.tv_desc);
        mVideoListAdapter = new VideoListAdapter();
        mVideoListAdapter.setOnItemClickCallback(new OnItemClickCallback() {
 @Override
 public void onClick( View   view , int position) {
 int pos = ( Integer ) view .getTag();
                VideoSummary summary = mVideoListAdapter.getData().get(pos);
                playVideo(mVideoListAdapter.getData(), summary);
 }
 });
        mYytRecyclerView = (RecyclerView) findViewById(R.id.yyt_recycler_view);
        GridLayoutManager gridLayoutManager = new GridLayoutManager(context, 2, LinearLayoutManager.VERTICAL, false );
        mYytRecyclerView.setLayoutManager(gridLayoutManager);
        mYytRecyclerView.setNestedScrollingEnabled( false );
        mYytRecyclerView.addItemDecoration(new VideoListItemDecoration(context));
        mYytRecyclerView.setAdapter(mVideoListAdapter);
 }
 // Play the video
    private void playVideo(String path, String name ) {
 try {
            if (mIjkController == null ) {
                IjkMediaPlayer.loadLibrariesOnce( null );
                IjkMediaPlayer.native_profileBegin( "libijkplayer.so" );
                mIjkController = new IjkController(mIjkVideoView, name );
                mIjkController.setOnViewStateListener(new IjkController.OnViewStateListener() {
 @Override
 public void onBackPress() {
                        stop();
 }
 });
                mIjkVideoView.setMediaController(mIjkController);
                mIjkVideoView.setOnPreparedListener(new IMediaPlayer.OnPreparedListener() {
 @Override
 public void onPrepared(IMediaPlayer mp) {
                        mIjkVideoView.start();
 }
 });
                mIjkVideoView.setOnErrorListener(new IMediaPlayer.OnErrorListener() {
 @Override
 public boolean onError(IMediaPlayer mp, int what, int extra) {
 Toast.makeText(getContext(), "Video playback error ╮(╯Д╰)╭" , Toast.LENGTH_SHORT).show();
 return   true ;
 }
 });
 } else {
 // Reset the video name
                mIjkController.setVideoName( name );
 }
 // Set the TextureView player to scale normally
            mIjkVideoView.setRender(IjkVideoView.RENDER_TEXTURE_VIEW);
 // Because each setRender will remove the view and add it again, in order to achieve the zoom effect, the controller is added to IjkVideoView, so it must be added again here to be on the top of IjkVideoView
            mIjkController.updateControlView();
 // Display the loading bar
            mIjkController.showProgress();
 // Play the video
            mIjkVideoView.setVideoURI(Uri.parse(path));
        } catch (UnsatisfiedLinkError e) {
            e.printStackTrace();
 Toast.makeText(getContext(), "Your CPU is" + Build.CPU_ABI + ", the compiled version used by the current player" + BuildConfig.FLAVOR + "Does not match!" , Toast.LENGTH_LONG).show();
 }
 }
 /**
 * Display the layout and play the video
 *
 * @param data video list, used for the list layout below the playback page
 * @param summary Playing video information
 */
 public void playVideo(List<VideoSummary> data, VideoSummary summary) {
 // Get the data and set the relevant information to the playback layout
        Glide. with (getContext()). load (summary.mTopicImg).transform(new GlideCircleTransform(getContext())). into (mIvAvatar);
        mTvName.setText(summary.mTopicName);
        mTvTime.setText(summary.mPtime);
        mTvTitle.setText(Html.fromHtml(summary.mTitle));
        if (summary.mDescription.isEmpty()) {
            mTvDesc.setText(summary.mTopicDesc);
 } else {
            mTvDesc.setText(Html.fromHtml(summary.mDescription));
 }
 // Set YytLayout to be visible and expand
        setVisibility( View .VISIBLE);
 expand();
        mVideoListAdapter.setData(data);
        mVideoListAdapter.setItemWidth(mYytRecyclerView.getWidth() / 2);
        mVideoListAdapter.notifyDataSetChanged();
 // Play the video
        playVideo(summary.mMp4HdUrl == null ? summary.mMp4Url : summary.mMp4HdUrl, summary.mTitle);
 }
 // Start playing
 public void start() {
        if (mIjkVideoView != null && !mIjkVideoView.isPlaying()) {
            mIjkVideoView.start();
 }
 }
 // Pause playback
 public void pause() {
        if (mIjkVideoView != null && mIjkVideoView.isPlaying()) {
            mIjkVideoView.pause();
 }
 }
 // Stop playing
 public void stop() {
        setVisibility( View .INVISIBLE);
        if (mIjkVideoView != null ) {
            mIjkVideoView.release( true );
 }
 }
 public boolean isShowing() {
 return getVisibility() == VISIBLE;
 }
 }

4. Summary

It's not difficult, but it requires imagination to pay attention to the details. You may want to use your imagination when you see the interesting interactions. Next, you may want to realize the effect of UC browser player, which is also very interesting.