Android Wear应用开发：使用WearableListView创建列表视图-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00446/article/details/148416834

Android Wear应用开发：使用WearableListView创建列表视图

android-training-course-in-chinese Android官方培训课程中文版项目地址: https://gitcode.com/gh_mirrors/an/android-training-course-in-chinese

在Android Wear应用开发中，列表视图是一种常见的UI组件，它允许用户在有限的屏幕空间内浏览和选择多个选项。本文将详细介绍如何在Android Wear应用中实现优化的列表视图。

WearableListView概述

WearableListView是专为可穿戴设备优化的列表视图实现，它解决了传统ListView在小圆形屏幕上显示不佳的问题。与手机上的ListView相比，WearableListView具有以下特点：

专为圆形屏幕设计，支持平滑滚动
提供中心位置高亮效果，提升用户体验
优化了触摸交互，适合手指滑动操作
支持列表项的自定义动画效果

实现步骤详解

1. 添加WearableListView到布局

首先需要在布局文件中添加WearableListView。考虑到圆形和方形设备的兼容性，建议使用BoxInsetLayout作为容器：

<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"/>
    </FrameLayout>
</android.support.wearable.view.BoxInsetLayout>

2. 创建自定义列表项布局

为了在列表项中显示图标和文本，我们需要创建自定义布局类：

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) {
        super(context);
        // 初始化颜色和透明度值
        mFadedTextAlpha = 0.4f; // 40%透明度
        mFadedCircleColor = Color.GRAY;
        mChosenCircleColor = Color.BLUE;
    }

    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();
        mCircle = findViewById(R.id.circle);
        mName = 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); // 半透明显示文本
    }
}

3. 定义列表项布局文件

创建XML布局文件定义每个列表项的外观：

<com.example.WearableListItemLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="80dp"
    android:gravity="center_vertical">
    
    <ImageView
        android:id="@+id/circle"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_margin="16dp"
        android:src="@drawable/wl_circle"/>
        
    <TextView
        android:id="@+id/name"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_marginRight="16dp"
        android:gravity="center_vertical|left"
        android:textSize="16sp"
        android:fontFamily="sans-serif-condensed-light"/>
</com.example.WearableListItemLayout>

4. 实现适配器

创建适配器为列表提供数据：

private static final class Adapter extends WearableListView.Adapter {
    private String[] mDataset;
    private final Context mContext;
    private final LayoutInflater mInflater;

    public Adapter(Context context, String[] dataset) {
        mContext = context;
        mInflater = LayoutInflater.from(context);
        mDataset = dataset;
    }

    public static class ItemViewHolder extends WearableListView.ViewHolder {
        private TextView textView;
        public ItemViewHolder(View itemView) {
            super(itemView);
            textView = itemView.findViewById(R.id.name);
        }
    }

    @Override
    public WearableListView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        return new ItemViewHolder(mInflater.inflate(R.layout.list_item, null));
    }

    @Override
    public void onBindViewHolder(WearableListView.ViewHolder holder, int position) {
        ItemViewHolder itemHolder = (ItemViewHolder) holder;
        itemHolder.textView.setText(mDataset[position]);
        holder.itemView.setTag(position);
    }

    @Override
    public int getItemCount() {
        return mDataset.length;
    }
}

5. 设置适配器和点击监听

在Activity中完成最后的设置：

public class MainActivity extends Activity implements WearableListView.ClickListener {
    
    String[] elements = {"选项1", "选项2", "选项3"};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        WearableListView listView = findViewById(R.id.wearable_list);
        listView.setAdapter(new Adapter(this, elements));
        listView.setClickListener(this);
    }

    @Override
    public void onClick(WearableListView.ViewHolder v) {
        int position = (Integer) v.itemView.getTag();
        // 处理点击事件
    }

    @Override
    public void onTopEmptyRegionClick() {
        // 处理列表顶部空白区域点击
    }
}