按下动画缩小按钮尺寸,并在发布时重新获得尺寸

时间:2016-05-19 08:42:10

标签: android android-animation ontouchlistener image-scaling

我希望创建一个按钮,当按下按钮时会改变尺寸(稍微小一些),再次释放按钮后,尺寸应该变回正常尺寸。我使用Scale xml来实现这个目的但是即使我不释放按钮,也会定位自己。

按钮在这里我指的是imageview。

这是我的源代码: -

imgSpin = (ImageView) findViewById(R.id.iv_spins);
    imgSpin.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                switch (event.getAction()) {
                case MotionEvent.ACTION_DOWN:
                    imgSpin.startAnimation(mAnimation);
                    spinslot();
                    break;

                case MotionEvent.ACTION_UP:
                    imgSpin.clearAnimation();
                    imgSpin.setEnabled(false);
                    break;
                }
                return true;
            }
        });

我的比例Xml: -

<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="200"
    android:fromXScale=".8"
    android:fromYScale=".8"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toXScale="1.0"
    android:toYScale="1.0" >

</scale>

我的XML: -

 <LinearLayout
                android:id="@+id/layout_status"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight=".2"
                android:orientation="horizontal" >

                <View
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight=".5" />

                <ImageView
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="2.1"
                    android:background="@drawable/bootser" />

                <LinearLayout
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="2.5"
                    android:background="@drawable/bet_bg"
                    android:gravity="center_vertical"
                    android:orientation="horizontal"
                    android:weightSum="1" >

                    <ImageView
                        android:layout_width="0dp"
                        android:layout_height="match_parent"
                        android:layout_gravity="center_vertical"
                        android:layout_weight=".2"
                        android:src="@drawable/leftarrow" />

                    <TextView
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="1dp"
                        android:layout_weight=".6"
                        android:gravity="center"
                        android:text="Bet"
                        android:textColor="@android:color/white" />

                    <ImageView
                        android:layout_width="0dp"
                        android:layout_height="40dp"
                        android:layout_gravity="center_vertical"
                        android:layout_weight=".2"
                        android:src="@drawable/rightarrow" />
                </LinearLayout>

                <LinearLayout
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="2.5"
                    android:background="@drawable/container"
                    android:gravity="center" >

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="2dp"
                        android:text="winning"
                        android:textColor="@android:color/white" />
                </LinearLayout>

                <ImageView
                    android:id="@+id/iv_spins"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1.9"
                    android:background="@drawable/spin" />

                <View
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight=".5" />
            </LinearLayout>

我尝试使用paramLayout但是因为我在XML中设置权重所以它不会给我动画效果。

我已经使用过这种方法: -

case MotionEvent.ACTION_DOWN:
                ViewGroup.LayoutParams params = imgSpin.getLayoutParams();
                // Button new width
                params.width = params.width - (params.width *90/100);

                imgSpin.setLayoutParams(params);

                break;

params.width总是返回零所以我试着用重量做这个,通过使用重量我的视图故障点击..我希望它是平滑的所以我更喜欢缩放

第二种方法: -

case MotionEvent.ACTION_DOWN:
                LinearLayout.LayoutParams params = (android.widget.LinearLayout.LayoutParams) imgSpin
                        .getLayoutParams();
                // Button new width
                params.weight = 1.7f;

                imgSpin.setLayoutParams(params);
                // imgSpin.startAnimation(mAnimation);
                // spinslot();
                break;

            case MotionEvent.ACTION_UP:
                LinearLayout.LayoutParams params2 = (android.widget.LinearLayout.LayoutParams) imgSpin
                        .getLayoutParams();
                // Button new width
                params2.weight = 1.9f;

                imgSpin.setLayoutParams(params2);
                // imgSpin.clearAnimation();
                imgSpin.setEnabled(false);
                break;
            }
            return true;

虽然有效但不顺畅

请告诉我该怎么做

由于

7 个答案:

答案 0 :(得分:10)

这是你想要的: -

