在CardFragment（Android Wear）中添加额外的图像/图标

Question

我在查看谷歌的这个示例图像，并尝试弄清如何实现类似的内容。

它看起来非常类似于标准的CardFragment布局，该布局需要标题、描述和图标。但是我看到了一个额外的时钟图像/动画在左侧，这使我想他们可能使用了自定义布局。是否可以使用标准的CardFragment来实现呢？或者有另一个方便的类支持多个图标？

- Eduard

Answer 1

我通过扩展CardFragment并重写`onCreateContentView`方法来实现这一点：

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

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

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

- Eduard

---

你有没有想过如何在使用自定义布局时显示顶部图标？因为从onCreateContentView中获取的视图是放置在CardFrame内部的。 - Libin

@Libin，我曾经也遇到过类似的情况，并最终创建了自己的Fragment，根本没有使用CardFragment。 - Vesko

Answer 2

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

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

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

<?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）创建一个扩展Drawable API的CircularTimer.class类。该类应实现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()方法设置待处理意图对象：

    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。作者实际上实现了与您示例完全相同的内容。

安德鲁

- Andrew Bates