神刀安全网

使用RecyclerView控件实现瀑布流

RecyclerView相比于ListView, 在回收重用时更具有灵活性, 也就是低耦合, 并且提供了扩展. 加载多个视图时, 应该多用RecyclerView代替ListView.

那么我们来看看这东西应该怎么用? 比如生成一个瀑布流的视图.

使用RecyclerView控件实现瀑布流

首先我们从一个HelloWorld写起, 看看如何构建一个RecyclerView.

依赖

Gradle配置, 添加RecyclerView库的依赖.

compile 'com.android.support:recyclerview-v7:+'

布局

布局文件

<android.support.v7.widget.RecyclerView
android:id="@+id/test_recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"/>

代码

LayoutManager: 管理RecyclerView的结构.

Adapter: 处理每个Item的显示.

ItemDecoration: 添加每个Item的装饰.

ItemAnimator: 负责添加/移除/重排序时的动画效果.

LayoutManager/Adapter是必须, ItemDecoration/ItemAnimator是可选.

/**
* 初始化RecyclerView
*
* @param recyclerView 主控件
*/

private void initRecyclerView(RecyclerView recyclerView) {
recyclerView.setHasFixedSize(true); // 设置固定大小
initRecyclerLayoutManager(recyclerView); // 初始化布局
initRecyclerAdapter(recyclerView); // 初始化适配器
initItemDecoration(recyclerView); // 初始化装饰
initItemAnimator(recyclerView); // 初始化动画效果
}

LayoutManager

管理RecyclerView的布局结构.

private void initRecyclerLayoutManager(RecyclerView recyclerView) {
// 错列网格布局
recyclerView.setLayoutManager(new StaggeredGridLayoutManager(4,
StaggeredGridLayoutManager.VERTICAL));
}

提供了多种LayoutManager, 瀑布流使用错列网格布局.

Adapter

适配器, 处理RecyclerView的Item事务.

private void initRecyclerAdapter(RecyclerView recyclerView) {
mAdapter = new MyAdapter(getData());
recyclerView.setAdapter(mAdapter);
}

对于Adapter, 我们需要展开来说, 先看看类.

public class MyAdapter extends RecyclerView.Adapter<MyViewHolder> {

private List<DataModel> mDataModels;
private List<Integer> mHeights;

MyAdapter(List<DataModel> dataModels) {
if (dataModels == null) {
throw new IllegalArgumentException("DataModel must not be null");
}
mDataModels = dataModels;
mHeights = new ArrayList<>();
}

@Override
public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View itemView = LayoutInflater.from(parent.getContext())
.inflate(R.layout.item_recycler_view, parent, false);
return new MyViewHolder(itemView);
}

@Override
public void onBindViewHolder(MyViewHolder holder, int position) {
DataModel dataModel = mDataModels.get(position);

// 随机高度, 模拟瀑布效果.
if (mHeights.size() <= position) {
mHeights.add((int) (100 + Math.random() * 300));
}

ViewGroup.LayoutParams lp = holder.getTvLabel().getLayoutParams();
lp.height = mHeights.get(position);

holder.getTvLabel().setLayoutParams(lp);

holder.getTvLabel().setText(dataModel.getLabel());
holder.getTvDateTime().setText(new SimpleDateFormat("yyyy-MM-dd", Locale.ENGLISH)
.format(dataModel.getDateTime()));
}

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

public void addData(int position) {
DataModel model = new DataModel();
model.setDateTime(getBeforeDay(new Date(), position));
model.setLabel("No. " + (int) (new Random().nextDouble() * 20.0f));

mDataModels.add(position, model);
notifyItemInserted(position);
}

public void removeData(int position) {
mDataModels.remove(position);
notifyItemRemoved(position);
}

/**
* 获取日期的前一天
*
* @param date 日期
* @param i 偏离
* @return 新的日期
*/

private static Date getBeforeDay(Date date, int i) {
Calendar calendar = Calendar.getInstance();
calendar.setTime(date);
calendar.add(Calendar.DAY_OF_YEAR, i * (-1));
return calendar.getTime();
}
}

onCreateViewHolder创建ViewHolder.

onBindViewHolder绑定每一项数据.

getItemCount返回列表长度.

RecyclerView强制使用ViewHolder.

public class MyViewHolder extends RecyclerView.ViewHolder {

private TextView mTvLabel; // 标签
private TextView mTvDateTime; // 日期

public MyViewHolder(View itemView) {
super(itemView);
mTvLabel = (TextView) itemView.findViewById(R.id.item_text);
mTvDateTime = (TextView) itemView.findViewById(R.id.item_date);
}

public TextView getTvLabel() {
return mTvLabel;
}

public TextView getTvDateTime() {
return mTvDateTime;
}

}

在onCreateViewHolder方法, 创建类; 在onBindViewHolder方法, 绑定数据.

DataModel

public class DataModel {

private String mLabel;
private Date mDateTime;

public String getLabel() {
return mLabel;
}

public void setLabel(String label) {
mLabel = label;
}

public Date getDateTime() {
return mDateTime;
}

public void setDateTime(Date dateTime) {
mDateTime = dateTime;
}
}

ItemDecoration

项的装饰, 比如ListView中的分割线, 在本例中, 左右两条粉线.

private void initItemDecoration(RecyclerView recyclerView) {
recyclerView.addItemDecoration(new MyItemDecoration(this));
}

ItemDecoration, 注意parent和child的使用方式.

