【问题标题】:How to animate a drawable bar graph to look like its growing?如何使可绘制的条形图看起来像它的增长?
【发布时间】:2015-01-17 19:07:57
【问题描述】:

我正在尝试制作一个随着每个玩家得分而增加的条形图。每次按下按钮以指示谁获得了积分,条形图就会相对于积分增加。到目前为止,我已经能够按照我想要的方式设置布局,只是在以编程方式更新它时遇到了问题。这是我的布局 XML。它有很多嵌套布局,因此适用于各种屏幕。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/background"
    android:orientation="vertical">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_gravity="center"
            android:layout_margin="6dp"
            android:scaleType="fitCenter"
            android:src="@drawable/letterbutton" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:gravity="center">

            <TextView
                android:id="@+id/letterButton"
                android:layout_width="wrap_content"
                android:layout_height="130dp"
                android:gravity="center"
                android:text="A"
                android:textSize="115dp"
                android:textStyle="bold" />

            <TextView
                android:id="@+id/nextScore"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="5 Pts"
                android:textSize="25dp"
                android:textStyle="bold" />

        </LinearLayout>

    </RelativeLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_marginBottom="6dp"
        android:layout_weight="1.5"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:gravity="top"
            android:orientation="horizontal">

            <LinearLayout
                android:id="@+id/layout1"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="bottom"
                android:orientation="vertical">

                <TextView
                    android:id="@+id/Score1"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:gravity="center"
                    android:text="0 Pts"
                    android:textColor="@color/grey"
                    android:textSize="20dp"
                    android:textStyle="bold" />

                <ImageView
                    android:id="@+id/scoreBar1"
                    android:layout_width="match_parent"
                    android:layout_height="5dp"
                    android:layout_margin="6dp"
                    android:layout_gravity="center_horizontal"
                    android:src="@drawable/layout1_bg" />

            </LinearLayout>

            <LinearLayout
                android:id="@+id/layout2"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="bottom"
                android:orientation="vertical">

                <TextView
                    android:id="@+id/Score2"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:gravity="center"
                    android:text="0 Pts"
                    android:textColor="@color/grey"
                    android:textSize="20dp"
                    android:textStyle="bold" />

                <ImageView
                    android:id="@+id/scoreBar2"
                    android:layout_width="match_parent"
                    android:layout_height="5dp"
                    android:layout_margin="6dp"
                    android:layout_gravity="center_horizontal"
                    android:src="@drawable/layout2_bg" />

            </LinearLayout>

            <LinearLayout
                android:id="@+id/layout3"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="bottom"
                android:orientation="vertical">

                <TextView
                    android:id="@+id/Score3"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:gravity="center"
                    android:text="0 Pts"
                    android:textColor="@color/grey"
                    android:textSize="20dp"
                    android:textStyle="bold" />

                <ImageView
                    android:id="@+id/scoreBar3"
                    android:layout_width="match_parent"
                    android:layout_height="5dp"
                    android:layout_margin="6dp"
                    android:layout_gravity="center_horizontal"
                    android:src="@drawable/layout3_bg" />

            </LinearLayout>

            <LinearLayout
                android:id="@+id/layout4"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="bottom"
                android:orientation="vertical">

                <TextView
                    android:id="@+id/Score4"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:gravity="center"
                    android:text="0 Pts"
                    android:textColor="@color/grey"
                    android:textSize="20dp"
                    android:textStyle="bold" />

                <ImageView
                    android:id="@+id/scoreBar4"
                    android:layout_width="match_parent"
                    android:layout_height="5dp"
                    android:layout_margin="6dp"
                    android:layout_gravity="center_horizontal"
                    android:src="@drawable/layout4_bg" />

            </LinearLayout>

        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <Button
                android:id="@+id/button1"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:onClick="updateInfo"
                android:layout_margin="3dp"
                android:text="Button"
                android:background="@drawable/custombutton1"/>

            <Button
                android:id="@+id/button2"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:onClick="updateInfo"
                android:layout_margin="3dp"
                android:text="Button"
                android:background="@drawable/custombutton2"/>

            <Button
                android:id="@+id/button3"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_margin="3dp"
                android:layout_weight="1"
                android:onClick="updateInfo"
                android:text="Button"
                android:background="@drawable/custombutton3"/>

            <Button
                android:id="@+id/button4"
                android:layout_width="0dp"
                android:layout_margin="3dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:onClick="updateInfo"
                android:text="Button"
                android:background="@drawable/custombutton4"/>


        </LinearLayout>

    </LinearLayout>
