如何使用MvvmCross製作具有不同高度項目的同步ListViews？

我正在開發一個應用程序，需要顯示兩列圖像與文本，並同步他們的滾動（類似Pinterest）。如何使用MvvmCross製作具有不同高度項目的同步ListViews？

//////////////////
/ /
/ 圖片 /
/ /
//////////////////
/ 文本 /
//////////////////
/ 文本 /
//////////////////

到目前爲止，我使用下面的佈局來實現這一點。

<ScrollViewEx 
    android:id="@+id/content" 
    android:layout_width="match_parent" 
    android:layout_height="0dp" 
    android:layout_weight="30" 
    android:scrollbars="none" 
    android:overScrollMode="never"> 
    <TableLayout 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:background="#ffffff" 
     android:gravity="center_horizontal" 
     android:shrinkColumns="0,1" 
     android:stretchColumns="0,1"> 
     <TableRow 
      android:id="@+id/tableRow" 
      android:layout_width="fill_parent"> 
      <MvxLinearLayoutCustomAdapter 
       android:layout_width="0dp" 
       android:layout_weight="1" 
       android:layout_height="fill_parent" 
       android:orientation="vertical" 
       android:id="@+id/left_layout" 
       android:padding="10dp" 
       local:MvxBind="ItemsSource items1" 
       local:MvxItemTemplate="@layout/custom_item" /> 
      <MvxLinearLayoutCustomAdapter 
       android:layout_width="0dp" 
       android:layout_weight="1" 
       android:layout_height="fill_parent" 
       android:orientation="vertical" 
       android:id="@+id/right_layout" 
       android:padding="10dp" 
       local:MvxBind="ItemsSource items2" 
       local:MvxItemTemplate="@layout/custom_item" /> 
     </TableRow> 
    </TableLayout> 
</ScrollViewEx>

請注意，我用自定義適配器爲LinearLayout中使用AQuery C＃結合將圖像載入的ImageView在我的自定義項目的佈局，併爲圖片設置不同高度的目的（使瀑布UI）。我的適配器代碼是：

public class MvxClickableLinearLayoutAdapter : MvxAdapterWithChangedEvent 
{ 
    IEnumerable<ItemViewModel> src; 
    Bitmap imgLoading; 
    Context _context; 
    public MvxClickableLinearLayoutAdapter(Context context) 
     : base(context) 
    { 
    } 

    protected override View GetView(int position, View convertView, ViewGroup parent, int templateId) 
    { 
     AQuery aq = null; 
     var view = convertView; 
     if (view == null) 
      view = base.GetView(position, convertView, parent, templateId); 
     aq = new AQuery(view); 
     if (imgLoading == null) 
      imgLoading = aq.GetCachedImage(Resource.Drawable.load); 
     if (src == null) 
      src = (parent as MvxLinearLayout).ItemsSource.Cast<ItemViewModel>(); 
     var item = src.ElementAt(position); 
     var imageUrl = item.ImageUrl; 

     var img = (AQuery)aq.Id(Resource.Id.news_img); 

     img.Image(imageUrl, false, false, 0, 0, imgLoading, 0); 
     img.Height(item.Height, true); 
     return view; 
    }

我的問題是性能。適配器加載所有元素，這使我無法使用ViewHolder模式。即使我加載大量的項目，適配器也不會嘗試重新使用先前加載的視圖，並使我的滾動不那麼流暢。我認爲這是因爲我使用ScrollView。所以我認爲我的答案是ListView。

我試圖按照answer中描述的方式實現自定義ListView，但我無法將兩個ListView同步（不想重寫 OnScrollChanged方法，因爲我試過並且兩者之間存在延遲）。我還需要控制每個項目的高度，因此無法使用兩個自定義項目創建一個ListView，如上圖所示。

有沒有什麼辦法可以實現與ListView和LinearLayouts自定義適配器？或者用ScrollView，也許通過修改適配器？在此先感謝。

來源

2015-09-02 pmironov

什麼MvxRecyclerView？這應該是更好的性能和滾動事件掛鉤。 – Martijn00

@ Martijn00我會盡力，謝謝。它能讓我的ScrollViewEx具有相同的佈局嗎？ – pmironov

是的，應該工作。如果你需要任何幫助來實現它，請給我平靜。 – Martijn00

您可以使用MvxRecyclerView。這應該是更好的性能和滾動事件掛鉤。

您可以使用適配器這樣的：

var recyclerView = view.FindViewById<MvxRecyclerView>(Resource.Id.my_recycler_view); 
if (recyclerView != null) { 
    recyclerView.Adapter = new MyRecyclerViewAdapter((IMvxAndroidBindingContext)BindingContext); 
}

然後滾動添加到第二列表做：

recyclerView1.ScrollChange += (object sender, View.ScrollChangeEventArgs e) => { 
    recyclerView2.ScrollY = e.ScrollY; 
};

來源

2015-09-04 12:52:52 Martijn00

如何使用MvvmCross製作具有不同高度項目的同步ListViews？

回答

相關問題