android studio translationZ elevation 動作の仕方について

Question

translationZとelevationの動作の仕方がよくわからなくなったので教えてください。

この２つを使うことでviewにZ軸を指定する。
それにより、影を出すことができるというのがわかりました。

確認したい点

elevationは静的コンポーネント、translationZは動的コンポーネントとなっていて、
elevationでデフォルトの高さを決めることができる。
translationZはアニメーションの時使うといい。
Z=elevation+translationとなっている。

わからない点

1.activity_main.xmlで指定する時はelevationを使うほうがいい？
2.animationでのtranslationZの使い方
3.プログラムで作ってみたとき、よくわからない動作をしたので、教えてもらいたいです。
プレビュー画面と実行画面が違うこと
どのような基準でviewが上に来ているか

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
        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:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

    <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">


        <Button
                android:text="Button"
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:elevation="4dp"
                android:translationZ="2dp"
                android:id="@+id/button"/>


        <TextView
                android:text="TextView"
                android:layout_width="wrap_content"
                android:layout_height="400dp"
                android:gravity="center"
                android:padding="2dp"
                android:background="@drawable/example"
                android:elevation="3dp"
                android:translationZ="2dp"
                android:id="@+id/textView1"/>

        <TextView
                android:text="TextView"
                android:layout_width="match_parent"
                android:layout_height="300dp"
                android:background="#ffff93"
                android:translationZ="1dp"
                android:elevation="1dp"
                android:id="@+id/textView"/>

    </FrameLayout>
</android.support.constraint.ConstraintLayout>

プレビュー画面

実行画面

わかりづらいかもしれませんがよろしくお願いします。

Answer 1

1. activity_main.xmlで指定する時はelevationを使うほうがいい？
2. animationでのtranslationZの使い方

そうですね、明確な基準はありませんがレイアウトxml内でz位置を指定したい場合はelevationを使った方がよいです。elevationで指定した位置を基準にして、プログラムやanimation側でz位置をずらしたい場合にtranslationZを使うべきでしょう。

animationでのtranslationZの使い方については、後述するButtonのanimatorリソースが参考になると思います。

1. プレビュー画面と実行画面が違う

これは実行時にButtonのz位置指定が反映されていないことによるものです。API21以降ではButtonの android:stateListAnimator 属性にz位置を変更するanimatorリソースが指定されているので、 elevationやtranslationZを指定しても上書きされてしまって反映されません。

リソースファイルの内容によれば、Buttonのz位置は非選択状態では
elevation 2dp + tranlationZ 0dp => 2dp
となるので、他のTextViewよりも下になってしまい表示されなくなってしまっています。

レイアウトプレビュー画面は実行時の状態を完全に再現するものではないので、誤ってレイアウト側のelevationなどの値が優先されてしまい上に表示されているものと思います。

参考: https://qiita.com/Gesyutapo/items/45f09fb8f9e30588360e

Comments

[tsrao35]

ありがとうございます！

不勉強で申し訳ないのですが、elevationの２dpというのは下のファイルで書いてある

https://android.googlesource.com/platform/frameworks/base/+/master/core/res/res/values/dimens_material.xml

<dimen name="text_edit_floating_toolbar_elevation">2dp</dimen>
部分のことでよいのでしょうか？

またこのようなviewのデフォルトスタイル？はプロジェクトから見ることができるのでしょうか？

多く質問してしまいすみませんが、よろしくお願いします。

[kakajika]

ファイルについてはそちらで合っていると思いますが、text_edit_floating_toolbar_elevationというのはButtonではなくToolbar関連の値ですね。関係があるのは回答に載せたanimatorリソースに出てくる値（button_elevation_materialなど）ですから、よく読んでみてください。

> またこのようなviewのデフォルトスタイル？はプロジェクトから見ることができるのでしょうか？
はい、SDK Managerにて「Sources for Android ...」をインストールしておくとプロジェクトのソースコードからも直接辿ることができます。

[tsrao35]

丁寧にありがとうございます。
教えてもらったことを参考にしながらかんばりたいと思います。