RecyclerView - どのようにスクロール

Question

時に中央に表示されるアイテムをハイライト表示し、私はこのようなRecyclerViewが必要になります。

それがない必要があります。

• は、時間あたりの7つの項目（がをDONE）

  を表示

• 中央の目に見えるアイテムにRecyclerViewを中心に置く（ボタンの上に私をクリックすると、は

• ）HELPを必要とする（）

• 私は左/右にスクロールすると、中央の項目が「強調表示」されます（ボタンが選択されている>青色）をDONEそれは滑らかscroolでセンタリングする

（をを助けが必要）私は（私は、中央に表示されるアイテムは、最も近いCHを取得する取得中央の項目にRecyclerViewを中心にSnapHelperクラスを使用画面中央にILD）

MY ADAPTER：

public class RvTrendsGraphAdapter extends RecyclerView.Adapter<RvTrendsGraphAdapter.ViewHolder> { 

    private float deviceWidth; 
    private float itemWidth; 

    private List<RvTrendsGraphModel> models; 
    private Context context; 

    public RvTrendsGraphAdapter(Context context, List<RvTrendsGraphModel> models) { 
     this.models = models; 
     this.context = context; 
    } 

    private Context getContext() { 
     return context; 
    } 

    public class ViewHolder extends RecyclerView.ViewHolder { 
     @BindView(R.id.rv_trends_graph_layout) PercentRelativeLayout rootLayout; 
     @BindView(R.id.rv_trends_graph_layout_superiore) PercentRelativeLayout layoutSuperiore; 
     @BindView(R.id.rv_trends_graph_layout_inferiore) RelativeLayout layoutInferiore; 
     @BindView(R.id.rv_trends_graph_vertical_progressbar) ProgressBar verticalProgressBar; 
     @BindView(R.id.rv_trends_graph_button) Button timeLapseButton; 

     public ViewHolder(View itemView) { 
      super(itemView); 
      ButterKnife.bind(this, itemView); 
     } 
    } 


    @Override 
    public RvTrendsGraphAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { 
     Context context = parent.getContext(); 
     LayoutInflater inflater = LayoutInflater.from(context); 
     View view = inflater.inflate(R.layout.recycler_trends_graph, parent, false); 

     // Set the width to show 7 elements 
     DisplayMetrics displayMetrics = new DisplayMetrics(); 
     WindowManager windowmanager = (WindowManager) getContext().getSystemService(Context.WINDOW_SERVICE); 
     windowmanager.getDefaultDisplay().getMetrics(displayMetrics); 
     deviceWidth = displayMetrics.widthPixels; 
     float progressBarWidth = getContext().getResources().getDimension(R.dimen.picker_time_lapse_progressbar_width); 
     itemWidth = ((deviceWidth + progressBarWidth)/8f + 1f); 
     view.getLayoutParams().width = (int) itemWidth; 

     return new ViewHolder(view); 
    } 

    @Override 
    public void onBindViewHolder(RvTrendsGraphAdapter.ViewHolder viewHolder, int position) { 
     RvTrendsGraphModel model = models.get(position); 

     PercentRelativeLayout rootLayout = viewHolder.rootLayout; 
     ProgressBar verticalProgressBar = viewHolder.verticalProgressBar; 
     Button timeLapseButton = viewHolder.timeLapseButton; 

     verticalProgressBar.setProgress(model.getProgress()); 
     setTimeLapseButton(timeLapseButton, model.getTimeLapseValue()); 
    } 

    @Override 
    public int getItemCount() { 
     return models.size(); 
    } 

    public RvTrendsGraphModel getItem(int position) { 
     return models.get(position); 
    } 

    /* UTILS */ 

    private void setTimeLapseButton(Button button, String text) { 
     //button.setSelected(false); 
     button.setText(text); 
    } 

} 

セットアップRECYCLERのVIEW：

mLayoutManager = new LinearLayoutManager(getActivity(), LinearLayoutManager.HORIZONTAL, false); 
mRecyclerView.setLayoutManager(mLayoutManager); 

SnapHelper snapHelper = new LinearSnapHelper(); 
snapHelper.attachToRecyclerView(mRecyclerView); 

移入RECYCLERのVIEW：

list = new ArrayList<>(); 
/* Create foo list... */ 
list.add(new RvTrendsGraphModel(75, String.valueOf(list.size()))); 
list.add(new RvTrendsGraphModel(33, String.valueOf(list.size()))); 
// ... 

adapter = new RvTrendsGraphAdapter(getActivity(), list); 
mRecyclerView.setAdapter(adapter); 
adapter.notifyDataSetChanged(); 

mRecyclerView.smoothScrollToPosition(list.size() - 1); 

SCROLL管理：

mRecyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() { 
      @Override 
      public void onScrolled(RecyclerView recyclerView, int dx, int dy) { 
       // Get adapter position of the central item 
       PercentRelativeLayout root = (PercentRelativeLayout) mRecyclerView.findChildViewUnder(centralX, 0); 
       pos = mRecyclerView.getChildAdapterPosition(root); 

       // first try (very bad) 
       if (lastPos != pos) { 
        pos = lastPos; 
        adapter.notifyDataSetChanged(); 
       } 

       // second try (I cannot call notifyitemchanged during the scroll 
       if() { 
        final int pos = mRecyclerView.getChildAdapterPosition(root); 
        adapter.getItem(pos).setCentered(true); 
        adapter.notifyItemChanged(pos); 
       } 
      } 
     }); 

、アイテムレイアウト：このことができます

<?xml version="1.0" encoding="utf-8"?> 
<android.support.percent.PercentRelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:id="@+id/rv_trends_graph_layout" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    tools:ignore="MissingPrefix"> 

    <android.support.percent.PercentRelativeLayout 
     android:id="@+id/rv_trends_graph_layout_superiore" 
     android:layout_width="match_parent" 
     android:layout_height="0dp" 
     app:layout_heightPercent="75%"> 

     <ProgressBar 
      android:id="@+id/rv_trends_graph_vertical_progressbar" 
      style="@style/Widget.ProgressBar.Vertical" 
      android:layout_width="@dimen/picker_time_lapse_progressbar_width" 
      android:layout_height="match_parent" 
      android:layout_alignParentBottom="true" 
      android:layout_centerHorizontal="true" 
      android:progress="50" 
      /> 
    </android.support.percent.PercentRelativeLayout> 

    <RelativeLayout 
     android:id="@+id/rv_trends_graph_layout_inferiore" 
     android:layout_width="match_parent" 
     android:layout_height="0dp" 
     android:layout_below="@+id/rv_trends_graph_layout_superiore" 
     app:layout_heightPercent="25%"> 

     <Button 
      android:id="@+id/rv_trends_graph_button" 
      fontPath="fonts/Roboto-Light.ttf" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_centerInParent="true" 
      android:background="@drawable/picker_time_lapse_selector" 
      android:minHeight="0dp" 
      android:minWidth="0dp" 
      android:textAllCaps="true" 
      android:textColor="@color/picker_time_lapse_text_color_selector" 
      android:textSize="@dimen/text_size_medium" 
      tools:ignore="ContentDescription" 
      tools:text="16"/> 

    </RelativeLayout> 

</android.support.percent.PercentRelativeLayout> 

Answer 1

希望 - これはハックソリューション、スクロールで特に強調されていること

注意。 また、私はパフォーマンスをプロファイリングしていません。おそらくそれをチェックするべきです。 また、をTextViewに変更しました。背景をButtonに変更すると、他のレイアウトプロパティが折りたたまれます。

ハッキーソリューションが気に入らない場合は、いくつかのチャートライブラリをチェックアウトすることができます。あなたはrecyclerView &アダプタ

... 

private int prevCenterPos; // Keep track the previous pos to dehighlight 

... 

// Click and smooth scroll to get clicked item in the middle 
adapter.setListener(new RvTrendsGraphAdapter.TimeLapseButtonClickListener() { 
    @Override 
    public void onClick(int position) { 
     View view = mRecyclerView.getLayoutManager().findViewByPosition(position); 
     int middle = mRecyclerView.getWidth()/2; 
     mRecyclerView.smoothScrollBy(view.getLeft() - middle, 0, new AccelerateDecelerateInterpolator()); 
    } 
}); 

// Highlight view in the middle on scroll 
mRecyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() { 

    @Override 
    public void onScrolled(RecyclerView recyclerView, int dx, int dy) { 
     super.onScrolled(recyclerView, dx, dy); 

     int center = mRecyclerView.getWidth()/2; 
     View centerView = mRecyclerView.findChildViewUnder(center, mRecyclerView.getTop()); 
     int centerPos = mRecyclerView.getChildAdapterPosition(centerView); 

     if (prevCenterPos != centerPos) { 
      // dehighlight the previously highlighted view 
      View prevView = mRecyclerView.getLayoutManager().findViewByPosition(prevCenterPos); 
      if (prevView != null) { 
       View button = prevView.findViewById(R.id.rv_trends_graph_button); 
       int white = ContextCompat.getColor(context, R.color.white); 
       button.setBackgroundColor(white); 
      } 

      // highlight view in the middle 
      if (centerView != null) { 
       View button = centerView.findViewById(R.id.rv_trends_graph_button); 
       int highlightColor = ContextCompat.getColor(context, R.color.colorAccent); 
       button.setBackgroundColor(highlightColor); 
      } 

      prevCenterPos = centerPos; 
     } 
    } 
});