[英]Add a shadow over the bottom of the ImageView in CordinatorLayout
最近我正在为我现有的应用程序实现一个材料设计。 为此,我使用以下库: http : //android-developers.blogspot.com/2015/05/android-design-support-library.html以实现以下效果: https : //plus.google.com/ + AndroidDevelopers / posts / XUDGFS9eYxg 。
我的布局代码如下:
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="350dp"
android:fitsSystemWindows="true"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginBottom="32dp"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="@+id/event_image"
android:layout_width="fill_parent"
android:layout_height="350dp"
android:background="@color/white"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="@+id/anim_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
--------
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="30dp"
android:clickable="true"
android:src="@drawable/ic_action_share"
app:layout_anchor="@+id/appbar"
app:layout_anchorGravity="bottom|right|end" />
</android.support.design.widget.CoordinatorLayout>
我达到了预期的效果,但我的图像和文本有问题。 文本是白色的,当我发生的图像大部分由白色组成时,无法读取文本标签。
有什么建议如何解决它,而不破坏效果?
感谢@m vai给我提示,我使用了另一种方法。 我创建了一个FrameLayout
,在里面我放了ImageView
和GradientView。 然后我将所有动画属性传递给FrameLayout。 最后它很简单。 所以代替ImageView
应该是以下代码:
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_collapseMode="parallax"
android:fitsSystemWindows="true">
<RelativeLayout
android:id="@+id/title_layout"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/event_image"
android:layout_width="fill_parent"
android:layout_height="350dp"
android:background="@color/white"
android:scaleType="centerCrop"
/>
</RelativeLayout>
<View
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/actionbar_overlay" />
</FrameLayout>
XML文件如下所示:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<size android:height="100dp"/>
<gradient
android:angle="270"
android:startColor="#0000"
android:endColor="#b000"/>
</shape>
这也可以通过在文本上使用阴影来解决。
例如,将此示例样式应用于TextView,甚至白色图像上的白色文本也将完全可见。
<style name="ShadowTextStyle" parent="@android:style/TextAppearance">
<item name="android:textSize">35sp</item>
<item name="android:textStyle">bold</item>
<item name="android:textColor">@color/White</item>
<item name="android:layout_marginLeft">40dp</item>
<item name="android:layout_marginBottom">10dp</item>
<item name="android:shadowColor">@android:color/black</item>
<item name="android:shadowDx">0</item>
<item name="android:shadowDy">0</item>
<item name="android:shadowRadius">25</item>
</style>
结果:
您可以使用Palette库。
int myColor;
Bitmap b = ... //your image
Palette.Swatch swatch = Palette.from(b).generate().getVibrantSwatch();
if (swatch != null) {
myColor = swatch.getTitleTextColor();
}
只需几行,您就可以分析图像并提取最合适的文本颜色,这与背后的图像形成鲜明对比。
然后可以在CollapsingToolbarLayout上设置颜色。
CollapsingToolbarLayout ctl = (CollapsingToolbarLayout) findViewById(R.id.ctl);
ctl.setExpandedTitleColor(myColor);
您也可以申请以下解决方案;
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_collapseMode="parallax"
android:fitsSystemWindows="true">
<RelativeLayout
android:id="@+id/title_layout"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/ivRestaurantImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/gradient"
android:scaleType="fitXY"
android:src="@drawable/second_img" />
</RelativeLayout>
<View
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/gradient" />
</FrameLayout>
gradient.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:angle="90"
android:startColor="#00ffffff"
android:endColor="#aa000000"
/>
</shape>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.