imgSpin.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                switch (event.getAction()) {
                case MotionEvent.ACTION_DOWN:
                    ObjectAnimator scaleDownX = ObjectAnimator.ofFloat(imgSpin,
                            "scaleX", 0.8f);
                    ObjectAnimator scaleDownY = ObjectAnimator.ofFloat(imgSpin,
                            "scaleY", 0.8f);
                    scaleDownX.setDuration(1000);
                    scaleDownY.setDuration(1000);

                    AnimatorSet scaleDown = new AnimatorSet();
                    scaleDown.play(scaleDownX).with(scaleDownY);

                    scaleDown.start();

                    spinslot();
                    break;

                case MotionEvent.ACTION_UP:
                    ObjectAnimator scaleDownX2 = ObjectAnimator.ofFloat(
                            imgSpin, "scaleX", 1f);
                    ObjectAnimator scaleDownY2 = ObjectAnimator.ofFloat(
                            imgSpin, "scaleY", 1f);
                    scaleDownX2.setDuration(1000);
                    scaleDownY2.setDuration(1000);

                    AnimatorSet scaleDown2 = new AnimatorSet();
                    scaleDown2.play(scaleDownX2).with(scaleDownY2);

                    scaleDown2.start();

                    imgSpin.setEnabled(false);
                    break;
                }
                return true;
            }
        });

只需在xml中进行一些更改: -

<ImageView
                    android:id="@+id/iv_spins"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1.9"
                    android:adjustViewBounds="true"
                    android:background="@drawable/spin"
                    android:scaleX="1"
                    android:scaleY="1" />

使用 scaleDown.play(scaleDownX).with(scaleDownY),它将保持动画位置,不会将其恢复原状

希望它能解决你的问题 欢呼声

答案 1 :(得分:3)

Android最佳实践(根据您的要求):

1-在/ res / animator中创建两个XML

<强>我。 reduce_size.xml

<?xml version="1.0" encoding="utf-8"?>
<set android:ordering="sequentially"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <set>
        <objectAnimator
            android:propertyName="scaleX"
            android:duration="300"
            android:valueTo="0.9f"
            android:valueType="floatType"/>
        <objectAnimator
            android:propertyName="scaleY"
            android:duration="300"
            android:valueTo="0.9f"
            android:valueType="floatType"/>
    </set>
</set>

<强> II。 regain_size.xml

<?xml version="1.0" encoding="utf-8"?>
<set android:ordering="sequentially"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <set>
        <objectAnimator
            android:propertyName="scaleX"
            android:duration="1000"
            android:valueTo="1f"
            android:startOffset="300"
            android:valueType="floatType"/>
        <objectAnimator
            android:propertyName="scaleY"
            android:duration="1000"
            android:valueTo="1f"
            android:startOffset="300"
            android:valueType="floatType"/>
    </set>
</set>

2-用法

<强>我。当MotionEvent.ACTION_DOWN

AnimatorSet reducer = (AnimatorSet) AnimatorInflater.loadAnimator(mContext,R.animator.squeeze_in);
reducer.setTarget(view);
reducer.start();

<强> II。当MotionEvent.ACTION_UP

AnimatorSet regainer = (AnimatorSet) AnimatorInflater.loadAnimator(mContext,R.animator.squeeze_out);
regainer.setTarget(view);
regainer.start();
  

此解决方案经过全面测试,可确保满足您的要求。

答案 2 :(得分:1)

您可以在touchlistener上以编程方式执行此操作

new View.OnTouchListener() {
  public boolean onTouch(View v, MotionEvent event) {
    if(event.getAction == MotionEvent.ACTION_DOWN) {
      // scale your value
      float reducedvalue = (float)0.7;
      v.setScaleX(reducedvalue);
      v.setScaleY(reducedvalue);
    }
    else if (event.getAction == MotionEvent.ACTION_UP) {
      v.setScaleX(1);
      v.setScaleY(1);
    }
  } 
}

答案 3 :(得分:0)

你可以添加fillafter属性:android:fillAfter =&#34; true&#34;

