iT邦幫忙

2022 iThome 鐵人賽

DAY 29
0
Mobile Development

Android Studio - 30天菜鳥筆記系列 第 29

Android Studio菜鳥筆記 - Day29 - CradView

  • 分享至 

  • xImage
  •  

CradView顧名思義就是以卡片的方式來呈現出畫面,當然是上的卡片有非常多種,你可以設計出自己想要的樣式。下面我會將會介紹CradView與如何跟RecyclerView結合

基本屬性

app:cardCornerRadius //CardView圓角
app:cardElevation //CardView陰影
app:cardMaxElevation //CardView最大陰影
app:cardBackgroundColor //CardView背景色
app:contentPadding //CardView四邊的邊距(也可以單一調整一個方向)
android:minWidth //CardView的最小寬度
android:minHeight //CardView的最小高度

布局

因為要將CradView與RecyclerView結合,這裡直接創建一個item.xml把CradView放入進去做布局

<?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="wrap_content"
    android:gravity="center|top">

    <androidx.cardview.widget.CardView
        android:layout_width="350dp"
        android:layout_height="wrap_content"
        android:layout_margin="20dp"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        app:cardCornerRadius="10dp"
        app:cardElevation="20dp"
        app:cardMaxElevation="20dp"
        app:cardBackgroundColor="#F5A7A7"
        app:contentPadding="10dp"
        >

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

            <TextView
                android:id="@+id/ID"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:padding="20dp"
                android:text="TextView"
                android:textSize="30dp" />

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

                <TextView
                    android:id="@+id/unm"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:layout_marginLeft="10dp"
                    android:text="TextView"
                    android:textSize="18dp" />

                <TextView
                    android:id="@+id/remark"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:layout_marginLeft="10dp"
                    android:text="TextView"
                    android:textSize="18dp" />
            </LinearLayout>

        </LinearLayout>

    </androidx.cardview.widget.CardView>
</LinearLayout>

創建RecyclerView

這裡跟跟我上一篇介紹RecyclerView差不多,我就不多做解釋了
直接上程式碼

activity_main

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

MainActivity.java

package com.example.cardview_demo;

import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.DividerItemDecoration;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;

import android.os.Bundle;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.Random;

public class MainActivity extends AppCompatActivity {
    RecyclerView recyclerView;
    Adapter adapter;
    ArrayList<HashMap<String, String>> arrayList = new ArrayList<>();
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        for (int i=1;i<=50;i++){
            HashMap<String, String> hashMap = new HashMap<>();
            hashMap.put("ID", ""+String.format("%02d", i));
            hashMap.put("num", "數量:" + (new Random().nextInt(80)+20));
            hashMap.put("remark", "備註:Data" + (new Random().nextInt(80)+20));
            arrayList.add(hashMap);
        }
        recyclerView = findViewById(R.id.recyclerview);
        recyclerView.setLayoutManager(new LinearLayoutManager(this));
        adapter = new Adapter(arrayList);
        recyclerView.setAdapter(adapter);
    }
}

Adapter.java

package com.example.cardview_demo;

import android.graphics.Color;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import android.widget.Toast;

import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

import java.util.ArrayList;
import java.util.HashMap;

public class Adapter extends RecyclerView.Adapter<Adapter.ViewHolder> {
    ArrayList<HashMap<String, String>> arrayList = new ArrayList<>();
    public Adapter(ArrayList<HashMap<String, String>> arrayList) {
        this.arrayList = arrayList;
    }

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

    @Override
    public void onBindViewHolder(@NonNull Adapter.ViewHolder holder, int position) {
        holder.setData(position);
    }

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

    public class ViewHolder extends RecyclerView.ViewHolder {
        TextView ID ,num, remark;
        public ViewHolder(@NonNull View itemView) {
            super(itemView);
            ID = itemView.findViewById(R.id.ID);
            num = itemView.findViewById(R.id.unm);
            remark = itemView.findViewById(R.id.remark);

        }
        void setData(int position){
            if (position%3 == 0){
                ID.setBackgroundColor(Color.parseColor("#FF00ee"));
            }else if (position%3 == 1){
                ID.setBackgroundColor(Color.parseColor("#eeff00"));
            }else{
                ID.setBackgroundColor(Color.parseColor("#00eeff"));
            }
            ID.setText(arrayList.get(position).get("ID"));
            num.setText(arrayList.get(position).get("num"));
            remark.setText(arrayList.get(position).get("remark"));
        }

    }
}

最後執行結果


上一篇
Android Studio菜鳥筆記 - Day28 - RecyclerView
下一篇
Android Studio菜鳥筆記 - Day30 - 心得
系列文
Android Studio - 30天菜鳥筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言