Wednesday, September 16, 2015

CoordinatorLayout初步認識

文章攢寫時間︰2015/09/16 18:37
文章更新時間︰2016/01/17 16:53
文章更新次數︰4

本篇參考來源

1. INTRODUCTION TO COORDINATOR LAYOUT ON ANDROID

一、前言

2015年的Google I/O大會上,
Google介紹了有關於Android Design Support Library,
該套件讓開發者們能更方便的使用Material Design(實感設計,或譯材料設計),
而且也能在API level 7(Android 2.1)或以上的Android版本兼容。
相關資訊可以參考Android Developers Blog


二、文章開始

Android Design Support Library有很多好用的Material Design元件,
其中最有趣的是官方宣稱一個"超強大"的FrameLayout,
名為CoordinatorLayout
就如同這個名字所言,
這個強大的Layout擁有"依據Layout底下一個View的位置變化,
進而讓其它子View也跟著位移"的能力。

使用這個CoordinatorLayout的方式只有一個,
就是將子View放進CoordinatorLayout的子階層(就像您使用FrameLayout那樣,將TextView放進FrameLayout裡)。

接下來要展示的這個範例相當簡單,
一個Floating Action Buton觸發Snackbar展開連動關係。

首先我們要做的是 - 將Support Design Library放入Gradle中︰
compile 'com.android.support:design:22.2.0'

再來,
替activity建立一個簡單的Layout︰
<!--?xml version="1.0" encoding="utf-8"?-->
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
     
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:layout_margin="16dp"
        android:src="@drawable/ic_done">
         
    </android.support.design.widget.FloatingActionButton>
</android.support.design.widget.CoordinatorLayout>

接著,
攢寫activity。
public class MainActivity extends AppCompatActivity {

  @Override  
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    findViewById(R.id.fab).setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View view) {
        Snackbar.make(view, "Hello Snackbar", Snackbar.LENGTH_LONG).show();
      }
    });
  }
}

做完的結果如下︰

由上圖可看到︰
當Snackbar(下方突然岀現的黑色bar)岀現時,
Floating Action Buton(綠色勾勾)就會跟著往上移動。

很酷,對吧?

註︰官方總是喜歡用簡單幾行code(就像Hello World一樣)吸引開發者們嚐鮮,然後⋯你懂的。

但如果今天你有客製化的元件想要也跟著位移,
又該怎麼實作?
跟著位移的原理又是什麼?

請各位看倌們接著看下一篇教學︰
讓你的view跟著CoordinatorLayout舞動

如需本篇教學原始碼,
請至Github下載

相關文章

1. Android 嵌套滑动机制(NestedScrolling)
2. CoordinatorLayout与滚动的处理
3. Android NestedScrolling 实战
4. Android Developers Blog


2 comments:

CITYWALKER said...

強到吐血

我自刻了一個禮拜的元件功能沒有它一半強

感謝分享

潘小鰻 said...

花了幾天看CoordinatorLayout、Behavior和AppBar的源始碼,
真的是太有趣的Design Pattern了

我邊看邊笑(像個瘋子) ... :)