Android Wearable UI 组件
本文旨在帮助您理解 Android 可穿戴设备 UI 组件。
引言
在本文中，我将引导您了解各种常用的 Android 可穿戴设备 UI 组件。对于开发者而言，理解这些组件的用法至关重要，这将帮助他/她轻松开发可穿戴应用。
本文使用了来自 Github 的代码片段和演示项目。我已向所有为构建示例付出努力的作者致谢。
背景
请查看以下链接以了解 Android Wear。
https://codeproject.org.cn/Articles/1038337/Introduction-to-Android-Wear
Android Wearable UI 组件
WatchViewStub
WatchViewStub 是一个非常有用的视图组件，可用于根据设备的形状（矩形或圆形）选择布局。此组件会根据屏幕是圆形还是矩形来自动加载相应的视图。
以下代码片段展示了其基本用法，关键在于为 WatchViewStub 组件编写并设置相应的布局。
引用：参考 - GitHub 示例请注意 – 以下代码片段是开源示例 https://github.com/teshi04/WearViewSample 的一部分
<android.support.wearable.view.WatchViewStub xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/watch_view_stub" android:layout_width="match_parent" android:layout_height="match_parent" app:rectLayout="@layout/rect_activity_main" app:roundLayout="@layout/round_activity_main" tools:context=".SimpleListActivity" tools:deviceIds="wear"> </android.support.wearable.view.WatchViewStub>
这是矩形和圆形布局的代码片段。在下面的示例中，您可以看到 WearableListView 组件的使用。如前所述，WatchViewStub 的作用是根据智能手表是圆形还是矩形的设计来决定显示哪个布局实例。
以下是可穿戴设备方形布局的代码片段。
<?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:orientation="vertical"
tools:context=".SimpleListActivity"
tools:deviceIds="wear_square">
<android.support.wearable.view.WearableListView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/listView1"/>
</LinearLayout>
以下是可穿戴设备圆形布局的代码片段。
<?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"
tools:context=".SimpleListActivity"
tools:deviceIds="wear_round">
<android.support.wearable.view.WearableListView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/listView1"/>
</RelativeLayout>
WearableFrameLayout
WearableFrameLayout 是一个视图组件，它扩展自 android.view.ViewGroup。它专为可穿戴设备设计，其工作方式与 FrameLayout 相同，但增加了可应用于圆形手表的额外布局参数属性。
WearableListView
WearableListView 是一个适用于可穿戴设备的视图组件，与 ListView 组件非常相似。
以下是如何使用 WearableListView 的方法。为了显示列表项，我们需要一个适配器（Adapter）和您希望显示的数据。
对于可穿戴设备，适配器的实现是通过继承 WearableListView.Adapter 抽象类并实现 onCreateViewHolder 和 onBindViewHolder 方法来完成的。
引用：参考 - GitHub 示例请注意 - WearableListView 演示应用是基于 PareshMayani 的开源代码开发的 https://github.com/PareshMayani/WearableListViewDemo
<?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"
tools:context=".SimpleListActivity"
tools:deviceIds="wear_round">
<android.support.wearable.view.WearableListView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/listView1"/>
</RelativeLayout>
以下是可穿戴列表视图适配器的代码片段。在 onCreateViewHolder 方法中，我们将返回一个 ViewHolder 的新实例。
ViewHolder 有一个依赖项，它需要一个视图实例作为构造函数参数传入。在下面您可以看到，视图实例是通过加载我们为显示列表项而创建的布局来创建的。
onBindViewHolder 方法会为每个列表项调用，我们将获取 ViewHolder 实例中关联视图的 TextView 实例，以便设置 TextView 的文本。
private class ListViewAdapter extends WearableListView.Adapter {
private final LayoutInflater mInflater;
private ListViewAdapter(Context context) {
mInflater = LayoutInflater.from(context);
}
@Override
public WearableListView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
return new WearableListView.ViewHolder(
mInflater.inflate(R.layout.row_simple_item_layout, null));
}
@Override
public void onBindViewHolder(WearableListView.ViewHolder holder, int position) {
TextView view = (TextView) holder.itemView.findViewById(R.id.textView);
view.setText(listItems.get(position).toString());
holder.itemView.setTag(position);
}
@Override
public int getItemCount() {
return listItems.size();
}
}
现在让我们看看如何为 WearableListView 实例设置适配器，以在可穿戴设备上显示星期列表。我们需要一个 Activity，并且将重写 onCreate 方法来显示 WearableListView。
以下是我们的操作步骤：
1) 通过调用 findViewById 并传入 watch view stub 的 ID 来获取 WatchViewStub 实例。
2) 接着，调用 WatchViewStub 实例的 setOnLayoutInflatedListener 方法来设置 OnLayoutInflatedListener 实例。
3) 您可以看到 onLayoutInflated 的重写代码，我们在这里获取 ListView 实例，以便设置我们为显示列表视图项而创建的适配器。
public class SimpleListActivity extends Activity implements WearableListView.ClickListener{
private WearableListView mListView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_listview);
final WatchViewStub stub = (WatchViewStub) findViewById(R.id.watch_view_stub);
stub.setOnLayoutInflatedListener(new WatchViewStub.OnLayoutInflatedListener() {
@Override
public void onLayoutInflated(WatchViewStub stub) {
mListView = (WearableListView) stub.findViewById(R.id.listView1);
mListView.setAdapter(new ListViewAdapter(SimpleListActivity.this));
mListView.setClickListener(SimpleListActivity.this);
}
});
}
….
}
CircledImageView
CircledImageView 是 android.support.wearable.view 的一部分。顾名思义，它是一个圆形图像视图，继承自 android.view.View。用法如下：
引用： 参考 - GitHub 示例请注意 – 这是从 https://github.com/zaifrun/TodayMenu 复用的代码
<android.support.wearable.view.CircledImageView
android:id="@+id/cancel_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left|bottom"
android:src="@drawable/action_cancel"
app:circle_color="@color/red"
app:circle_radius="25dp"
app:circle_radius_pressed="20dp"/>
CardFrame
CardFrame 是最简单的卡片视图组件。它继承自 android.view.ViewGroup。CardFrame 组合或包装其他视图组件。渲染时，这些卡片会以白色背景和圆角显示。它还有一个可以设置的可选图标。以下是 CardFrame 的示例用法：
<?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="wrap_content"
android:layout_height="80dp"
tools:context=".CardFrame"
android:layout_centerInParent="true"
tools:deviceIds="wear_round">
<android.support.wearable.view.CardFrame
android:id="@+id/card_frame"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="@+id/text_view_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left"
android:textAlignment="center"
android:text="@string/codeproject"
android:textColor="@color/black"
android:textSize="18sp" />
</android.support.wearable.view.CardFrame>
</RelativeLayout>
CardScrollView
CardScrollView 是一个视图组件，继承自 android.widget.FrameLayout。它组合了 CardFrame，并提供了向上或向下滚动内容的机制。
CardScrollView 的一个最佳使用示例是在发送消息时，会显示一个可滚动的所有联系人列表，以便用户可以选择一个联系人并发送消息。
这个组件不那么常用，并且有开发者报告问题称滚动不像预期那样工作。不确定是真的存在问题，还是它在模拟器中不工作。
http://stackoverflow.com/questions/25174105/android-wearcardscrollview-cannot-scroll
现在让我们来看一下 CardScrollView 组件的示例用法。以下是 activity 布局 xml 文件的代码片段。您可以看到 CardScrollView 是如何组合 CardFrame 的。
引用：参考 - GitHub 示例请注意 – 以下示例是基于上述修复方案复用并修改的代码 - https://github.com/teshi04/WearViewSample/
<android.support.wearable.view.CardScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/card_scroll_view"
android:layout_height="match_parent"
android:layout_width="match_parent"
app:layout_box="all">
<android.support.wearable.view.CardFrame
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id="@+id/card_scrollview_card_frame">
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:orientation="vertical"
android:paddingLeft="5dp">
<TextView
android:fontFamily="sans-serif-light"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:text="CodeProject Test, CodeProject Test, CodeProject Test,
CodeProject Test, CodeProject Test,
CodeProject Test, CodeProject Test,
CodeProject Test, CodeProject Test,
CodeProject Test, CodeProject Test,
CodeProject Test, CodeProject Test,
CodeProject Test, CodeProject Test,"
android:textColor="@color/black"
android:textSize="15sp"/>
<TextView
android:fontFamily="sans-serif-light"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:text="Demo"
android:textColor="@color/black"
android:textSize="14sp"/>
</LinearLayout>
</android.support.wearable.view.CardFrame>
</android.support.wearable.view.CardScrollView>
现在来看看 activity 的 onCreate 重写代码。我们所做的就是获取对 CardScrollView 和 CardFrame 的引用，并设置扩展因子、方向，同时我们还会启用扩展，以便可以滚动浏览。
public class CardScrollViewDemo extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_card_scroll_view);
CardScrollView cardScrollView = (CardScrollView) findViewById(R.id.card_scroll_view);
CardFrame cardFrame = (CardFrame) findViewById(R.id.card_scrollview_card_frame);
cardScrollView.setExpansionEnabled(true);
cardScrollView.setExpansionDirection(1);
cardScrollView.setExpansionFactor(10.0F);
cardFrame.setExpansionEnabled(true);
cardFrame.setExpansionDirection(1);
cardFrame.setExpansionFactor(10.0F);
}
}
CardFragment
CardFragment 是一个视图组件，继承自 Fragment，并包含一个可滚动的卡片。CardFragment 基本上提供了一个默认的卡片布局。可以设置标题、图标和文本。
让我们通过一个例子来理解其用法。我们将使用一个 FrameLayout，并在其中组合一个 CardFragment。
以下是 Activity 布局 xml 文件的代码片段。
<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_width="match_parent"
android:layout_height="match_parent"
app:layout_box="bottom">
</FrameLayout>
</android.support.wearable.view.BoxInsetLayout>
这是 CardFragment activity 演示的代码片段。
1) 创建一个 FragmentManager 实例
2) 通过调用 FragmentManager 的 beginTransaction 方法创建一个 FragmentTransaction 实例。
3) 通过调用静态方法“create”并传入卡片片段的标题、文本和要显示的图标来创建一个 CardFragment 实例。
public class CardFragmentDemo extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_card_fragment_demo);
FragmentManager fragmentManager = getFragmentManager();
FragmentTransaction transaction = fragmentManager.beginTransaction();
CardFragment cardFragment = CardFragment.create(getString(R.string.card_fragment_title),
getString(R.string.card_fragment_text),
R.drawable.card_frame);
cardFragment.setCardGravity(Gravity.BOTTOM);
transaction.add(R.id.frame_layout, cardFragment);
transaction.commit();
}
}
2D 选择器或 GridViewPager
GridViewPager 是一个视图组件，继承自 android.view.ViewGroup。如果您的应用程序有多个页面，那么 GridViewPager 非常适合一次向用户显示一个页面，并让他们水平或垂直滚动页面以访问相关页面。
要显示数据，需要一个适配器（Adapter）。我们将通过调用 GridViewPager 的 setAdapter 方法来设置其适配器。
GridView 适配器是通过继承 FragmentGridPagerAdapter，然后重写 getRowCount、getColumnCount、getFragment、getBackgroundForPage 等方法来创建的。
引用：参考 - GitHub 示例我们正在基于 https://github.com/googlesamples/android-SkeletonWearableApp 构建一个示例。
请注意，此代码根据 Apache 许可证 2.0 版本授权，版权所有 (C) 2014 The Android Open Source Project。
以下是 GridViewPager 适配器的代码片段，我们需要理解的两个关键点是：根据行和列的位置返回片段，以及返回一个 Drawable 实例来设置页面背景。
public class SampleGridPagerAdapter extends FragmentGridPagerAdapter{
Map<Point, Drawable> mBackgrounds = new HashMap<Point, Drawable>();
private Context mContext;
private static final int NUM_ROWS = 10;
private static final int NUM_COLS = 3;
public SampleGridPagerAdapter(Context ctx, FragmentManager fm) {
super(fm);
mContext = ctx;
}
@Override
public int getRowCount() {
return NUM_ROWS;
}
@Override
public int getColumnCount(int rowNum) {
return NUM_COLS;
}
@Override
public Fragment getFragment(int rowNum, int colNum) {
return MainFragment.newInstance(rowNum, colNum);
}
@Override
public Drawable getBackgroundForPage(int row, int column) {
Point pt = new Point(column, row);
Drawable drawable = mBackgrounds.get(pt);
if (drawable == null) {
Bitmap bm = Bitmap.createBitmap(200, 200, Bitmap.Config.ARGB_8888);
Canvas c = new Canvas(bm);
Paint p = new Paint();
// Clear previous image.
c.drawRect(0, 0, 200, 200, p);
p.setAntiAlias(true);
p.setTypeface(Typeface.DEFAULT);
p.setTextSize(64);
p.setColor(Color.LTGRAY);
p.setTextAlign(Align.CENTER);
c.drawText(column+ "-" + row, 100, 100, p);
drawable = new BitmapDrawable(mContext.getResources(), bm);
mBackgrounds.put(pt, drawable);
}
return drawable;
}
}
class MainFragment extends CardFragment {
static MainFragment newInstance(int rowNum, int colNum) {
Bundle args = new Bundle();
args.putString(CardFragment.KEY_TITLE, "Row:" + rowNum);
args.putString(CardFragment.KEY_TEXT, "Col:" + colNum);
MainFragment f = new MainFragment();
f.setArguments(args);
return f;
}
}
现在让我们看看如何设置 GridViewPager。我们只需要创建一个自定义 grid view pager 适配器的实例，并通过调用其 setAdapter 方法将其设置给 GridViewPager。
public class GridViewPagerDemo extends Activity {
SampleGridPagerAdapter mAdapter;
GridViewPager mPager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_grid_view_pager_demo);
mPager = (GridViewPager) findViewById(R.id.pager);
mAdapter = new SampleGridPagerAdapter(this, getFragmentManager());
mPager.setAdapter(mAdapter);
}
}
ConfirmationActivity
ConfirmationActivity 是一个视图组件，可用于向用户提供视觉反馈。在很多情况下，您可能希望在执行某个活动后提供确认。以下是一些动画类型：
1) ConfirmationActivity.SUCCESS_ANIMATION
2) ConfirmationActivity.FAILURE_ANIMATION
3) ConfirmationActivity.OPEN_ON_PHONE_ANIMATION
下面是一个演示 ConfirmationActivity 用法的示例。我们有一个 activity 屏幕，上面有两个按钮，用于显示成功和失败的确认信息。
引用：参考 - GitHub 示例请注意 - 以下示例基于 https://github.com/teshi04/WearViewSample
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
android:layout_centerInParent="true">
<Button
android:id="@+id/success_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/success"/>
<Button
android:id="@+id/failure_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/success_button"
android:text="@string/failure"/>
</RelativeLayout>
ConfirmationActivity 是通过使用 Intent 来显示的。我们将创建一个 Intent 实例，并设置适当的标志以及指示 Intent 动画类型和消息的数据，然后调用 startActivity 并传入该 Intent 实例。
private void startConfirmationActivity(int animationType, String message) {
Intent confirmationActivity = new Intent(this, ConfirmationActivity.class)
.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK | Intent.FLAG_ACTIVITY_NO_ANIMATION)
.putExtra(ConfirmationActivity.EXTRA_ANIMATION_TYPE, animationType)
.putExtra(ConfirmationActivity.EXTRA_MESSAGE, message);
startActivity(confirmationActivity);
}
需要记住的一个关键点是在 AndroidManifest.xml 文件中包含以下链接，否则我们将无法使用 ConfirmationActivity。
<activity android:name="android.support.wearable.activity.ConfirmationActivity" />
以下是成功和失败确认活动的快照。
DelayedConfirmationView
DelayedConfirmationView 是一个可穿戴视图组件，继承自 android.support.wearable.view.CircledImageView。顾名思义，它提供一个带延迟的确认。
这种延迟允许用户在需要时取消操作。让我们看一个例子，以更好地理解它。
引用：参考 - GitHub 示例请注意 – 我们正在复用 https://github.com/teshi04/WearViewSample 的代码示例
这是我们 activity xml 文件的代码片段。您可以在下面看到，我们正在使用一个 DelayedConfirmationView 视图组件。
<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:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
tools:context="com.example.ranjan.androidwearuicomponents.DelayedConfirmationDemo">
<android.support.wearable.view.DelayedConfirmationView xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/timer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginLeft="8dp"
app:circle_border_width="8dp"
android:src="@drawable/cross_white"
app:circle_color="@color/blue"
app:circle_padding="4dp"
app:circle_radius="40dp" />
</RelativeLayout>
现在让我们看一下用于创建延迟确认的 activity 代码。activity 的 OnCreate 方法被重写，以创建一个 DelayedConfirmationView 实例，并启动一个延迟 4000 毫秒的确认计时器。
public class DelayedConfirmationDemo extends Activity {
private DelayedConfirmationView mDelayedConfirmationView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_delayed_confirmation_demo);
mDelayedConfirmationView = (DelayedConfirmationView) findViewById(R.id.timer);
startConfirmationTimer();
}
private void startConfirmationTimer() {
mDelayedConfirmationView.setTotalTimeMs(4 * 1000);
mDelayedConfirmationView.setListener(
new android.support.wearable.view.DelayedConfirmationView.DelayedConfirmationListener() {
@Override
public void onTimerFinished(View view) {
}
@Override
public void onTimerSelected(View view) {
finish();
}
}
);
mDelayedConfirmationView.start();
}
}
以下是延迟确认活动演示的快照。
DismissOverlayViewActivity
DismissOverlayView 是一个视图组件，可用于按需关闭或退出应用程序。这是一种高效退出应用程序的方式，用户无需从左向右滑动卡片。想象一下，如果您有一个卡片网格，用户将不得不手动滑动每一张卡片才能退出应用程序。而借助 DismissOverlayView，用户只需长按 activity 即可按需关闭或退出应用程序。
让我们看一个演示示例，以更好地理解 DismissOverlayView 的用法。
这是 dismiss overlay activity xml 文件的代码片段。
引用：参考 - GitHub 示例请注意 – 我们正在复用 https://github.com/teshi04/WearViewSample 的代码示例
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.wearable.view.DismissOverlayView
android:id="@+id/dismiss_overlay"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
现在让我们看一下 activity 的代码，了解其内部工作原理。您可以在下面看到，onCreate 的重写代码中包含了获取 DismissOverlayView 实例的逻辑。此外，我们设置了介绍文本，它只在第一次显示。我们还需要一个 GestureDetectorCompat 实例来注册监听器，在我们的例子中，我们创建了一个名为 ‘LongPressListener’ 的自定义类，它继承自 SimpleOnGestureListener。我们重写了 onLongPress 方法来显示 dismiss overlay。只有当用户长按 activity 时，它才会显示出来。
public class DismissOverlayViewDemo extends Activity {
private GestureDetectorCompat mGestureDetector;
private DismissOverlayView mDismissOverlayView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_dismiss_overlay_view_demo);
mDismissOverlayView = (DismissOverlayView) findViewById(R.id.dismiss_overlay);
mDismissOverlayView.setIntroText(R.string.intro_text);
mDismissOverlayView.showIntroIfNecessary();
mGestureDetector = new GestureDetectorCompat(this, new LongPressListener());
}
private class LongPressListener extends GestureDetector.SimpleOnGestureListener {
@Override
public void onLongPress(MotionEvent event) {
mDismissOverlayView.show();
}
}
@Override
public boolean dispatchTouchEvent(MotionEvent event) {
return mGestureDetector.onTouchEvent(event) || super.dispatchTouchEvent(event);
}
}
这是 DismissOverlayView activity 的快照。
BoxInsetLayout
BoxInsetLayout 是一个可穿戴设备组件，它继承自 FrameLayout。这是一个重要的视图组件，可用于在方形或圆形屏幕中布局其包含的组件。因此，您不必担心 UI 是否能适应特定的屏幕类型。
让我们看一个关于如何使用 BoxInsetLayout 的演示示例。这是 activity 布局 xml 文件的代码片段。您可以看到，在 BoxInsetLayout 中有一个 TextView 组件，其布局参数 layout_box 设置为 "all"，表示它与所有边都有偏移。您可以为 layout_box 使用 left|top|right|bottom 或 all 值。
<android.support.wearable.view.BoxInsetLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.ranjan.androidwearuicomponents.BoxInsetLayoutDemo">
<TextView android:text="@string/hello_world" android:layout_width="wrap_content"
android:layout_height="wrap_content" app:layout_box="all" />
</android.support.wearable.view.BoxInsetLayout>
以下是在模拟器上运行的 BoxInsetLayout activity 屏幕的快照。
关注点
学习可穿戴设备 UI 组件的新知识是一次很棒的体验。无论是组件本身还是可穿戴设备的设计，都有太多值得称道的地方。小型计算设备总是充满挑战，这也总是促使我去探索和发现各种可能性。
历史
版本 1.0 - 发布文章初始版本，附带解释 Android Wear 组件的代码示例 - 2015年10月14日。