RecyclerView Demo

Demo:

 

 

Bài demo này có thể khó khăn với những ai mới bắt đầu. Nên dành cho các bạn đã khá về android.
Mọi thắc mắc vui lòng comment bên dưới.

 

Bước 1: Tạo project mới và thêm những dòng sau vào build.gradle – dependencies:

compile ‘com.android.support:appcompat-v7:21.0.3’
compile “com.android.support:recyclerview-v7:21.0.0”
compile ‘com.android.support:cardview-v7:21.0.3’

Vào Res – values – style: Chỉnh style cho AppTheme như sau:

<br />

 
Bước 2: Tạo thêm 3 class như dưới hình:

4class

Bước 3:
file Main_activity.java

public class MainActivity extends Activity {
private Toolbar mToolbar;
private ImageButton mFabButton;
ArrayList arrayList = new ArrayList();

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

generateFakeData(); // hàm tạo dữ liệu giả, thêm các số dạng string vào arrayList.

initRecyclerView(); // khởi tạo recyclerView

mFabButton = (ImageButton) findViewById(R.id.fabButton);
mFabButton.setOnClickListener(new View.OnClickListener() { // set sự kiện click cho button góc dưới bên trái màn hình.
@Override
public void onClick(View v) {
Toast.makeText(getApplicationContext(), "Hello", Toast.LENGTH_SHORT).show();
}
});
}

private void generateFakeData() {
for(int i=0; i<100; i++){
arrayList.add("" + i);
}
}

private void initRecyclerView() {
RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recyclerView);
recyclerView.setLayoutManager(new LinearLayoutManager(this));
RecyclerAdapter recyclerAdapter = new RecyclerAdapter(arrayList);
recyclerView.setAdapter(recyclerAdapter);

recyclerView.setOnScrollListener(new HidingScrollListener() {
@Override
public void onHide() {
hideViews(); // vuốt xuống thì toolBar + Floating Button ẩn đi.
}
@Override
public void onShow() {
showViews();
}
});
}
private void hideViews() { // ẩn toolBar và Button
mToolbar.animate().translationY(-mToolbar.getHeight()).setInterpolator(new AccelerateInterpolator(2));

FrameLayout.LayoutParams lp = (FrameLayout.LayoutParams) mFabButton.getLayoutParams();
int fabBottomMargin = lp.bottomMargin;
mFabButton.animate().translationY(mFabButton.getHeight()+fabBottomMargin).setInterpolator(new AccelerateInterpolator(2)).start();
}

private void showViews() {
mToolbar.animate().translationY(0).setInterpolator(new DecelerateInterpolator(2));
mFabButton.animate().translationY(0).setInterpolator(new DecelerateInterpolator(2)).start();
}
}

file RecyclerAdapter.java

public class RecyclerAdapter extends RecyclerView.Adapter {
private List mItemList;

public RecyclerAdapter(List itemList) {
mItemList = itemList;
}

@Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
final View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.recycler_item, parent, false); // file recycler_item xem dưới cùng bài viết.
return RecyclerItemViewHolder.newInstance(view);
}

@Override
public void onBindViewHolder(RecyclerView.ViewHolder viewHolder, int position) {
RecyclerItemViewHolder holder = (RecyclerItemViewHolder) viewHolder;
String itemText = mItemList.get(position);
holder.setItemText(itemText);
}

@Override
public int getItemCount() {
return mItemList == null ? 0 : mItemList.size();
}
}

file RecyclerItemViewHolder.java:

public class RecyclerItemViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener {
private final TextView mItemTextView;

public RecyclerItemViewHolder(final View parent, TextView itemTextView) {
super(parent);
mItemTextView = itemTextView;
parent.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Log.d("position:", "" + getPosition()); // lấy thử vị trí xuất ra Log
}
});
}

@Override
public void onClick(View view) {

}

public static RecyclerItemViewHolder newInstance(View parent) {
TextView itemTextView = (TextView) parent.findViewById(R.id.itemTextView);
return new RecyclerItemViewHolder(parent, itemTextView);
}

public void setItemText(CharSequence text) {
mItemTextView.setText(text);
}
}

file HidingScrollListener.java:

public abstract class HidingScrollListener extends RecyclerView.OnScrollListener {
private static final int HIDE_THRESHOLD = 20;
private int scrolledDistance = 0;
private boolean controlsVisible = true;

// trong lúc scroll lên/xuống trên recyclerView sẽ tính toán tỉ lệ màn hình để quyết định ẩn/hiện ToolBar + FloatingButton.
// Bạn có thể chỉnh sửa lại thông số
@Override
public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
super.onScrolled(recyclerView, dx, dy);

if (scrolledDistance > HIDE_THRESHOLD && controlsVisible) {
onHide();
controlsVisible = false;
scrolledDistance = 0;
} else if (scrolledDistance < -HIDE_THRESHOLD && !controlsVisible) { onShow(); controlsVisible = true; scrolledDistance = 0; } if((controlsVisible && dy>0) || (!controlsVisible && dy<0)) {
scrolledDistance += dy;
}
}

public abstract void onHide();
public abstract void onShow();

}

 

 

file activity_main.xml

<!--?xml version="1.0" encoding="utf-8"?-->

 

 

file recycler_item.xml

<!--?xml version="1.0" encoding="utf-8"?-->

Thanks!
Mọi thắc mắc vui lòng comment bên dưới.

Advertisements

2 thoughts on “RecyclerView Demo

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s