web-dev-qa-db-ja.com

Android PopupWindowの標高に影が表示されない

Android PopupWindow 標高が設定されている場合、影は表示されません。ドキュメントからそれをサポートしているようです。 5.0 Lollipopを使用しています。

次のようにポップアップを作成します。

    popupWindow = new PopupWindow(context);
    popupWindow.setOutsideTouchable(true);
    popupWindow.setFocusable(true);
    popupWindow.setElevation(10);
    popupWindow.setContentView(rootView);
    popupWindow.showAtLocation(anchorView, Gravity.NO_GRAVITY, xPos, yPos);
androidandroid-5.0-lollipopandroid-popupwindow
29
Patrick

として Android開発者 によって回答されました。

膨張したビューに背景が設定されていない場合、またはポップアップウィンドウ自体に背景が設定されていない（または背景が透明である）場合、影は表示されません。

これは私のケースでしたが、setBackgroundDrawableを使用していないため、あなたのようです。

これは私のために働いた

popupWindow.setBackgroundDrawable(new ColorDrawable(Color.WHITE));

ドキュメントを更新することを提案する新しい問題を開きました（ https://code.google.com/p/Android/issues/detail?id=174919 ）

22
Maragues

この回答にアクセスして、OPがすでに持っていたものを逃した他の人は、影を作成するために標高を設定する必要があります。

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Lollipop) {
    popupWindow.setElevation(20);
}

PopupWindow with shadow

コンテンツビューによっては、背景のドローアブルを設定する必要がある場合もありますが、これは必ずしも必要ではありません。必要に応じて、@ Maraguesが提案したように実行できます。

popupWindow.setBackgroundDrawable(new ColorDrawable(Color.WHITE));

Lollipop以前のデバイスをサポートするには、その中に影を含む9パッチまたはイメージを使用できます。

コード

これは上の画像のコードです。

LayoutInflater inflater = (LayoutInflater) getSystemService(LAYOUT_INFLATER_SERVICE);
View popupView = inflater.inflate(R.layout.popup_window, null);
int width = LinearLayout.LayoutParams.WRAP_CONTENT;
int height = LinearLayout.LayoutParams.WRAP_CONTENT;
boolean focusable = true;
final PopupWindow popupWindow = new PopupWindow(popupView, width, height, focusable);
popupView.setOnTouchListener(new View.OnTouchListener() {
    @Override
    public boolean onTouch(View v, MotionEvent event) {
        popupWindow.dismiss();
        return true;
    }
});

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Lollipop) {
    popupWindow.setElevation(20);
}

popupWindow.showAtLocation(anyView, Gravity.CENTER, 0, 0);

注意：

標高は、コードで設定した場合はピクセル単位ですが、xmlで設定した場合は通常dp単位です。コードで設定する場合は、dp値をピクセルに変換する必要があります。

4
Suragch
  • setElevationには影が表示されませんでした。コンテナが透明だったためです。
  • 両側にパッドが必要だったので、コンテナは透明でした

以下のコードのスクリーンショット

  • 3つの容器を作りました
  • ほとんどのコンテナは透明です
  • 内側の次のコンテナには、影付きのDrawable背景があります
  • 次のコンテナは実際のコンテンツを保持します
  • xml内のボタンの最小幅は、幅を決定するのに役立ちます。 2番目のコンテナの12 dpのパディングと同じです。

Kotlinで記述されたカスタムポップアップウィンドウクラス：

