前提・実現したいこと
kotlinでandroidアプリの開発をしています。
今現在、xmlでUI作成を行っています。
今回以下、3枚の画像を使って円の中に枠の画像と枠の中のデザインの画像を
うまく円の中に入れ込んだレイアウトの作成を行いたいです。
円からハミ出さないように枠の中に入れ込みたいです。(入れ込むという表現が難しいのですが、枠画像とデザイン画像が円の背景によって本来、はみ出る部分を切り取るようなイメージになります。)
・円形の画像(こちらはshapeタグを使って自作したもの)
・android実機の枠が形どられた画像
・枠の中のサンプルデザインが表示された画像
発生している問題
constraintLayoutを使用してレイアウトを作成しているのですが、 コードの記述を上から順に白の円→枠の中のサンプルデザイン→android実機の枠が形どられた画像の順に 記述をすると、実際に作成される画像では、画像サイズの問題で円の枠から実機の画像とデザインの画像がはみ出てしまいます。 理想としては、はみ出ている表示される部分を白の枠で切れるような状態にしたいです。(わかりにくくて申し訳ないです。。。) 白の円の枠画像の上に画像を重ねた際に白の枠画像を背景としてはみ出さないように実装するには どのような実装方法があるのか教えていただきたく思います。 ご回答よろしくお願いいたします。
該当のソースコード
xml
1 2 //ここが円画像 3 <ImageView 4 android:id="@+id/pushNotificationBackground" 5 android:layout_width="359dp" 6 android:layout_height="340dp" 7 android:layout_margin="@dimen/layout_margin_top" 8 android:contentDescription="@string/push_notification_background" 9 app:layout_constraintEnd_toEndOf="parent" 10 app:layout_constraintStart_toStartOf="parent" 11 app:layout_constraintTop_toBottomOf="@+id/pushNotificationRecommendedText" 12 app:srcCompat="@drawable/circle_layout_white" /> 13 14 15 //android実機の枠の中のデザインの画像 16 <ImageView 17 android:id="@+id/pushNotificationSampleLayoutContents" 18 android:layout_width="150dp" 19 android:layout_height="310dp" 20 android:layout_marginBottom="20dp" 21 app:layout_constraintBottom_toBottomOf="@+id/pushNotificationBackground" 22 app:layout_constraintEnd_toEndOf="@+id/pushNotificationSampleLayout" 23 app:layout_constraintStart_toStartOf="@+id/pushNotificationSampleLayout" 24 app:layout_constraintTop_toTopOf="@+id/pushNotificationBackground" 25 app:srcCompat="@drawable/sample_design" /> 26 27 28 //ここが実機の枠の画像 29 <ImageView 30 android:id="@+id/pushNotificationSampleLayout" 31 android:layout_width="wrap_content" 32 android:layout_height="335dp" 33 android:contentDescription="@string/application_start_sample_layout_image" 34 app:layout_constraintBottom_toBottomOf="@+id/pushNotificationBackground" 35 app:layout_constraintEnd_toEndOf="@+id/pushNotificationBackground" 36 app:layout_constraintStart_toStartOf="@+id/pushNotificationBackground" 37 app:layout_constraintTop_toTopOf="@+id/pushNotificationBackground" 38 app:srcCompat="@drawable/real_machine_sample" /> 39 40
試したこと
FrameLayoutを使って、親を背景の白の円画像にして子ビューのなかに
枠デザインと実機の枠画像を入れ込んで、
実装を試みましたが、期待したレイアウトになりませんでした。
ここに問題に対して試したことを記載してください。
補足情報(FW/ツールのバージョンなど)
OS:macbookPro macOS Catalina
開発環境:androidstudio4.0
ここにより詳細な情報を記載してください。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。