带有浮动按钮的 ScrollView
ScrollView with floating button
我制作了一个 activity 包含两个 TextView、一个 ImageView 和 FloatingActionButton 的应用程序。我想做这样的布局。
这是我的代码。
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:fillViewport="true"
tools:context=".DetailsActivity"
android:id="@+id/scrollView"
>
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<!-- <ProgressBar
android:id="@+id/progressBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" /> -->
<TextView
android:id="@+id/titleTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="15dp"
android:textSize="25sp"
android:textStyle="bold"
/>
<TextView
android:id="@+id/blogContent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:textSize="16sp"
/>
<ImageView
android:id="@+id/youtubeThumbnailImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="20dp"
android:src="@mipmap/ic_launcher"
android:visibility="gone"
/>
</LinearLayout>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:layout_margin="20dp"
android:src="@drawable/icons8_share_480"
app:fabSize="auto"
/>
</android.support.design.widget.CoordinatorLayout>
</ScrollView>
我使用此 中的代码使其在向下滚动所有 android api 时隐藏。
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
scrollView.setOnScrollChangeListener(new View.OnScrollChangeListener() {
@Override
public void onScrollChange(View v, int scrollX, int scrollY, int oldScrollX, int oldScrollY) {
if (scrollY > 0 && fab.isShown()) {
fab.setVisibility(View.GONE);
} else if (scrollY < 0) {
fab.setVisibility(View.VISIBLE);
}
}
});
} else {
scrollView.getViewTreeObserver().addOnScrollChangedListener(new ViewTreeObserver.OnScrollChangedListener() {
@Override
public void onScrollChanged() {
int mScrollY = scrollView.getScrollY();
if (mScrollY > 0 && fab.isShown()) {
fab.setVisibility(View.GONE);
} else if (mScrollY < 0) {
fab.setVisibility(View.VISIBLE);
}
}
});
}
这适用于 android 6.0。但是6.0以上,悬浮按钮出现在activity的右上角。这是下面的图片。
我尝试了很多 属性 选项,例如 - android:layout_gravity=""
并将 FloatingButton 直接放在主 LinearLayout 或 FrameLayout 上。这些布局仍然不起作用。
使用 CoordinatorLayout,您应该尝试设置 FloatingActionButtons 锚点以引用 LinearLayout 并使用 layout_anchorGravity
定位 FAB。
您的 FAB 示例代码:
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_anchor="@id/linearLayoutID"
app:layout_anchorGravity="bottom|right|end"
android:layout_margin="16dp"
android:src="@drawable/icons8_share_480"
/>
记得给你设置一个ID LinearLayout。我使用 @id/linearLayoutID
作为占位符。
我制作了一个 activity 包含两个 TextView、一个 ImageView 和 FloatingActionButton 的应用程序。我想做这样的布局。
这是我的代码。
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:fillViewport="true"
tools:context=".DetailsActivity"
android:id="@+id/scrollView"
>
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<!-- <ProgressBar
android:id="@+id/progressBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" /> -->
<TextView
android:id="@+id/titleTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="15dp"
android:textSize="25sp"
android:textStyle="bold"
/>
<TextView
android:id="@+id/blogContent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:textSize="16sp"
/>
<ImageView
android:id="@+id/youtubeThumbnailImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="20dp"
android:src="@mipmap/ic_launcher"
android:visibility="gone"
/>
</LinearLayout>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:layout_margin="20dp"
android:src="@drawable/icons8_share_480"
app:fabSize="auto"
/>
</android.support.design.widget.CoordinatorLayout>
</ScrollView>
我使用此
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
scrollView.setOnScrollChangeListener(new View.OnScrollChangeListener() {
@Override
public void onScrollChange(View v, int scrollX, int scrollY, int oldScrollX, int oldScrollY) {
if (scrollY > 0 && fab.isShown()) {
fab.setVisibility(View.GONE);
} else if (scrollY < 0) {
fab.setVisibility(View.VISIBLE);
}
}
});
} else {
scrollView.getViewTreeObserver().addOnScrollChangedListener(new ViewTreeObserver.OnScrollChangedListener() {
@Override
public void onScrollChanged() {
int mScrollY = scrollView.getScrollY();
if (mScrollY > 0 && fab.isShown()) {
fab.setVisibility(View.GONE);
} else if (mScrollY < 0) {
fab.setVisibility(View.VISIBLE);
}
}
});
}
这适用于 android 6.0。但是6.0以上,悬浮按钮出现在activity的右上角。这是下面的图片。
我尝试了很多 属性 选项,例如 - android:layout_gravity=""
并将 FloatingButton 直接放在主 LinearLayout 或 FrameLayout 上。这些布局仍然不起作用。
使用 CoordinatorLayout,您应该尝试设置 FloatingActionButtons 锚点以引用 LinearLayout 并使用 layout_anchorGravity
定位 FAB。
您的 FAB 示例代码:
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_anchor="@id/linearLayoutID"
app:layout_anchorGravity="bottom|right|end"
android:layout_margin="16dp"
android:src="@drawable/icons8_share_480"
/>
记得给你设置一个ID LinearLayout。我使用 @id/linearLayoutID
作为占位符。