建立Android手錶列表清單(圖+文字)
1.建立一個空白手錶專案
2.修改/res/layout/
rect_activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFFFFF"
android:orientation="vertical"
tools:context="com.terryyamg.wearablelistviewtest.MainActivity"
tools:deviceIds="wear_square">
<android.support.wearable.view.WearableListView
android:id="@+id/wearable_list"
android:layout_width="match_parent"
android:layout_height="match_parent"></android.support.wearable.view.WearableListView>
</LinearLayout>
3.修改/res/layout/
round_activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFFFFF"
tools:context="com.terryyamg.wearablelistviewtest.MainActivity"
tools:deviceIds="wear_round">
<android.support.wearable.view.WearableListView
android:id="@+id/wearable_list"
android:layout_width="match_parent"
android:layout_height="match_parent"></android.support.wearable.view.WearableListView>
</RelativeLayout>
4.建立/res/layout/
list_item.xml
<com.terryyamg.wearablelistviewtest.WearableListItemLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="80dp"
android:gravity="center_vertical">
<android.support.wearable.view.CircledImageView
android:id="@+id/iv"
android:layout_width="50dip"
android:layout_height="50dip"
android:layout_gravity="center_vertical"
android:layout_margin="20dp"></android.support.wearable.view.CircledImageView>
<TextView
android:id="@+id/tv"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginRight="16dp"
android:fontFamily="sans-serif-condensed-light"
android:gravity="center_vertical|left"
android:lineSpacingExtra="-4sp"
android:textColor="#000000"
android:textSize="16sp"></TextView>
</com.terryyamg.wearablelistviewtest.WearableListItemLayout>
5.新增
WearableListItemLayout.java
package com.terryyamg.wearablelistviewtest;
import android.content.Context;
import android.support.wearable.view.CircledImageView;
import android.support.wearable.view.WearableListView;
import android.util.AttributeSet;
import android.widget.LinearLayout;
import android.widget.TextView;
public class WearableListItemLayout extends LinearLayout
implements WearableListView.OnCenterProximityListener {
private CircledImageView mImageView;
private TextView mTextView;
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);
}
// 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)
mImageView = (CircledImageView) findViewById(R.id.iv);
mTextView = (TextView) findViewById(R.id.tv);
}
@Override
public void onCenterPosition(boolean animate) {
//在中間
mImageView.setScaleX(1f);
mImageView.setScaleY(1f);
mTextView.setAlpha(1f);
}
@Override
public void onNonCenterPosition(boolean animate) {
//其他部分 圖縮小 文字透明一半
mImageView.setScaleX(0.8f);
mImageView.setScaleY(0.8f);
mTextView.setAlpha(0.5f);
}
}
6.新增
MyAdapter.java
package com.terryyamg.wearablelistviewtest;
import android.content.Context;
import android.support.wearable.view.CircledImageView;
import android.support.wearable.view.WearableListView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
public class MyAdapter extends WearableListView.Adapter {
private int[] mImage;
private String[] mDataset;
private final Context mContext;
private final LayoutInflater mInflater;
// Provide a suitable constructor (depends on the kind of dataset)
public MyAdapter(Context context,int[] imageData, String[] dataset) {
mContext = context;
mInflater = LayoutInflater.from(context);
mImage = imageData;
mDataset = dataset;
}
// Provide a reference to the type of views you're using
public static class ItemViewHolder extends WearableListView.ViewHolder {
private CircledImageView imageView;
private TextView textView;
public ItemViewHolder(View itemView) {
super(itemView);
// find the text view within the custom item's layout
imageView = (CircledImageView) itemView.findViewById(R.id.iv);
textView = (TextView) itemView.findViewById(R.id.tv);
}
}
// Create new views for list items
// (invoked by the WearableListView's layout manager)
@Override
public WearableListView.ViewHolder onCreateViewHolder(ViewGroup parent,
int viewType) {
// 對應list_item layout
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;
CircledImageView iv = itemHolder.imageView;
TextView view = itemHolder.textView;
// 放入圖片、文字
iv.setImageResource(mImage[position]);
view.setText(mDataset[position]);
// 設定tag id
holder.itemView.setTag(position);
}
// Return the size of your dataset
// (invoked by the WearableListView's layout manager)
@Override
public int getItemCount() {
return mDataset.length;
}
}
7.
放入三張圖片(google.png,facebook.png,twitter.png)在/res/drawable/
8.
MainActivity.java
package com.terryyamg.wearablelistviewtest;
import android.app.Activity;
import android.os.Bundle;
import android.support.wearable.view.WatchViewStub;
import android.support.wearable.view.WearableListView;
import android.widget.Toast;
public class MainActivity extends Activity {
private int[] ivItems;
private String[] tvItems;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ivItems = new int[]{R.drawable.google, R.drawable.facebook, R.drawable.twitter}; //圖
tvItems = new String[]{"Google", "Facebook", "Twitter"}; //文字
final WatchViewStub stub = (WatchViewStub) findViewById(R.id.watch_view_stub);
stub.setOnLayoutInflatedListener(new WatchViewStub.OnLayoutInflatedListener() {
@Override
public void onLayoutInflated(WatchViewStub stub) {
// Get the list component from the layout of the activity
WearableListView listView =
(WearableListView) stub.findViewById(R.id.wearable_list);
// Assign an adapter to the list
listView.setAdapter(new MyAdapter(MainActivity.this, ivItems, tvItems));
listView.setClickListener(new WearableListView.ClickListener() {
@Override
public void onClick(WearableListView.ViewHolder viewHolder) {
Integer tag = (Integer) viewHolder.itemView.getTag();
Toast.makeText(MainActivity.this,tvItems[tag],Toast.LENGTH_SHORT).show();
}
@Override
public void onTopEmptyRegionClick() {
}
});
}
});
}
}
檔案下載:
https://github.com/terryyamg/WearableListViewTest
參考來源:
https://developer.android.com/training/wearables/ui/lists.html
http://www.learnandroidwear.com/sample-1/
https://gist.github.com/PomepuyN/c30760eaee1e58fdd8fa
