Dodawanie dodatkowych obrazów/ikon do CardFragment (Android Wear)

Question

Patrzę na ten przykładowy obraz z Google i próbuję wymyślić, jak zaimplementować coś takiego.

Wygląda bardzo podobnie do standardowego układu CardFragment, który zawiera tytuł, opis i ikonę. Ale widzę dodatkowy obraz/animację zegara po lewej stronie, co powoduje, że myślę, że używają niestandardowego układu. Czy można to zrobić ze standardem CardFragment? Czy istnieje inna klasa wygody, która umożliwia obsługę wielu ikon?

Answer 1

I dokonał tego poprzez rozszerzenie CardFragment i przesłanianie onCreateContentView:

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

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

To pozwala kontrolować, co dzieje się na białej karcie.

Answer 2

Przykładowy obraz, który wyświetlasz, jest w rzeczywistości powiadomieniem niestandardowym. trzeba będzie zapoznać się z powiadomieniami Android Wear tutaj:

Custom Notifications

To ćwiczenie jest nieco przydługi, więc postaram się być krótkie, ale zwięzłe.

1) Najpierw należy zdefiniować niestandardowy układ powiadomień, który definiuje wygląd powiadomienia w pliku układu XML. Aby powielić przykład Google, zdefiniować układ XML, który zawiera ImageView dla okrągłego zegara postępu i dwa pola tekstowe dla opisów treningowe:

<?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) Utwórz klasę CircularTimer.class który rozszerza rozciągliwej API. Ta klasa powinna implementować metody start() i stop() do obsługi odliczania czasu. Funkcja Drawable API jest poza zakresem tego ćwiczenia, ale możesz dowiedzieć się więcej, przeszukując internet na pasku postępu. Dla zwięzłości, oto przykład:

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) Tworzenie WorkoutCustomView.class klasy i ustawić swój pogląd zawartość do uprzednio zdefiniowanego XML. Uzyskaj odwołanie do swojego ImageView i ustaw obiekt do rysowania dla metody setImageDrawable(). Na przykład:

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

3) Konfiguracja podstawowy zgłoszenie:

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

4) Tworzenie woli i oczekującą intencję, która zostanie uruchomiona przez powiadomienia niestandardowe:

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

5) Ustaw oczekujący obiekt intencji dla metody setDisplayIntent() klasy WearableExtender:

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

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

6) Wysłanie Twój powiadomienie

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

nadzieję, że to pomaga!

Aby uzyskać więcej informacji, proszę sprawdzić: http://www.learnandroidwear.com/wear-custom-notification. Autor faktycznie zaimplementował dokładną kopię twojego przykładu.

Andrew