佩戴设置列表项

Question

我正在尝试为我的穿戴应用程序复制穿戴设置列表。我想使用这样的复选框项目列表。

问题是如果我想让放大动画正常工作，我必须使用 CircledImageView。当列表滚动时，我无法使用复选框正确设置动画。这样做的正确方法是什么？有没有办法以显示基于 checked.unchecked 的两个图像的方式使用 CircledListItem？或者有没有办法使用 Checkbox 来正确管理焦点缩放？

Answer 1

创建您自己的列表项 class 实现 WearableListView.OnCenterProximityListener 接口并在 onCenterPosition 和 onNonCenterPosition 方法中应用任何动画，如下所示：

mCheckBox.animate().scaleX(1.6f).scaleY(1.6f).setDuration(ANIMATION_DURATION);

您可以在 samples\android-21\wearable\Notifications 中看到使用此技术的示例。

编辑：我认为实现这种行为的最简单方法是将 CheckBox 放在 RelativeLayout 中，如下所示：

<RelativeLayout
    android:layout_width="80dp"
    android:layout_height="80dp">

    <ImageView
        android:id="@+id/icon"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_centerInParent="true"
        android:src="@drawable/circle"/>

    <CheckBox
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true" />

</RelativeLayout>

并将缩放动画仅应用于 ImageView。

Answer 2

复制设置屏幕有点复杂。 - CheckBox 和 TextView 将不起作用，因为确切的行为是图标保持不变并且圆圈在焦点上扩展。我们必须为此使用 CircledImageView。 - 我使用的解决方案是 -> 使用 CircledImageView 和 Textview 并自己处理 CheckBox 登录。

这是列表项布局。

<?xml version="1.0" encoding="utf-8"?>

<android.support.wearable.view.CircledImageView
    android:id="@+id/config_image"
    android:layout_width="@dimen/config_icon_item_size"
    android:layout_height="@dimen/config_icon_item_size"
    android:layout_marginLeft="@dimen/config_item_margin_leftright"
    android:layout_gravity="center_vertical"
    app:circle_border_color="@color/color_item_circle_border_color"
    app:circle_radius="@dimen/default_settings_circle_radius"
    app:circle_border_width="@dimen/config_icon_circle_border"
    app:circle_color="@android:color/transparent" />

<TextView
    android:id="@+id/config_text"
    android:layout_height="@dimen/config_icon_item_size"
    android:layout_marginLeft="@dimen/config_icon_size_plus_leftmargin"
    android:layout_marginRight="@dimen/config_item_margin_leftright"
    android:layout_width="wrap_content"
    android:fontFamily="sans-serif-condensed-light"
    android:gravity="center_vertical"
    android:textColor="@color/config_item_text"
    android:textSize="@dimen/list_item_textsize"
    android:text="@string/str_placeholder" />
/>

在代码中我必须处理动画和复选框状态。

private final class MyItemView extends FrameLayout implements WearableListView.OnCenterProximityListener {

    private static final int ANIMATION_DURATION_MS = 150;
    /**
     * The ratio for the size of a circle in shrink state.
     */
    private static final float SHRINK_CIRCLE_RATIO = .75f;

    private static final float SHRINK_LABEL_ALPHA = .5f;
    private static final float EXPAND_LABEL_ALPHA = 1f;

    private final TextView mTextView;
    private final CircledImageView mImage;

    private final float mExpandCircleRadius;
    private final float mShrinkCircleRadius;

    private final ObjectAnimator mExpandCircleAnimator;
    private final ObjectAnimator mExpandIconAnimator;
    private final ObjectAnimator mExpandLabelAnimator;
    private final AnimatorSet mExpandAnimator;

    private final ObjectAnimator mShrinkCircleAnimator;
    private final ObjectAnimator mShrinkIconAnimator;
    private final ObjectAnimator mShrinkLabelAnimator;
    private final AnimatorSet mShrinkAnimator;
    public ItemResource mResources;

