仿今日头条视频播放页（使用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

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

猜你喜欢