在视图组内容上绘制波纹
Drawing ripple over view group content
我正在尝试对布局应用涟漪效应 (@drawable/pill
)。波纹在布局子项下绘制,而我希望将效果应用于内容。
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:focusable="true"
android:background="@drawable/pill"
android:padding="8dp">
<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:src="@drawable/my_icon"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Sample text"/>
</FrameLayout>
</FrameLayout>
和pill.xml(其中@drawable/pill_bg
是自定义形状):
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?android:attr/colorControlHighlight">
<item android:id="@android:id/mask" android:drawable="@drawable/pill_bg"/>
<item android:drawable="@drawable/pill_bg"/>
</ripple>
根据其他帖子,我尝试将 android:background="@null"
和 android:drawSelectorOnTop="true"
应用于 ImageView
,但没有成功。
将波纹定义为布局背景是否有意义?我想知道是否正确的方法是将波纹与背景可绘制对象分开,并将波纹应用于与内容重叠的虚拟视图。
你是对的。您在 xml 中定义的内容如第一张图所示。要在 ImageView 和 TextView 上方绘制波纹,您需要在它们上方定义它。实现这一目标的一种方法是在 LinearLayout 之上放置一个 ImageView:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<LinearLayout
android:id="@+id/ll_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:focusable="true"
android:padding="8dp">
<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:src="@drawable/my_icon" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Sample text" />
</LinearLayout>
<ImageView
android:id="@+id/iv_ripple"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="@id/ll_container"
android:layout_alignLeft="@id/ll_container"
android:layout_alignRight="@id/ll_container"
android:layout_alignTop="@id/ll_container"
android:src="@drawable/pill" />
</RelativeLayout>
我正在尝试对布局应用涟漪效应 (@drawable/pill
)。波纹在布局子项下绘制,而我希望将效果应用于内容。
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:focusable="true"
android:background="@drawable/pill"
android:padding="8dp">
<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:src="@drawable/my_icon"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Sample text"/>
</FrameLayout>
</FrameLayout>
和pill.xml(其中@drawable/pill_bg
是自定义形状):
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?android:attr/colorControlHighlight">
<item android:id="@android:id/mask" android:drawable="@drawable/pill_bg"/>
<item android:drawable="@drawable/pill_bg"/>
</ripple>
根据其他帖子,我尝试将 android:background="@null"
和 android:drawSelectorOnTop="true"
应用于 ImageView
,但没有成功。
将波纹定义为布局背景是否有意义?我想知道是否正确的方法是将波纹与背景可绘制对象分开,并将波纹应用于与内容重叠的虚拟视图。
你是对的。您在 xml 中定义的内容如第一张图所示。要在 ImageView 和 TextView 上方绘制波纹,您需要在它们上方定义它。实现这一目标的一种方法是在 LinearLayout 之上放置一个 ImageView:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<LinearLayout
android:id="@+id/ll_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:focusable="true"
android:padding="8dp">
<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:src="@drawable/my_icon" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Sample text" />
</LinearLayout>
<ImageView
android:id="@+id/iv_ripple"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="@id/ll_container"
android:layout_alignLeft="@id/ll_container"
android:layout_alignRight="@id/ll_container"
android:layout_alignTop="@id/ll_container"
android:src="@drawable/pill" />
</RelativeLayout>