studio - Barra de herramientas de Android+Diseño de pestaña+Cajón, Ocultar barra de herramientas al desplazarse y llevar TabLayout a la parte superior

tabs con iconos android

Question

Tengo actividad que tiene un cajón adjunto. Cada menú del cajón es un fragmento, y en uno de los menús tengo un fragmento con TabLayout , y cada pestaña contiene un RecyclerView . Así que ahora, cuando recorro RecyclerView , el diseño de las pestañas se oculta pero ToolBar permanece en la parte superior. Lo que necesito es que ToolBar se oculte ( scrollFlags:scroll|enterAlways ), y TabLayout debería aparecer en la parte superior.

Entonces la configuración actual es:

Activity with attached DrawerLayout -> Fragment with TabLayout -> Tab Fragment 1 with RecyclerView -> Tab Fragment 2 with RecyclerView

Answer 1

¿Puedes usar la biblioteca de diseño de soporte? Tiene este comportamiento incorporado para hacer exactamente lo que usted ha descrito. Utiliza CoordinatorLayout para lograr esto.

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:animateLayoutChanges="true"
>
<android.support.design.widget.AppBarLayout
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"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
<android.support.design.widget.TabLayout
android:id="@+id/tabanim_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="@+id/tabanim_viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_alarm_add_white_48dp"
app:layout_anchor="@id/tabanim_viewpager"
app:layout_anchorGravity="bottom|right|end"
android:layout_margin="16dp"
/>
</android.support.design.widget.CoordinatorLayout>

Answer 2

Eliminar el diseño del coordinador utilizado en la actividad con pestañas. Use LinearLayout

Answer 3

Para ocultar su barra de herramientas en cualquier momento que pueda usar:

getSupportActionBar().hide();

para obtener más explicaciones, vea url1 o url2

Answer 4

Por lo que yo sé, no hay nada incorporado que haga esto por ti. Sin embargo, podría echarle un vistazo al código fuente de Google IO, especialmente a BaseActivity. Busque "ocultar automáticamente" o consulte onMainContentScrolled

Para ocultar la barra de herramientas, puede hacer algo como esto:

toolbar.animate().translationY(-toolbar.getBottom()).setInterpolator(new AccelerateInterpolator()).start();

Si quieres volver a mostrarlo, llama:

toolbar.animate().translationY(0).setInterpolator(new DecelerateInterpolator()).start();

Se encuentra aquí: barra de herramientas Android lollipop: cómo ocultar / mostrar la barra de herramientas mientras se desplaza?

Answer 5

Primero necesita implementar un oyente de desplazamiento. Aquí puede encontrar un ejemplo HidingScrollListener.

public abstract class HidingScrollListener extends RecyclerView.OnScrollListener {
private static final float HIDE_THRESHOLD = 10;
private static final float SHOW_THRESHOLD = 70;
private int mToolbarOffset = 0;
private boolean mControlsVisible = true;
private int mToolbarHeight;
private int mTotalScrolledDistance;
private int previousTotal = 0;
private boolean loading = true;
private int visibleThreshold = 4;
int firstVisibleItem, visibleItemCount, totalItemCount;
private LinearLayoutManager layoutManager;
public HidingScrollListener(Context context, LinearLayoutManager layoutManager) {
mToolbarHeight = Tools.getToolbarHeight(context);
this.layoutManager = layoutManager;
}
@Override
public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
super.onScrollStateChanged(recyclerView, newState);
if (newState == RecyclerView.SCROLL_STATE_IDLE) {
if (mTotalScrolledDistance < mToolbarHeight) {
setVisible();
} else {
if (mControlsVisible) {
if (mToolbarOffset > HIDE_THRESHOLD) {
setInvisible();
} else {
setVisible();
}
} else {
if ((mToolbarHeight - mToolbarOffset) > SHOW_THRESHOLD) {
setVisible();
} else {
setInvisible();
}
}
}
}
}
@Override
public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
super.onScrolled(recyclerView, dx, dy);
clipToolbarOffset();
onMoved(mToolbarOffset);
if ((mToolbarOffset < mToolbarHeight && dy > 0) || (mToolbarOffset > 0 && dy < 0)) {
mToolbarOffset += dy;
}
if (mTotalScrolledDistance < 0) {
mTotalScrolledDistance = 0;
} else {
mTotalScrolledDistance += dy;
}
// for load more
visibleItemCount = recyclerView.getChildCount();
totalItemCount = layoutManager.getItemCount();
firstVisibleItem = layoutManager.findFirstVisibleItemPosition();
if (loading) {
if (totalItemCount > previousTotal) {
loading = false;
previousTotal = totalItemCount;
}
}
if (!loading && (totalItemCount - visibleItemCount) <= (firstVisibleItem + visibleThreshold)) {
// End has been reached
// Do something
loading = true;
onLoadMore();
}
}
private void clipToolbarOffset() {
if (mToolbarOffset > mToolbarHeight) {
mToolbarOffset = mToolbarHeight;
} else if (mToolbarOffset < 0) {
mToolbarOffset = 0;
}
}
private void setVisible() {
if (mToolbarOffset > 0) {
onShow();
mToolbarOffset = 0;
}
mControlsVisible = true;
}
private void setInvisible() {
if (mToolbarOffset < mToolbarHeight) {
onHide();
mToolbarOffset = mToolbarHeight;
}
mControlsVisible = false;
}
public abstract void onMoved(int distance);
public abstract void onShow();
public abstract void onHide();
public abstract void onLoadMore();
}

De lo que necesita para modificar su adaptador RecyclerView. Debe agregar una vista vacía a la parte superior de su RecyclerView tan alto como su Tolbar.

Aquí hay un diseño de ejemplo para su vista vacía.

<?xml version="1.0" encoding="utf-8"?>
<View xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="@dimen/abc_action_bar_default_height_material" />

De lo que necesita para anular los métodos getItemViewType y getITemCount de su adaptador, como se muestra a continuación.

@Override
public int getItemViewType(int position) {
if (isPositionHeader(position)) {
return TYPE_HEADER;
}
return TYPE_ITEM;
}
private boolean isPositionHeader(int position) {
return position == 0;
}
@Override
public int getItemCount() {
return mObjects.size() + 1;
}

Que en el método del adaptador onCreateViewHolder devuelva un diseño adecuado para la posición de su RecyclerView como se muestra a continuación:

 @Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View view = null;
switch (viewType) {
case TYPE_HEADER:
view = LayoutInflater.from(mContext).inflate(R.layout.layout_recycler_header, parent, false);
return new RecyclerHeaderViewHolder(view);
default:
view = LayoutInflater.from(mContext).inflate(R.layout.row_recyclerview_category, parent, false);
return new ViewHolder(view);
}
}

Y finalmente agregue su implementación de HidingScrollListener a su RecyclerView como se muestra a continuación:

final int mToolbarHeight = Tools.getToolbarHeight(getActivity());
RecyclerView mRecyclerView = (RecyclerView) view.findViewById(R.id.recyclerview);
LinearLayoutManager linearLayoutManager = new LinearLayoutManager(getActivity());
linearLayoutManager.setOrientation(LinearLayoutManager.VERTICAL);
mRecyclerView.setLayoutManager(linearLayoutManager);
mRecyclerView.setAdapter(mAdapter);
mViewPager.setPadding(mRecyclerView.getPaddingLeft(),
mToolbarHeight,
mRecyclerView.getPaddingRight(),
mRecyclerView.getPaddingBottom());
mHidingScrollListener = new HidingScrollListener(getActivity(), linearLayoutManager) {
@Override
public void onMoved(int distance) {
mToolbarContainer.setTranslationY(-distance);
}
@Override
public void onShow() {
mToolbarContainer.animate().translationY(0).setInterpolator(new DecelerateInterpolator(2)).start();
}
@Override
public void onHide() {
mToolbarContainer.animate()
.translationY(-mToolbarHeight)
.setInterpolator(new AccelerateInterpolator(2))
.start();
}
@Override
public void onLoadMore() {
}
};
mRecyclerView.setOnScrollListener(mHidingScrollListener);

Espero que entienda su problema correctamente y mi implementación puede ayudarlo.

Buena suerte.

Editar: Puede implementar la implementación de LoadMore y PullToRefresh fácilmente en esta solución. Puede agregar su solicitud de API a loadMore . Hay una parte importante en PullToRefresh . Después de que hagas una actualización para refrescar, limpiar tus datos y notificar al adaptador, no olvides configurar visibleItemCount y totalItemCount en 0 en tu implementación de desplazamiento oculto. Si no establece en 0, después de actualizar su carga más no funcionará correctamente. Obtendrá menos datos a medida que cuente su artículo en su paginación.

