创建List

编写: roya 原文:https://developer.android.com/training/wearables/ui/lists.html

List让用户在可穿戴设备上很容易地从一组选项中选择一个项目。这个课程介绍了如何在Android Wear应用中创建List。

Wearable UI库包含了WearableListView类，该类是对可穿戴设备进行优化的List实现。

Note: Android SDK 中的Notifications例子示范了如何在应用中使用 WearableListView。这个例子的位于android-sdk/samples/android-20/wearable/Notifications目录。

为了在Android Wear应用中创建List，我们需要:

  1. 添加WearableListView元素到activity的layout定义中。
  2. 为List选项创建一个自定义的layout实现。
  3. 使用这个实现为List选项创建一个layout定义文件。
  4. 创建一个adapter以填充List。
  5. 指定这个adapter到WearableListView元素。

下面的章节有这些步骤的详细描述。

创建List - 图1

Figure 3: 在Android Wear上的List View.

添加List View

下面的layout使用BoxInsetLayout添加了一个List view到activity中，所以这个List可以正确地显示在圆形和方形两种设备上：

  1. <android.support.wearable.view.BoxInsetLayout
  2.     xmlns:android="http://schemas.android.com/apk/res/android"
  3.     xmlns:app="http://schemas.android.com/apk/res-auto"
  4.     android:background="@drawable/robot_background"
  5.     android:layout_height="match_parent"
  6.     android:layout_width="match_parent">
  8.     <FrameLayout
  9.         android:id="@+id/frame_layout"
  10.         android:layout_height="match_parent"
  11.         android:layout_width="match_parent"
  12.         app:layout_box="left|bottom|right">
  14.         <android.support.wearable.view.WearableListView
  15.             android:id="@+id/wearable_list"
  16.             android:layout_height="match_parent"
  17.             android:layout_width="match_parent">
  18.         </android.support.wearable.view.WearableListView>
  19.     </FrameLayout>
  20. </android.support.wearable.view.BoxInsetLayout>

为List选项创建一个Layou实现

在许多例子中，每个List选项都由一个图标和一个描述组成。Android SDK中的Notifications 例子实现了一个自定义layout：继承LinearLayout以合并两元素到每个List选项。这个layout也实现了 WearableListView.OnCenterProximityListener接口里的方法，以实现在用户在List中滚动时，因WearableListView的事件而改变选项图标颜色和渐隐文字：

  1. public class WearableListItemLayout extends LinearLayout
  2.              implements WearableListView.OnCenterProximityListener {
  4.     private ImageView mCircle;
  5.     private TextView mName;
  7.     private final float mFadedTextAlpha;
  8.     private final int mFadedCircleColor;
  9.     private final int mChosenCircleColor;
  11.     public WearableListItemLayout(Context context) {
  12.         this(context, null);
  13.     }
  15.     public WearableListItemLayout(Context context, AttributeSet attrs) {
  16.         this(context, attrs, 0);
  17.     }
  19.     public WearableListItemLayout(Context context, AttributeSet attrs,
  20.                                   int defStyle) {
  21.         super(context, attrs, defStyle);
  23.         mFadedTextAlpha = getResources()
  24.                          .getInteger(R.integer.action_text_faded_alpha) / 100f;
  25.         mFadedCircleColor = getResources().getColor(R.color.grey);
  26.         mChosenCircleColor = getResources().getColor(R.color.blue);
  27.     }
  29.     // Get references to the icon and text in the item layout definition
  30.     @Override
  31.     protected void onFinishInflate() {
  32.         super.onFinishInflate();
  33.         // These are defined in the layout file for list items
  34.         // (see next section)
  35.         mCircle = (ImageView) findViewById(R.id.circle);
  36.         mName = (TextView) findViewById(R.id.name);
  37.     }
  39.     @Override
  40.     public void onCenterPosition(boolean animate) {
  41.         mName.setAlpha(1f);
  42.         ((GradientDrawable) mCircle.getDrawable()).setColor(mChosenCircleColor);
  43.     }
  45.     @Override
  46.     public void onNonCenterPosition(boolean animate) {
  47.         ((GradientDrawable) mCircle.getDrawable()).setColor(mFadedCircleColor);
  48.         mName.setAlpha(mFadedTextAlpha);
  49.     }
  50. }

我们也可以创建animator对象以放大List中间选项的图标。我们可以使用WearableListView.OnCenterProximityListener接口的onCenterPosition()和 onNonCenterPosition()回调方法来管理animator对象。更多关于animator对象的信息请查看Animating with ObjectAnimator

为Items创建Layout解释

