如何让像 Google Play 这样的动作栏在滚动时淡出

如何使透明或半透明的动作栏像谷歌播放淡入淡出时，滚动使用 windowActionBarOverlay？

检查下面的截图

**enter image description here**

47376 次浏览
小开

下面是我在我工作的应用程序中使用的代码

您必须在 ScrollView中使用 OnScrollChanged函数。ActionBar不允许您设置不透明度，因此在操作栏上设置一个背景可绘图，您可以根据 scrollview 中滚动的数量更改其不透明度。我已经给出了一个示例工作流

函数集根据其位置 WRT 窗口为视图 locationImage 提供适当的 alpha。

this.getScrollY()告诉你 scrollView滚动了多少

public void OnScrollChanged(int l, int t, int oldl, int oldt) {
// Code ...
locationImage.setAlpha(getAlphaForView(locationImageInitialLocation- this.getScrollY()));
}




private float getAlphaForView(int position) {
int diff = 0;
float minAlpha = 0.4f, maxAlpha = 1.f;
float alpha = minAlpha; // min alpha
if (position > screenHeight)
alpha = minAlpha;
else if (position + locationImageHeight < screenHeight)
alpha = maxAlpha;
else {
diff = screenHeight - position;
alpha += ((diff * 1f) / locationImageHeight)* (maxAlpha - minAlpha); // 1f and 0.4f are maximum and min
// alpha
// this will return a number betn 0f and 0.6f
}
// System.out.println(alpha+" "+screenHeight +" "+locationImageInitialLocation+" "+position+" "+diff);
return alpha;
}

编辑: 我已经增加了一个例子，在 https://github.com/ramanadv/fadingActionBar的工作样本，你可以看看它。

enter image description here

小开

Google 开发官方文档

enter image description here

叠加模式动作条。

启用叠加模式

要为操作栏启用覆盖模式，需要创建一个扩展现有操作栏主题的自定义主题，并将 android: windowActionBarOverlay 属性设置为 true。

只适用于 Android 3.0或更高版本

如果 minSdkVersion 设置为11或更高，则自定义主题应使用 Theme。Holo 主题(或其后代之一)作为父主题。例如:

<resources>
<!-- the theme applied to the application or activity -->
<style name="CustomActionBarTheme"
parent="@android:style/Theme.Holo">
<item name="android:windowActionBarOverlay">true</item>
</style>
</resources>

适用于 Android 2.1或更高版本

如果您的应用程序使用支持库来兼容运行低于 Android 3.0版本的设备，那么您的自定义主题应该使用 Theme。AppCompat 主题(或其后代之一)作为父主题。例如:

<resources>
<!-- the theme applied to the application or activity -->
<style name="CustomActionBarTheme"
parent="@android:style/Theme.AppCompat">
<item name="android:windowActionBarOverlay">true</item>


<!-- Support library compatibility -->
<item name="windowActionBarOverlay">true</item>
</style>
</resources>

指定布局顶部边距

当操作栏处于叠加模式时，它可能会模糊一些应该保持可见的布局。为了确保这些项目始终保持在操作栏的下方，可以使用 actionBarSize 指定的高度将边距或填充添加到视图的顶部。例如:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="?android:attr/actionBarSize">
...
</RelativeLayout>
小开

请检查这个库 https://github.com/ManuelPeinado/FadingActionBar，它实现了您想要的冷淡淡化操作条效果

小开

在 webView 上:

@JavascriptInterface
public void showToolbar(String scrollY, String imgWidth) {
int int_scrollY = Integer.valueOf(scrollY);
int int_imgWidth = Integer.valueOf(imgWidth);


String clr;
if (int_scrollY<=int_imgWidth-actionBarHeight) {
clr = Integer.toHexString(int_scrollY * 255 / (int_imgWidth-actionBarHeight));
}else{
clr = Integer.toHexString(255);
}


toolbar.setBackgroundDrawable(new ColorDrawable(Color.parseColor("#"+clr+"9CCC65")));
}
小开

关于如何实现这一效果，有正式文件: Https://developer.android.com/training/basics/actionbar/overlaying.html

编辑: 有一个开放源码库 Observer ableScrollView，其中包含许多具有不同 ActionBar 效果的开放源码演示，包括您提到的那些演示。这是一个很好的资源: https://github.com/ksoichiro/Android-ObservableScrollView。

小开

此库有助于动画 https://github.com/ksoichiro/Android-ObservableScrollView

小开

使用 AbsListView 滚动监听器，我们可以简单地实现 listview，而不需要使用其他复杂的库或 ScrollView

将滚动侦听器设置为列表视图

public class PagedScrollListener implements AbsListView.OnScrollListener {
private ActionBar mActionBar;
private View mTopHideView; // represent header view


@Override
public void onScrollStateChanged(final AbsListView view, final int scrollState) {
mScrollState = scrollState;
}


@Override
public void onScroll(final AbsListView view, final int firstVisibleItem, final int visibleItemCount, final int totalItemCount) {


if (mActionBar != null && mTopHideView != null && mListView != null) {
Log.i(TAG, getScrollY() + "");
int currentY = getScrollY();


final int headerHeight = mTopHideView.getHeight() - mActionBar.getHeight();
final float ratio = (float) Math.min(Math.max(currentY, 0), headerHeight) / headerHeight;
final int newAlpha = (int) (ratio * 255);
Log.i(TAG, newAlpha + " alpha");
mActionBarDrawaqble.setAlpha(newAlpha);
}}




public void setActionBarRefernce(ActionBar actionBar, View topHideView, float actionBarHeight, ListView listView) {
mActionBar = actionBar;
mActionBarHeight = actionBarHeight;
mTopHideView = topHideView;
mListView = listView;
mActionBarDrawaqble = new ColorDrawable(ContextCompat.getColor(mContext, R.color.google_plus_red));
mActionBar.setBackgroundDrawable(mActionBarDrawaqble);
mActionBarDrawaqble.setAlpha(0);
}


public int getScrollY() {
View c = mListView.getChildAt(0);
if (c == null) {
return 0;
}


int firstVisiblePosition = mListView.getFirstVisiblePosition();
int top = c.getTop();


int headerHeight = 0;
if (firstVisiblePosition >= 1) {
headerHeight = mTopHideView.getHeight();
}


return -top + firstVisiblePosition * c.getHeight() + headerHeight;
}


}

//注:不要忘记调用自定义侦听器的 * * setActionBarReference 方法 * *

小开

如果您在您的布局 xml 中使用一个坐标布局，那么您应该检查 这篇文章，它描述了如何处理卷轴并使其他视图对它们作出反应。

有一个实现你要求的例子，如果你把你的图像视图作为 CollapsingToolbarLayout 的一个子元素添加进来，所有的魔法都会自动处理，你甚至可以使用一些参数，比如斜纹布的颜色，开始折叠的最小高度，等等:


提交答案