</LinearLayout>

这里是代码处理按钮,我将在其中放置代码以调整大小/动画“增长”的条形。

public void updateInfo(View v){

        if (AlphaButton.getPosition() < 26) {
            if (v.getId() == R.id.button1){
                TextView mytextview1 = (TextView) findViewById(R.id.Score1);
                mytextview1.setText(AlphaButton.addScore(1) + " Pts");
                TextView mytextview2 = (TextView) findViewById(R.id.nextScore);
                mytextview2.setText(Integer.toString(AlphaButton.getPoints()) + " Pts");
                ImageView rotatebtn = (ImageView) findViewById(R.id.imageView1);
                rotatebtn.setRotation(angle);
                angle += 13.846;
            }else if (v.getId() == R.id.button2){
                TextView mytextview1 = (TextView) findViewById(R.id.Score2);
                mytextview1.setText(AlphaButton.addScore(2) + " Pts");
                TextView mytextview2 = (TextView) findViewById(R.id.nextScore);
                mytextview2.setText(Integer.toString(AlphaButton.getPoints()) + " Pts");
                ImageView rotatebtn = (ImageView) findViewById(R.id.imageView1);
                rotatebtn.setRotation(angle);
                angle += 13.846;
            }else if (v.getId() == R.id.button3){
                TextView mytextview1 = (TextView) findViewById(R.id.Score3);
                mytextview1.setText(AlphaButton.addScore(3) + " Pts");
                TextView mytextview2 = (TextView) findViewById(R.id.nextScore);
                mytextview2.setText(Integer.toString(AlphaButton.getPoints()) + " Pts");
                ImageView rotatebtn = (ImageView) findViewById(R.id.imageView1);
                rotatebtn.setRotation(angle);
                angle += 13.846;
            }else if (v.getId() == R.id.button4){
                TextView mytextview1 = (TextView) findViewById(R.id.Score4);
                mytextview1.setText(AlphaButton.addScore(4) + " Pts");
                TextView mytextview2 = (TextView) findViewById(R.id.nextScore);
                mytextview2.setText(Integer.toString(AlphaButton.getPoints()) + " Pts");
                ImageView rotatebtn = (ImageView) findViewById(R.id.imageView1);
                rotatebtn.setRotation(angle);
                angle += 13.846;
            }
            TextView myTextView = (TextView) findViewById(R.id.letterButton);
            myTextView.setText(AlphaButton.getString());

在这一点上,我已经用尽了很多时间尝试视图类中的各种方法来更新条形的高度,每次尝试都会遇到很多问题。我还没有找到任何可以按我想要的方式工作的东西。感谢您的帮助,谢谢!

【问题讨论】:

    标签: java android xml animation layout


    【解决方案1】:

    首先,拥有多个加权嵌套的 LinearaLayout 并不是一个好主意。这可能会导致性能不佳。加权布局需要测量两次,因此当您嵌套它们时,测量次数会成倍增加。

    至于改变条的大小,这取决于。如果你只是想改变大小,你可以改变视图的 LayoutParams。

    另一个选项是使用 ScaleAnimation。

     ScaleAnimation animation = new ScaleAnimation(0, 1, 0, 1, Animation.RELATIVE_TO_SELF, (float) 0.5,    Animation.RELATIVE_TO_SELF, (float) 0.5);
     animation.setDuration(ANIMATION_DURATION);
     animation.setFillAfter(true);
     myView.startAnimation(animation);
    

    缩放动画的前 4 个参数是 x 和 y 的开始和结束浮点值,其中 1f 表示当前大小的 100%。

    如果你走这条路,我建议你阅读 setFillAfter() 的作用,它可能会为你省去麻烦。例如https://stackoverflow.com/a/5888969/3430469

    【讨论】:

    • 感谢您的帮助,谢谢。今晚我会试试 ScaleAnimation。代替加权的、嵌套的 LinearLayouts,什么是好的选择?我一直在尝试制作一个可以扩展到大多数屏幕尺寸的活动,以便不必制作几种不同的布局。
    猜你喜欢
    • 1970-01-01
    • 2012-12-12
    • 2016-09-29
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-09-09
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多