Thêm bố cục tùy chỉnh vào ActionBar/Thanh công cụ không có lề

Question

Tôi muốn tạo thanh công cụ chiều cao tùy chỉnh và nó hoạt động tốt cho đến khi tôi thêm nội dung vào thanh công cụ. Sau đó, nội dung của tôi được điều chỉnh nằm giữa mũi tên quay lại và các nút trên thanh tác vụ.

Làm cách nào để làm cho nội dung của tôi chiếm toàn bộ chiều rộng để tôi có thể tạo bố cục như dưới đây? Tôi đoán biểu tượng "+" cần nằm trong bố cục mẹ của thanh công cụ?

Các tài liệu nói:

Ứng dụng này có thể thêm quan điểm con tùy ý để Toolbar. Chúng sẽ xuất hiện ở vị trí này trong bố cục. Nếu Thanh công cụ của một chế độ xem con.LayoutParams cho biết giá trị Trọng lực của CENTER_HORIZONTAL, chế độ xem sẽ cố gắng căn giữa trong khoảng trống còn lại trong Thanh công cụ sau khi tất cả các yếu tố khác đã được đo.

Nhưng tôi không có lực hấp dẫn thiết lập để CENTER_HORIZONTAL ...

<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android" 
     xmlns:iosched="http://schemas.android.com/apk/res-auto" 
     iosched:theme="@style/ActionBarThemeOverlay" 

     iosched:popupTheme="@style/ActionBarPopupThemeOverlay" 
     android:id="@+id/toolbar_actionbar" 
     android:background="@color/theme_primary" 
     iosched:titleTextAppearance="@style/ActionBar.TitleText" 
     iosched:contentInsetStart="16dp" 
     iosched:contentInsetEnd="16dp" 
     android:layout_width="match_parent" 
     android:layout_height="128dp" > 
     <RelativeLayout 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content"> 

     ... My Content 

Hiện nay bố trí của tôi kết thúc như thế này khi chạy với lề trái thiết lập để 168:

Answer 1

Tôi không chắc liệu bạn vẫn cần trợ giúp về điều này, nhưng nó có nhiều phiếu bầu nhất cho một câu hỏi chưa được trả lời không chỉ trong thẻ android-5.0-lollipop, mà còn là thẻ android-toolbar ngay bây giờ. Vì vậy, tôi nghĩ tôi sẽ cho nó một cái.

Bố cục này khá dễ thực hiện, đặc biệt với Design Support Library mới.

Thực hiện

Các thư mục gốc của hệ thống cấp bậc của bạn sẽ cần phải được các CoordinatorLayout.

Theo các tài liệu:

Children of một CoordinatorLayout có thể có một neo. Id chế độ xem này phải là tương ứng với một hậu duệ tùy ý của CoordinatorLayout, nhưng nó có thể không phải là chính con neo hoặc con cháu của con neo . Điều này có thể được sử dụng để đặt chế độ xem nổi liên quan đến các ô nội dung khác tùy ý.

Vì vậy, chúng tôi sẽ sử dụng điều này để định vị FloatingActionButton nơi cần phải đi.

Phần còn lại khá đơn giản. Chúng tôi sẽ sử dụng LinearLayout theo chiều dọc để định vị Toolbar, vùng chứa văn bản, vùng chứa tab và sau đó là ViewPager. Vì vậy, toàn bộ bố trí trông giống như:

<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"> 

    <LinearLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:background="#181E80" 
     android:orientation="vertical"> 

     <android.support.v7.widget.Toolbar 
      android:id="@+id/toolbar" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:minHeight="?attr/actionBarSize" /> 

     <RelativeLayout 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:layout_marginBottom="48dp" 
      android:paddingTop="8dp"> 

      <ImageView 
       android:id="@android:id/icon" 
       android:layout_width="54dp" 
       android:layout_height="54dp" 
       android:layout_alignParentStart="true" 
       android:layout_marginStart="16dp" 
       android:importantForAccessibility="no" 
       android:src="@drawable/logo" /> 

      <TextView 
       android:id="@android:id/text1" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_alignTop="@android:id/icon" 
       android:layout_marginStart="14dp" 
       android:layout_toEndOf="@android:id/icon" 
       android:text="Chelsea" 
       android:textColor="@android:color/white" 
       android:textSize="24sp" /> 

      <TextView 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:layout_alignStart="@android:id/text1" 
       android:layout_below="@android:id/text1" 
       android:text="England - Premier League" 
       android:textColor="@android:color/white" 
       android:textSize="12sp" /> 

     </RelativeLayout> 

     <FrameLayout 
      android:id="@+id/tab_container" 
      android:layout_width="match_parent" 
      android:layout_height="90dp" 
      android:background="#272F93"> 

      <android.support.design.widget.TabLayout 
       android:id="@+id/tabs" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:layout_gravity="bottom" 
       app:tabContentStart="70dp" 
       app:tabGravity="center" 
       app:tabIndicatorColor="#F1514A" 
       app:tabMode="scrollable" 
       app:tabSelectedTextColor="@android:color/white" 
       app:tabTextColor="#99ffffff" /> 

     </FrameLayout> 

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

    </LinearLayout> 

    <android.support.design.widget.FloatingActionButton 
     android:layout_width="60dp" 
     android:layout_height="60dp" 
     android:layout_margin="16dp" 
     android:src="@drawable/ic_star_white_24dp" 
     app:backgroundTint="#F1514A" 
     app:borderWidth="0dp" 
     app:elevation="8dp" 
     app:layout_anchor="@id/tab_container" 
     app:layout_anchorGravity="top|right|end" /> 

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

Không có nhiều thứ khác để thêm, chỉ có điều khác tôi muốn đề cập đến là làm thế nào để sử dụng TabLayout.Nếu bạn đang sử dụng một ViewPager như chúng ta, có thể bạn muốn gọi một trong hai:

• TabLayout.setTabsFromPagerAdapter
• TabLayout.setupWithViewPager

Ghi chú

Tôi chỉ loại eyeballed kích thước, cố gắng để phù hợp với hình ảnh càng nhiều càng tốt.

Kết quả