Android控件_RecycleView+CarView+Palette聯合應用

最終效果

表格佈局

垂直佈局

橫向佈局

添加引用

build.gradle

implementation 'com.android.support:recyclerview-v7:28.0.0'
    implementation 'com.android.support:cardview-v7:28.0.0'
    implementation 'com.android.support:palette-v7:28.0.0'

主佈局，添加一個RecyclerView

layout/activity_recyclerview.xml

<android.support.v7.widget.RecyclerView
     android:id="@+id/demo_recyclerview"
     android:layout_width="match_parent"
     android:layout_height="match_parent">
  </android.support.v7.widget.RecyclerView>

item子佈局，使用CardView卡片式佈局

layout/item_recyclerview.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="160dp"
    android:layout_height="200dp"
    android:layout_gravity="center"
    app:cardBackgroundColor="@android:color/white"
    app:cardCornerRadius="5dp"
    app:cardElevation="2dp"
    app:cardMaxElevation="@dimen/cardview_default_elevation">
 
    <!--cardBackgroundColor：卡片的背景顏色-->
    <!--cardCornerRadius：卡片的圓角半徑-->
    <!--cardElevation：卡片陰影的寬度-->
    <!--cardMaxElevation：最大卡片陰影的寬度-->
 
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
 
        <ImageView
            android:id="@+id/item_image"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="3"
            android:scaleType="fitXY"/>
 
        <TextView
            android:id="@+id/item_title"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:clickable="true"
            android:gravity="center"
            android:padding="5dp"
            android:textColor="@android:color/black"
            android:textSize="16dp"/>
    </LinearLayout>
 
</android.support.v7.widget.CardView>

爲每個卡片定義一個類

Item.java

public class Item {
    private String title;//圖片的名字
    private int resId;//圖片的資源Id
    public Item(String title, int resId) {
        this.title = title;
        this.resId = resId;
    }
    public String getTitle() {
        return title;
    }
    public void setTitle(String title) {
        this.title = title;
    }
    public int getResId() {
        return resId;
    }
    public void setResId(int resId) {
        this.resId = resId;
    }
}

RecyclerView的適配器，使用Palette調色板提取顏色

RecyclerAdapter.java

imimport android.content.Context;
import android.content.res.Resources;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.v7.graphics.Palette;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;
import java.util.List;
 
public class RecyclerAdapter extends RecyclerView.Adapter<RecyclerAdapter.MyViewHolder> {
 
    private Context context;
    private List<Item> itemList;
    private Resources resources;
    private LayoutInflater inflater;
 
    public RecyclerAdapter(Context context, List<Item> itemList) {
        this.context = context;
        this.itemList = itemList;
        this.resources = context.getResources();
        //加載佈局管理器，從一個Context中得到一個佈局填充器
        inflater = LayoutInflater.from(context);
    }
 
    @NonNull
    @Override
    public MyViewHolder onCreateViewHolder(@NonNull ViewGroup parent,int v) {
        //將xml佈局轉換爲View對象
        View view = inflater.inflate(R.layout.item_recyclerview, parent, false);
        //RecycleView的點擊事件
        final MyViewHolder holder=new MyViewHolder(view);
        holder.image.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                int pos=holder.getAdapterPosition();
                Item item=itemList.get(pos);
                Toast.makeText(view.getContext(),"you clicked image "+item.getTitle(),Toast.LENGTH_SHORT).show();
            }
        });
        return holder;
    }
 
    @Override
    public void onBindViewHolder(@NonNull final MyViewHolder holder, final int position) {
        final Item item = itemList.get(position);
        holder.title.setText(item.getTitle());
        holder.image.setImageResource(item.getResId());
        Bitmap bitmap = BitmapFactory.decodeResource(resources, item.getResId());
        //異步得到bitmap圖片顏色值
        Palette.from(bitmap).generate(new Palette.PaletteAsyncListener() {
            @Override
            public void onGenerated(@Nullable Palette palette) {
                //Palette提取顏色
                Palette.Swatch vibrant=palette.getVibrantSwatch();//有活力
                Palette.Swatch c=palette.getDarkVibrantSwatch();//有活力、暗色
                Palette.Swatch d=palette.getLightVibrantSwatch();//有活力、亮色
                Palette.Swatch f=palette.getMutedSwatch();//柔和
                Palette.Swatch a=palette.getDarkMutedSwatch();//柔和、暗色
                Palette.Swatch b=palette.getLightMutedSwatch();//柔和、亮色
                if(vibrant!=null )
                {
                    int color1=vibrant.getBodyTextColor();//內容顏色
                    int color2=vibrant.getTitleTextColor();//標題顏色
                    int color3=vibrant.getRgb();//RGB顏色
                    if(position<4)
                    {
                        holder.title.setBackgroundColor(f.getRgb());
                        holder.title.setTextColor(f.getTitleTextColor());
                    }
                    else
                    {
                        holder.title.setBackgroundColor(vibrant.getRgb());
                        holder.title.setTextColor(vibrant.getTitleTextColor());
                    }
                }
            }
        });
    }
 
    @Override
    public int getItemCount() {
        return null==itemList?0:itemList.size();
    }
 
 
 
 
    public class MyViewHolder extends RecyclerView.ViewHolder {
        public TextView title;
        public ImageView image;
 
        public MyViewHolder(@NonNull View itemView) {
            super(itemView);
            title = itemView.findViewById(R.id.item_title);
            image = itemView.findViewById(R.id.item_image);
        }
    }
}

實際應用

RecyclerViewActivity.java

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.DefaultItemAnimator;
import android.support.v7.widget.GridLayoutManager;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.widget.LinearLayout;
 
import java.util.ArrayList;
import java.util.List;
 
/**
 * RecycleView、CardView、Palette控件應用
 */
public class RecyclerViewActivity extends AppCompatActivity {
 
    private RecyclerView mRecyclerView;
    private RecyclerAdapter mRecyclerAdapter;
    private List<Item> viewData = new ArrayList<>();//圖片列表
 
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_recyclerview);
        loadDatas();
        initViews();
    }
 
    private void loadDatas() {
        viewData.add(new Item("第1張圖", R.mipmap.item1));
        viewData.add(new Item("第2張圖", R.mipmap.item2));
        viewData.add(new Item("第3張圖", R.mipmap.item3));
        viewData.add(new Item("第4張圖", R.mipmap.item4));
        viewData.add(new Item("第5張圖", R.mipmap.item5));
        viewData.add(new Item("第6張圖", R.mipmap.item6));
        viewData.add(new Item("第7張圖", R.mipmap.item7));
    }
 
    private void initViews() {
        mRecyclerView = findViewById(R.id.demo_recyclerview);
 
        //第一種設置佈局方式：使用表格，顯示3列
        mRecyclerView.setLayoutManager(new GridLayoutManager(this, 3));
 
        //第二種設置佈局方式：默認使用垂直方式（縱向滾動）
        //mRecyclerView.setLayoutManager(new LinearLayoutManager(this));
 
        //第三種設置佈局方式：橫向滾動
        //LinearLayoutManager linearLayoutManager=new LinearLayoutManager(this);
       //linearLayoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);
        //mRecyclerView.setLayoutManager(linearLayoutManager);
 
 
        //設置添加刪除Item時的動畫
        mRecyclerView.setItemAnimator(new DefaultItemAnimator());
        //初始化設置配
        mRecyclerAdapter = new RecyclerAdapter(this, viewData);
        //設置適配器
        mRecyclerView.setAdapter(mRecyclerAdapter);
    }
}