Dowemo

It takes a long time, and it's just as simple as a listview. Actually, the power of the recyclerview is to implement a layout, which isn't what the listview does. We're familiar with the basic recyclerview, and we write a implementation today. Look at the requirements map:


The requirements above: for the"history selection"above, we can write a linearlayout to handle it. The"history selection"section, we're using the recyclerview. ( previous thought we might be the scrollview add listview nesting to implement this requirement )

We looked at a picture of some boxes,"history selection"as a line, where the information is: The is a row of four squares, the following gray lines are also filled with a row, and the""is also a line, the following state. We can see that there are five different layouts to deal with, the history selection, the location name, the gray dividing line, select the province line, and. So we can start writing the layout.

History selection: a textview


 <TextView


 android:id="@+id/tv_selectHistoryTitle"


 tools:text="历史选择:"


 android:textColor="@color/black"


 android:padding="@dimen/padding_10dp"


 android:paddingLeft="@dimen/padding_15dp"


 android:layout_width="match_parent"


 android:layout_height="wrap_content"/>





Display a small grid layout for a place name:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"


 xmlns:tools="http://schemas.android.com/tools"


 android:layout_width="match_parent"


 android:gravity="center"


 android:id="@+id/ll_content"


 android:background="@color/white"


 android:layout_height="wrap_content"


 android:layout_marginLeft="@dimen/margin_4dp"


 android:layout_marginRight="@dimen/margin_4dp"


 android:layout_marginTop="@dimen/margin_5dp"


 android:layout_marginBottom="@dimen/margin_5dp">



 <TextView


 android:id="@+id/tv_selectPlaceContent"


 android:layout_width="match_parent"


 android:layout_height="wrap_content"


 android:gravity="center"


 android:background="@drawable/bg_bit_gray_hollow_rounded_rectangle"


 android:ellipsize="end"


 android:lines="1"


 android:paddingLeft="@dimen/padding_6dp"


 android:paddingRight="@dimen/padding_6dp"


 android:paddingTop="@dimen/padding_6dp"


 android:paddingBottom="@dimen/padding_6dp"


 android:textColor="@color/black"


 tools:text="历史选择的的"/>



</LinearLayout>





It adds a drawable to the textview, and it's a shape that can be seen as an ellipse in the route.

Here's the title of the state, and it's a textview.


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"


 xmlns:tools="http://schemas.android.com/tools"


 android:layout_width="match_parent"


 android:layout_height="wrap_content"


 android:background="@color/lightgray"


 android:orientation="vertical">



 <TextView


 android:id="@+id/tv_selectProvinceTitle"


 android:layout_width="match_parent"


 android:layout_height="wrap_content"


 android:background="@color/white"


 android:paddingLeft="@dimen/padding_10dp"


 android:paddingRight="@dimen/padding_10dp"


 android:paddingTop="@dimen/padding_10dp"


 android:textColor="@color/black"


 tools:text="选择省粉:"/>



</LinearLayout>





Finally, the layout of the state name is displayed:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"


 android:layout_width="match_parent"


 android:layout_height="wrap_content"


 android:background="@color/white"


 android:paddingBottom="@dimen/padding_5dp"


 android:paddingTop="@dimen/padding_5dp"


 xmlns:tools="http://schemas.android.com/tools">



 <TextView


 android:id="@+id/tv_selectProvinceName"


 tools:text="甘肃"


 android:textColor="@color/black"


 android:layout_marginLeft="@dimen/margin_10dp"


 android:layout_width="wrap_content"


 android:layout_height="wrap_content"/>


</LinearLayout>





This completes the writing of the above analysis.

Then write the recyclerview and adapter adapters. For the implementation, it's mainly to classify the data, and we can return to different viewholer according to different categories in the adapter. In contrast to other adapters, we need to write a method


public int getItemViewType(int position)





For a classification.
In fact, we can see that we're going to use a GridLayoutManager layout manager for recyclerview, showing that it looks like four columns, and we can override a method so that it can be displayed when the layout of this type is displayed. So there's a main method in this:

gridLayoutManager.setSpanSizeLookup()





This is a method to set up a column of columns.

