6

我想实现一个列表视图，如下所示。在此处输入图像描述

显然这是一个带有 CircledImageView 的 WearableListView。但是我似乎找不到哪个函数可以让我确定中间视图。我还希望能够在新的动画上做“放大”动画，在旧的选定动画上做“缩小”动画……现在我尝试了基本的滚动，但没有雪茄。

     mListView.addOnScrollListener(new WearableListView.OnScrollListener() {
                @Override
                public void onScroll(int i) {
                    Log.d("Recycler","Scroll: "+i);
                }

                @Override
                public void onAbsoluteScrollChange(int i) {
                    Log.d("Recycler","ABsScrollChange: "+i);
                }

                @Override
                public void onScrollStateChanged(int i) {
                    Log.d("Recycler","ScrollState: "+i);
                }


                @Override
                public void onCentralPositionChanged(int i) {
                    Log.d("Recycler","Center: "+i);
                }

            });

编辑：好的，所以我现在知道如何找到中心视图。但我想知道是否有人想出如何检索当前视图以便我可以修改当前选定的视图。

编辑 2好的，现在我可以修改选定的视图。但是，在取消选择对象后仍然不知道如何正确删除属性..

4

3 回答 3

4

诀窍是在 WearableListView.Item 子类中实现 getProximityMinValue() 和 getProximityMaxValue() ：

private final class MyItemView extends FrameLayout implements WearableListView.Item {

  final CircledImageView image;
  final TextView text;

  public MyItemView(Context context) {
    super(context);
    View.inflate(context, R.layout.wearablelistview_item, this);
    image = (CircledImageView) findViewById(R.id.image);
    text = (TextView) findViewById(R.id.text);
  }

  @Override
  public float getProximityMinValue() {
    return mDefaultCircleRadius;
  }

  @Override
  public float getProximityMaxValue() {
    return mSelectedCircleRadius;
  }

  @Override
  public float getCurrentProximityValue() {
    return image.getCircleRadius();
  }

  @Override
  public void setScalingAnimatorValue(float value) {
    image.setCircleRadius(value);
    image.setCircleRadiusPressed(value);
  }

  @Override
  public void onScaleUpStart() {
    image.setAlpha(1f);
    text.setAlpha(1f);
  }

  @Override
  public void onScaleDownStart() {
    image.setAlpha(0.5f);
    text.setAlpha(0.5f);
  }
}

完整的工作示例源代码在这里。

于 2014-07-10T12:38:14.873 回答
2

这比这里给出的答案要容易得多。只需使用onCenterPosition并onNonCenterPosition像这样：

public class WearableListItemLayout extends LinearLayout implements WearableListView.OnCenterProximityListener {

    private ImageView mCircle;
    private TextView mName;

    private final float mFadedTextAlpha;
    private final int mFadedCircleColor;
    private final int mChosenCircleColor;

    public WearableListItemLayout(Context context) {
        this(context, null);
    }

    public WearableListItemLayout(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public WearableListItemLayout(Context context, AttributeSet attrs,
                                  int defStyle) {
        super(context, attrs, defStyle);

        mFadedTextAlpha = 200f / 100f;
        mFadedCircleColor = getResources().getColor(R.color.grey);
        mChosenCircleColor = getResources().getColor(R.color.blue);
    }

    // Get references to the icon and text in the item layout definition
    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();
        // These are defined in the layout file for list items
        // (see next section)
        mCircle = (ImageView) findViewById(R.id.circle);
        mName = (TextView) findViewById(R.id.name);
    }

    @Override
    public void onCenterPosition(boolean animate) {
        mName.setAlpha(1f);
        ((GradientDrawable) mCircle.getDrawable()).setColor(mChosenCircleColor);
    }

    @Override
    public void onNonCenterPosition(boolean animate) {
        ((GradientDrawable) mCircle.getDrawable()).setColor(mFadedCircleColor);
        mName.setAlpha(mFadedTextAlpha);
    }
}

注意：这是一个列表视图，它在中心获得一个彩色圆圈，但它可以很容易地调整为你想要的。

于 2015-05-01T14:35:38.980 回答
1

我还希望在可穿戴列表视图的顶部显示一个标题。

我通过添加一个 TextView 元素作为我的可穿戴列表视图布局的一部分解决了这个问题。此外，建议将 app:layout_box 设置为“left|bottom|right”，以便在滚动时获得更好的列表视图。

这是我的布局 XML（注意 TextView 元素）：

<?xml version="1.0" encoding="utf-8"?>
<android.support.wearable.view.BoxInsetLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_height="match_parent"
    android:layout_width="match_parent">
 
    <FrameLayout
        android:id="@+id/frame_layout"
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        app:layout_box="left|bottom|right">
 
        <android.support.wearable.view.WearableListView
            android:id="@+id/wearable_List"
            android:layout_height="match_parent"
            android:layout_width="match_parent"
            android:background="#434343">
        </android.support.wearable.view.WearableListView>
 
        <TextView
            android:id="@+id/title"
            android:layout_width="wrap_content"
            android:layout_height="35dp"
            android:gravity="bottom"
            android:textSize="20sp"
            android:fontFamily="courrier"
            android:layout_centerHorizontal="true"
            android:layout_alignParentTop="true"
            android:text="Settings"/>
 
    </ FrameLayout >
</android.support.wearable.view.BoxInsetLayout>

为了进一步阅读，您还可以看看这个解释清楚的例子：http: //www.learnandroidwear.com/sample-1

于 2014-12-25T19:22:37.243 回答