Material Design學習之 Bottom Sheets (順便提提CoordinatorLayout)
來自： http://android.jobbole.com/82560/
昨天連續上了2篇介紹第三方庫的文章，正直好久沒提交自己寫東西了，那么就補一篇之前MD系列漏的部分 Bottom Sheets
Bottom Sheets–底部動作條
底部動作條(Bottom Sheets)是一個從屏幕底部邊緣向上滑出的一個面板，使用這種方式向用戶呈現一組功能。底部動作條呈現了簡單、清晰、無需額外解釋的一組操作。
在一個標準的列表樣式的底部動作條(Bottom Sheets)中，每一個操作應該有一句描述和一個左對齊的 icon。如果需要的話，也可以使用分隔符對這些操作進行邏輯分組，也可以為分組添加標題或者副標題。
像這樣：
請記得遵循MD嚴謹的設計規則，統一編劇，字體等尺寸規范，像這樣
上面那種是類似于ListView的呈現，要變成類似于GridView的樣子也行，像這樣
原文地址： http://www.google.com/design/spec/components/bottom-sheets.html
CoordinatorLayout（不知道怎么稱呼，淚目。。）
CoordinatorLayout實現了多種Material Design中提到的滾動效果(傳送門： http://www.google.com/design/spec/patterns/scrolling-techniques.html )
打不開的話我就簡單描述下，就是手勢上下滑動的一些操作，像這樣
只要使用CoordinatorLayout作為基本布局，將自動產生向上移動的動畫。
也就是這樣
Java
android.support.design.widget.CoordinatorLayout xmlns:android="RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content"> Button android:id="@+id/byRecycleView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:background="#c2cc" android:text="RecycleView方式" android:textColor="@android:color/white" /> RelativeLayout> ImageView android:src="@drawable/flash" android:id="@+id/fillView" android:layout_width="match_parent" android:layout_height="match_parent">ImageView> android.support.v7.widget.RecyclerView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/recyclerview" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#fff" app:behavior_hideable="false" app:behavior_peekHeight="10dp" app:layout_behavior="@string/bottom_sheet_behavior" />android.support.design.widget.CoordinatorLayout></pre>
android.support.design.widget.CoordinatorLayoutxmlns: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:fitsSystemWindows="true" tools:context="sample.wjj.materialdesignbottomsheets.MainActivity"> RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content"> Button android:id="@+id/byRecycleView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:background="#c2cc" android:text="RecycleView方式" android:textColor="@android:color/white" /> RelativeLayout> ImageView android:src="@drawable/flash" android:id="@+id/fillView" android:layout_width="match_parent" android:layout_height="match_parent">ImageView> android.support.v7.widget.RecyclerViewxmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/recyclerview" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#fff" app:behavior_hideable="false" app:behavior_peekHeight="10dp" app:layout_behavior="@string/bottom_sheet_behavior" /> android.support.design.widget.CoordinatorLayout></div>更多介紹可以看: http://blog.csdn.net/xyz_lmn/article/details/48055919
接下來我們來看今天的例子
先上下效果圖
這里把最上方的2種樣式分別實現了一下（無視具體item 還是請跟著規范走）
這樣的實現以前用PopupWindow我也寫過一篇，效果大致差不多不過，Popup那一系列方法都得自己重寫，還是比較麻煩的，這里也補下傳送門： http://blog.csdn.net/ddwhan0123/article/details/50379340
OK,那我們來看下如何實現的
包結構
如果你不需要RecycleView的分割線的話就Copy走MainActivity內的內容即可DividerItemDecoration這個類是 翔哥 之前寫的分割線
直接貼代碼，然后在 // 里做解釋
Java
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
public static List mDatas;
public Button byRecycleView;
public BottomSheetBehavior behavior;
public RecyclerView recyclerView;
public View fillView;
public WjjAdapter wjjAdapter;@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); //初始化，業務邏輯 init(); } //綠色的按鈕，觸發隱藏和顯示RecycleView //Bottom Sheet 一共有五個狀態回調： //STATE_COLLAPSED //折疊狀態。可通過app:behavior_peekHeight來設置默認顯示的高度。 //STATE_SETTING //拖拽松開之后到達終點位置（collapsed or expanded）前的狀態。 //STATE_EXPANDED //完全展開的狀態。 //STATE_HIDDEN //隱藏狀態。默認是false，可通過app:behavior_hideable屬性設置。 //STATE_DRAGGING //被拖拽狀態 @Override public void onClick(View v) { switch (v.getId()) { case R.id.byRecycleView: //展開控件 behavior.setState(BottomSheetBehavior.STATE_EXPANDED); break; } } private void init() { initData(); byRecycleView = (Button) findViewById(R.id.byRecycleView); byRecycleView.setOnClickListener(this); recyclerView = (RecyclerView) findViewById(R.id.recyclerview); //添加分割線// recyclerView.addItemDecoration(new DividerItemDecoration(this,
// DividerItemDecoration.VERTICAL_LIST));//設置ListView模式 recyclerView.setLayoutManager(new LinearLayoutManager(recyclerView.getContext()));//設置GridView模式
//recyclerView.setLayoutManager(new GridLayoutManager(this, 3));//初始化適配器 wjjAdapter = new WjjAdapter(this); //設置監聽事件 wjjAdapter.setItemClickListener(new WjjAdapter.ItemClickListener() { @Override public void onItemClick(int pos) {//當被點擊后隱藏控件 behavior.setState(BottomSheetBehavior.STATE_COLLAPSED);
//土司被點擊的Item的位置
Toast.makeText(MainActivity.this, "--->" + pos, Toast.LENGTH_LONG).show();
}
});
//設置適配器
recyclerView.setAdapter(wjjAdapter);
//設置動畫
recyclerView.setItemAnimator(new DefaultItemAnimator()); //這句很重要，綁定滑動操作內容給 recyclerView
behavior = BottomSheetBehavior.from(recyclerView);
//設置滑動回調
behavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() { //狀態變化時觸發
@Override
public void onStateChanged(@NonNull View bottomSheet, int newState) {
if (newState == BottomSheetBehavior.STATE_COLLAPSED || newState == BottomSheetBehavior //blackView.setBackgroundColor(Color.TRANSPARENT);
fillView.setVisibility(View.GONE);
}
}@Override public void onSlide(@NonNull View bottomSheet, float slideOffset) { // 手勢滑動時 fillView.setVisibility(View.VISIBLE); ViewCompat.setAlpha(fillView, slideOffset); } }); //顯示RecycleView時才呈現的“樹懶--閃電” fillView = findViewById(R.id.fillView); fillView.setBackgroundColor(getResources().getColor(R.color.white)); fillView.setVisibility(View.GONE); fillView.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { //點擊閃電時也隱藏掉ReclcyeView behavior.setState(BottomSheetBehavior.STATE_COLLAPSED); } }); } //填充數據 public void initData() { mDatas = new ArrayList(); for (int k = 0; k 6; k++) { mDatas.add("第" + k + "個"); } } //下面就是 Adapter的內容了，就不做解釋了 public static class WjjAdapter extends RecyclerView.Adapter { public ItemClickListener mItemClickListener; public void setItemClickListener(ItemClickListener listener) { mItemClickListener = listener; } public interface ItemClickListener { void onItemClick(int pos); } private Context mContext; public static class ViewHolder extends RecyclerView.ViewHolder { public final TextView mTextView; public ViewHolder(View view) { super(view); mTextView = (TextView) view.findViewById(R.id.tv); } } public WjjAdapter(Context context) { super(); mContext = context; } @Override public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { ViewHolder holder = new ViewHolder(LayoutInflater.from( parent.getContext()).inflate(R.layout.list_item, parent, false)); return holder; } @Override public void onBindViewHolder(final ViewHolder holder, final int position) { holder.mTextView.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { mItemClickListener.onItemClick(position); } }); holder.mTextView.setText(mDatas.get(position)); } @Override public int getItemCount() { return mDatas.size(); } }}</pre>
public class MainActivityextends AppCompatActivityimplements View.OnClickListener { public static ListmDatas; public ButtonbyRecycleView; public BottomSheetBehaviorbehavior; public RecyclerViewrecyclerView; public ViewfillView; public WjjAdapterwjjAdapter; @Override protected void onCreate(BundlesavedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); //初始化，業務邏輯 init(); } //綠色的按鈕，觸發隱藏和顯示RecycleView //Bottom Sheet 一共有五個狀態回調： //STATE_COLLAPSED //折疊狀態。可通過app:behavior_peekHeight來設置默認顯示的高度。 //STATE_SETTING //拖拽松開之后到達終點位置（collapsed or expanded）前的狀態。 //STATE_EXPANDED //完全展開的狀態。 //STATE_HIDDEN //隱藏狀態。默認是false，可通過app:behavior_hideable屬性設置。 //STATE_DRAGGING //被拖拽狀態 @Override public void onClick(View v) { switch (v.getId()) { case R.id.byRecycleView: //展開控件 behavior.setState(BottomSheetBehavior.STATE_EXPANDED); break; } } private void init() { initData(); byRecycleView = (Button) findViewById(R.id.byRecycleView); byRecycleView.setOnClickListener(this); recyclerView = (RecyclerView) findViewById(R.id.recyclerview); //添加分割線 // recyclerView.addItemDecoration(new DividerItemDecoration(this, // DividerItemDecoration.VERTICAL_LIST)); //設置ListView模式 recyclerView.setLayoutManager(new LinearLayoutManager(recyclerView.getContext())); //設置GridView模式 //recyclerView.setLayoutManager(new GridLayoutManager(this, 3)); //初始化適配器 wjjAdapter = new WjjAdapter(this); //設置監聽事件 wjjAdapter.setItemClickListener(new WjjAdapter.ItemClickListener() { @Override public void onItemClick(int pos) { //當被點擊后隱藏控件 behavior.setState(BottomSheetBehavior.STATE_COLLAPSED); //土司被點擊的Item的位置 Toast.makeText(MainActivity.this, "--->" + pos, Toast.LENGTH_LONG).show(); } }); //設置適配器 recyclerView.setAdapter(wjjAdapter); //設置動畫 recyclerView.setItemAnimator(new DefaultItemAnimator()); //這句很重要，綁定滑動操作內容給 recyclerView behavior = BottomSheetBehavior.from(recyclerView); //設置滑動回調 behavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() { //狀態變化時觸發 @Override public void onStateChanged(@NonNull ViewbottomSheet, int newState) { if (newState == BottomSheetBehavior.STATE_COLLAPSED || newState == BottomSheetBehavior //blackView.setBackgroundColor(Color.TRANSPARENT); fillView.setVisibility(View.GONE); } } @Override public void onSlide(@NonNull ViewbottomSheet, float slideOffset) { // 手勢滑動時 fillView.setVisibility(View.VISIBLE); ViewCompat.setAlpha(fillView, slideOffset); } }); //顯示RecycleView時才呈現的“樹懶--閃電” fillView = findViewById(R.id.fillView); fillView.setBackgroundColor(getResources().getColor(R.color.white)); fillView.setVisibility(View.GONE); fillView.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { //點擊閃電時也隱藏掉ReclcyeView behavior.setState(BottomSheetBehavior.STATE_COLLAPSED); } }); } //填充數據 public void initData() { mDatas = new ArrayList(); for (int k = 0; k 6; k++) { mDatas.add("第" + k + "個"); } } //下面就是 Adapter的內容了，就不做解釋了 public static class WjjAdapter extends RecyclerView.Adapter { public ItemClickListenermItemClickListener; public void setItemClickListener(ItemClickListenerlistener) { mItemClickListener = listener; } public interface ItemClickListener { void onItemClick(int pos); } private ContextmContext; public static class ViewHolderextends RecyclerView.ViewHolder { public final TextViewmTextView; public ViewHolder(Viewview) { super(view); mTextView = (TextView) view.findViewById(R.id.tv); } } public WjjAdapter(Contextcontext) { super(); mContext = context; } @Override public ViewHolderonCreateViewHolder(ViewGroupparent, int viewType) { ViewHolderholder = new ViewHolder(LayoutInflater.from( parent.getContext()).inflate(R.layout.list_item, parent, false)); return holder; } @Override public void onBindViewHolder(final ViewHolderholder, final int position) { holder.mTextView.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { mItemClickListener.onItemClick(position); } }); holder.mTextView.setText(mDatas.get(position)); } @Override public int getItemCount() { return mDatas.size(); } } }</div>整體使用起來不復雜，而且拓展性好。只是對版本有一定的要求,至少21+的才可以作為.from()的寄存對象
源碼地址： https://github.com/ddwhan0123/BlogSample/blob/master/MaterialDesignBottomSheets.zip
</div>本文由用戶 Houston1756 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！