android瀑布流列表两边跳 Android Fragment + RecyclerView瀑布流布局

Android Fragment + RecyclerView瀑布流布局

Android Fragment + RecyclerView瀑布流布局

目录

1、瀑布流效果图

2、使用RecyclerView实现瀑布流布局

2.1 RecyclerView的用法

2.1.1 onCreteViewHolder(ViewGroup viewGroup，int i);

2.1.2 onBindViewHolder(ViewHolder viewHolder,int i);

2.1.3 getItemCount();

2.2 Adapter代码示例

2.3 Fragment(或Activity)代码

2.4 Home类

2.5 主布局xml代码

2.6 item子布局

1、瀑布流效果图

2、使用RecyclerView实现瀑布流布局

RecyclerView与ListView 类似，都使用Adapter(适配器)来生成列表项，不同的是RecyclerView 使用的是改进的RecyclerView.Adapter，RecyclerView.Adapter需要实现三种方法。

2.1.1 onCreteViewHolder(ViewGroup viewGroup，int i);

此方法用于创建列表项组件。

2.1.2 onBindViewHolder(ViewHolder viewHolder,int i);

此方法用于负责为列表项组件绑定数据，每次组件重新显示出来都会重新执行该方法。

2.1.3 getItemCount();

该方法的返回值决定包含多少个列表项。

public class StaggeredGridAdater extends RecyclerView.Adapter {

private Context mContext;

private List homeList = new ArrayList<>();

public StaggeredGridAdater(Context context,List homeList){

this.mContext = context;

this.homeList = homeList;

}

//创建列表组件

@NonNull

@Override

public StaggeredGridAdater.HomeViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {

View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.home_item,null);

return new StaggeredGridAdater.HomeViewHolder(view,this);

}

//绑定数据

@Override

public void onBindViewHolder(@NonNull HomeViewHolder holder, int position) {

holder.imageIdIv.setImageResource(homeList.get(position).getImageId());

holder.nameTv.setText(homeList.get(position).getName());

}

//返回列表数据总数

@Override

public int getItemCount() {

return homeList.size();

}

public class HomeViewHolder extends RecyclerView.ViewHolder{

TextView nameTv;

ImageView imageIdIv;

private RecyclerView.Adapter adapter;

public HomeViewHolder(@NonNull View itemView,RecyclerView.Adapter adapter) {

super(itemView);

this.nameTv = itemView.findViewById(R.id.home_item_text);

this.imageIdIv = itemView.findViewById(R.id.home_item_mage);

this.adapter = adapter;

}

}

}

为了有效管理列表项所包含的子组件，额外定义了一个HomeViewHolder类。通过onCreateViewHolder()创建列表项

传入。

public class HomeFragment extends Fragment {

private RecyclerView recyclerView;

private List homeList = new ArrayList<>();

public View onCreateView(@NonNull LayoutInflater inflater,

ViewGroup container, Bundle savedInstanceState) {

View root = inflater.inflate(R.layout.fragment_home, container, false);

recyclerView = root.findViewById(R.id.home_recycler);

//设置RecyclerView保持固定大小,这样可以优化RecyclerView的性能

recyclerView.setHasFixedSize(true);

initData();

//设置瀑布流布局为2列，垂直方向滑动

recyclerView.setLayoutManager(new StaggeredGridLayoutManager(2,StaggeredGridLayoutManager.VERTICAL));

StaggeredGridAdater staggeredGridAdater = new StaggeredGridAdater(this.getActivity(),homeList);

//创建分割线对象

recyclerView.addItemDecoration(new MyDecoration());

recyclerView.setAdapter(staggeredGridAdater);

return root;

}

//数据源

private void initData() {

String[] names = new String[]{"车位查询","车位预定","与车间距","防盗警报","停车时长","车位查询","车位预定","与车间距","防盗警报","停车时长"};

int[] ImageId = new int[]{R.drawable.car1,R.drawable.car2,R.drawable.car3,R.drawable.car4,R.drawable.car5,R.drawable.car1,R.drawable.car2,R.drawable.car3,R.drawable.car4,R.drawable.car5};

for(int i = 0 ;i < names.length ; i++){

this.homeList.add(new Home(names[i],ImageId[i]));

}

}

//分割线的类

class MyDecoration extends RecyclerView.ItemDecoration{

@Override

public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state){

super.getItemOffsets(outRect,view ,parent,state);

int gap = getResources().getDimensionPixelSize(R.dimen.dividerHeight);//5dp

outRect.set(gap,gap,gap,gap);

}

}

}

public class Home {

private String name;

private int ImageId;

public Home(String name,int ImageId){

this.name = name;

this.ImageId = ImageId;

}

public int getImageId() {

return ImageId;

}

public void setImageId(int imageId) {

ImageId = imageId;

}

public String getName() {

return name;

}

public void setName(String name) {

this.name = name;

}

}

xmlns:app="/apk/res-auto"

android:layout_width="match_parent"

android:layout_height="match_parent">

android:id="@+id/home_recycler"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_marginBottom="56dp"

android:background="@color/colorWhite">

android:layout_width="wrap_content"

android:layout_height="wrap_content">

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:id="@+id/home_item_mage"

android:scaleType="centerCrop"/>

android:id="@+id/home_item_text"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginBottom="2dp"

android:layout_gravity="left|bottom"

android:padding="12dip"

android:background="#85000000"

android:textColor="#ffffffff"

android:text="Golden Gate"

android:textStyle="bold"/>

Android Fragment + RecyclerView瀑布流布局相关教程