iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 11
0
Mobile Development

Android 從零開始系列 第 11

[Day11] RecyclerView元件(2)

  • 分享至 

  • xImage
  •  

延續昨天建立的RecyclerView,我們這次要來做點擊觸發和刪除功能。

1.點擊功能

Adapter

開啟上次所設計好的MyAdapter,在裡面的ViewHolder加入setOnClickListener監聽功能並且設定好對應事件就完成了。

public class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder> {

    ArrayList<String> titleList;
    MainActivity mContext;

    //帶入ArrayList作為資料,添加第二個參數,第二個參數是主頁面
    public MyAdapter(ArrayList<String> titleList,MainActivity mContext) {
        this.titleList = titleList;
        this.mContext = mContext;
    }

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

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        holder.fileTitle.setText(titleList.get(position));
    }

    //RecyclerView長度
    @Override
    public int getItemCount() {
        return titleList.size();
    }

    class ViewHolder extends RecyclerView.ViewHolder {
        public TextView fileTitle;
        public ViewHolder(View holder) {
            super(holder);
            //綁定元件ID
            fileTitle = holder.findViewById(R.id.fileTitle);
            holder.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    Toast.makeText(mContext,titleList.get(getAdapterPosition()), Toast.LENGTH_SHORT).show();
                }
            });
        }
    }
}

順帶一提,因為Toast.makeText()第一個參數需傳入Activity,所以在一開始的
public MyAdapter(ArrayList<String> titleList,MainActivity mContext)
有把MainActivity傳入並引用

JAVA程式設計

JAVA要修改的地方不多,因為MyAdapter多一個參數的原因,只要把adapter = new MyAdapter(arrayList);改成
adapter = new MyAdapter(arrayList,this);就好了

public class MainActivity extends AppCompatActivity {
    RecyclerView recyclerView;
    MyAdapter adapter;
    ArrayList<String> arrayList = new ArrayList<>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        getSupportActionBar().hide();
        setContentView(R.layout.activity_main);

        // 綁定元件
        recyclerView = (RecyclerView) findViewById(R.id.recyclerView);
        for(int i = 0; i < 20; i++) {
            arrayList.add("第" + i + "個");
        }

        recyclerView.setLayoutManager(new LinearLayoutManager(this));
        recyclerView.addItemDecoration(new DividerItemDecoration(this,
                DividerItemDecoration.VERTICAL));
        adapter = new MyAdapter(arrayList,this);
        recyclerView.setAdapter(adapter);
    }
}

成果

圖片

2.刪除功能

XML

我們要先為每一行的資料都添加一個刪除的按鈕,所以得去修改之前的list_content.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="60dp"
    android:orientation="horizontal">
        <TextView
            android:id="@+id/fileTitle"
            android:text="TextView"
            android:layout_width="200dp"
            android:layout_height="60dp"
            android:gravity="center_vertical|left"/>

        <Button
            android:id="@+id/del"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="刪除"/>
</LinearLayout>

Adapter

開啟上次所設計好的MyAdapter,在裡面的ViewHolder為剛才新增的刪除按鈕加入setOnClickListener監聽功能並且設定好對應的刪除事件。

public class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder> {

    ArrayList<String> titleList;
    MainActivity mContext;

    //帶入ArrayList作為資料,添加第二個參數,第二個參數是主頁面
    public MyAdapter(ArrayList<String> titleList,MainActivity mContext) {
        this.titleList = titleList;
        this.mContext = mContext;
    }

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

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        holder.fileTitle.setText(titleList.get(position));
    }

    //RecyclerView長度
    @Override
    public int getItemCount() {
        return titleList.size();
    }

    class ViewHolder extends RecyclerView.ViewHolder {
        public TextView fileTitle;
        public Button delButton;
        public ViewHolder(View holder) {
            super(holder);
            //綁定元件ID
            fileTitle = holder.findViewById(R.id.fileTitle);
            delButton = holder.findViewById(R.id.del);
            delButton.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    //移除ArrayList資料
                    titleList.remove(getAdapterPosition());
                    //更新RecyclerView
                    notifyDataSetChanged();
                }
            });
        }
    }
}

成果

圖片


上一篇
[Day10] RecyclerView元件(1)
下一篇
[Day12] TitleBar(標題欄)設計
系列文
Android 從零開始30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言