创建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. }