FrameLayout裡有CardView造成的顯示順序問題

ChinaDragon發表於2019-01-08
View

Android中FrameLayout（幀佈局）預設的 下一個會自動顯示在上一個的上面，但是裡面有CardView的時候，其他的控制元件卻看不見，例如在需求在CardView外層左上角顯示排名，單獨放的textview卻看不見，佈局程式碼和效果圖如下：

FrameLayout裡有CardView造成的顯示順序問題

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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:padding="20dp"
  tools:context=".MainActivity">

  <android.support.v7.widget.CardView
      android:layout_width="match_parent"
      android:layout_height="200dp"
      app:cardBackgroundColor="@color/colorWhite"
      app:cardElevation="5dp"
      app:cardMaxElevation="10dp">

      <TextView
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_gravity="center"
          android:text="卡片內容"
          android:textColor="@color/colorAccent" />
  </android.support.v7.widget.CardView>

  <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="排名1"
      android:textColor="@color/colorAccent" />

</FrameLayout>
複製程式碼

一般情況上面佈局裡的TextView排名1是可以看見的，因為cardview自動陰影，設定elevation能改變FrameLayout裡面顯示的順序，有陰影的時候，將不會遵循預設的自動覆蓋邏輯。elevation最大的值會在最上層，因此我們將上面的 排名1TextView 設定一下elevation就可以解決看不見的問題了，佈局程式碼和效果圖如下：

FrameLayout裡有CardView造成的顯示順序問題

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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:padding="20dp"
    tools:context=".MainActivity">

    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="200dp"
        app:cardBackgroundColor="@color/colorWhite"
        app:cardElevation="5dp"
        app:cardMaxElevation="10dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="卡片內容"
            android:textColor="@color/colorAccent" />
    </android.support.v7.widget.CardView>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:elevation="5dp"
        android:text="排名1"
        android:textColor="@color/colorAccent" />

</FrameLayout>
複製程式碼

注意：TextView裡的 android:elevation=" "裡的值不能小於CardView 裡的 app:cardElevation=" "的值，因為elevation最大的值會顯示在最上層

重點提醒：設定elevation能改變FrameLayout裡面顯示的順序

相關文章