Wie man Listenansicht repliziert wie im Menü "Start"

Question

Ich möchte eine Listenansicht wie unten dargestellt implementieren.

Anscheinend ist dies eine WearableListView mit CircledImageView. Ich finde jedoch nicht, welche Funktion es mir ermöglicht, die Mittelansicht zu bestimmen. Ich möchte auch in der Lage sein, die "Größer" -Animation auf der neuen und eine "Größe runter" auf der alten ausgewählten zu machen ... Im Moment habe ich ein grundlegendes Onscroll ausprobiert, aber keine Zigarre.

 mListView.addOnScrollListener(new WearableListView.OnScrollListener() { 
       @Override 
       public void onScroll(int i) { 
        Log.d("Recycler","Scroll: "+i); 
       } 

       @Override 
       public void onAbsoluteScrollChange(int i) { 
        Log.d("Recycler","ABsScrollChange: "+i); 
       } 

       @Override 
       public void onScrollStateChanged(int i) { 
        Log.d("Recycler","ScrollState: "+i); 
       } 


       @Override 
       public void onCentralPositionChanged(int i) { 
        Log.d("Recycler","Center: "+i); 
       } 

      }); 

EDIT: Okay, so weiß ich jetzt, wie die Center-Sicht zu finden. Aber ich habe mich gefragt, ob jemand herausgefunden hat, wie man die aktuelle Ansicht reaktiviert, so dass ich die aktuell ausgewählte Ansicht ändern kann.

EDIT 2 Okay, jetzt kann ich die ausgewählte Ansicht ändern. Sie wissen immer noch nicht heiß richtig Eigenschaften zu entfernen, nachdem ein Objekt jedoch abgewählt ..

Answer 1

Der Trick ist getProximityMinValue() und getProximityMaxValue() in der WearableListView.Item Unterklasse zu implementieren:

private final class MyItemView extends FrameLayout implements WearableListView.Item { 

    final CircledImageView image; 
    final TextView text; 

    public MyItemView(Context context) { 
    super(context); 
    View.inflate(context, R.layout.wearablelistview_item, this); 
    image = (CircledImageView) findViewById(R.id.image); 
    text = (TextView) findViewById(R.id.text); 
    } 

    @Override 
    public float getProximityMinValue() { 
    return mDefaultCircleRadius; 
    } 

    @Override 
    public float getProximityMaxValue() { 
    return mSelectedCircleRadius; 
    } 

    @Override 
    public float getCurrentProximityValue() { 
    return image.getCircleRadius(); 
    } 

    @Override 
    public void setScalingAnimatorValue(float value) { 
    image.setCircleRadius(value); 
    image.setCircleRadiusPressed(value); 
    } 

    @Override 
    public void onScaleUpStart() { 
    image.setAlpha(1f); 
    text.setAlpha(1f); 
    } 

    @Override 
    public void onScaleDownStart() { 
    image.setAlpha(0.5f); 
    text.setAlpha(0.5f); 
    } 
} 

Voll funktions Beispiel source code here.

Answer 2

Ich wollte auch einen Titel über meiner tragbaren Listenansicht anzeigen.

Ich habe dieses Problem gelöst, indem ich ein TextView-Element als Teil meiner Wearable-Listenansicht hinzugefügt habe. Außerdem wird empfohlen, die App: layout_box auf "left | bottom | right" zu setzen, um beim Scrollen eine schönere Listenansicht zu erhalten.

Hier ist mein Layout XML (man beachte das Textview-Element):

<?xml version="1.0" encoding="utf-8"?> 
 
<android.support.wearable.view.BoxInsetLayout 
 
    xmlns:android="http://schemas.android.com/apk/res/android" 
 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
 
    android:layout_height="match_parent" 
 
    android:layout_width="match_parent"> 
 
    
 
    <FrameLayout 
 
     android:id="@+id/frame_layout" 
 
     android:layout_height="match_parent" 
 
     android:layout_width="match_parent" 
 
     app:layout_box="left|bottom|right"> 
 
    
 
     <android.support.wearable.view.WearableListView 
 
      android:id="@+id/wearable_List" 
 
      android:layout_height="match_parent" 
 
      android:layout_width="match_parent" 
 
      android:background="#434343"> 
 
     </android.support.wearable.view.WearableListView> 
 
    
 
     <TextView 
 
      android:id="@+id/title" 
 
      android:layout_width="wrap_content" 
 
      android:layout_height="35dp" 
 
      android:gravity="bottom" 
 
      android:textSize="20sp" 
 
      android:fontFamily="courrier" 
 
      android:layout_centerHorizontal="true" 
 
      android:layout_alignParentTop="true" 
 
      android:text="Settings"/> 
 
    
 
    </ FrameLayout > 
 
</android.support.wearable.view.BoxInsetLayout>

Für weitere Lesung, können Sie auch bei diesem Beispiel einen Blick darauf werfen, welche die Dinge klar erklärt: http://www.learnandroidwear.com/sample-1

Answer 3

Es ist viel einfacher als die Antworten hier gegeben. Verwenden Sie einfach onCenterPosition und onNonCenterPosition wie folgt aus:

public class WearableListItemLayout extends LinearLayout implements WearableListView.OnCenterProximityListener { 

    private ImageView mCircle; 
    private TextView mName; 

    private final float mFadedTextAlpha; 
    private final int mFadedCircleColor; 
    private final int mChosenCircleColor; 

    public WearableListItemLayout(Context context) { 
     this(context, null); 
    } 

    public WearableListItemLayout(Context context, AttributeSet attrs) { 
     this(context, attrs, 0); 
    } 

    public WearableListItemLayout(Context context, AttributeSet attrs, 
            int defStyle) { 
     super(context, attrs, defStyle); 

     mFadedTextAlpha = 200f/100f; 
     mFadedCircleColor = getResources().getColor(R.color.grey); 
     mChosenCircleColor = getResources().getColor(R.color.blue); 
    } 

    // Get references to the icon and text in the item layout definition 
    @Override 
    protected void onFinishInflate() { 
     super.onFinishInflate(); 
     // These are defined in the layout file for list items 
     // (see next section) 
     mCircle = (ImageView) findViewById(R.id.circle); 
     mName = (TextView) findViewById(R.id.name); 
    } 

    @Override 
    public void onCenterPosition(boolean animate) { 
     mName.setAlpha(1f); 
     ((GradientDrawable) mCircle.getDrawable()).setColor(mChosenCircleColor); 
    } 

    @Override 
    public void onNonCenterPosition(boolean animate) { 
     ((GradientDrawable) mCircle.getDrawable()).setColor(mFadedCircleColor); 
     mName.setAlpha(mFadedTextAlpha); 
    } 
} 

Hinweis: Dies ist für eine Listenansicht, die einen farbigen Kreis, wenn sie in der Mitte bekommt, aber es kann leicht angepasst werden, für was Sie wollen.