Hiển thị nội dung dưới thanh công cụ

Question

Xin chào, tôi đang cố gắng đặt nội dung của mình bên dưới thanh công cụ nhưng tại thời điểm tôi chạy ứng dụng, một số nội dung bị ẩn sau khi nó ở bên dưới.

Tôi đã đọc về cách sử dụng bố cục khung để cố gắng tách riêng nhưng tôi đã gặp một chút khó khăn. Tôi hiện đang sử dụng mẫu ngăn điều hướng studio android cơ bản được cung cấp cùng với phần mềm và đã tự hỏi những thay đổi tôi phải thực hiện.

bố trí điều phối viên của tôi

<android.support.design.widget.AppBarLayout 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:theme="@style/AppTheme.AppBarOverlay"> 

    <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/AppTheme.PopupOverlay" /> 

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

<FrameLayout 
    android:id="@+id/fragment_container" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"/> 

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

---

bố cục ngăn My

<android.support.v4.widget.DrawerLayout 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/drawer_layout" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:fitsSystemWindows="true" 
tools:openDrawer="start"> 

<include 
    layout="@layout/app_bar_main" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" /> 

<android.support.design.widget.NavigationView 
    android:id="@+id/nav_view" 
    android:layout_width="wrap_content" 
    android:layout_height="match_parent" 
    android:layout_gravity="start" 
    android:fitsSystemWindows="true" 
    app:headerLayout="@layout/nav_header_main" 
    app:menu="@menu/activity_main_drawer" /> 

    </android.support.v4.widget.DrawerLayout> 

Tôi cần những gì thay đổi để làm?

Answer 1

Nhiều ViewGroups cho phép con cái của họ để chồng lên nhau. Chúng bao gồm FrameLayout, RelativeLayout, CoordinatorLayout và DrawerLayout. Một cái không cho phép con của nó chồng lên nhau là LinearLayout.

Câu trả lời cho câu hỏi của bạn thực sự phụ thuộc vào kết quả cuối cùng. Nếu bạn đang cố gắng chỉ có một thanh công cụ đó là luôn luôn trên màn hình và một số nội dung bên dưới nó, sau đó bạn không cần một CoordinatorLayout và AppBarLayout ở tất cả, bạn chỉ có thể sử dụng một LinearLayout thẳng đứng với hai đứa con:

<LinearLayout android:orientation="vertical" ...> 
    <android.support.v7.widget.Toolbar 
     android:layout_width="match_parent" 
     android:layout_height="?attr/actionBarSize" 
     ... /> 

    <FrameLayout 
     android:id="@+id/fragment_container" 
     android:layout_width="match_parent" 
     android:layout_height="0dp" 
     android:layout_weight="1" 
     ... /> 
</LinearLayout> 

Lưu ý các thuộc tính bố cục của FrameLayout.

Nếu bạn muốn làm những thứ lạ mắt nơi cuộn thanh công cụ trên và tắt màn hình khi bạn di chuyển nội dung, sau đó bạn cần một AppBarLayout và bạn cần phải cung cấp cho khu vực nội dung của bạn một thuộc tính đặc biệt như thế này:

<android.support.design.widget.CoordinatorLayout> 
    <android.support.design.widget.AppBarLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     ... > 

     <android.support.v7.widget.Toolbar 
      android:layout_width="match_parent" 
      android:layout_height="?attr/actionBarSize" 
      app:layout_scrollFlags="scroll" 
      ... /> 
    </android.support.design.widget.AppBarLayout> 

    <FrameLayout 
     android:id="@+id/fragment_container" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     app:layout_behavior="@string/appbar_scrolling_view_behavior" 
     ... /> 
</android.support.design.widget.CoordinatorLayout> 

Answer 2

app:layout_behavior="@string/appbar_scrolling_view_behavior" 

Thêm mã này vào thẻ khung của bạn

Answer 3

Như @ Brian Hoàng và @Karakuri nói sử dụng tài sản layout_behaviour:

app:layout_behavior="@string/appbar_scrolling_view_behavior" 

có vẻ là một giải pháp rất tốt. Ngay cả khi bạn không có bất kỳ hoạt ảnh nào vào lúc này nhưng bạn dự định có trong tương lai thì bạn vẫn có thể giữ CoordinatorLayout và một AppBarLayout trong trường hợp bạn muốn thêm hoạt ảnh trong tương lai.

---

Điều mà tài sản có vẻ như nói chung từ hiểu biết của tôi, là tính toán chiều cao của toàn bộ thành phần giao diện người dùng AppBarLayout. Thành phần giao diện người dùng sử dụng thuộc tính layout_behaviour với chuỗi @/appbar_scrolling_view_behaviour sẽ tự động được hiển thị chính xác bên dưới AppBarLayout bất kể chiều cao là gì.

Bằng cách này, không cần phải mã hóa bất kỳ lề trên nào trong giao diện người dùng được cho là nằm trong AppBarLayout.

Trong mã bên dưới include_app_bar_with_tabs_layout (AppBarLayout) có chiều cao cố định là 200dp (có thể là wrap_content hoặc bất kỳ thứ gì khác). Sau đó RelativeLayout chứa nội dung của màn hình sử dụng thuộc tính layout_behaviour.

---

Có một cái nhìn tại các mã và giao diện người dùng hình ảnh dưới đây:

<?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:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:fitsSystemWindows="true"> 

    <include 
     layout="@layout/include_app_bar_with_tabs_layout" 
     android:layout_width="match_parent" 
     <!-- this can be anything, even wrap_content --> 
     android:layout_height="200dp" /> 

    <RelativeLayout 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:background="@color/Green" 
     <!-- this tells it to be below the include_app_bar_with_tabs_layout (AppBarLayout) --> 
     app:layout_behavior="@string/appbar_scrolling_view_behavior"> 

     <android.support.v4.view.ViewPager 
      android:id="@+id/view_pager" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:layout_above="@+id/adView" /> 

     <com.google.android.gms.ads.AdView 
      android:id="@id/adView" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_alignParentBottom="true" 
      android:layout_centerHorizontal="true" 
      app:adSize="BANNER" 
      app:adUnitId="@string/banner_ad_unit_id" 
      tools:background="@color/green" 
      tools:layout_height="50dp" /> 
    </RelativeLayout> 
</android.support.design.widget.CoordinatorLayout>