woshidan's blog

そんなことよりコードにダイブ。

Snackbarの動きをFrameLayoutとCoordinatorLayoutで比べてみた

CoordinatorLayoutがなんぼのもんじゃーい、というのがあったので、CoordinatorLayoutの働きの1つのSnackbarが出た時のFABのアニメーションを比べてみた。

検証用コード

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:23.0.1'
    compile 'com.android.support:design:23.0.1'
}
<!-- FrameLayoutのとき、android:idはframe_layout -->
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/coordinator_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#0af"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    tools:context=".MainActivity">

    <TextView android:text="Coordinator Layout"
        android:layout_gravity="bottom"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher"
        app:layout_anchor="@id/coordinator_layout"
        app:layout_anchorGravity="bottom|right"
        />
    <!-- FrameLayoutのときはandroid:layout_gravity="bottom|right" -->
</android.support.design.widget.CoordinatorLayout>
public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {[f:id:woshidan:20151118224853g:plain]
                // FrameLayoutのときはR.id.frame_layout
                Snackbar.make(findViewById(R.id.coordinator_layout), "スナックバー", Snackbar.LENGTH_LONG).show();
            }
        });
    }

CoordinatorLayout

f:id:woshidan:20151118224815g:plain

FrameLayout

f:id:woshidan:20151118225232g:plain

おまけ

一定時間で消えるという設定をしたくせに連打したのでCoordinatorLayoutでもうまくアニメーションしなくなった例。

f:id:woshidan:20151118224954g:plain