如何让CoordinatorLayout中的AppBarLayout占屏幕高度的25%?
Solution: Make AppBarLayout take 25% of screen height in CoordinatorLayout
Got it, let's fix this! Since CoordinatorLayout doesn't natively support percentage-based dimensions like ConstraintLayout does, we can wrap your AppBarLayout in a full-screen ConstraintLayout (inside the CoordinatorLayout) to leverage its guideline feature. Here's the adjusted layout:
Modified Layout Code
<?xml version="1.0" encoding="utf-8"?> <androidx.coordinatorlayout.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" tools:context=".MainActivity"> <!-- ConstraintLayout wrapper to handle percentage height logic --> <androidx.constraintlayout.widget.ConstraintLayout android:layout_width="match_parent" android:layout_height="match_parent"> <!-- Horizontal guideline at 25% of screen height --> <androidx.constraintlayout.widget.Guideline android:id="@+id/guideline_25_percent" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal" app:layout_constraintGuide_percent="0.25" /> <com.google.android.material.appbar.AppBarLayout android:id="@+id/fragprofile_app_bar" android:layout_width="match_parent" android:layout_height="0dp" android:background="@drawable/background_gradient" android:orientation="vertical" app:layout_constraintBottom_toTopOf="@id/guideline_25_percent" app:layout_constraintTop_toTopOf="parent"> <TextView android:id="@+id/tv_app_name" android:layout_width="wrap_content" android:layout_height="0dp" android:layout_gravity="center" android:drawablePadding="3dp" android:fontFamily="@font/concert_one" android:gravity="center" android:textColor="@color/colorWhite" android:textSize="24sp" android:layout_weight="1" app:layout_scrollFlags="scroll|enterAlways" /> <com.google.android.material.tabs.TabLayout android:id="@+id/tablayout" android:layout_width="match_parent" android:layout_height="wrap_content" app:tabIndicatorColor="@color/colorWhite" app:tabIndicatorHeight="3dp" app:tabSelectedTextColor="@color/colorWhite" app:tabTextColor="@color/colorWhite60PercentOpacity" /> </com.google.android.material.appbar.AppBarLayout> </androidx.constraintlayout.widget.ConstraintLayout> <androidx.viewpager.widget.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/colorWhite" app:layout_behavior="@string/appbar_scrolling_view_behavior" /> </androidx.coordinatorlayout.widget.CoordinatorLayout>
Key Changes Breakdown
- ConstraintLayout Wrapper: We added a full-screen ConstraintLayout to host the AppBarLayout and guideline. This lets us use percentage positioning while keeping CoordinatorLayout as the root (so your ViewPager's scrolling behavior still works).
- 25% Guideline: The horizontal guideline uses
app:layout_constraintGuide_percent="0.25"to mark the 25% height point of the screen. - AppBarLayout Height: We set the AppBarLayout's height to
0dpand constrained its top to the parent's top, bottom to the guideline. This forces it to fill exactly the top 25% of the screen. - Fixed Internal Layout: Removed the invalid
layout_constraintattributes from the TextView and TabLayout (they don't work inside AppBarLayout, which is a LinearLayout). Instead, we usedlayout_weight="1"on the TextView to let it take up the available space above the TabLayout, keeping the TabLayout anchored to the bottom of the AppBarLayout.
This approach avoids hardcoded dp values and keeps your CoordinatorLayout-based scrolling functionality intact.
内容的提问来源于stack exchange,提问作者WHOATEMYNOODLES
相关产品推荐
相关产品推荐

