Réduire la disposition de la barre d’outils avec viewpager
J'utilise CollapsingBarLayout avec viewpager et les fragments de viewpager ont listview, gridview.
Voici mon code:
<?xml version="1.0" encoding="utf-8"?>
<Android.support.design.widget.CoordinatorLayout 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:id="@+id/main_content"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
tools:context="com.bigsteptech.seandroidnativeapp.classes.modules.common.ViewGroupEvent">
<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:fitsSystemWindows="true">
<Android.support.design.widget.CollapsingToolbarLayout
Android:id="@+id/collapsing_toolbar"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
Android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:expandedTitleTextAppearance="@style/TransparentText">
<FrameLayout
Android:id="@+id/carouselLayout"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
app:layout_collapseMode="parallax">
<ImageView
Android:id="@+id/coverImage"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
Android:scaleType="centerCrop"/>
<LinearLayout
Android:layout_width="match_parent"
Android:gravity="bottom"
Android:orientation="vertical"
Android:layout_gravity="bottom"
Android:padding="@dimen/profile_image_margin"
Android:background="@drawable/gradient_bg"
Android:layout_height="wrap_content">
<TextView
Android:layout_width="match_parent"
Android:layout_height="wrap_content"
Android:layout_marginLeft="@dimen/profile_image_margin"
Android:textSize="@dimen/text_size_xlarge"
Android:textStyle="bold"
Android:textColor="@color/white"
Android:id="@+id/content_title"/>
<RelativeLayout
Android:layout_width="match_parent"
Android:layout_marginLeft="@dimen/profile_image_margin"
Android:layout_height="wrap_content">
<TextView
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:textStyle="bold"
Android:textColor="@color/white"
Android:textSize="@dimen/text_size_medium"
Android:id="@+id/category_title"/>
<TextView
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:textStyle="bold"
Android:layout_toRightOf="@+id/category_title"
Android:layout_marginLeft="@dimen/profile_image_margin"
Android:textColor="@color/white"
Android:textSize="@dimen/text_size_medium"
Android:id="@+id/memberCount"/>
</RelativeLayout>
</LinearLayout>
</FrameLayout>
<Android.support.v7.widget.Toolbar
Android:id="@+id/toolbar"
Android:layout_width="match_parent"
Android:layout_height="?attr/actionBarSize"
app:theme="@style/ActionBarThemeOverlay"
app:popupTheme="@style/ActionBarPopupThemeOverlay"
Android:background="@drawable/gradient_bg"
app:layout_collapseMode="pin" />
</Android.support.design.widget.CollapsingToolbarLayout>
</Android.support.design.widget.AppBarLayout>
<Android.support.v4.widget.NestedScrollView
Android:layout_width="match_parent"
Android:layout_height="match_parent"
Android:layout_gravity="fill_vertical"
Android:isScrollContainer="true"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<RelativeLayout
Android:layout_width="match_parent"
Android:layout_height="match_parent">
<LinearLayout
Android:layout_width="match_parent"
Android:layout_height="match_parent"
Android:id="@+id/contentInfo"
Android:paddingBottom="48sp"
Android:clipToPadding="false"
Android:orientation="vertical">
<ProgressBar
style="?android:attr/progressBarStyle"
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:layout_marginTop="@dimen/profile_page_left_right_margin"
Android:layout_gravity="center"
Android:id="@+id/progressBar"/>
<LinearLayout
Android:orientation="horizontal"
Android:layout_width="match_parent"
Android:layout_height="wrap_content"
Android:padding="10dp"
Android:background="@color/grey_light">
<TextView Android:id="@+id/ownerTitle"
Android:clickable="true"
Android:focusable="true"
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:layout_marginLeft="@dimen/keyline_1"
Android:layout_gravity="center_vertical"
Android:textAppearance="@style/TextAppearance.AppCompat.Body1"
Android:textColor="@color/body_text_1" />
</LinearLayout>
<LinearLayout
Android:orientation="horizontal"
Android:layout_width="match_parent"
Android:layout_height="wrap_content"
Android:layout_marginTop="@dimen/profile_image_margin"
Android:padding="10dp">
<com.bigsteptech.seandroidnativeapp.Classes.Modules.Common.ViewRelated.ExpandableTextView
Android:layout_width="match_parent"
Android:layout_height="wrap_content"
Android:layout_marginLeft="@dimen/keyline_1"
style="@style/TextBody"
Android:layout_gravity="center_vertical"
Android:id="@+id/view_description" />
</LinearLayout>
<Android.support.design.widget.TabLayout
Android:id="@+id/slidingTabs"
Android:layout_width="match_parent"
app:tabIndicatorHeight="3dp"
app:tabMode="scrollable"
Android:layout_height="wrap_content"/>
<Android.support.v4.view.ViewPager
Android:id="@+id/pager"
Android:layout_width="match_parent"
Android:layout_height="300dp">
</Android.support.v4.view.ViewPager>
</LinearLayout>
</RelativeLayout>
</Android.support.v4.widget.NestedScrollView>
<Android.support.design.widget.FloatingActionButton
Android:layout_height="wrap_content"
Android:layout_width="wrap_content"
app:layout_anchor="@id/appbar"
Android:id="@+id/joinGroupButton"
app:layout_anchorGravity="bottom|right|end"
Android:src="@drawable/ic_action_new"
Android:layout_margin="@dimen/fab_margin"
Android:clickable="true"/>
</Android.support.design.widget.CoordinatorLayout>
Les fragments qui ont listview, gridview ne défilent pas vers le haut dans la barre d'outils réductrice, comment puis-je obtenir ce travail ..
S'il vous plaît aidez-moi, merci beaucoup à l'avance ...
Vous devez placer votre ViewPager dans la section AppBar et configurer layout_behavior :
<Android.support.design.widget.AppBarLayout>>
<Android.support.design.widget.CollapsingToolbarLayout>
// THIS VIEWS WILL BE COLLAPSED
</Android.support.design.widget.CollapsingToolbarLayout>
// THIS VIEWS WILL BE PINNED
<Android.support.v4.view.ViewPager
Android:id="@+id/pager"
Android:layout_width="match_parent"
Android:layout_height="300dp"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
</Android.support.v4.view.ViewPager>
</Android.support.design.widget.AppBarLayout>
Si vous utilisez Fragments en tant qu'enfants de ViewPager, vous devez également configurer layout_behavior pour chaque fragment de ViewPager.
app:layout_behavior="@string/appbar_scrolling_view_behavior"
réduction de la barre d'outils avec des onglets à l'aide de la nouvelle bibliothèque de support de conception de matériau
J'ai utilisé la fonctionnalité de barre d'outils de réduction officielle de la nouvelle bibliothèque de support de conception de matériel.
la hauteur de vue réduite ici est de 256dp et la hauteur des onglets est de 56dp
j'ai fait le chemin suivant
je coupe l'image en deux parties, une pour la vue réduite et une pour les onglets.
j'ai coupé les images en fonction de dp en pixel tailles avec xxxhdpi dessiné haute résolution et placé dans un dossier pouvant être dessiné afin qu'il soit ajustable à toutes les tailles
j'ai l'image 2000x1246
image du haut 256dp = 2000x1024 pixel
image de l'onglet inférieur 56dp = 2000x224 pixels
Voici l'exemple complet avec code source
ListView et GridView ne sont pas équipés de fonctions NestedScrolling. Et c’est nécessaire pour travailler avec CollapsingToolbarLayout.
La meilleure façon de le faire fonctionner serait de changer votre ListView et GridView en RecyclerViews (RecyclerView implémente NestedScrollingChild ).
j'ai réalisé cela, je vais mettre mon code avec la bibliothèque utilisée Premièrement, c'est le fichier de mise en page.
<RelativeLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:id="@+id/attraction_lay"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
Android:background="#f5f6f5">
<RelativeLayout
Android:id="@+id/bar"
Android:layout_width="match_parent"
Android:layout_height="47dp">
<TextView
Android:id="@+id/exp_title"
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:layout_alignParentBottom="true"
Android:layout_centerHorizontal="true"
Android:layout_marginBottom="16dp"
Android:text="See & do"
Android:textColor="#1b7bba"
Android:textSize="17sp" />
<RelativeLayout
Android:id="@+id/relmenu"
Android:layout_width="40dp"
Android:layout_height="40dp"
Android:layout_alignParentBottom="true"
Android:layout_alignParentLeft="true">
<ImageView
Android:layout_width="17dp"
Android:layout_height="14dp"
Android:layout_alignParentBottom="true"
Android:layout_alignParentLeft="true"
Android:layout_marginBottom="17dp"
Android:layout_marginLeft="8dp"
Android:src="@drawable/menu_icon_blue" />
</RelativeLayout>
<RelativeLayout
Android:id="@+id/relsearch"
Android:layout_width="40dp"
Android:layout_height="40dp"
Android:layout_alignParentBottom="true"
Android:layout_alignParentRight="true">
<ImageView
Android:layout_width="18dp"
Android:layout_height="18dp"
Android:layout_alignParentBottom="true"
Android:layout_alignParentRight="true"
Android:layout_marginBottom="17dp"
Android:layout_marginRight="8dp"
Android:src="@drawable/search_icon_blue" />
</RelativeLayout>
</RelativeLayout>
<View
Android:id="@+id/div"
Android:layout_width="match_parent"
Android:layout_height="2px"
Android:layout_below="@+id/bar"
Android:background="#1b7bba" />
<FrameLayout
Android:id="@+id/layout_container"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
Android:layout_below="@+id/div">
<ListView
Android:id="@+id/listView"
Android:layout_width="match_parent"
Android:layout_height="wrap_content"
Android:clickable="true"
Android:divider="@null"
Android:focusable="false"
Android:focusableInTouchMode="false"
Android:listSelector="@Android:color/transparent"
Android:scrollbars="none" />
<FrameLayout
Android:id="@+id/header"
Android:layout_width="match_parent"
Android:layout_height="290dp"
Android:layout_marginTop="0dp"
Android:orientation="vertical">
<FrameLayout
Android:id="@+id/images_header"
Android:layout_width="fill_parent"
Android:layout_height="250dp"
Android:layout_marginBottom="40dp">
<Android.support.v4.view.ViewPager
Android:id="@+id/gallery"
Android:layout_width="fill_parent"
Android:layout_height="250dp"
Android:clickable="true"
Android:focusable="false"
Android:focusableInTouchMode="false"
Android:overScrollMode="never" />
<RelativeLayout
Android:id="@+id/gallery_back"
Android:layout_width="40dp"
Android:layout_height="60dp"
Android:layout_gravity="left|center_vertical">
<ImageView
Android:layout_width="20dp"
Android:layout_height="52dp"
Android:layout_alignParentLeft="true"
Android:layout_centerVertical="true"
Android:background="@drawable/arrow_back" />
</RelativeLayout>
<RelativeLayout
Android:id="@+id/gallery_next"
Android:layout_width="40dp"
Android:layout_height="60dp"
Android:layout_gravity="right|center_vertical">
<ImageView
Android:layout_width="20dp"
Android:layout_height="52dp"
Android:layout_alignParentRight="true"
Android:layout_centerVertical="true"
Android:background="@drawable/arrow_next" />
</RelativeLayout>
<View
Android:layout_width="match_parent"
Android:layout_height="match_parent"
Android:layout_marginBottom="-150dp"
Android:layout_marginTop="170dp"
Android:background="@drawable/horizontal_gradient" />
<TextView
Android:id="@+id/pagenum"
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:layout_gravity="right|bottom"
Android:layout_marginBottom="10dp"
Android:layout_marginRight="10dp"
Android:text="3/15"
Android:textColor="#FFF"
Android:textSize="14sp" />
</FrameLayout>
<FrameLayout
Android:id="@+id/header_text_layout"
Android:layout_width="match_parent"
Android:layout_height="@dimen/min_height_textheader_materiallike"
Android:layout_gravity="bottom"
Android:background="#FFF">
<!--<TextView-->
<!--Android:id="@+id/text_header"-->
<!--Android:layout_width="match_parent"-->
<!--Android:layout_height="wrap_content"-->
<!--Android:layout_gravity="center_vertical"-->
<!--Android:layout_marginLeft="70dp"-->
<!--Android:text="ttttt"-->
<!--Android:textColor="@Android:color/white"-->
<!--Android:textSize="18sp"-->
<!--Android:textStyle="bold" />-->
<RelativeLayout
Android:id="@+id/button_header"
Android:layout_width="match_parent"
Android:layout_height="match_parent">
<LinearLayout
Android:layout_width="match_parent"
Android:layout_height="match_parent"
Android:layout_centerHorizontal="true"
Android:layout_centerVertical="true"
Android:layout_marginLeft="83dp"
Android:layout_marginRight="83dp">
<RelativeLayout
Android:id="@+id/photo"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
Android:layout_gravity="center"
Android:layout_weight="2.5">
<ImageView
Android:layout_width="17dp"
Android:layout_height="14dp"
Android:layout_centerInParent="true"
Android:background="@drawable/photo_blue_icon"
/>
</RelativeLayout>
<RelativeLayout
Android:id="@+id/video"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
Android:layout_weight="2.5">
<ImageView
Android:layout_width="14dp"
Android:layout_height="16dp"
Android:layout_centerInParent="true"
Android:background="@drawable/video_blue_icon" />
</RelativeLayout>
<RelativeLayout
Android:id="@+id/share"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
Android:layout_weight="2.5">
<ImageView
Android:layout_width="15dp"
Android:layout_height="20dp"
Android:layout_centerInParent="true"
Android:background="@drawable/share_blue_icon" />
</RelativeLayout>
<RelativeLayout
Android:id="@+id/fav"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
Android:layout_weight="2.5">
<ImageView
Android:layout_width="20dp"
Android:layout_height="19dp"
Android:layout_centerInParent="true"
Android:background="@drawable/fav_blue_icon" />
</RelativeLayout>
</LinearLayout>
<View
Android:layout_width="match_parent"
Android:layout_height="2px"
Android:layout_alignParentBottom="true"
Android:background="#d7d7d7" />
</RelativeLayout>
</FrameLayout>
</FrameLayout>
</FrameLayout>
et dans le code Java, vous devriez ajouter ceci
StikkyHeaderBuilder.ListViewBuilder.stickTo(mListView)
.setHeader(R.id.header, (ViewGroup) contentView)
.minHeightHeaderDim(R.dimen.min_height_textheader_materiallike)
.animator(new ParallaxStikkyAnimator())
.attatch_Acitivty(Attractions.this)
.castTo("Attractions")
.build();
et voici la librairie utilisée
mais j'ai modifié cette bibliothèque pour fonctionner comme je veux
la modification est une méthode d’ajout dans le constructeur stcikylistview pour connaître l’activité utilisée et transmettre un délégué pour le défilement que j’ai utilisé car j’ajoute un flou pour les images dans le viewpager
et elle est ma modification
je vais télécharger la version modifiée de la bibliothèque Ici vous êtes https://drive.google.com/file/d/0BxdN8PyW5nmHMmFFeFY2aW9zdlk/view?usp=sharing }
J'ai eu ce problème aussi. Vous devrez utiliser RecyclerView. Je comprends maintenant que vous devez utiliser ListView et GridGiew, mais vous pouvez l’utiliser dans un RecyclerView.
Par exemple, je vais vous montrer comment implémenter un GridLayout dans un RecyclerView.
Dans votre structure de fragment (dans laquelle vous souhaitez implémenter GridView), ajoutez le code XML suivant.
<Android.support.v7.widget.RecyclerView
xmlns:Android="http://schemas.Android.com/apk/res/Android"
xmlns:app="http://schemas.Android.com/apk/res-auto"
Android:id="@+id/recyclerviewGRID"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
/>
Puis sur votre fragment Java,
sur votre fragment onCreateView, définissez RecyclerView,
RecyclerView rv = (RecyclerView) v.findViewById(R.id.recyclerviewGRID);
setupRecyclerView(rv);
Créez la méthode setupRecyclerView,
private void setupRecyclerView(RecyclerView recyclerView) {
recyclerView.setHasFixedSize(true);
recyclerView.setLayoutManager(new GridLayoutManager(recyclerView.getContext(), 2));
mAdapter = new AdapterGridView(getActivity().getApplicationContext(), mItems);
recyclerView.setAdapter(mAdapter);
}
Vous devez d'abord définir mAdapter comme RecyclerView.Adapter. Créez ensuite votre adaptateur pour le RecyclerView. Notez que mItems est un ArrayList qui contiendra le contenu de votre liste.
AdapterGridView.Java
public class AdapterGridView extends RecyclerView.Adapter<AdapterGridView.ViewHolder> {
ArrayList<AdItem> mItems;
Context context, contxt;
public AdapterGridView(Context context, ArrayList<AdItem> mItems) {
this.context = context;
this.mItems = mItems;
}
@Override
public ViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
//attach your list item layout here, mine in this case is called list_item_grid_item
View v = LayoutInflater.from(viewGroup.getContext())
.inflate(R.layout.list_item_grid_item, viewGroup, false);
ViewHolder viewHolder = new ViewHolder(v);
return viewHolder;
}
@Override
public void onBindViewHolder(ViewHolder viewHolder, int i) {
AdItem singleItem = mItems.get(i);
//attach data to your layout as the following manner
viewHolder.tvspecies.setText(singleItem.getName());
}
@Override
public int getItemCount() {
//return the number of list items
return mItems.size();
}
class ViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener{
public ImageView imgThumbnail, avatar;
public TextView tvspecies, adIDLBL;
public ViewHolder(View itemView) {
super(itemView);
itemView.setClickable(true);
itemView.setOnClickListener(this);
//define your list item views, basically the stuff in list_item_grid_item
imgThumbnail = (ImageView)itemView.findViewById(R.id.img_thumbnail);
tvspecies = (TextView)itemView.findViewById(R.id.tv_species);
}
@Override
public void onClick(View v) {
//handle item click events
}
}
}