生活本來就不容易,而我們的不努力只會讓生活變得更加無賴
前幾天依據《Android群英傳》的學習寫了一篇筆記是關于ListView的基本使用
但是Google已經推出了更加自由的RecyclerView取代ListView,所以這兩天特地花時間學習了一下RecyclerView的基本用法,今天寫的這篇將實現RecyclerView的基本功能如基本使用,添加分界線,拖拽移動,滑動刪除等,過幾天再接著學習更高級的功能,
整體預覽:
整體
基本用法
我們知道RecyclerView是用以取代ListView和GridView的,所以依據后兩者用法可知,RecyclerView必須要有一樣東西,適配器Adapter, 而Adapter則需要數據項以及view填充
- item_viewholder.xml
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#44ff00">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="hello"
android:textColor="#fff"
android:textSize="40sp"
android:layout_gravity="center_horizontal"
android:gravity="center"
android:id="@+id/text_view"/>
</LinearLayout>```
* 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"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical" tools:context="com.lqg.myrecyclerview.MainActivity">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:id="@+id/tool_bar"
app:title="RecyclerDemo"
app:titleTextColor="@android:color/white"
android:background="@color/colorPrimary">
</android.support.v7.widget.Toolbar>
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/recycler_view">
</android.support.v7.widget.RecyclerView>
</LinearLayout>```
- 基本實現
MyAdapter.java
public class MyAadapter extends RecyclerView.Adapter{
private LayoutInflater inflater;
public List<String> list;
public MyAadapter(Context context , List<String> list) {
this.list = list;
inflater = LayoutInflater.from(context);
}
@Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
return new ViewHolder(inflater.inflate(R.layout.item_viewholder,parent,false));
}
@Override
public void onBindViewHolder(RecyclerView.ViewHolder holder, final int position) {
final ViewHolder viewHolder = (ViewHolder) holder;
viewHolder.textview.setText(list.get(position));
}
@Override
public int getItemCount() {
return list.size();
}
private class ViewHolder extends RecyclerView.ViewHolder{
private TextView textview;
public ViewHolder(View itemView) {
super(itemView);
textview = (TextView) itemView.findViewById(R.id.text_view);
}
}
}```
MainActivity.java
public class MainActivity extends AppCompatActivity implements Toolbar.OnMenuItemClickListener {
private RecyclerView recyclerView;
private List<String> mDatas;
private MyAadapter myAadapter;
private MyAadapter.OnClickListener mOnClickListener;
private Toolbar mToolbar;
private RecyclerView.LayoutManager manager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mDatas = getList();
recyclerView = (RecyclerView) findViewById(R.id.recycler_view);
recyclerView.setItemAnimator(new DefaultItemAnimator());
recyclerView.setLayoutManager(new LinearLayoutManager(this));
myAadapter = new MyAadapter(this,mDatas);
recyclerView.setAdapter(myAadapter);
//Toolbar
mToolbar = (Toolbar) findViewById(R.id.tool_bar);
setSupportActionBar(mToolbar);
mToolbar.setOnMenuItemClickListener(this);
}
//獲取List方法
private List<String> getList(){
List<String> list = new ArrayList<String>();
for (int i = 'A';i<'z';++i){
list.add(""+(char)i);
}
return list;
}
其中需要注意的一點就是```setLayoutManager```這個方法是設置一個LayoutManager的.其中選項為LinearLayoutManager()線性),GridLayoutManager(網格)以及StaggerGridLayoutManager(瀑布流)三種
效果
就問你一句,丑不丑!不過沒關系,丑是因為它有變炫的資本,下面添加分割線
#### 分割線
想要理解分割線的概念,首先得新建類實現```RecyclerView.ItemDecoration```;接著理解幾個簡單的概念,不過一幅圖就能解決的事盡量憋說話
下面從代碼張進一步理解
* LinearLayout的分割線類:DividerItemDecolation.java
public class DividerItemDecpration extends RecyclerView.ItemDecoration{
/**
* 巧妙利用系統自帶,可定制
*/
private final static int[] ATTRS = {android.R.attr.listDivider};
/**
* 獲取布局走向
*/
private final static int ORIENTETION_VERTIVAL = LinearLayoutManager.VERTICAL;
private final static int ORIENTATION_HORIZONTAL =LinearLayoutManager.HORIZONTAL;
private Drawable mDivider;
private int mOrientation;
/**
* 構造方法,獲取系統屬性,猴設置布局走向
*/
public DividerItemDecpration(Context context ,int Orientation) {
TypedArray ta = context.obtainStyledAttributes(ATTRS);
mDivider = ta.getDrawable(0);
ta.recycle();
setOrientation(Orientation);
}
/**
* 設置布局走向方法
*/
private void setOrientation(int Orientation){
if (mOrientation !=ORIENTETION_VERTIVAL && mOrientation != ORIENTATION_HORIZONTAL)
throw new IllegalArgumentException("Error Orientation");
mOrientation = Orientation;
}
/**
* 要畫分割線必須得有畫布
* onDraw方法
*/
@Override
public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
if (mOrientation == ORIENTETION_VERTIVAL){
drawVertical(c,parent);
}else{
drawHorizontal(c,parent);
}
}
/**
* 橫向
*/
private void drawHorizontal(Canvas c, RecyclerView parent) {
//回去父布局的頂部內間距為top
final int top = parent.getPaddingTop();
//由圖可知,利用parent的高度減去底部內間距為底
final int buttom = parent.getHeight() - parent.getPaddingBottom();
final int childCount = parent.getChildCount();
for (int i = 0 ;i <childCount ;++i){
final View child = parent.getChildAt(i);
final RecyclerView.LayoutParams rl = (RecyclerView.LayoutParams) child.getLayoutParams();
//獲取子布局的最右位置+右外間距為右
final int left = child.getRight() + rl.rightMargin;
final int right = left + mDivider.getIntrinsicHeight();
mDivider.setBounds(left,top,right,buttom);
mDivider.draw(c);
}
}
private void drawVertical(Canvas c, RecyclerView parent) {
//parent的左內間距為左
final int left = parent.getPaddingLeft();
//parent寬度減去parent的right為右
final int right = parent.getWidth()- parent.getRight();
final int childCount = parent.getChildCount();
for (int i = 0 ; i <childCount ;++i){
final View child = parent.getChildAt(i);
final RecyclerView recyclerView = new RecyclerView(parent.getContext());
final RecyclerView.LayoutParams rl = (RecyclerView.LayoutParams) child.getLayoutParams();
final int top = child.getBottom() + rl.bottomMargin;
final int buttom = top + mDivider.getIntrinsicHeight();
mDivider.setBounds(left,top,right,buttom);
mDivider.draw(c);
}
}
@Override
public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
if (mOrientation == ORIENTETION_VERTIVAL){
outRect.set(0,0,0,mDivider.getIntrinsicHeight());
}else{
outRect.set(0,0,mDivider.getIntrinsicWidth(),0);
}
}
}```
- 使用方法很簡答,只需調用
addItemDecolation方法即可
效果
linear.gif
- 如果想更炫的效果可以自己定制以及其他兩個效果,在這里就不演示了
添加點擊方法
除了分割線有點坑爸爸之外,還有就是并沒有點擊方法的API,所以需要我們自己定制,我們可以在適配器里寫我們的方法給MainActivity調用,代碼如下:
MyAdapter.java
public class MyAadapter extends RecyclerView.Adapter{
private LayoutInflater inflater;
public List<String> list;
private OnClickListener mOnItemClickListener;
/**
* 回調
*/
public interface OnClickListener{
public void OnClick(View view,int position);
public boolean OnLongClick(RecyclerView.ViewHolder viewHolder,View view,int position);
}
public void setOnItemClick(OnClickListener mOnItemClickListener){
this.mOnItemClickListener = mOnItemClickListener;
}
public MyAadapter(Context context , List<String> list) {
this.list = list;
inflater = LayoutInflater.from(context);
}
@Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
return new ViewHolder(inflater.inflate(R.layout.item_viewholder,parent,false));
}
@Override
public void onBindViewHolder(RecyclerView.ViewHolder holder, final int position) {
final ViewHolder viewHolder = (ViewHolder) holder;
viewHolder.textview.setText(list.get(position));
//監聽回調
if (mOnItemClickListener != null){
viewHolder.itemView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
int pos = viewHolder.getPosition();
mOnItemClickListener.OnClick(viewHolder.itemView,pos);
}
});
viewHolder.itemView.setOnLongClickListener(new View.OnLongClickListener() {
@Override
public boolean onLongClick(View v) {
int pos = viewHolder.getPosition();
mOnItemClickListener.OnLongClick(viewHolder,viewHolder.itemView,pos);
return false;
}
});
}
}
@Override
public int getItemCount() {
return list.size();
}
private class ViewHolder extends RecyclerView.ViewHolder{
private TextView textview;
public ViewHolder(View itemView) {
super(itemView);
textview = (TextView) itemView.findViewById(R.id.text_view);
}
}
}```
MainActivity.java
只需在MainActivity中用Adapter調用方法即可
myAadapter.setOnItemClick(new MyAadapter.OnClickListener() {
@Override
public void OnClick(View view, int position) {
Toast.makeText(MainActivity.this,(position+1)+"onclick",Toast.LENGTH_SHORT).show();
}
@Override
public boolean OnLongClick(RecyclerView.ViewHolder viewHolder,
View view, int position) {
Toast.makeText(MainActivity.this,(position + 1)+"onLongClick",Toast.LENGTH_SHORT).show();
if (position != mDatas.size()-1){
helper.startDrag(viewHolder);
}
return false;
}
});```
效果
click.gif
基本拓展
如果RecyclerView只是這樣的我選擇狗帶,但事實肯定不是,不然Google不可能花2W多行代碼實現RecyclerView.下面開始展示他優秀的小功能
- 動態添加移除
以往在ListView我們要添加一項或者移除一項Item,有點難度,不過RecyclerView讓你一步到站,查看文檔可以發現RecyclerView.Adapter利用兩個方法notifyItemInserted(position);,notifyItemRemoved(position);,就是這兩個讓我們一步實現添加移除,我們可以簡單封裝在我們的適配器Adapter里,利用Toolbar定制兩個菜單項實現點擊添加移除
Menu.xml
<menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:title="@string/add"
android:id="@+id/id_btn_add"
app:showAsAction="ifRoom"
android:orderInCategory="80" />
<item
android:title="@string/remove"
android:id="@+id/id_btn_remove"
app:showAsAction="ifRoom"
android:orderInCategory="90" />
</menu>```
MyAdapter.java
public void insertOne(int position){
list.add("Insert One");
notifyItemInserted(position);
}
public void removeOne(int position){
list.add("remove One");
notifyItemRemoved(position);
}```
效果
add.gif
2.拖拽及側滑刪除
這個就是這兩天學習最酷的一個功能,它的實現竟然也很簡單,只需利用ItemTouchHelper這個幫助類即可,新建一個對象可以發現,它需要一個CallBack參數,所以我們寫一個類擴展自ItemTouchHelper.Callback
MyCallBack.java
public class MyCallBack extends ItemTouchHelper.Callback{
private List<String> mDatas;
private MyAadapter adapter;
public MyCallBack(MyAadapter adapter) {
this.adapter = adapter;
this.mDatas = adapter.list;
}
/**
* 此方法用以設置是否響應拖拽或滑動事件,并且確定類型
*/
@Override
public int getMovementFlags(RecyclerView recyclerView,
RecyclerView.ViewHolder viewHolder) {
final int dragFlags ,swipFlags;
/**
* 網格方向有UP ,Down ,left,right四個方向
*/
if (recyclerView.getLayoutManager() instanceof GridLayoutManager){
dragFlags= ItemTouchHelper.UP|
ItemTouchHelper.DOWN|ItemTouchHelper.LEFT|ItemTouchHelper.RIGHT;
swipFlags = 0;
}else{
//LineaLayout只有Up ,Down
dragFlags = ItemTouchHelper.UP | ItemTouchHelper.DOWN;
//右滑刪除
swipFlags = ItemTouchHelper.END;
}
return makeMovementFlags(dragFlags,swipFlags);
}
@Override
public boolean onMove(RecyclerView recyclerView,
RecyclerView.ViewHolder viewHolder,
RecyclerView.ViewHolder target) {
int framPosition = viewHolder.getAdapterPosition();
int toPosition = target.getAdapterPosition();
/**
* 向上拖拽
*/
if (framPosition > toPosition){
for (int i = framPosition ;i < toPosition;++i){
Collections.swap(mDatas,i,i+1);
}
/**
* 向下拖拽
*/
}else {
for (int i = framPosition ;i > toPosition ;++i){
Collections.swap(mDatas,i,i-1);
}
}
adapter.notifyItemMoved(framPosition,toPosition);
return true;
}
/**
* viewHolder
* params direction表示滑動方向,此處我們在上面規定為右滑
*/
@Override
public void onSwiped(RecyclerView.ViewHolder viewHolder, int direction) {
int position = viewHolder.getAdapterPosition();
adapter.notifyItemRemoved(position);
adapter.list.remove(position);
}
/**
* 是否長按拖拽
*/
@Override
public boolean isLongPressDragEnabled() {
return false;
}
}```
接著在MainActivity中我們之前定制的長按事件中利用ItemTouchHelper的```startDrag(viewHolder)```實現長按拖拽滑動刪除,代碼如下
``` /**
* 拖拽事件
*/
final ItemTouchHelper helper = new ItemTouchHelper(new MyCallBack(myAadapter));
helper.attachToRecyclerView(recyclerView);
myAadapter.setOnItemClick(new MyAadapter.OnClickListener() {
@Override
public void OnClick(View view, int position) {
Toast.makeText(MainActivity.this,(position+1)+"onclick",Toast.LENGTH_SHORT).show();
}
@Override
public boolean OnLongClick(RecyclerView.ViewHolder viewHolder,
View view, int position) {
Toast.makeText(MainActivity.this,(position + 1)+"onLongClick",Toast.LENGTH_SHORT).show();
if (position != mDatas.size()-1){
helper.startDrag(viewHolder);
}
return false;
}
});```
效果
如果這樣簡單的實現這么酷的功能還沒愛上它,沒關系接下來的學習將會更加炫酷
##### 如果你覺得本文有所錯漏,麻煩指出,相互交流共同進步.