Библиотека Android-WScratchView

Многим из вас приходилось иметь дело с скретч-картами, когда монеткой нужно было стереть защитный слой и увидеть заветные цифры. Это могли быть и счастливые номера лотереи или пин-код и т.д.

Библиотека WScratchView позволяет добиться такого же эффекта. Вам надо потереть экран, чтобы под защитным слоем увидеть картинку.

Адрес библиотеки: winsontan520/Android-WScratchView

Скопируйте библиотеку на свой компьютер, импортируйте её (проект в папке WScratchViewLibrary) и подключите её к своему проекту через Properties | Android | Add....

Простейший пример без дополнительных настроек.

<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" >

    <TextView
        android:id="@+id/percentage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/scratch_view"
        android:layout_centerHorizontal="true"
        android:textColor="#000000" />

    <ImageView
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:background="@drawable/cat1" />

    <com.winsontan520.WScratchView
        xmlns:wsv="http://schemas.android.com/apk/res-auto"
        android:id="@+id/scratch_view"
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:layout_centerInParent="true" />

    <Button
        android:id="@+id/reset_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="14dp"
        android:onClick="onClickHandler"
        android:text="Reset" />

</RelativeLayout>

Контейнер RelativeLayout позволяет наложить один компонент поверх другого. В нашем случае на компонент ImageView с требуемой картинкой накладывается компонент WScratchView, который представляет собой по умолчанию чёрный прямоугольник. Этого кода достаточно, чтобы увидеть эффект в действии. Запустите пример и начинайте тереть чёрный прямоугольник, чтобы увидеть картинку под ним.

Чтобы восстановить защитный слой, вызовите метод reset(). В примере мы заблаговременно добавили кнопку для этой операции.

public void onClickHandler(View view) {
	WScratchView scratchView = (WScratchView) findViewById(R.id.scratch_view);
	scratchView.resetView();
}

От базового примера перейдём к тонкой настройке.

<com.winsontan520.WScratchView
    xmlns:wsv="http://schemas.android.com/apk/res-auto"
    android:id="@+id/scratch_view"
    android:layout_width="300dp"
    android:layout_height="300dp"
    android:layout_centerInParent="true"
    wsv:antiAlias="true"
    wsv:overlayColor="#0000ff"
    wsv:revealSize="20dp"
    wsv:scratchable="true" />

Атрибут wsv:overlayColor позволяет задать свой цвет для защитного слоя, а атрибут wsv:revealSize - размер пальца/лапы, когда вы елозите им по экрану.

Также вы можете установить свойства программно. Вот часть из них.

scratchView.setScratchable(true);
scratchView.setRevealSize(50);
scratchView.setAntiAlias(true);
scratchView.setOverlayColor(Color.RED);

Вместо сплошного цвета для защитного слоя вы можете задать свою картинку при помощи атрибута wsv:scratchDrawable="@drawable/over".

Также вы можете отслеживать площадь стёртой поверхности в процентах. В разметке мы уже разместили компонент TextView, в которой и будем выводить эту информацию в процессе стирания защитного слоя.

package ru.alexanderklimov.test;

import com.winsontan520.WScratchView;

import android.app.Activity;

import android.os.Bundle;
import android.view.View;
import android.widget.TextView;

public class MainActivity extends Activity {

	private WScratchView scratchView;
	private TextView percentageView;

	/** Called when the activity is first created. */
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		percentageView = (TextView) findViewById(R.id.percentage);
		scratchView = (WScratchView) findViewById(R.id.scratch_view);

		scratchView.setOnScratchCallback(new WScratchView.OnScratchCallback() {

			@Override
			public void onScratch(float percentage) {
				updatePercentage(percentage);
			}
		});
		updatePercentage(0f);
	}

	public void onClickHandler(View view) {
		scratchView.resetView();
		updatePercentage(0f);
	}

	protected void updatePercentage(float percentage) {
		String percentage2decimal = String.format("%.2f", percentage) + " %";
		percentageView.setText(percentage2decimal);
	}
}

Реклама