Answer 6

Puede mostrarnos su código xml si desea encontrar sus errores, a continuación se muestra mi código compartido para aquellos que quieran implementar Toolbar, Drawer, Tab y RecycleView en la aplicación theri.

https://github.com/Gujarats/Android-Toolbar-Drawer-tab-recyvleview-

Espero eso ayude

Answer 7

Puede probar el siguiente, que he usado para ocultar la barra de herramientas, y hacer que la vista de desplazamiento tome toda la pantalla para leer la página completa en el diseño de mi aplicación.

Es como sigue.

1. Ocultar la barra de herramientas.
2. Obtenga ancho y alto de la pantalla del teléfono.
3. Almacene la altura y el ancho del diseño de pestaña en una variable temporal.
4. Asigna el ancho y alto de la pantalla del teléfono a tu diseño de pestaña.

Esto se puede hacer de la siguiente manera:

getSupportActionBar().hide();
int mwidth = getApplicationContext().getResources().getDisplayMetrics().widthPixels;
int mheight = getApplicationContext().getResources().getDisplayMetrics().heightPixels;
temp = (TabLayout) myfrag.getActivity().findViewById(R.id.TabLayout_genesis);
int getwidth = temp.getWidth();
int getheight = temp.getHeight();
temp.setMinimumHeight(mheight);
temp.setMinimumWidth(mwidth);

Espero eso ayude.

Answer 8

Tenía la misma arquitectura en mi aplicación, así es como lo hago:

<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/coordinator"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
>
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar_layout"
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/main_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/chat_primary_color"
app:layout_scrollFlags="scroll|enterAlways"
android:elevation="4dp"/>
<android.support.design.widget.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:elevation="6dp"
android:minHeight="?attr/actionBarSize"
android:layout_below="@id/main_toolbar"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_below="@id/appbar_layout"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
/>
<android.support.v4.widget.NestedScrollView
android:id="@+id/container_fragment"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_below="@id/appbar_layout"
android:fillViewport="true"
android:foregroundGravity="center"
app:layout_behavior=".FixedScrollingViewBehavior"
/>

El ViewPager utilizado para las pestañas y NestedScrollView utilizado como FrameLayout para el otro fragmento, muestro ViewPager para los fragmentos que necesitan pestañas y oculto el NestedScrollView en el otro caso.

Puede encontrar el comportamiento aquí para NestedScrollView FixedScrollingViewBehavior

Answer 9

Menos código más efectivo

Hola @Vishal, he encontrado demasiado para ti. porque también estoy buscando este tema antes de tiempo.

He encontrado una brillante biblioteca llamada MaterialViewPager se personaliza por completo con lo que desea ocultar en modo de desplazamiento.

Vea el video en https://www.youtube.com/watch?v=r95Tt6AS18c

Answer 10

Everyone is giving the code, "Talk is cheap, show me the code" right.
I prefer not showing the code this time.
I will talk. I do not recommand such a complicated activity.

DrawerLayout y TabLayout son los 2 principales métodos de navegación para Android. DrawerLayout y TabLayout que se muestran en una misma actividad lo hacen en contra de la guildline android developement. Y si lo haces, tu aplicación será muy difícil de usar.

Imagine que, si el usuario hace un deslizamiento de derecha a izquierda, ¿debe deslizar el gesto hacia la vista de paginador o hacia la ventana de dibujo? Veo que puede aplicar el gesto de deslizamiento a la presentación del cajón cuando el usuario desliza desde el extremo derecho de la actividad; de lo contrario, puede aplicar el gesto a la vista del paginador, pero, ¿cómo se asegura de que el usuario conozca esta regla?

Incluso los usuarios saben cómo deslizar su actividad (los usuarios pueden tener mucho sentido hoy en día), su aplicación todavía se ve muy complicada.

Mi sugerencia es,

 if you have less than 5 main menus, just use tablayout + actionbar,
if you have more than 5 main menus, use drawerlayout + actionbar.
you don''t have to use both navigation in a row, you can still place the important actions to the actionbar right.