Youtubeアプリの動画部分をスワイプで移動させるUIを作ってみた【Android】
AndroidのYoutubeアプリの動画を見ながら別の動画を探せるUIがとても良いなーと思っていたので似たようなUIを作ってみた。
完成形はこんな感じ。
実装
既存のYoutubeアプリでは動画をリストで表示して項目をタップすると動画の再生画面へ遷移しています。再生中の動画は下にスワイプすることで動画を画面に残しつつ他の動画のリストを表示できるUIになっていると思います。
今回は「動画を画面に残しつつ他の動画のリストを表示できるUI」の部分を作りました。
具体的には動画のリストを表示するフラグメントに動画再生用のフラグメントを重ね動画がスワイプされると再生用のフラグメントのコンテンツ部分（動画とその詳細）を下に移動させて動画部分のみ残し裏のフラグメントを見えるように実装にしました。
・Activity
ActivityのonCreateで2つのフラグメントを重ねています。
SubFragmentがyoutubeアプリでいう動画再生部分でMainFragmentがその裏にあるリストを表示するフラグメントです。
@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); if (savedInstanceState == null) { getSupportFragmentManager() .beginTransaction() .add(R.id.fragment_container, MainFragment.newInstance()) .add(R.id.fragment_container, SubFragment.newInstance()) .commit(); } }
・SubFragmentのレイアウト
idがcontentのViewを移動させ裏のMainFragmentのレイアウトを可視させます。
このViewには動画とその詳細を表示するViewがのっています。
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/parent" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/black"> <RelativeLayout android:id="@+id/content" android:layout_width="match_parent" android:layout_height="match_parent"> <RelativeLayout android:id="@+id/movie" android:layout_width="match_parent" android:layout_height="250dp" android:background="@color/black"> <TextView android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:text="Movie" android:textColor="@color/white" android:textSize="35sp" /> </RelativeLayout> <LinearLayout android:id="@+id/body" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_below="@+id/movie" android:background="@color/white" android:orientation="vertical"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:padding="16dp" android:text="@string/title" android:textSize="25sp" /> <TextView android:layout_width="match_parent" android:layout_height="match_parent" android:padding="16dp" android:text="@string/body" android:textSize="14sp" /> </LinearLayout> </RelativeLayout> </RelativeLayout>
・SubFragment.java
実際に動画部分を下にスワイプで移動させる処理を含んだフラグメントです。
動画と詳細部分の移動、動画部分のスケール、背景の透過処理を実装しています。
mContentにタッチリスナーをセットしてタッチされるとViewを移動させています。
また、移動量に応じてスケールや透過を行っています。
移動中に画面からタップが離れた場合は上下近い方にアニメーションで移動させています。
public class SubFragment extends Fragment implements View.OnTouchListener { private static final float TO_SCALE = 0.5f; private static final int MOVIE_MARGIN = 20; private View mParent; private View mContent; private View mMovie; private View mBody; private float mMaxTranslationY; private float mPreTouchY; public static SubFragment newInstance() { return new SubFragment(); } @Nullable @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { return inflater.inflate(R.layout.fragment_sub, container, false); } @Override public void onViewCreated(View view, @Nullable Bundle savedInstanceState) { super.onViewCreated(view, savedInstanceState); mParent = view.findViewById(R.id.parent); mContent = view.findViewById(R.id.content); mMovie = view.findViewById(R.id.movie); mMovie.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() { @Override public void onGlobalLayout() { if (Build.VERSION.SDK_INT >= 16) { mMovie.getViewTreeObserver().removeOnGlobalLayoutListener(this); } else { mMovie.getViewTreeObserver().removeGlobalOnLayoutListener(this); } float width = mMovie.getWidth(); float height = mMovie.getHeight(); mMovie.setPivotX(width - MOVIE_MARGIN); mMovie.setPivotY(height - MOVIE_MARGIN); float winHeight = SysUtils.getWindowSize(getActivity()).y; float beginY = ViewUtils.getScreenY(mMovie); float endY = winHeight - height; mMaxTranslationY = endY - beginY; } }); mMovie.setOnTouchListener(this); mBody = view.findViewById(R.id.body); } @Override public boolean onTouch(View v, MotionEvent event) { switch (event.getAction()) { case MotionEvent.ACTION_DOWN: mPreTouchY = event.getRawY(); break; case MotionEvent.ACTION_MOVE: float diff = event.getRawY() - mPreTouchY; mPreTouchY = event.getRawY(); // 移動 float nextTranslationY = MathUtils.clamp(mContent.getTranslationY() + diff, 0, mMaxTranslationY); mContent.setTranslationY(nextTranslationY); // スケール float scale = 1.0f - TO_SCALE * (nextTranslationY / mMaxTranslationY); ViewUtils.setScale(mMovie, scale); // 透過 final float alpha = 1.0f - (nextTranslationY / mMaxTranslationY); int color = (int) (0xFF * alpha) << 24 | getResources().getColor(R.color.black) & 0xFFFFFF; mBody.setAlpha(alpha); mParent.setBackgroundColor(color); break; case MotionEvent.ACTION_UP: float destY = 0; float destScale = 1.0f; float destAlpha = 1.0f; if ((mMaxTranslationY - mContent.getTranslationY()) < mContent.getTranslationY()) { destY = mMaxTranslationY; destScale = TO_SCALE; destAlpha = 0; } ObjectAnimator moveAnim = ObjectAnimator.ofFloat(mContent, "translationY", mContent.getTranslationY(),destY); ObjectAnimator scaleXAnim = ObjectAnimator.ofFloat(mMovie, "scaleX", mMovie.getScaleX(), destScale); ObjectAnimator scaleYAnim = ObjectAnimator.ofFloat(mMovie, "scaleY", mMovie.getScaleY(), destScale); ValueAnimator alphaAnim = ValueAnimator.ofFloat(mBody.getAlpha(), destAlpha); alphaAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { float val = (float)animation.getAnimatedValue(); int color = (int) (0xFF * val) << 24 | getResources().getColor(R.color.black) & 0xFFFFFF; mBody.setAlpha(val); mParent.setBackgroundColor(color); } }); AnimatorSet anim = new AnimatorSet(); anim.play(moveAnim).with(scaleXAnim).with(scaleYAnim).with(alphaAnim); anim.setDuration(200); anim.start(); break; case MotionEvent.ACTION_CANCEL: break; default: break; } return true; } }
すべてのソースはGithubへ。