Here's the code:


 private Context context;



 private List<PlaceItem> list;



 private final int SPAN_SIZE_HISTORY_CHOICE = 1001;//,历史选择



 private final int SPAN_SIZE_CHOICE_PROVINCE = 1002;//标题,选择省



 private final int SPAN_SIZE_PROVINCE_NAME = 1003;//选择的省名称



 private final int SPAN_SIZE_CONTENT = 1004;//位置数据



 private final int SPAN_SIZE_GRAY_SEPARATE = 1005;//灰色分割条



 private OnPlaceItemClickListener onPlaceItemClickListener;



 public void setOnPlaceItemClickListener(OnPlaceItemClickListener onPlaceItemClickListener) {


 this.onPlaceItemClickListener = onPlaceItemClickListener;


 }



 public SelectPlaceAdapter(Context context, List<PlaceItem> list) {


 this.context = context;


 this.list = list;


 }



 @Override


 public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {


 if(viewType == SPAN_SIZE_GRAY_SEPARATE){


 View separateView = LayoutInflater.from(context).inflate(R.layout.recycle_select_place_item_gray_bg, parent, false);


 SelectPlaceGraybgViewHolder viewHolder = new SelectPlaceGraybgViewHolder(separateView);


 return viewHolder;


 }else if (viewType == SPAN_SIZE_HISTORY_CHOICE) {


 View historyView = LayoutInflater.from(context).inflate(R.layout.recycle_select_place_item_history_select_title, parent, false);


 SelectHistoryTitleViewHolder viewHolder = new SelectHistoryTitleViewHolder(historyView);


 return viewHolder;


 } else if (viewType == SPAN_SIZE_CHOICE_PROVINCE) {


 View provinceTitleView = LayoutInflater.from(context).inflate(R.layout.recycle_select_place_item_select_province_title, parent, false);


 SelectProvinceTitleViewHolder viewHolder = new SelectProvinceTitleViewHolder(provinceTitleView);


 return viewHolder;


 } else if (viewType == SPAN_SIZE_PROVINCE_NAME) {


 View provinceNameView = LayoutInflater.from(context).inflate(R.layout.recycle_select_place_item_subtitle, parent, false);


 SelectProvinceNameViewHolder viewHolder = new SelectProvinceNameViewHolder(provinceNameView);


 return viewHolder;


 } else if (viewType == SPAN_SIZE_CONTENT) {


 View contentView = LayoutInflater.from(context).inflate(R.layout.recycle_select_place_item_content, parent, false);


 SelectPlaceContentViewHoder viewHolder = new SelectPlaceContentViewHoder(contentView);


 return viewHolder;


 }


 return null;


 }



 @Override


 public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {


 int type = getItemViewType(position);


 Log.e("TAG","bindViewHolder type-" + type);


 switch (type) {


 case SPAN_SIZE_GRAY_SEPARATE:{


 SelectPlaceGraybgViewHolder selectPlaceGraybgViewHolder = (SelectPlaceGraybgViewHolder) holder;


 GridLayoutManager.LayoutParams layoutParams = (GridLayoutManager.LayoutParams) selectPlaceGraybgViewHolder.llSelectPlaceGraybg.getLayoutParams();


 DisplayMetrics displayMetrics = context.getResources().getDisplayMetrics();


 layoutParams.width = displayMetrics.widthPixels;


 layoutParams.setMarginStart(DensityUtil.dp2px(context,-10));//设置左边移动,从(0,0)开始


 selectPlaceGraybgViewHolder.llSelectPlaceGraybg.setLayoutParams(layoutParams);


 selectPlaceGraybgViewHolder.llSelectPlaceGraybg.requestLayout();


 break;


 }


 case SPAN_SIZE_HISTORY_CHOICE: {


 SelectHistoryTitleViewHolder historyTitleViewHolder = (SelectHistoryTitleViewHolder) holder;


 historyTitleViewHolder.tvSelectHistoryTitle.setText("历史选择title");


 break;


 }


 case SPAN_SIZE_CHOICE_PROVINCE: {


 SelectProvinceTitleViewHolder provinceTitleViewHolder = (SelectProvinceTitleViewHolder) holder;


 provinceTitleViewHolder.tvSlectProvinceTitdle.setText("选择省份:");


 break;


 }


 case SPAN_SIZE_PROVINCE_NAME: {


 SelectProvinceNameViewHolder provinceNameViewHolder = (SelectProvinceNameViewHolder) holder;


 provinceNameViewHolder.tvSelectProvinceName.setText("甘肃省");


 break;


 }


 case SPAN_SIZE_CONTENT: {


 SelectPlaceContentViewHoder contentViewHoder = (SelectPlaceContentViewHoder) holder;


 contentViewHoder.itemView.setOnClickListener(v -> {


 if(onPlaceItemClickListener!=null){


 onPlaceItemClickListener.onItemClick(contentViewHoder.itemView,position);


 }


 });


 contentViewHoder.tvSelectPlaceContent.setText(list.get(position).getItemContent());


 break;


 }


 }


 }



 @Override


 public int getItemCount() {


 return list.size();


 }



 @Override


 public int getItemViewType(int position) {


 if (list.get(position).getItemType() == 1) {


 return SPAN_SIZE_HISTORY_CHOICE;//1001


 } else if (list.get(position).getItemType() == 2) {


 return SPAN_SIZE_CHOICE_PROVINCE;//1002


 } else if (list.get(position).getItemType() == 3) {


 return SPAN_SIZE_PROVINCE_NAME;//1003


 } else if (list.get(position).getItemType() == 4) {


 return SPAN_SIZE_CONTENT;//1004


 } else if(list.get(position).getItemType() == 5){


 return SPAN_SIZE_GRAY_SEPARATE;


 }else{


 return SPAN_SIZE_CONTENT;//默认是内容返回


 }


 }



