2014-07-27 5 views
10

Ich schaue mir dieses Beispielbild von Google an und versuche herauszufinden, wie man so etwas implementiert.Hinzufügen von zusätzlichen Bildern/Symbolen zu CardFragment (Android Wear)

Es sieht dem Standard CardFragment Layout sehr ähnlich, das einen Titel, eine Beschreibung und ein Symbol annimmt. Aber ich sehe links ein extra Uhrbild/Animation, was mich glauben lässt, dass sie ein benutzerdefiniertes Layout verwenden. Ist das mit einem Standard CardFragment möglich? Oder gibt es eine weitere Komfortklasse, die die Unterstützung mehrerer Symbole ermöglicht?

enter image description here

Antwort

7

ich erreicht dies durch die CardFragment und überwiegendes onCreateContentView erstreckt:

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

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

Auf diese Weise können Sie steuern, welche auf der weißen Karte geht.

+4

Haben Sie eine Idee, wie Sie das obere Symbol bei benutzerdefinierten Layouts anzeigen? Da die Ansicht von 'onCreateContentView' in den' CardFrame' gelegt wird. – Libin

+0

@Libin, ich war in einer ähnlichen Situation und habe gerade mein eigenes Fragment erstellt, CardFragment überhaupt nicht benutzt. – Vesko

2

Das Beispielbild, das Sie anzeigen, ist eine benutzerdefinierte Benachrichtigung.

Custom Notifications

Diese Übung ist ein bisschen ich lange so werde versuchen, kurz, aber prägnant zu sein: Sie werden sich mit Benachrichtigungen Android Wear hier müssen vertraut machen.

1) Zuerst müssen Sie ein benutzerdefiniertes Benachrichtigungslayout definieren, das das Aussehen der Benachrichtigung in einer XML-Layoutdatei definiert. So duplizieren Googles Beispiel definiert ein XML-Layout, das ein Image für den Kreis Fortschritt Timer und zwei Textfelder für die Training Beschreibungen enthält:

<?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) Erstellen Sie eine Klasse, die die CircularTimer.class Drawable erstreckt API. Diese Klasse sollte eine start() - und eine stop() -Methode implementieren, um den Countdown des Timers zu verarbeiten. Die Drawable-API ist für diese Übung nicht verfügbar. Sie können jedoch mehr herausfinden, indem Sie im Web nach Fortschrittsbalken suchen. Der Kürze halber ist hier ein Beispiel:

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) Erstellen Sie eine Klasse WorkoutCustomView.class und setzen Sie den Inhalt im Hinblick auf Ihre zuvor definierten XML. Rufen Sie eine Referenz Ihrer ImageView ab und legen Sie ein Zeichenobjekt für die setImageDrawable() -Methode fest. Zum Beispiel:

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

3) Richten Sie Ihren Grund Benachrichtigung:

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

4) Erstellen Sie eine Absicht und anhängige Absicht, die von der benutzerdefinierten Benachrichtigung gestartet wird:

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

5) Legen Sie das ausstehende Intent-Objekt für die Methode setDisplayIntent() der WearableExtender-Klasse fest:

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

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

6) Versendung Ihre Mitteilung

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

hoffe, das hilft!

Für weitere Informationen, Kasse http://www.learnandroidwear.com/wear-custom-notification. Der Autor hat tatsächlich ein genaues Replikat Ihres Beispiels implementiert.

Andrew