Подтвердить что ты не робот

Добавление дополнительных изображений/значков в CardFragment (Android Wear)

Я смотрю на это образ из Google и пытаюсь понять, как реализовать что-то подобное.

Он очень похож на стандартный макет CardFragment, который содержит заголовок, описание и значок. Но я вижу дополнительное изображение/анимацию часов слева, что заставляет меня думать, что они используют пользовательский макет. Можно ли это сделать со стандартным CardFragment? Или есть еще один удобный класс, который позволяет поддерживать несколько значков?

enter image description here

4b9b3361

Ответ 1

Я выполнил это, расширив CardFragment и переопределив onCreateContentView:

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

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

Это позволяет вам контролировать, что происходит на белой карте.

Ответ 2

Образцовое изображение, которое вы показываете, является обычным уведомлением. Вам нужно ознакомиться с уведомлениями Android Wear:

Пользовательские уведомления

Это упражнение немного длинное, поэтому я постараюсь быть кратким, но кратким.

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, который расширяет API Drawable. Этот класс должен реализовывать методы start() и stop() для обработки обратного отсчета таймера. API-интерфейс Drawable недоступен для этого упражнения, но вы можете узнать больше, выполнив поиск в Интернете на индикаторах выполнения. Для краткости здесь приведен пример:

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 и установите объект drawable для метода 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) Задайте объект ожидающего намерения для метода setDisplayIntent() класса WearableExtender:

    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. Автор фактически реализовал точную копию вашего примера.

Эндрю