12

Bir AppBarLayout (bir Araç Çubuğu ve bir TabLayout ile) altında bir ViewPager var. Yüklenen fragmanların yüksekliğinin neden bu kadar büyük bir eleman olmasa bile kullanılabilir alandan daha fazla olduğunu anlayamıyorum, bu da sekmeyi kaydırılabilir hale getiriyor.ViewPager yanlış yükseklik var

Bu ana düzen xml geçerli:

<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:fitsSystemWindows="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/tabs" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      app:tabGravity="fill" 
      app:tabMode="fixed" /> 
    </android.support.design.widget.AppBarLayout> 

    <android.support.v4.view.ViewPager 
     android:id="@+id/viewpager" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     app:layout_behavior="@string/appbar_scrolling_view_behavior" /> 
</android.support.design.widget.CoordinatorLayout> 

sen benim Fragment Bir layout_alignParentBottom bir Düğmesi var ama çok fazla viewpager yüksekliğini germe sanırım görebileceğiniz gibi. İşte

screenshot

tasarım görünümünden düzen:

enter image description here

+0

Uygulamanızı ekrana getirebilir misiniz? –

+0

@ NguyễnTrungHiếu Evet, tabi ki. Bir ekran eklendi. – Enrichman

+1

@Enrichman Sorunun çözümünü buldunuz mu soruyorsunuz, çünkü aynı sorunla karşılaşıyorum. :( – Droidwala

cevap

1

Sen AppBarLayout dışında TabLayout tutmak gerekir.

Böyle bir şey.

<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.AppBarLayout> 

<android.support.design.widget.TabLayout 
     android:id="@+id/home_tab_layout" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:background="#ffffff" 
     app:tabGravity="fill" 
     app:tabIndicatorColor="@color/primary_blue_dark" 
     app:tabMode="fixed" 
     app:tabSelectedTextColor="@color/primary_blue" 
     app:tabTextColor="@color/primary_blue_light" 
     app:tabTextAppearance="@style/tab_layout_font_style"/> 

<android.support.v4.view.ViewPager 
     android:id="@+id/home_viewpager" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:layout_gravity="fill_horizontal"/> 

Bu, benim için çalıştı.

1

Bunu deneyin.

Burada Tab Bar yılında android:fillViewport="false" mal beyanında gerekir.

<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:fitsSystemWindows="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/tabs" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      app:tabGravity="fill" 
      app:tabMode="fixed" /> 
    </android.support.design.widget.AppBarLayout> 

    <android.support.v4.view.ViewPager 
     android:id="@+id/viewpager" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     app:layout_behavior="@string/appbar_scrolling_view_behavior" /> 
</android.support.design.widget.CoordinatorLayout> 

Tab Bar burada değişir mi.

<android.support.design.widget.TabLayout 
      android:id="@+id/tabs" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:fillViewport="false" /> 

DÜZENLEME 1:

Bu benim için çalışan bu başvurun budur.

<?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" 
    android:id="@+id/main_content" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 

    <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" 
      android:background="?attr/colorPrimary" 
      app:popupTheme="@style/ThemeOverlay.AppCompat.Light" 
      app:layout_scrollFlags="scroll|enterAlways|snap" /> 

     <android.support.design.widget.TabLayout 
      android:id="@+id/tabs" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:fillViewport="false" /> 

    </android.support.design.widget.AppBarLayout> 

    <android.support.v4.view.ViewPager 
     android:id="@+id/viewpager" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     app:layout_behavior="@string/appbar_scrolling_view_behavior" /> 


</android.support.design.widget.CoordinatorLayout> 
+0

Çalışmıyor. :( – Enrichman

+0

@Enrichman Hala sorun nedir? pls belirtin? –

+0

Hala aynı: Ekran görüntüsünden de görebileceğiniz gibi, çıkış düğmesi altta olmalı, ancak parçanın yüksekliği mevcut olan alandan daha fazla ve böylece tüm görünüm kaydırılabilir. tasarım görünümü) – Enrichman

8

Eğer AppBarLayout ve ViewPager arasında bir LinearLayout eklemeyi deneyebilirsiniz. Benim için çalışıyor. :)

