實例：使用RecyclerView實現瀑布流
效果
效果圖
添加依賴
// RecyclerView
compile 'com.android.support:recyclerview-v7:+'
使用RecyclerView
activity_main.xml
<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="match_parent"
android:orientation="vertical"
tools:context="jun.mytest.MainActivity">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"/>
<android.support.v7.widget.RecyclerView
android:id="@+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
對RecyclerView進行相關設置
1、LayoutManager：管理RecyclerView的結構
2、Adapter：處理每個Item的顯示
3、ItemDecoration：添加每個Item的裝飾
4、ItemAnimator：負責添加、移除、重排序時的動畫效果
MainActivity.java
public class MainActivity extends AppCompatActivity {
private Toolbar toolbar;
private RecyclerView mRecyclerView;
private List<String> mDatas;
private MyAdapter mAdapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
supportRequestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
// 初始化Toolbar
initToolbar();
// 初始化Data
initData();
// 初始化RecyclerView
initRecyclerView();
}
/**
* 初始化Toolbar
*/
private void initToolbar() {
toolbar = (Toolbar) findViewById(R.id.toolbar);
toolbar.inflateMenu(R.menu.menu_main);
toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
// 在位置1添加和移除
switch (item.getItemId()) {
case R.id.action_add:
mAdapter.addData(1, "New");
break;
case R.id.action_delete:
mAdapter.removeData(1);
break;
}
return true;
}
});
}
/**
* 初始化RecyclerView
*/
private void initRecyclerView() {
mRecyclerView = (RecyclerView) findViewById(R.id.recycler_view);
mRecyclerView.setHasFixedSize(true); // 設置固定大小
// 設置為錯列網格布局實現瀑布流
mRecyclerView.setLayoutManager(
new StaggeredGridLayoutManager(
4, StaggeredGridLayoutManager.VERTICAL));
// 設置適配器
mAdapter = new MyAdapter(mDatas);
mRecyclerView.setAdapter(mAdapter);
// 添加裝飾
mRecyclerView.addItemDecoration(new MyItemDecoration(this));
// 設置為默認動畫
mRecyclerView.setItemAnimator(new DefaultItemAnimator());
}
/**
* 初始化Data
*/
private void initData() {
mDatas = new ArrayList<>();
for (int i = 0; i < 100; i++) {
String data = "No. " + i;
mDatas.add(data);
}
}
}
Toast封裝類
ToastUtil.java
public class ToastUtil {
private static Toast mToast;
public static void showToast(Context context, String str, int duration) {
if (mToast == null)
mToast = Toast.makeText(context, str, duration);
else
mToast.setText(str);
mToast.show();
}
}
RecyclerView的適配器
RecyclerView的Item布局
item_recycler_view.xml
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#9d55b8">
<TextView
android:id="@+id/tv_label"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"/>
</FrameLayout>
MyAdapter.java
public class MyAdapter extends RecyclerView.Adapter<MyAdapter.MyViewHolder> {
private List<String> mDatas;
private List<Integer> mHeights;
private Context mContext;
public MyAdapter(List<String> mDatas) {
this.mDatas = mDatas;
mHeights = new ArrayList<>();
}
@Override
public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
mContext = parent.getContext();
View itemView = LayoutInflater.from(parent.getContext())
.inflate(R.layout.item_recycler_view, parent, false);
return new MyViewHolder(itemView);
}
@Override
public void onBindViewHolder(final MyViewHolder holder, final int position) {
/*int layoutPosition = holder.getLayoutPosition();*/
// 獲取數據
String data = mDatas.get(position);
// 將標簽的高度設置成隨機模擬瀑布流效果
if (mHeights.size() <= position) {
mHeights.add((int) (30 + Math.random() * 200));
}
ViewGroup.LayoutParams layoutParams = holder.mTvLabel.getLayoutParams();
layoutParams.height = mHeights.get(position);
holder.mTvLabel.setLayoutParams(layoutParams);
// 設置標簽
holder.mTvLabel.setText(data);
holder.itemView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
ToastUtil.showToast(mContext, "Item: " + position, Toast.LENGTH_SHORT);
}
});
}
@Override
public int getItemCount() {
return mDatas.size();
}
// 添加數據
public void addData(int position, String data) {
mDatas.add(position, data);
// 通知已添加
notifyItemInserted(position);
}
// 移除數據
public void removeData(int position) {
mDatas.remove(position);
// 通知已移除
notifyItemRemoved(position);
}
class MyViewHolder extends RecyclerView.ViewHolder {
private TextView mTvLabel; // 標簽
public MyViewHolder(View itemView) {
super(itemView);
mTvLabel = (TextView) itemView.findViewById(R.id.tv_label);
}
}
}
RecyclerView的Item裝飾
MyItemDecoration.java
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, RecyclerView.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
, RecyclerView.State state) {
outRect.set(0, 0, mDivider.getIntrinsicWidth(), mDivider.getIntrinsicHeight());
}
}
Toolbar的Menu
res/menu/menu_main.xml
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/action_add"
android:title="Add"/>
<item
android:id="@+id/action_delete"
android:title="Delete"/>
</menu>