/**


 * 位置点击


 */


 public interface OnPlaceItemClickListener{


 void onItemClick(View view,int postion);


 }



/**


 * 历史选择 标题


 */


 public class SelectHistoryTitleViewHolder extends RecyclerView.ViewHolder {



 @BindView(R.id.tv_selectHistoryTitle)


 TextView tvSelectHistoryTitle;



 public SelectHistoryTitleViewHolder(View itemView) {


 super(itemView);


 ButterKnife.bind(this, itemView);


 }


 }



/**


 * 选择省粉 标题


 */


 public class SelectProvinceTitleViewHolder extends RecyclerView.ViewHolder {



 @BindView(R.id.tv_selectProvinceTitle)


 TextView tvSlectProvinceTitdle;


 public SelectProvinceTitleViewHolder(View itemView) {


 super(itemView);


 ButterKnife.bind(this, itemView);


 }


 }



/**


 * 省份名称显示


 */


 public class SelectProvinceNameViewHolder extends RecyclerView.ViewHolder {



 @BindView(R.id.tv_selectProvinceName)


 TextView tvSelectProvinceName;



 public SelectProvinceNameViewHolder(View itemView) {


 super(itemView);


 ButterKnife.bind(this, itemView);


 }


 }



/**


 * 地点显示


 */


 public class SelectPlaceContentViewHoder extends RecyclerView.ViewHolder {



 @BindView(R.id.tv_selectPlaceContent)


 TextView tvSelectPlaceContent;



 @BindView(R.id.ll_content)


 LinearLayout llContent;


 public SelectPlaceContentViewHoder(View itemView) {


 super(itemView);


 ButterKnife.bind(this, itemView);


 }


 }



/**


 * 灰色条


 */


 public class SelectPlaceGraybgViewHolder extends RecyclerView.ViewHolder{



 @BindView(R.id.ll_selectPlaceGraybg)


 LinearLayout llSelectPlaceGraybg;



 public SelectPlaceGraybgViewHolder(View itemView) {


 super(itemView);


 ButterKnife.bind(this,itemView);


 }


 }







Every layout, we all write a viewholder with a total of 5 viewholder. Above we override the getItemViewType ( ) method, primarily returning a different type based on the type of data. A different viewholder is then identified by type in onCreateViewHolder. Finally, it's possible to bind data to the onBindViewHolder ( ). Next, take a look at the method that's called when a row is displayed:

 gridLayoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {


 @Override


 public int getSpanSize(int position) {


 int type = recycleSelectPlace.getAdapter().getItemViewType(position);


 switch (type){


 case 1004:{


 return 1;//占1格


 }


 case 1001:{


 return 4;


 }


 case 1002:{


 return 4;


 }


 case 1003:{


 return 4;


 }


 case 1005:{


 return 4;


 }


 }


 return 4;


 }


 });





The code is simple, which is based on type, and returns the number of squares. The type value and type in the adapter correspond to the type.

Data section: we want to follow the diagram from top to bottom (> history selection -> select province: Header -> province name -> province name -> province name. The order is processed, adding a type in the data object, and then adding to the list to pass into the adapter.

So, in general, we can see that:



Basically, the requirements are implemented, where some details may be required to modify your requirements.







Copyright © 2011 Dowemo All rights reserved.    Creative Commons   AboutUs