<LinearLayout 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:orientation="vertical"> 

    <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/tabs" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      app:tabMode="fixed" 
      app:tabGravity="fill"/> 

    </android.support.design.widget.AppBarLayout> 


    <android.support.v4.view.ViewPager 
     android:id="@+id/viewpager" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     app:layout_behavior="@string/appbar_scrolling_view_behavior" /> 

</LinearLayout> 
+0

Bu, yapışkan eylem çubuğunun yan etkisine sahip olacak, kaydırma üzerinde gizlenmeyecektir. – Winster

1

kaydırma yapmaksızın sabit araç çubuğu gerekiyorsa, o zaman düzen tasarımdan CoordinatorLayout ve AppBarLayout kaldırabilir ve bunun yerine RelativeLayout kullanın. Bu destek kütüphanesi hatasıdır ve bu tarihe kadar bir çözümü yoktur. ViewPager için aşağıdaki düzen kodunu Toolbar ve TabLayout ile birlikte kullanabilirsiniz. ViewPager, bu durumda işaret edildiği için taşmayacaktır.

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout 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=".HomeActivity"> 

    <android.support.v7.widget.Toolbar 
     android:id="@+id/toolbar" 
     android:layout_width="match_parent" 
     android:layout_height="?attr/actionBarSize" 
     android:background="?attr/colorPrimary" 
     app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/> 

    <android.support.design.widget.TabLayout 
     android:id="@+id/tabs" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     app:tabIndicatorColor="@android:color/white" 
     app:popupTheme="@style/ThemeOverlay.AppCompat.Light" 
     android:background="?attr/colorPrimary" 
     android:layout_below="@id/toolbar"/> 

    <android.support.v4.view.ViewPager 
     android:id="@+id/container" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:layout_below="@id/tabs"/> 

</RelativeLayout> 

Birisi yardımcı olur umarım!

0
Benim için

Viewpager layout_height sınırlar içinde kalmasını böyle, Araç Çubuğu layout_behaviour ekleyerek bu yüzden, bir Koordinatör Düzeni ile çalışan tek sollution:

<android.support.v7.widget.Toolbar 
     android:id="@+id/toolbar" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:background="?attr/colorPrimary" 
     app:layout_behavior="@string/appbar_scrolling_view_behavior" 
     app:popupTheme="@style/AppTheme.AppBarOverlay"> 

Muhtemelen senin için çok geç, ama belki Başka birine yardımcı olur.

Uygulamamı başlattığımda bu beni rahatsız etmedi, ancak daha sonra başka bir sekmede bir snackbar eklemek istediğimde, snackbar yalnızca sayfayı kaydırdığımda görülebilirdi. dolgu araç çubukları tamamen aynı boyutta olduğundan

<android.support.v4.view.ViewPager 
    android:id="@+id/viewpager" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:paddingBottom="?attr/actionBarSize" 
    app:layout_behavior="@string/appbar_scrolling_view_behavior" /> 

Not:

0

Ben CoordinatorLayout ait

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:app="http://schemas.android.com/apk/res-auto" 
android:id="@+id/main_content" 
android:layout_width="match_parent" 
android:layout_height="match_parent"> 

<RelativeLayout 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 

    <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" 
      android:background="?attr/colorPrimary" 
      app:layout_scrollFlags="scroll|enterAlways|snap" 
      app:popupTheme="@style/ThemeOverlay.AppCompat.Dark" /> 

     <android.support.design.widget.TabLayout 
      android:id="@+id/tabs" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:fillViewport="false" /> 

    </android.support.design.widget.AppBarLayout> 

    <android.support.v4.view.ViewPager 
     android:id="@+id/viewpager" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:layout_below="@id/appbar" 
     /> 

</RelativeLayout> 
</android.support.design.widget.CoordinatorLayout> 
0

ViewPager benim için hile yaptı bir padding ekleme içeride Bağıl düzenini kullanmış height.
?attr/actionBarSize yerine, ?actionBarSize da geçerlidir.