在为List选项实现自定义layout之后，我们需要提供一个layout解释文件以具体说明list item中的组件参数。下面的layout使用先前的自定义layout实现，并且定义图标和文本view，这两个view的ID对应layout实现类的ID：

res/layout/list_item.xml

  1. <com.example.android.support.wearable.notifications.WearableListItemLayout
  2.     xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:gravity="center_vertical"
  4.     android:layout_width="match_parent"
  5.     android:layout_height="80dp">
  6.     <ImageView
  7.         android:id="@+id/circle"
  8.         android:layout_height="20dp"
  9.         android:layout_margin="16dp"
  10.         android:layout_width="20dp"
  11.         android:src="@drawable/wl_circle"/>
  12.     <TextView
  13.         android:id="@+id/name"
  14.         android:gravity="center_vertical|left"
  15.         android:layout_width="wrap_content"
  16.         android:layout_marginRight="16dp"
  17.         android:layout_height="match_parent"
  18.         android:fontFamily="sans-serif-condensed-light"
  19.         android:lineSpacingExtra="-4sp"
  20.         android:textColor="@color/text_color"
  21.         android:textSize="16sp"/>
  22. </com.example.android.support.wearable.notifications.WearableListItemLayout>

创建Adapter以填充List

Adapter用内容填充WearableListView。下面的adapter基于strings数组元素填充了List：

  1. private static final class Adapter extends WearableListView.Adapter {
  2.     private String[] mDataset;
  3.     private final Context mContext;
  4.     private final LayoutInflater mInflater;
  6.     // Provide a suitable constructor (depends on the kind of dataset)
  7.     public Adapter(Context context, String[] dataset) {
  8.         mContext = context;
  9.         mInflater = LayoutInflater.from(context);
  10.         mDataset = dataset;
  11.     }
  13.     // Provide a reference to the type of views you're using
  14.     public static class ItemViewHolder extends WearableListView.ViewHolder {
  15.         private TextView textView;
  16.         public ItemViewHolder(View itemView) {
  17.             super(itemView);
  18.             // find the text view within the custom item's layout
  19.             textView = (TextView) itemView.findViewById(R.id.name);
  20.         }
  21.     }
  23.     // Create new views for list items
  24.     // (invoked by the WearableListView's layout manager)
  25.     @Override
  26.     public WearableListView.ViewHolder onCreateViewHolder(ViewGroup parent,
  27.                                                           int viewType) {
  28.         // Inflate our custom layout for list items
  29.         return new ItemViewHolder(mInflater.inflate(R.layout.list_item, null));
  30.     }
  32.     // Replace the contents of a list item
  33.     // Instead of creating new views, the list tries to recycle existing ones
  34.     // (invoked by the WearableListView's layout manager)
  35.     @Override
  36.     public void onBindViewHolder(WearableListView.ViewHolder holder,
  37.                                  int position) {
  38.         // retrieve the text view
  39.         ItemViewHolder itemHolder = (ItemViewHolder) holder;
  40.         TextView view = itemHolder.textView;
  41.         // replace text contents
  42.         view.setText(mDataset[position]);
  43.         // replace list item's metadata
  44.         holder.itemView.setTag(position);
  45.     }
  47.     // Return the size of your dataset
  48.     // (invoked by the WearableListView's layout manager)
  49.     @Override
  50.     public int getItemCount() {
  51.         return mDataset.length;
  52.     }
  53. }

连接Adapter和设置Click Listener

在我们的activity中，从layout中取得WearableListView元素的引用，分配一个adapter实例以填充List，然后设置一个click listener以完成当用户选择了一个特定的List选项的动作。

  1. public class WearActivity extends Activity
  2.                           implements WearableListView.ClickListener {
  4.     // Sample dataset for the list
  5.     String[] elements = { "List Item 1", "List Item 2", ... };
  7.     @Override
  8.     protected void onCreate(Bundle savedInstanceState) {
  9.         super.onCreate(savedInstanceState);
  10.         setContentView(R.layout.my_list_activity);
  12.         // Get the list component from the layout of the activity
  13.         WearableListView listView =
  14.             (WearableListView) findViewById(R.id.wearable_list);
  16.         // Assign an adapter to the list
  17.         listView.setAdapter(new Adapter(this, elements));
  19.         // Set a click listener
  20.         listView.setClickListener(this);
  21.     }
  23.     // WearableListView click listener
  24.     @Override
  25.     public void onClick(WearableListView.ViewHolder v) {
  26.         Integer tag = (Integer) v.itemView.getTag();
  27.         // use this data to complete some action ...
  28.     }
  30.     @Override
  31.     public void onTopEmptyRegionClick() {
  32.     }
  33. }