问题描述
我有一个9补丁可绘制图形，我想用作视图的背景.我希望该视图显示单击视图时遵循9补丁概述的波纹效果.这是我的活动，布局和可绘制的代码.
I have a 9 patch drawable which I want to use as a background on a view. I want the view to show a ripple effect that follows the outline of a 9 patch when the view is clicked. Here's my activity, layout, and drawable code.
MainActivity.kt:
MainActivity.kt:
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val click = findViewById<ConstraintLayout>(R.id.container)
click.setOnClickListener { Toast.makeText(this, "Clicked", Toast.LENGTH_SHORT).show() }
}
}
activity_main.xml:
activity_main.xml:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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="com.antonc.testapp.MainActivity">
<android.support.constraint.ConstraintLayout
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="8dp"
android:paddingStart="8dp"
android:paddingEnd="8dp"
android:paddingTop="16dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:background="@drawable/tooltip_background"
android:backgroundTint="#2681d8"
tools:layout_editor_absoluteX="8dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello test test !!!"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintHorizontal_bias="0.0"
/>
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>
tooltip_background.xml:
tooltip_background.xml:
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#33000000">
<item android:drawable="@drawable/tooltip_left_top"/>
<item android:id="@android:id/mask" android:drawable="@drawable/tooltip_left_top"/>
</ripple>
tooltip_left_top.9.png:
tooltip_left_top.9.png:
但是，当我单击它时，可绘制的波纹非常扭曲，好像它被拉伸到视图大小而没有遵守9个补丁的拉伸规则.我应该如何配置纹波使其与背景相同?:
But when I click on it, the ripple drawable is very distorted, as if it's stretched to the view size without observing the stretch rules of 9 patch. How should I configure the ripple to make it be the same as the background?:
推荐答案
更新:我对答案进行了重新设计以完善该问题.已对以下内容进行编辑以反映更改.
TL; DR至少在API 28上，不要将android:backgroundTint用于基于九个补丁可绘制对象的波纹背景.在代码中设置色彩.
TL;DR Do not use android:backgroundTint for ripple backgrounds based on nine-patch drawables at least for API 28. Set the tint in code.
此问题与背景色有关.我将通过参考以下视频来解释我如何得出这个结论.
This issue has something to do with the background tint. I will explain how I came to this conclusion by referring to the following video.
我将气泡从顶部到底部分别称为view1到view4.我从您的九个补丁更改为更好地查看补丁，因为您的九个补丁主要是黑色的.
I will refer to the bubbles as view1 through view4 from top to bottom. I changed from your nine-patch to better see the patches since your nine-patch was mostly black.
View1时，将显示适当的波纹效果.它具有波纹背景，但没有背景色.
View1, when click, shows the appropriate ripple effect. It has a ripple background but no background tint.
View2是您在背景中看到的内容-只是搞砸了.此视图具有XML设置的背景色.
View2 is what you are seeing with your background - it is just messed up. This view has a background tint set in XML.
已将view3的高度强制为view1的高度，以查看波纹的外观.如您所见，波纹看起来正好适合高度.这是扭曲的非波纹背景图像.
The height of view3 has been forced to the height of view1 to see how the ripple looks. As you can see, the ripple looks right for the height. It is the non-ripple background image that is distorted.
View4与view2相同，除了它以编程方式添加了RippleDrawable的色调.如您所见，该视图的外观和行为均应如此.
View4 is the same as view2 except that it has the tint for RippleDrawable added programmatically. As you can see, this view looks and behaves as it should.
底线?不要为XML的九个补丁设置背景色.在代码中进行设置.这是一个错误吗?也许.
Bottom line? Don't set the background tint for a nine-patch in XML. Set it in code. Is this a bug? Maybe.
这是上面视频的支持代码.
Here is the support code for the video above.
activity_main.xml
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFFFFFFF"
android:fillViewport="true"
android:orientation="vertical"
android:padding="16dp"
tools:context=".MainActivity">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
tools:context=".MainActivity">
<ImageView
android:id="@+id/imageView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:background="@drawable/bubble_background"
android:clickable="true" />
<ImageView
android:id="@+id/imageView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:background="@drawable/bubble_background"
android:backgroundTint="@color/background_tint"
android:clickable="true" />
<ImageView
android:id="@+id/imageView3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:background="@drawable/bubble_background"
android:backgroundTint="@color/background_tint"
android:clickable="true" />
<ImageView
android:id="@+id/imageView4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:background="@drawable/bubble_background"
android:clickable="true" />
</LinearLayout>
</ScrollView>
bubble_background.xml
<ripple
android:color="#33000000">
<item android:drawable="@drawable/ninepatch_bubble">
</item>
</ripple>
MainActivity.java
public class MainActivity extends AppCompatActivity {
private LinearLayout mLayout;
private ImageView mImageView1;
private ImageView mImageView2;
private ImageView mImageView3;
private ImageView mImageView4;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mLayout = findViewById(R.id.layout);
mImageView1 = findViewById(R.id.imageView1);
mImageView2 = findViewById(R.id.imageView2);
mImageView3 = findViewById(R.id.imageView3);
mImageView4 = findViewById(R.id.imageView4);
int bgTint = getResources().getColor(R.color.background_tint);
RippleDrawable rippleDrawable =(RippleDrawable) mImageView4.getBackground();
rippleDrawable.getDrawable(0).setTint(bgTint);
mImageView4.setBackground(rippleDrawable);
mLayout.post(new Runnable() {
@Override
public void run() {
mImageView3.getLayoutParams().height = mImageView1.getMeasuredHeight();
mLayout.requestLayout();
}
});
}
}
colors.xml
这些已添加到colors.xml:
colors.xml
These were added to colors.xml:
<color name="background_tint">#2681d8</color>
<color name="ripple_tint">#33000000</color>
ninepatch_bubble.9.png
这篇关于在9patch背景上应用时，涟漪效果可绘制对象变形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！