Je souhaite implémenter une nouvelle barre d'outils gmail sans vue de défilement imbriquée, qui peut faire défiler, mais lorsque le défilement vers le bas, l'arrière-plan doit être visible.
Cela ressemblera à ceci:
3 Réponses :
Il vous suffit d'en créer un personnalisé dans la mise en page de votre activité comme
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<android.support.design.widget.CoordinatorLayout
android:id="@+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.CardView
android:layout_margin="16dp"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
</android.support.design.widget.AppBarLayout>
</android.support.v7.widget.CardView>
</android.support.design.widget.CoordinatorLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
</android.support.constraint.ConstraintLayout>
Et de changer le style de votre activité en "NoActionBar". Pour moi, ça aide.
Ce n'est pas une vue par défilement imbriquée, c'est recyclerView . Si vous souhaitez une telle barre de recherche, vous pouvez la créer en utilisant CardView et Edittext ou utilisez la bibliothèque Material searchba . Vous pouvez le placer verrouillé à cette position en utilisant frameLayout ou CoordinatorLayout.
Voici un exemple d'écran que j'ai créé !.
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#dadada"
android:layout_height="match_parent">
<android.support.v7.widget.CardView
app:cardUseCompatPadding="true"
android:layout_margin="8dp"
app:cardCornerRadius="8dp"
android:layout_width="match_parent"
android:layout_height="64dp">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginStart="8dp"
android:src="@drawable/ic_menu_black_24dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="@+id/editText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:background="@android:color/transparent"
android:hint="Search..."
android:minWidth="100dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="@+id/imageView2"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:src="@drawable/ic_search_black_24dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v7.widget.RecyclerView>
</android.support.design.widget.CoordinatorLayout>
Voici le résultat.
Comment implémenter la recherche dans ce domaine?
Faites de votre fonction de recherche une nouvelle activité, créez un lien vers elle ... C'est ce qu'a fait Gmail. Avec de belles animations bien sûr.
Pour tous ceux qui essaient d'implémenter cela avec un RecyclerView , utilisez simplement des types de vue d'élément avec des dispositions différentes.
BaseAdapter contenant les données principales:
public class MyAdapter extends BaseHeaderAdapter
.....
@Override
protected BaseAdapter.BaseViewHolder createViewHolder(View view) {
return new MyAdapter.BaseViewHolder(view);
}
@Override
public void onBindViewHolder(@NonNull final BaseAdapter.BaseViewHolder holder, int position) {
if (holder.getItemViewType() == ITEM_HEADER) {
// do some stuff
holder.mHeaderTitle.setText("Header");
} else {
super.onBindViewHolder(holder, position - 1);
}
}
// The ViewHolder extends the BaseHeaderAdapter.BaseHeaderViewHolder
Maintenant, créez un adaptateur abstrait qui étend l'adaptateur précédent:
public abstract class BaseHeaderAdapter extends BaseAdapter {
protected static final int ITEM_HEADER = 0;
protected static final int ITEM_LIST = 1;
@NonNull
@Override
public BaseAdapter.BaseViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
if (viewType == ITEM_HEADER) {
// Notice the layout being inflated here
// This is a different layout
View view = LayoutInflater.from(activity).inflate(R.layout.item_tab_header, parent, false);
return createViewHolder(view);
}
// This will return the default layout from the extended adapter
return super.onCreateViewHolder(parent, viewType);
}
// BaseAdapter and BaseViewHolder are extended
@Override
protected BaseAdapter.BaseViewHolder createViewHolder(View view) {
// Notice: BaseHeaderAdapter is the current adapter
// BaseViewHolder is the extended holder
return new BaseHeaderAdapter.BaseViewHolder(view);
}
@Override
public int getItemCount() {
int superItemCount = super.getItemCount();
return superItemCount == 0 ? 0 : superItemCount + 1;
}
@Override
public int getItemViewType(int position) {
return position == 0 ? ITEM_HEADER : ITEM_LIST;
}
// This adapter's ViewHolder
public class BaseHeaderViewHolder extends BaseAdapter.BaseViewHolder {
...
}
}
Maintenant l'adaptateur qui affiche tout :
public class BaseAdapter extends RecyclerView.Adapter<BaseAdapter.BaseViewHolder>
@Override
@NonNull
public BaseViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
// this is the main adapter so by default
// it should display the main content.
// Notice the layout being inflated here
View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_song_list, null);
return createViewHolder(v);
}
// BaseViewHolder is the ViewHolder of this adapter
protected BaseViewHolder createViewHolder(View view) {
return new BaseViewHolder(view);
}
@Override
public void onBindViewHolder(@NonNull final BaseViewHolder holder, final int position) {
// Do something here
}
Avez-vous trouvé une solution?
Avez-vous pu le mettre en œuvre? @koushik