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/
在开发我的应用程序时,我创建了一个 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/