Skewing a text view in Android

问题

I'm looking to replicate the following within my application:

As you can see, its basically a button which increases/decreases the value of the text view contained within it. This button will have three visual states -> unpressed, decrease and increase (as seen in the image above, the user taps the increase arrows and the button appears pressed in on that side)

Here are my 3 button states currently:

As you can see, the problem I have is being able to correctly skew/rotate the text view so it looks visually correct and appears slanted along with the button when its being increased or decreased.

I have tried two different approaches so far:

Create a custom text view class which overrides the onDraw() method to skew the canvas:

@Override
public void onDraw(Canvas canvas) { 
   canvas.save(); 

   canvas.skew(0.2f, 0f);

   super.onDraw(canvas); 
   canvas.restore();
}

Integrate the Rotate3dAnimation class (source here) and used many different variations to get the desired result such as:

   Rotate3dAnimation skew = new Rotate3dAnimation(
          30, 0, centerX, centerY, 0, false);
   txtAmount.startAnimation(skew);

Unfortunately, I'm not quite getting the exact result that mirrors the first image above. I'm getting confused with setting values with the Z-axis, skew, rotate etc.

I'd greatly appreciate any help from anyone who has experience with this stuff. Thanks in advance

回答1:

Well I even tried and I came up with something like this:

 public class DemoActivity extends TextView {
    Context context;
    String firstText = "$120.00";

 public DemoActivity(Context context)
   {
    super(context);
    this.context = context;

   }


    @Override
    protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    setText(firstText);
    setTextSize(30);
    canvas.skew(1.0f, 0.3f);  //you need to change values over here
    Rotate3dAnimation skew = new Rotate3dAnimation(
              -20, 30,200, 200, 0, false);   //here too
    startAnimation(skew);

        }
    }

I got an output as:

I guess changing the values by trial and error can solve your problem. Hope it helps.

回答2:

Thanks to Parth Doshi answer. His answer need a little tweaking to run which I'm sharing here to save someone else time.

First create a class in src folder and write all of three constructors.

public class TextViewDemo extends TextView {

Context context;
String text = "TESTING 3DX TOOLS";

public TextViewDemo(Context context) {
    super(context);
    this.context = context;
}

public TextViewDemo(Context context, AttributeSet attrs) {
    super(context, attrs);
    this.context = context;
}

public TextViewDemo(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
    this.context = context;
}

@Override
protected void onDraw(Canvas canvas) {
    // TODO Auto-generated method stub
    super.onDraw(canvas);
    setText(text);
    setTextSize(30);
    canvas.skew(0.5f, 1.0f); // you need to change values over here
    Rotate3dAnimation skew = new Rotate3dAnimation(-50, 30, 0, 0, 0,
            false); // here too
    startAnimation(skew);

}

}

In you res/layout/my_layout.xml file you can add a tag of your custom made TextView.

<com.yourpackage.name.TextViewDemo
    android:id="@+id/name"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:text="Hello World"
<!-- All parameters and value shall remain same -->
/>

Like any other view, you can create an instance of TextViewDemo in your onCreate() method

TextViewDemo txtDemo = (TextViewDemo) findViewById(R.id.name);

Regards

来源：https://stackoverflow.com/questions/11375130/skewing-a-text-view-in-android

标签

android

android-widget

android-animation

android-canvas