问题
I am trying to replicate the wear settings list for my wear app. I want to use a list of checkbox items like this.
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?
回答1:
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.
This is the List item layout.
<?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" />
/>
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;
}
}
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
}
回答2:
Make your own list item class that implements WearableListView.OnCenterProximityListener interface and apply any animations in onCenterPosition and onNonCenterPosition methods like this:
mCheckBox.animate().scaleX(1.6f).scaleY(1.6f).setDuration(ANIMATION_DURATION);
You can see an example of using this technique in the samples\android-21\wearable\Notifications.
EDIT: I think the simplest way to achieve such behavior is to place CheckBox inside RelativeLayout like this:
<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>
and apply zoom animation to the ImageView only.
来源：https://stackoverflow.com/questions/28165386/wear-settings-list-items