SELECT DISTINCT ON ((x.a).address) (x.a).*, l.*
FROM (
  SELECT a, l.id AS lid, LENGTH(l.postalcode) AS pclen
  FROM addresses a
  LEFT JOIN locations l ON (a.address ilike '%' || l.postalcode || '%') -- this should be fast, but produce many rows
  ) x
LEFT JOIN locations l ON (l.id = x.lid)
ORDER BY (x.a).address, pclen DESC -- this is where it will be slow, as it'll have to sort the entire results, to filter them by DISTINCT ON

答案 4 :(得分:0)

<ImageView
  android:id="@+id/iv_spins"
  android:layout_width="0dp"
  android:layout_height="wrap_content"
  android:layout_weight="1.9"
  android:adjustViewBounds="true"
  android:background="@drawable/spin"
  android:scaleX="1"
  android:scaleY="1" 
/>

答案 5 :(得分:0)

这很简单,但是您必须知道Android API如何处理每个侦听器的调用。

这是诀窍:

首先会调用 TouchListener 中的

1- onTouch 方法。
1.1-如果 onTouch 方法返回true,则 onLongClick (在 LongClickListener 中)或 onClick (在 ClickListener中) )将被忽略(两者都将不再被称为)。
2-如果 onTouch 方法返回false,则检查 onLongClick 是否返回true,这样将不会调用 onClick ,但是如果返回false,则 onClick 也将被调用。

这里是一个例子:

targetButton.setOnLongClickListener(v -> {
        targetButton.animate().scaleX(1.2f).scaleY(1.2f).setDuration(0);
        Log.d("Button", "onLong: ");
        return true;
    });
    targetButton.setOnClickListener(v -> {
        Log.d("Button", "onClick: ");
    });
    targetButton.setOnTouchListener((v, event) -> {
        Log.d("Button", "onTouch: ");
        if (event.getAction() == MotionEvent.ACTION_UP) {
            recordButton.animate().scaleX(1.0f).scaleY(1.0f).setDuration(0);
        } 
          // if you want to make it pretty increase the size when click also
          /* else if (event.getAction() == MotionEvent.ACTION_DOWN) {
            targetButton.animate().scaleX(1.2f).scaleY(1.2f).setDuration(0);
            } */
        return false;
    });

在此示例中,如果我检测到长按,则尝试增加按钮的大小,否则对 onClick 方法进行一些操作,如果用户释放按钮,则我将再次减小大小。

如果希望每次调用 onLongClick 时调用 onClick ,只需使 onLongClick 返回false;

答案 6 :(得分:0)

从API 21(Lollipop)开始,基于stateListAnimator属性的纯XML解决方案可用。这是一个版式的示例,该版式在按下时可缩放到其原始大小的0.9:

<!-- res/layout/my_layout.xml -->

<LinearLayout ...
  android:stateListAnimator="@animator/zoom_out_animator">...</layout>
<!-- res/animator/zoom_out_animator -->

<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item>
    <set>
      <objectAnimator
          android:propertyName="scaleX"
          android:valueTo="1.0"
          android:duration="@android:integer/config_shortAnimTime"
          android:interpolator="@android:interpolator/fast_out_slow_in"/>
      <objectAnimator
          android:propertyName="scaleY"
          android:valueTo="1.0"
          android:duration="@android:integer/config_shortAnimTime"
          android:interpolator="@android:interpolator/fast_out_slow_in"/>
    </set>
  </item>
  <item android:state_pressed="true">
    <set>
      <objectAnimator
          android:propertyName="scaleX"
          android:valueTo="0.9"
          android:duration="@android:integer/config_shortAnimTime"
          android:interpolator="@android:interpolator/fast_out_slow_in"/>
      <objectAnimator
          android:propertyName="scaleY"
          android:valueTo="0.9"
          android:duration="@android:integer/config_shortAnimTime"
          android:interpolator="@android:interpolator/fast_out_slow_in"/>
    </set>
  </item>
</selector>

您还可以在官方材料示例应用程序Owl中找到示例。看看onboarding_topic_item.xml

一些类似的问题: