> 編寫: [roya](https://github.com/RoyaAoki) 原文:[https://developer.android.com/training/wearables/ui/lists.html](https://developer.android.com/training/wearables/ui/lists.html) Lists在可穿戴設備上簡單的從一組選項中選擇一個項目，這個課程為你演示了如何在Android Wear apps中創建lists。 Wearable UI庫包含了 _WearableListView_ 類，用于實現為可穿戴設備優化的list。 > **Note:** Android SDK 中的 _Notifications_ 例子示范了如何在你的apps中使用 _WearableListView_。這個例子的位置在 _android-sdk/samples/android-20/wearable/Notifications_ 目錄。 為了在你的Android Wear apps中創建list: 1. 添加 _WearableListView_ 元素到你的[activity](# "An activity represents a single screen with a user interface.")的layout描述中。 1. 為你的list items創建一個自定義layout實現。 1. 為你的list items使用這個實現創建一個layout描述。 1. 創建一個adapter以填充list。 1. 為 _WearableListView_ 元素指定這個adapter。 這些步驟的詳細描述在下面的章節中。  **Figure 3:** A list view on Android Wear. ### 添加List View 下面的layout使用 _BoxInsetLayout_ 添加了一個list view到[activity](# "An activity represents a single screen with a user interface.")中，所以這個列表可以正確的現實在圓形和方形兩種設備上： ~~~ <android.support.wearable.view.BoxInsetLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:background="@drawable/robot_background" 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.support.wearable.view.WearableListView> </FrameLayout> </android.support.wearable.view.BoxInsetLayout> ~~~ ### 為List Items創建一個Layou實現 在許多例子中，每個 list item 都由一個icon和一個描述組成。Android SDK中的_Notifications_ 例子實現了一個自定義layout：繼承[LinearLayout](https://developer.android.com/reference/android/widget/LinearLayout.html)以合并兩元素在每個list item。這個layout也實現了 _WearableListView.OnCenterProximityListener_ interface以實現在用戶滾動 _WearableListView_ 時改變item的icon顏色和漸隱文字。 ~~~ 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 = getResources() .getInteger(R.integer.action_text_faded_alpha) / 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); } } ~~~ 你也可以創建animator對象以放大中間的item的icon。你可以使用_WearableListView.OnCenterProximityListener_ interface的 _onCenterPosition()_ 和 _onNonCenterPosition()_回調方法來管理你的animators。更多關于animators的信息請查看[Animating with ObjectAnimator](https://developer.android.com/guide/topics/graphics/prop-animation.html#object-animator) ### 為Items創建Layout解釋 在你為list items 實現自定義layout之后，你需要提供一個layout解釋文件以具體說明list item中的組件參數。下面的layout解釋使用先前的自定義layout實現然后定義icon和text view的ID以匹配layout實現類。 > res/layout/list_item.xml ~~~ <com.example.android.support.wearable.notifications.WearableListItemLayout xmlns:android="http://schemas.android.com/apk/res/android" android:gravity="center_vertical" android:layout_width="match_parent" android:layout_height="80dp"> <ImageView android:id="@+id/circle" android:layout_height="20dp" android:layout_margin="16dp" android:layout_width="20dp" android:src="@drawable/wl_circle"/> <TextView android:id="@+id/name" android:gravity="center_vertical|left" android:layout_width="wrap_content" android:layout_marginRight="16dp" android:layout_height="match_parent" android:fontFamily="sans-serif-condensed-light" android:lineSpacingExtra="-4sp" android:textColor="@color/text_color" android:textSize="16sp"/> </com.example.android.support.wearable.notifications.WearableListItemLayout> ~~~ ### 創建Adapter以填充List Adapter用內容填充 _WearableListView_。下面的adapter基于strings數組簡單的填充了List： ~~~ private static final class Adapter extends WearableListView.Adapter { private String[] mDataset; private final Context mContext; private final LayoutInflater mInflater; // Provide a suitable constructor (depends on the kind of dataset) public Adapter(Context context, String[] dataset) { mContext = context; mInflater = LayoutInflater.from(context); mDataset = dataset; } // Provide a reference to the type of views you're using public static class ItemViewHolder extends WearableListView.ViewHolder { private TextView textView; public ItemViewHolder(View itemView) { super(itemView); // find the text view within the custom item's layout textView = (TextView) itemView.findViewById(R.id.name); } } // Create new views for list items // (invoked by the WearableListView's layout manager) @Override public WearableListView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { // Inflate our custom layout for list items return new ItemViewHolder(mInflater.inflate(R.layout.list_item, null)); } // Replace the contents of a list item // Instead of creating new views, the list tries to recycle existing ones // (invoked by the WearableListView's layout manager) @Override public void onBindViewHolder(WearableListView.ViewHolder holder, int position) { // retrieve the text view ItemViewHolder itemHolder = (ItemViewHolder) holder; TextView view = itemHolder.textView; // replace text contents view.setText(mDataset[position]); // replace list item's metadata holder.itemView.setTag(position); } // Return the size of your dataset // (invoked by the WearableListView's layout manager) @Override public int getItemCount() { return mDataset.length; } } ~~~ ### 連接Adapter和設置Click Listener 在你的[activity](# "An activity represents a single screen with a user interface.")中，從你的layout中取得 _WearableListView_ 元素的引用，分配一個adapter實例以填充list，然后設置一個click listener以完成動作當用戶選擇了一個特定的list item。 ~~~ public class WearActivity extends Activity implements WearableListView.ClickListener { // Sample dataset for the list String[] elements = { "List Item 1", "List Item 2", ... }; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.my_list_activity); // Get the list component from the layout of the activity WearableListView listView = (WearableListView) findViewById(R.id.wearable_list); // Assign an adapter to the list listView.setAdapter(new Adapter(this, elements)); // Set a click listener listView.setClickListener(this); } // WearableListView click listener @Override public void onClick(WearableListView.ViewHolder v) { Integer tag = (Integer) v.itemView.getTag(); // use this data to complete some action ... } @Override public void onTopEmptyRegionClick() { } } ~~~