public class MyItemDecoration extends RecyclerView.ItemDecoration {

private static final int[] ATTRS = new int[]{android.R.attr.listDivider};
private Drawable mDivider;

public MyItemDecoration(Context context) {
final TypedArray array = context.obtainStyledAttributes(ATTRS);
mDivider = array.getDrawable(0);
array.recycle();
}

@Override
public void onDraw(Canvas c, RecyclerView parent, State state) {
drawHorizontal(c, parent);
drawVertical(c, parent);
}

// 水平线
public void drawHorizontal(Canvas c, RecyclerView parent) {

final int childCount = parent.getChildCount();

// 在每一个子控件的底部画线
for (int i = 0; i < childCount; i++) {
final View child = parent.getChildAt(i);

final int left = child.getLeft() + child.getPaddingLeft();
final int right = child.getWidth() + child.getLeft() - child.getPaddingRight();
final int top = child.getBottom() - mDivider.getIntrinsicHeight() - child.getPaddingBottom();
final int bottom = top + mDivider.getIntrinsicHeight();
mDivider.setBounds(left, top, right, bottom);
mDivider.draw(c);
}
}

// 竖直线
public void drawVertical(Canvas c, RecyclerView parent) {

final int childCount = parent.getChildCount();

// 在每一个子控件的右侧画线
for (int i = 0; i < childCount; i++) {
final View child = parent.getChildAt(i);
int right = child.getRight() - child.getPaddingRight();
int left = right - mDivider.getIntrinsicWidth();
final int top = child.getTop() + child.getPaddingTop();
final int bottom = child.getTop() + child.getHeight() - child.getPaddingBottom();

mDivider.setBounds(left, top, right, bottom);
mDivider.draw(c);
}
}

// Item之间的留白
@Override
public void getItemOffsets(Rect outRect, View view, RecyclerView parent, State state) {
outRect.set(0, 0, mDivider.getIntrinsicWidth(), mDivider.getIntrinsicHeight());
}
}

本例重写了listDivider

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
...
<item name="android:listDivider">@drawable/divider_bg</item>
</style>

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">

<solid android:color="#ff00ff"/>
<size android:height="4dp"/>
<size android:width="4dp"/>
</shape>

ItemAnimator

动画效果比较复杂, 使用默认动画. 如要定制的话, 继承DefaultItemAnimator; 如设置null, 则不显示任何动画.

    private void initItemAnimator(RecyclerView recyclerView) {
recyclerView.setItemAnimator(new DefaultItemAnimator()); // 默认动画
}
```

---

# 最终
最终的代码逻辑
```java
public class MainActivity extends AppCompatActivity {

private MyAdapter mAdapter;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);

FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
.setAction("Action", null).show();
}
});

// 初始化RecyclerView
initRecyclerView((RecyclerView) findViewById(R.id.test_recycler_view));
}

/**
* 初始化RecyclerView
*
* @param recyclerView 主控件
*/
private void initRecyclerView(RecyclerView recyclerView) {
recyclerView.setHasFixedSize(true); // 设置固定大小
initRecyclerLayoutManager(recyclerView); // 初始化LayoutManager
initRecyclerAdapter(recyclerView); // 初始化Adapter
initItemDecoration(recyclerView); // 初始化边界装饰
initItemAnimator(recyclerView); // 初始化动画效果
}

/**
* 初始化RecyclerView的LayoutManager
*
* @param recyclerView 主控件
*/
private void initRecyclerLayoutManager(RecyclerView recyclerView) {
// 错列网格布局
recyclerView.setLayoutManager(new StaggeredGridLayoutManager(4,
StaggeredGridLayoutManager.VERTICAL));
}

/**
* 初始化RecyclerView的Adapter
*
* @param recyclerView 主控件
*/
private void initRecyclerAdapter(RecyclerView recyclerView) {
mAdapter = new MyAdapter(getData());
recyclerView.setAdapter(mAdapter);
}

/**
* 初始化RecyclerView的(ItemDecoration)项目装饰
*
* @param recyclerView 主控件
*/
private void initItemDecoration(RecyclerView recyclerView) {
recyclerView.addItemDecoration(new MyItemDecoration(this));
}

/**
* 初始化RecyclerView的(ItemAnimator)项目动画
*
* @param recyclerView 主控件
*/
private void initItemAnimator(RecyclerView recyclerView) {
recyclerView.setItemAnimator(new DefaultItemAnimator()); // 默认动画
}

/**
* 模拟的数据
*
* @return 数据
*/
private ArrayList<DataModel> getData() {
int count = 57;
ArrayList<DataModel> data = new ArrayList<>();
for (int i = 0; i < count; i++) {
DataModel model = new DataModel();

model.setDateTime(getBeforeDay(new Date(), i));
model.setLabel("No. " + i);

data.add(model);
}

return data;
}

/**
* 获取日期的前一天
*
* @param date 日期
* @param i 偏离
* @return 新的日期
*/
private static Date getBeforeDay(Date date, int i) {
Calendar calendar = Calendar.getInstance();
calendar.setTime(date);
calendar.add(Calendar.DAY_OF_YEAR, i * (-1));
return calendar.getTime();
}


@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();

switch (item.getItemId()) {
case R.id.id_action_add:
mAdapter.addData(1);
break;
case R.id.id_action_delete:
mAdapter.removeData(1);
break;
}

//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return true;

}

return super.onOptionsItemSelected(item);
}
}

为了测试动画, Menu额外添加两个按钮.

RecyclerView的基本要点就是这些了.

OK, that’s all! Enjoy it!

生活

有技术又要有生活, 美让生活更精彩!

使用RecyclerView控件实现瀑布流

女生, 让自己更职业受欢迎! 好物

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » 使用RecyclerView控件实现瀑布流

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
分享按钮