iT邦幫忙

2023 iThome 鐵人賽

DAY 16
0
Mobile Development

Android Studio初學系列 第 16

Android Studio初學 DAY16 RecyclerView

  • 分享至 

  • xImage
  •  

RecyclerView也是一個資料列表的元件,可以說他是listview的進階版,可以更好的客製化,更靈活的使用,當你的資料多到會超過能顯示的範圍,他也會變成可滑動的頁面,馬上來看看怎麼使用

XML佈局

首先先把要顯示的頁面放入RecyclerView

<androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerivew"
        android:layout_width="409dp"
        android:layout_height="729dp"
        tools:layout_editor_absoluteX="1dp"
        tools:layout_editor_absoluteY="1dp" />

再來新增一個layout去設計你的recyclerview

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        tools:layout_editor_absoluteX="1dp"
        tools:layout_editor_absoluteY="1dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/textView3"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="學號:"
                android:textSize="20sp"/>

            <TextView
                android:id="@+id/textView"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="5"
                android:text="TextView"
                android:textSize="20sp" />

        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/textView4"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="分數:"
                android:textSize="20sp" />

            <TextView
                android:id="@+id/textView5"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="5"
                android:text="TextView"
                android:textSize="20sp" />
        </LinearLayout>

Recyclerview的Adapter

新增一個class,用於綁定recyclerview

public class MyAdapter extends RecyclerView.Adapter<MyAdapter.MyViewHolder> {
    private ArrayList<HashMap<String,String>> dataList;
    public MyAdapter(ArrayList<HashMap<String,String>> dataList) {
        this.dataList = dataList;
    }

    @NonNull
    @Override
    public MyViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        // 創建 ViewHolder 並連結項目佈局檔案
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item, parent, false);
        return new MyViewHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull MyAdapter.MyViewHolder holder, int position) {
        // 在這裡綁定數據到 ViewHolder 的 View
        String itemView = String.valueOf(dataList.get(position));
        holder.textView.setText(dataList.get(position).get("num"));
        holder.textView5.setText(dataList.get(position).get("score"));

    }

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

    public class MyViewHolder extends RecyclerView.ViewHolder {
        private TextView textView;
        private TextView textView5;
        public MyViewHolder(@NonNull View itemView) {
            super(itemView);
            textView = itemView.findViewById(R.id.textView);
            textView5 = itemView.findViewById(R.id.textView5);
        }
    }
}

主程式

public class MainActivity extends AppCompatActivity {
    private MyAdapter myAdapter;
    private RecyclerView recyclerView;
    private ArrayList<HashMap<String,String>> dataList;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        recyclerView = findViewById(R.id.recyclerivew);
        recyclerView.setLayoutManager(new LinearLayoutManager(this));
        dataList = new ArrayList<>();

        //將數據添加到列表
        for(int i =0;i<=29;i++){
            HashMap<String,String> hashMap = new HashMap<>();
            hashMap.put("num",String.valueOf(i+1));
            hashMap.put("score",String.valueOf(new Random().nextInt(80) + 20));
            dataList.add(hashMap);
        }
        //綁定recyclerivew
        myAdapter = new MyAdapter(dataList);
        recyclerView.setAdapter(myAdapter);
    }
}

成果如下


上一篇
Android Studio初學 DAY15 ListView
下一篇
Android Studio初學 DAY17 RecyclerView點擊事件
系列文
Android Studio初學30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言