我试图复制的磨损设置列表中我穿的应用程序。 我想用这样的复选框项目的列表。

I am trying to replicate the wear settings list for my wear app. I want to use a list of checkbox items like this.

现在的问题是我必须使用CircledImageView如果我想在动画中的变焦正常工作。我不能够使用复选框为列表滚动正确动画。什么是正确的方式做到这一点？ 有没有一种方法使用CircledListItem的方式，将展示基于两个图像的checked.unchecked？还是有办法使用复选框以妥善管理的重点变焦？

The problem is I have to use CircledImageView if I want the zoom in animation to work properly. I am not able to use the Checkbox to animate properly as the list scrolls. What is the right way to do this? Is there a way to use CircledListItem in a way that will show two images based on checked.unchecked? Or is there a way to use Checkbox to manage the focus zoom properly?

推荐答案

这是一个有点复杂复制设置屏幕。 - CheckBox和TextView中是行不通的，因为确切的行为是那里的图标保持不变，圆扩展了焦点。我们必须使用CircledImageView这一点。 - 我使用的解决方案是 - >使用CircledImageView和TextView中和处理复选框登录自己

It was a little complicated to replicate the Settings screen. - CheckBox and TextView would not work, because the exact behavior is where the icon remains the same and the circle expands on focus. We have to use CircledImageView for this. - The solution I used was -> Use CircledImageView and Textview and handle CheckBox login yourself.

这是列表项的布局。

<?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" />
/>

在code，我不得不处理动画和复选框的状态。

In the code I had to handle the animations and Checkbox state.

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这里）我们切换上每一次点击。

And in my Adapter (we use a RecyclerView here) we toggle on each click.

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