    public MyItemView(Context context, ItemResource resources) {
        super(context);
        View.inflate(context, R.layout.config_listitem, this);
        mResources = resources;
        mTextView = (TextView) findViewById(R.id.config_text);


        mImage = (CircledImageView) findViewById(R.id.config_image);
        mImage.setCircleBorderColor(Color.WHITE);
        mExpandCircleRadius = mImage.getCircleRadius();
        mShrinkCircleRadius = mExpandCircleRadius * SHRINK_CIRCLE_RATIO;

        mShrinkCircleAnimator = ObjectAnimator.ofFloat(mImage, "circleRadius",
                mExpandCircleRadius, mShrinkCircleRadius);
        mShrinkIconAnimator = ObjectAnimator.ofFloat(mImage, "alpha",
                EXPAND_LABEL_ALPHA, SHRINK_LABEL_ALPHA);
        mShrinkLabelAnimator = ObjectAnimator.ofFloat(mTextView, "alpha",
                EXPAND_LABEL_ALPHA, SHRINK_LABEL_ALPHA);
        mShrinkAnimator = new AnimatorSet().setDuration(ANIMATION_DURATION_MS);
        mShrinkAnimator.playTogether(mShrinkCircleAnimator, mShrinkLabelAnimator, mShrinkIconAnimator);

        mExpandCircleAnimator = ObjectAnimator.ofFloat(mImage, "circleRadius",
                mShrinkCircleRadius, mExpandCircleRadius);
        mExpandLabelAnimator = ObjectAnimator.ofFloat(mTextView, "alpha",
                SHRINK_LABEL_ALPHA, EXPAND_LABEL_ALPHA);
        mExpandIconAnimator = ObjectAnimator.ofFloat(mImage, "alpha",
                SHRINK_LABEL_ALPHA, EXPAND_LABEL_ALPHA);
        mExpandAnimator = new AnimatorSet().setDuration(ANIMATION_DURATION_MS);
        mExpandAnimator.playTogether(mExpandCircleAnimator, mExpandLabelAnimator, mExpandIconAnimator);
    }


    @Override
    public void onCenterPosition(boolean animate) {
        if (animate) {
            mShrinkAnimator.cancel();
            if (!mExpandAnimator.isRunning()) {
                mExpandCircleAnimator.setFloatValues(mImage.getCircleRadius(), mExpandCircleRadius);
                mExpandLabelAnimator.setFloatValues(mTextView.getAlpha(), EXPAND_LABEL_ALPHA);
                mExpandIconAnimator.setFloatValues(mImage.getAlpha(), EXPAND_LABEL_ALPHA);
                mExpandAnimator.start();
            }
            Log.i("OnCenter+animate:",this.mResources.mSelectedTitle);
        } else {
            mExpandAnimator.cancel();
            mImage.setCircleRadius(mExpandCircleRadius);
            mTextView.setAlpha(EXPAND_LABEL_ALPHA);
            mImage.setAlpha(EXPAND_LABEL_ALPHA);
            Log.i("OnCenter:",this.mResources.mSelectedTitle);
        }
    }

    @Override
    public void onNonCenterPosition(boolean animate) {
        if (animate) {
            mExpandAnimator.cancel();
            if (!mShrinkAnimator.isRunning()) {
                mShrinkCircleAnimator.setFloatValues(mImage.getCircleRadius(), mShrinkCircleRadius);
                mShrinkLabelAnimator.setFloatValues(mTextView.getAlpha(), SHRINK_LABEL_ALPHA);
                mShrinkLabelAnimator.setFloatValues(mImage.getAlpha(), SHRINK_LABEL_ALPHA);
                mShrinkAnimator.start();
                Log.i("nonCenter+animate:",this.mResources.mSelectedTitle);
            }
        } else {
            mShrinkAnimator.cancel();
            mImage.setCircleRadius(mShrinkCircleRadius);
            mTextView.setAlpha(SHRINK_LABEL_ALPHA);
            mImage.setAlpha(SHRINK_LABEL_ALPHA);
            Log.i("nonCenter:",this.mResources.mSelectedTitle);
        }
    }

    public boolean isChecked() {
        return mResources.mCheck;
    }

    public void toggle() {
        mResources.mCheck = !mResources.mCheck;
    }
}

在我的适配器中（我们在这里使用 RecyclerView）我们在每次点击时切换。

@Override
public void onClick(WearableListView.ViewHolder viewHolder) {
    MyItemView itemView = (MyItemView) viewHolder.itemView;
    itemView.toggle();
    //do your stuff
}

佩戴设置列表项

Wear settings list items

android

listview

wear-os