class CustomPopupWindow(
    private val context: Context
) : PopupWindow(context) {

  init {
    val view = LayoutInflater.from(context).inflate(R.layout.popup_window_layout, null)
    contentView = view

    height = ListPopupWindow.WRAP_CONTENT
    width = ListPopupWindow.MATCH_PARENT
    isOutsideTouchable = true

    setTouchDismissListener()

    // set the background of the second container to the drawable
    // with the shadow to get our shadow
    contentView.findViewById<LinearLayout>(R.id.outer_content_container).setBackgroundDrawable(context.resources.getDrawable(R.drawable.background_shadow))
  }

  // Add a listener to dismiss the popup Window when someone
  // clicks outside of it
  private fun setTouchDismissListener() {
    setTouchInterceptor { _, event ->
      if (event != null && event.action == MotionEvent.ACTION_OUTSIDE) {
        dismiss()
        return@setTouchInterceptor true
      }
      false
    }
  }

  // this anchor view can be ANY view
  fun show(anchor: View) {

    // Remove the default background that is annoying
    setBackgroundDrawable(BitmapDrawable())

    // Grab the pixel count for how far down you want to put it.
    // toolbar_height is 56dp for me
    val yOffSetInPixels = context.resources.getDimensionPixelSize(R.dimen.toolbar_height)

    // Animation to make it appear and disappear like a Dialog
    animationStyle = Android.R.style.Animation_Dialog

    // Show it
    showAtLocation(anchor, Gravity.TOP, 0, yOffSetInPixels)
  }
}
  • カスタムPopupWindowのXML：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="wrap_content"
  Android:background="@Android:color/transparent"
  Android:orientation="vertical">

  <Android.support.constraint.ConstraintLayout
    Android:id="@+id/transparent_container"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:layout_gravity="center"
    Android:background="@Android:color/transparent"
    Android:padding="12dp">

    <LinearLayout
      Android:id="@+id/outer_content_container"
      Android:layout_width="match_parent"
      Android:layout_height="wrap_content"
      Android:background="@color/white"
      Android:orientation="vertical"
      app:layout_constraintBottom_toBottomOf="@+id/transparent_container"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toBottomOf="@+id/transparent_container">

      <LinearLayout
        Android:id="@+id/content_container"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:orientation="vertical"
        Android:padding="12dp">

        <TextView
          Android:layout_width="match_parent"
          Android:layout_height="wrap_content"
          Android:text="Header" />

        <LinearLayout
          Android:layout_width="match_parent"
          Android:layout_height="match_parent"
          Android:layout_gravity="center_vertical"
          Android:layout_marginTop="8dp"
          Android:orientation="horizontal">

          <TextView
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            Android:layout_gravity="center_vertical"
            Android:paddingEnd="0dp"
            Android:paddingStart="8dp"
            Android:text="Message" />

        </LinearLayout>

        <TextView
          Android:id="@+id/add_to_bag_button"
          Android:layout_width="match_parent"
          Android:layout_height="wrap_content"
          Android:layout_marginTop="16dp"
          Android:height="48dp"
          Android:background="@color/gray"
          Android:gravity="center"
          Android:minWidth="350dp"
          Android:text="BUTTON"
          Android:textAllCaps="true" />

      </LinearLayout>

    </LinearLayout>

  </Android.support.constraint.ConstraintLayout>

</LinearLayout>
  • 影を表示するカスタムDrawable：
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android">

  <!-- Drop Shadow Stack -->
  <item>
    <shape>
      <padding
        Android:bottom="1dp"
        Android:left="1dp"
        Android:right="1dp"
        Android:top="0dp" />

      <solid Android:color="#00CCCCCC" />

      <corners Android:radius="3dp" />
    </shape>
  </item>
  <item>
    <shape>
      <padding
        Android:bottom="1dp"
        Android:left="1dp"
        Android:right="1dp"
        Android:top="0dp" />

      <solid Android:color="#10CCCCCC" />

      <corners Android:radius="3dp" />
    </shape>
  </item>
  <item>
    <shape>
      <padding
        Android:bottom="1dp"
        Android:left="1dp"
        Android:right="1dp"
        Android:top="0dp" />

      <solid Android:color="#20CCCCCC" />

      <corners Android:radius="3dp" />
    </shape>
  </item>
  <item>
    <shape>
      <padding
        Android:bottom="1dp"
        Android:left="1dp"
        Android:right="1dp"
        Android:top="0dp" />

      <solid Android:color="#30CCCCCC" />

      <corners Android:radius="3dp" />
    </shape>
  </item>
  <item>
    <shape>
      <padding
        Android:bottom="1dp"
        Android:left="1dp"
        Android:right="1dp"
        Android:top="0dp" />

      <solid Android:color="#50CCCCCC" />

      <corners Android:radius="3dp" />
    </shape>
  </item>

  <!-- Background -->
  <item>
    <shape>
      <solid Android:color="@Android:color/white" />

      <corners Android:radius="0dp" />
    </shape>
  </item>

</layer-list>
  • それをすべて使用する：
val popupWindow = CustomPopupWindow(activity);
popupWindow.show(anyViewInYourActivity);
0
caseta