CardView动态阴影不仅仅依赖于海拔高度

CardView dynamic shadow depends not only on elevation

在开发我的应用程序时,我创建了一个 RecyclerView,其中包含可扩展的 CardView,然后提到 "hey, why does the elevation is changing a bit while I'm animating only vertical size of card and opacity of extension?".

然后我发现改变的不是高程——只是改变了影子。

有人听说过吗?难道只是界面绘制的一个没有描述的东西?我不反对很酷的功能,但它让我有点困惑(我什至花了大约一个小时在 Google 的指南上找到了一些相关信息)

我已经分享了证明 "height affects shadow drawing" 想法的代码,但如果这背后还有更多内容,请分享一些信息。

activity_main.xml

<FrameLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent" android:layout_height="match_parent">
    <android.support.v7.widget.CardView android:id="@+id/dumb_card"
                                        android:layout_margin="16dp"
                                        tools:cardCornerRadius="4dp"
                                        android:layout_width="match_parent" android:layout_height="wrap_content">
        <LinearLayout android:orientation="vertical"
                      android:layout_width="match_parent" android:layout_height="match_parent">

            <SeekBar android:id="@+id/heighter"
                     android:layout_margin="16dp"
                     android:layout_width="match_parent" android:layout_height="wrap_content"/>

            <SeekBar android:id="@+id/elevator"
                     android:layout_margin="16dp"
                     android:layout_width="match_parent" android:layout_height="wrap_content"/>

        </LinearLayout>
    </android.support.v7.widget.CardView>
</FrameLayout>

MainActivity.java

public class MainActivity extends Activity {
    CardView card;
    SeekBar  heighter;
    SeekBar  elevator;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //card
        card = (CardView) findViewById(R.id.dumb_card);

        //card height
        heighter = (SeekBar) findViewById(R.id.heighter);
        heighter.setMax(2500);
        heighter.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                ViewGroup.LayoutParams lp = card.getLayoutParams();
                lp.height = progress;
                card.setLayoutParams(lp);
            }
            public void onStartTrackingTouch(SeekBar seekBar) {}
            public void onStopTrackingTouch(SeekBar seekBar) {}
        });

        //card elevation
        elevator = (SeekBar) findViewById(R.id.elevator);
        elevator.setMax(250);
        elevator.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                card.setCardElevation(progress);
            }
            public void onStartTrackingTouch(SeekBar seekBar) {}
            public void onStopTrackingTouch(SeekBar seekBar) {}
        });
    }
}

AndroidManifest.xml

<application
    android:label="DumbCardElevation"
    android:theme="@android:style/Theme.Holo.Light" >
    <activity
        android:name=".MainActivity" >
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
    </activity>
</application>

在Material设计中有2个光源:

  • 主光 - 屏幕上方约 45° 的锐光源(在您的头顶上方)
  • 环境光 - 垂直于屏幕(在你头后)的更柔和、更弱的光源

主光的阴影占主导地位。

此模型在 Android UI 中实现。现在,来自 key light 的光线以与底部元素不同的角度照射靠近屏幕顶部的元素,因此阴影相应地以不同的角度投射,只是与现实一样 - Material 设计背后的意图。

实际上:元素离底部越近,元素底部边缘的阴影越强,顶部边缘的阴影越浅。

Material Design: Environment: Light and shadows: Light

图片链接自:https://touchlab.co/2016-1-consistent-lighting-in-material-design/