Question

我有一个9补丁可绘制图形，我想用作视图的背景。我希望该视图显示单击视图时遵循9补丁概述的波纹效果。这是我的活动，布局和可绘制的代码。

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：

<?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：

<?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：

但是，当我单击它时，可绘制的波纹非常扭曲，好像它被拉伸到视图大小而没有遵守9个补丁的拉伸规则。我应该如何配置纹波使其与背景相同？：

Answer 1

更新：我对答案进行了重新设计以改善问题。已对以下内容进行编辑以反映更改。

TL; DR至少对于API 28，不要将android:backgroundTint用于基于九个补丁可绘制对象的波纹背景。在代码中设置颜色。

此问题与背景有关。我将通过参考以下视频来解释我如何得出这个结论。

我将气泡从上到下分别称为view1到view4。我从您的九个补丁更改为更好地查看补丁，因为您的九个补丁主要是黑色的。

单击

View1时，将显示适当的波纹效果。它具有波纹背景，但没有背景色。

您在背景中看到的是View2-只是搞砸了。此视图具有XML设置的背景色。

已将view3的高度强制为view1的高度，以查看波纹的外观。如您所见，波纹看起来正好适合高度。这是扭曲的非波纹背景图像。

View4与view2相同，除了它以编程方式添加了RippleDrawable的色彩。如您所见，该视图的外观和行为均应如此。

底线？不要为XML的九个补丁设置背景色。在代码中进行设置。这是错误吗？也许。

这是上面视频的支持代码。

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：

<color name="background_tint">#2681d8</color>
<color name="ripple_tint">#33000000</color>

ninepatch_bubble.9.png

Answer 2

尝试使用像这样的波纹效果：

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/White">
    <item android:drawable="@drawable/tooltip_left_top" />
    <item android:id="@android:id/mask">
        <color android:color="@color/your_tooltip_color_code" />
    </item>
</ripple>

如果可以，请在此处更新。

在9patch背景上应用时，涟漪效果可绘制对象变形

2 个答案: