哪个LayoutManager用于2048游戏的动画？

Question

出于培训目的,我目前正在复制2048游戏.我完成了逻辑和交互,但打印(并简单地刷新)它在一个TextView看起来很荒谬的单一内容当然.

在考虑如何为游戏构建UI时,我不确定LayoutManager选择哪个.我需要在游戏的4 x 4网格中做的是合并并在动画中添加行和列内的单元格.在我看来,这:

• GridLayout当我需要能够处理单个行和列时,它将处理完整数据集(四行/四列中的16个瓦片),因此无法工作.但是,我不确定这一点.我曾经使用GridLayout过,但从未操纵过多少项(添加,删除),也从未使用过这种操作的动画.有没有办法操纵单行和列？

• LinearLayout因为当我想要操纵列时遇到麻烦,但是有四个水平LinearLayouts或行,但有四个垂直LinearLayouts ,我将无法工作.

• RelativeLayout或者ConstraintLayout可能 - 也许.这里的麻烦似乎是我必须跟踪我的16个视图TextView,并且可能以编程方式构建完整的布局,以便我可以告诉动画该做什么.当然可行,但具有挑战性.

• CustomLayout 是一个选择,但我应该建立哪个超类？为什么？

我错过了简单的解决方案吗？如果没有,那么LayoutManager对于我的数据结构来说,最"自然"的是什么(目前是16个整数的数组,但可以很容易地改为4 x 4整数数组).

Answer 1

更新:包含的图块演示和两个图块组合.

我建议你一起去ConstraintLayout.它将允许您有效地定位您的视图,并可以为您提供一些简单的动画.我在下面嘲笑了一个快速示例来演示这种方法.

以下是结果视频:

XML布局ConstraintLayout用作视图组.这两个框只是文本视图,但可以很容易地成为图像视图或其他类型的视图.

这两个框只是在水平指南之间垂直移动24dp(gdln0)和520dp(gdln100)为textView1和148dp(gdln25)和520dp(gdln100)textView2.使用ConstraintSet并TransitionManager通过附加到"animate"按钮的单击处理程序对这些移动进行动画处理.以下是代码的XML:

activity_main.xml中

<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:id="@+id/layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <android.support.constraint.Guideline
        android:id="@+id/gdln0"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_begin="24dp" />

    <android.support.constraint.Guideline
        android:id="@+id/gdln25"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_begin="148dp" />

    <android.support.constraint.Guideline
        android:id="@+id/gdln50"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_begin="272dp" />

    <android.support.constraint.Guideline
        android:id="@+id/gdln75"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_begin="396dp" />

    <android.support.constraint.Guideline
        android:id="@+id/gdln100"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_begin="520dp" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_marginStart="24dp"
        android:background="@android:color/darker_gray"
        android:gravity="center"
        android:text="2"
        android:textColor="@android:color/white"
        android:textSize="72sp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/gdln0" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_marginStart="24dp"
        android:background="@android:color/darker_gray"
        android:gravity="center"
        android:text="4"
        android:textColor="@android:color/white"
        android:textSize="72sp"
        app:layout_constraintStart_toEndOf="@+id/textView1"
        app:layout_constraintTop_toBottomOf="@id/gdln25" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"
        android:layout_marginRight="16dp"
        android:text="Animate"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent" />
</android.support.constraint.ConstraintLayout>

MainActivity.java

public class MainActivity extends AppCompatActivity {

    private int mSquareSide;
    private int mMargin;
    private int mBoardState = 0;
    private TextView mNewView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Resources r = getResources();
        mSquareSide = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 100, r.getDisplayMetrics());
        mMargin = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 24, r.getDisplayMetrics());

        findViewById(R.id.button).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                ConstraintLayout layout = (ConstraintLayout) findViewById(R.id.layout);
                ConstraintSet newSet = new ConstraintSet();

                mBoardState = (mBoardState + 1) % 3;
                switch (mBoardState) {
                    case 0: // Just reset the board to its starting condition.
                        setContentView(R.layout.activity_main);
                        findViewById(R.id.button).setOnClickListener(this);
                        break;

                    case 1: // Move tiles down and insert new tile.
                        mNewView = new TextView(layout.getContext());
                        mNewView.setId(View.generateViewId());
                        mNewView.setBackgroundColor(getResources().getColor(android.R.color.darker_gray));
                        mNewView.setTextSize(72);
                        mNewView.setTextColor(getResources().getColor(android.R.color.white));
                        mNewView.setText("2");
                        mNewView.setVisibility(View.INVISIBLE);
                        mNewView.setGravity(Gravity.CENTER);
                        ConstraintLayout.LayoutParams lp = new ConstraintLayout.LayoutParams(mSquareSide, mSquareSide);
                        mNewView.setLayoutParams(lp);
                        layout.addView(mNewView);
                        newSet.clone(layout);
                        newSet.connect(mNewView.getId(), ConstraintSet.TOP,
                                       R.id.gdln0, ConstraintSet.BOTTOM);
                        newSet.connect(mNewView.getId(), ConstraintSet.START,
                                       ConstraintSet.PARENT_ID, ConstraintSet.START, mMargin);
                        newSet.clear(R.id.textView1, ConstraintSet.TOP);
                        newSet.clear(R.id.textView2, ConstraintSet.TOP);
                        newSet.connect(R.id.textView1, ConstraintSet.BOTTOM,
                                       R.id.gdln100, ConstraintSet.BOTTOM);
                        newSet.connect(R.id.textView2, ConstraintSet.BOTTOM,
                                       R.id.gdln100, ConstraintSet.BOTTOM);
                        TransitionManager.beginDelayedTransition(layout);
                        newSet.applyTo(layout);
                        mNewView.setVisibility(View.VISIBLE);
                        break;

                    case 2: // Move tiles up and combine two tiles.
                        newSet.clone(layout);
                        newSet.clear(R.id.textView1, ConstraintSet.BOTTOM);
                        newSet.clear(R.id.textView2, ConstraintSet.BOTTOM);
                        newSet.connect(R.id.textView1, ConstraintSet.TOP,
                                       R.id.gdln0, ConstraintSet.BOTTOM);
                        newSet.connect(R.id.textView2, ConstraintSet.TOP,
                                       R.id.gdln0, ConstraintSet.BOTTOM);
                        Transition transition = new AutoTransition();
                        transition.addListener(new Transition.TransitionListener() {
                            @Override
                            public void onTransitionStart(Transition transition) {
                            }

                            @Override
                            public void onTransitionEnd(Transition transition) {
                                mNewView.setText("4");
                            // Here you would remove the overlapped view
                            // with layout.removeView(View);
                            }

                            @Override
                            public void onTransitionCancel(Transition transition) {
                            }

                            @Override
                            public void onTransitionPause(Transition transition) {
                            }

                            @Override
                            public void onTransitionResume(Transition transition) {
                            }
                        });
                        TransitionManager.beginDelayedTransition(layout, transition);
                        newSet.applyTo(layout);
                        break;
                }
            }
        });
    }
}