向 CardFragment (Android Wear) 添加额外的图像/图标答案

【问题标题】：Adding extra images/icons to CardFragment (Android Wear)向 CardFragment (Android Wear) 添加额外的图像/图标
【发布时间】：2015-04-30 21:41:55
【问题描述】：

我正在查看来自 Google 的示例图片，并试图弄清楚如何实现这样的东西。

它看起来与采用标题、描述和图标的标准CardFragment 布局非常相似。但是我在左侧看到了一个额外的时钟图像/动画，这让我觉得他们使用了自定义布局。这可能与标准CardFragment 有关吗？或者是否有另一个方便类允许支持多个图标？

【问题讨论】：

标签： android android-layout wear-os

【解决方案1】：

我通过扩展 CardFragment 并覆盖 onCreateContentView 来实现这一点：

@Override
public View onCreateContentView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

    mRootView = (ViewGroup) inflater.inflate(R.layout.fragment_my_card, null);
    ...
}

这让您可以控制白卡上的内容。

【讨论】：

您知道在使用自定义布局时如何显示顶部图标吗？由于来自onCreateContentView 的视图被放置在CardFrame 内。
@Libin，我也遇到了类似的情况，最后只是创建了自己的 Fragment，根本没有使用 CardFragment。

【解决方案2】：

您展示的示例图片实际上是一个自定义通知。您需要在此处熟悉 Android Wear 通知：

Custom Notifications

这个练习有点长，所以我会尽量简明扼要。

1) 首先，您需要定义一个自定义通知布局，它定义了通知在 XML 布局文件中的外观。要复制 Google 的示例，请定义一个 XML 布局，其中包含一个用于循环进度计时器的 ImageView 和两个用于锻炼描述的文本字段：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="horizontal">
   <ImageView
    ...
   </>
   <RelativeLayout
      android:layout_marginStart="20dp"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      xmlns:android="http://schemas.android.com/apk/res/android">
      <TextView
       ...
      </>
      <TextView
       ...
      </>
  </RelativeLayout>

2) 创建一个类 CircularTimer.class 来扩展 Drawable API。这个类应该实现一个 start() 和 stop() 方法来处理计时器的倒计时。 Drawable API 超出了本练习的范围，但您可以通过在网络上搜索进度条来了解更多信息。为简洁起见，这里是一个例子：

public class CircularTimer() extends Drawable {
   ...
   public CircularTimer(int maxValue) { ... }

   @Override
   public void onDraw(Canvas canvas) {
      // Use drawCircle(), drawArc() to draw a circle and pie bar
      // Use drawText to draw the timeout value in center of circle
   }
   ...
}

4) 创建一个类 WorkoutCustomView.class 并将其内容视图设置为您之前定义的 XML。获取 ImageView 的引用并为 setImageDrawable() 方法设置一个可绘制对象。例如：

mImageView = (ImageView) findViewById(R.id.imageview);
mCircularTimer = new CircularTimer(60); // 60s countdown
mImageView.setImageDrawable(mCircularTimer);

3) 设置您的基本通知：

NotificationCompat.Builder builder = new NotificationCompat.Builder(this)
   .setContentTitle("Workout")
   .setContentText("Push Ups")
   .setSmallIcon(R.drawable.ic_bicep);

4) 创建将由自定义通知启动的意图和待处理意图：

Intent i = new Intent(this, WorkoutCustomView.class);
PendingIntent pi = PendingIntent.getActivity(this, 0, i, PendingIntent.FLAG_UPDATE_CURRENT);

5) 为 WearableExtender 类的 setDisplayIntent() 方法设置待处理的 Intent 对象：

    NotificationCompat.WearableExtender we = new NotificationCompat.WearableExtender()    
.setDisplayIntent(pi);

// Add wearable specific features
builder.extend(wearableExtender);

6) 发送您的通知

NotificationManagerCompat notificationManager =
NotificationManagerCompat.from(this);
notificationManager.notify(NOTIFICATION_ID, builder.build());

希望这会有所帮助！

如需进一步阅读，请查看http://www.learnandroidwear.com/wear-custom-notification。作者实际上实现了您的示例的精确复制。

安德鲁

【讨论】：