Question

我想实现一个列表视图，如下所示。 enter image description here

显然这是一个带有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 现在我可以修改所选视图了。在取消选择对象后，仍然不知道是否正确删除属性..

Answer 1

诀窍是在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);
  }
}

完整的工作示例source code here。

Answer 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);
    }
}

注意：这是一个列表视图，当它位于中心时会得到一个彩色圆圈，但可以根据需要轻松调整。

Answer 3

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

我通过添加TextView元素作为可穿戴列表视图布局的一部分来解决此问题。此外，建议将app：layout_box设置为＆＃34; left | bottom | right＆＃34;滚动时允许更好的列表视图。

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

＆＃13;

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

＆＃13;

为了进一步阅读，您还可以查看此示例，该示例可以清楚地解释： http://www.learnandroidwear.com/sample-1

如何复制listview，如＆＃34; Start＆＃34;菜单

3 个答案: