仿今日头条视频播放页,实现效果如下图:
可以拖动使之消失,也可以点击空白处使之消失,是不是很有趣呢?
第一次看到这种效果的时候,我直接蒙蔽了,这样要是用自定义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());
}
});
}
}
源码如下: