嗨,我想用搜索框制作可滚动的工具栏。在滚动工具栏上应该隐藏工具栏并显示搜索框。给我一些建议,告诉我如何为我的应用程序构建这种 UI。
在这里,我想要这样的东西。
在这里,我发布了我的 xml 设计,该设计在此设计附近执行功能,但仍需要装饰。
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:id="@+id/coordinatorLayout"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="@+id/navigation"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:context=".MainActivity">
<com.google.android.material.appbar.AppBarLayout
android:id="@+id/appBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/ThemeOverlay.AppCompat.Dark">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="@+id/collapsingToolbarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways|snap|exitUntilCollapsed"
app:statusBarScrim="?attr/colorAccent">
<androidx.constraintlayout.motion.widget.MotionLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layoutDescription="@xml/collapsing_toolbar">
<View
android:id="@+id/toolbars"
android:layout_width="match_parent"
android:layout_height="120dp"
android:background="#efefef" />
<androidx.appcompat.widget.SearchView
android:id="@+id/search_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="56dp"
android:layout_marginEnd="16dp"
android:background="@android:color/white"
android:elevation="4dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.motion.widget.MotionLayout>
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#efefef"
android:minHeight="?attr/actionBarSize"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_collapseMode="pin"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light">
<androidx.appcompat.widget.SearchView
android:id="@+id/search_view_2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="gone"
android:layout_marginStart="16dp"
android:layout_marginEnd="?android:attr/actionBarSize"
android:background="@android:color/white"
android:elevation="4dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.appcompat.widget.Toolbar>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:id="@+id/nestedScrollView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="true"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<FrameLayout
android:id="@+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="56dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/navigation"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="0dp"
android:layout_marginEnd="0dp"
android:background="?android:attr/windowBackground"
app:labelVisibilityMode="labeled"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:menu="@menu/navigation" />
</androidx.constraintlayout.widget.ConstraintLayout>
<Transition
motion:constraintSetStart="@id/start"
motion:constraintSetEnd="@+id/end">
<OnSwipe
motion:dragDirection="dragDown"
motion:touchAnchorId="@id/toolbars"
motion:touchAnchorSide="bottom" />
<OnSwipe />
</Transition>
<ConstraintSet android:id="@+id/start">
/** Very simple animation no need for start state*/
</ConstraintSet>
<ConstraintSet android:id="@+id/end">
<Constraint
android:id="@id/search_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="0dp"
android:layout_marginEnd="24dp"
android:elevation="4dp"
motion:layout_constraintEnd_toEndOf="parent"
motion:layout_constraintStart_toStartOf="parent"
motion:layout_constraintTop_toTopOf="parent" />
<Constraint
android:id="@id/toolbar"
android:layout_width="match_parent"
android:layout_height="56dp" />
</ConstraintSet>
下面的代码放在 Create Mehod 上
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initUI();
nestedScrollView.setOnScrollChangeListener(new NestedScrollView.OnScrollChangeListener() {
@Override
public void onScrollChange(NestedScrollView v, int scrollX, int scrollY, int oldScrollX, int oldScrollY) {
boolean isSearchViewVisible = isVisible(v);
if (isSearchViewVisible){
searchView.setVisibility(View.GONE);
searchViewMain.setVisibility(View.VISIBLE);
} else{
searchView.setVisibility(View.VISIBLE);
searchViewMain.setVisibility(View.GONE);
}
}
});
}
private boolean isVisible(View view){
Rect scrollBounds = new Rect();
nestedScrollView.getDrawingRect(scrollBounds);
float top = 0f;
View view1 = view;
while (view1 instanceof NestedScrollView){
top += (view1).getY();
view1 = (View)view1.getParent();
}
float bottom = top + view.getHeight();
return scrollBounds.top < bottom && scrollBounds.bottom >top;
}
最佳答案
您可以使用两个搜索 View (一个在工具栏内,另一个在工具栏下方)来实现这一点。在您的布局中:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ScrollSearchActivity">
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:id="@+id/coordinatorLayout"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="@+id/navigation"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:context=".MainActivity">
<com.google.android.material.appbar.AppBarLayout
android:id="@+id/appBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/ThemeOverlay.AppCompat.Dark">
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#efefef"
android:minHeight="?attr/actionBarSize"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light">
<androidx.appcompat.widget.SearchView
android:id="@+id/search_view_2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="gone"
android:layout_marginStart="16dp"
android:layout_marginEnd="?android:attr/actionBarSize"
android:background="@android:color/white"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.appcompat.widget.Toolbar>
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:id="@+id/nestedScrollView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="true"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorPrimary"
android:padding="4dp">
<androidx.appcompat.widget.SearchView
android:id="@+id/search_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:background="@android:color/white"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</FrameLayout>
<FrameLayout
android:id="@+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="56dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</LinearLayout>
</androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/navigation"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="0dp"
android:layout_marginEnd="0dp"
android:background="?android:attr/windowBackground"
app:labelVisibilityMode="labeled"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
然后在您的 Activity 中,当其下方的搜索 View 滚动进出屏幕时,在工具栏中切换搜索的可见性。
public class ScrollSearchActivity extends AppCompatActivity {
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_scroll_search_2);
final SearchView mainSearchView = findViewById(R.id.search_view);
final SearchView toolbarSearchView = findViewById(R.id.search_view_2);
final NestedScrollView nestedScrollView = findViewById(R.id.nestedScrollView);
nestedScrollView.setOnScrollChangeListener(new NestedScrollView.OnScrollChangeListener() {
@Override
public void onScrollChange(NestedScrollView v, int scrollX, int scrollY, int oldScrollX, int oldScrollY) {
boolean isSearchViewVisible = isSearchViewVisible(v,mainSearchView);
if (isSearchViewVisible){
toolbarSearchView.setVisibility(View.GONE);
mainSearchView.setVisibility(View.VISIBLE);
} else{
toolbarSearchView.setVisibility(View.VISIBLE);
mainSearchView.setVisibility(View.GONE);
}
}
});
}
private boolean isSearchViewVisible(NestedScrollView nestedScrollView, View view){
Rect scrollBounds = new Rect();
nestedScrollView.getDrawingRect(scrollBounds);
float top = 0f;
View view1 = view;
while (!(view1 instanceof NestedScrollView)){
top += (view1).getY();
view1 = (View)view1.getParent();
}
float bottom = top + view.getHeight();
return scrollBounds.top < bottom && scrollBounds.bottom >top;
}
}
你应该得到这样的东西:
编辑
使用它代替您的 isVisible() 方法
private boolean isViewVisible(NestedScrollView nestedScrollView, View view){
Rect scrollBounds = new Rect();
nestedScrollView.getDrawingRect(scrollBounds);
float top = 0f;
View view1 = view;
while (!(view1 instanceof NestedScrollView)){
top += (view1).getY();
view1 = (View)view1.getParent();
}
float bottom = top + view.getHeight();
return scrollBounds.top < bottom && scrollBounds.bottom >top;
}
并这样称呼它
boolean isSearchViewVisible = isSearchViewVisible(nestedScrollView,mainSearchView);
关于android - 如何使用亚马逊等搜索框制作滚动工具栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58926776/