仿今日头条视频播放页（使用BottomSheetDialogFragment）

仿今日头条视频播放页，实现效果如下图：

可以拖动使之消失，也可以点击空白处使之消失，是不是很有趣呢？

第一次看到这种效果的时候，我直接蒙蔽了，这样要是用自定义ViewGroup来实现的话需要考虑一堆问题，然而，“上帝给我们关上一扇门的时候，一定为我们开了一扇窗！”，经过查阅大量的资料，发现在Google提供的Design包中有现成的可以实现相应效果的控件：

BottomSheetDialogFragment

学习BottomSheetDialog 点击链接会有一个完整的例子哦，感谢作者的开源精神！

下面来看我的实现方式：

首先看下布局：

<?xml version="1.0" encoding="utf-8"?><LinearLayout    xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical"    tools:context="com.marsjiang.myflipperbottomdialog.MainActivity">    <TextView        android:layout_width="match_parent"        android:layout_height="0dp"        android:layout_gravity="center"        android:layout_weight="1"        android:gravity="center"        android:text="别笑，我真的是视频">    </TextView>    <View        android:layout_width="match_parent"        android:layout_height="2dp"        android:background="@color/colorPrimaryDark"/>    <LinearLayout        android:id="@+id/ll_bottom"        android:layout_width="match_parent"        android:layout_height="0dp"        android:layout_gravity="center"        android:layout_weight="2"        android:gravity="center">        <Button            android:id="@+id/btn_comment"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="我是某一条评论"/>    </LinearLayout></LinearLayout>

布局其实没啥好说的，只是我在会织布局的时候使用的是权重，以适应各种分辨率的屏幕。

接下来看核心类：

BottomSheetFragment

public class BottomSheetFragment extends BottomSheetDialogFragment {}

继承了咱们的 BottomSheetDialogFragment，主要的目的就是方便我们的进一步封装，哈哈!

这个类找不到？？？

是因为你的打开姿势不对呢！引入库：

compile 'com.android.support:design:25.2.0'

这样就可以找到了，下面我们继续来写代码：

构造方法如下，这里传进来底部先行布局的原因是，通过计算底部控件的高度，从未来设定底部BottomSheetDialogFragemnt的高度：

    public static BottomSheetFragment getInstance(Context context, LinearLayout ll_bottom) {        mContext = context;        mll_bottom = ll_bottom;        BottomSheetFragment fragment = new BottomSheetFragment();        return fragment;    }

设定高度的代码如下：

    @Nullable    @Override    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {        View ll_bottom_sheet_layout = inflater.inflate(R.layout.fragment_bottom_sheet, container, false);        //设定弹出评论区域高度        ll_bottom_sheet = (CoordinatorLayout) ll_bottom_sheet_layout.findViewById(R.id.ll_bottom_sheet);        ll_bottom_sheet.setLayoutParams(new CoordinatorLayout.LayoutParams(mll_bottom.getWidth(), mll_bottom.getHeight()));//        mBehavior = BottomSheetBehavior.from(ll_bottom_sheet);//        mBehavior.setPeekHeight(mll_bottom.getHeight());        return ll_bottom_sheet_layout;    }

这样基本上就可以啦，剩下的代码就很简单了，我直接贴出来：

package com.marsjiang.myflipperbottomdialog.bottomsheet;import android.content.Context;import android.os.Bundle;import android.support.annotation.Nullable;import android.support.design.widget.BottomSheetBehavior;import android.support.design.widget.BottomSheetDialogFragment;import android.support.design.widget.CoordinatorLayout;import android.support.v7.widget.LinearLayoutManager;import android.support.v7.widget.RecyclerView;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.LinearLayout;import android.widget.TextView;import com.marsjiang.myflipperbottomdialog.R;/** * BottomSheetFragment * Created by Jiang on 2016/9/28. */public class BottomSheetFragment extends BottomSheetDialogFragment {    private CoordinatorLayout ll_bottom_sheet;    private static Context mContext;    private static LinearLayout mll_bottom;    private BottomSheetBehavior mBehavior;    public static BottomSheetFragment getInstance(Context context, LinearLayout ll_bottom) {        mContext = context;        mll_bottom = ll_bottom;        BottomSheetFragment fragment = new BottomSheetFragment();        return fragment;    }    @Nullable    @Override    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {        View ll_bottom_sheet_layout = inflater.inflate(R.layout.fragment_bottom_sheet, container, false);        //设定弹出评论区域高度        ll_bottom_sheet = (CoordinatorLayout) ll_bottom_sheet_layout.findViewById(R.id.ll_bottom_sheet);        int a = mll_bottom.getWidth();        int da = mll_bottom.getHeight();        ll_bottom_sheet.setLayoutParams(new CoordinatorLayout.LayoutParams(mll_bottom.getWidth(), mll_bottom.getHeight()));//        mBehavior = BottomSheetBehavior.from(ll_bottom_sheet);//        mBehavior.setPeekHeight(mll_bottom.getHeight());        return ll_bottom_sheet_layout;    }    @Override    public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {        super.onViewCreated(view, savedInstanceState);        RecyclerView mRecyclerView = (RecyclerView) view.findViewById(R.id.rv_test);        new ListAdapter(mRecyclerView);    }    private final class ListAdapter extends RecyclerView.Adapter<ListAdapter.ViewHolder> {        public ListAdapter(RecyclerView recyclerView) {            recyclerView.setLayoutManager(new LinearLayoutManager(getActivity()));            recyclerView.setAdapter(this);        }        @Override        public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {            return new ViewHolder(LayoutInflater.from(getActivity()).inflate(R.layout.item_bottom, parent, false));        }        @Override        public void onBindViewHolder(ViewHolder holder, int position) {            holder.textView.setText("item" + (++position));        }        @Override        public int getItemCount() {            return 20;        }        class ViewHolder extends RecyclerView.ViewHolder {            public final TextView textView;            public ViewHolder(View itemView) {                super(itemView);                textView = (TextView) itemView.findViewById(R.id.textview);            }        }    }}

MainActivity中的战士代码如下，封装好了之后仅仅只需要两行代码就可以实现啦！

public class MainActivity extends FragmentActivity {    private Button btn_comment;    private LinearLayout ll_bottom;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        btn_comment = (Button) findViewById(R.id.btn_comment);        ll_bottom = (LinearLayout) findViewById(R.id.ll_bottom);        btn_comment.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                BottomSheetFragment bottomSheetFragment = BottomSheetFragment.getInstance(MainActivity.this,ll_bottom);                bottomSheetFragment.show(getSupportFragmentManager(), BottomSheetFragment.class.getSimpleName());            }        });    }}

源码如下：

MyFlipperBottomDialog