Android Studio RecyclerVIew的基本使用

本博客主要講述RecyclerView的四種基本使用方法：縱向串列視圖、橫向串列視圖、網格視圖、瀑布流視圖，并且對他們實作一些拓展效果，

本文主要是對縱向串列視圖進行一步一步的詳細講解，比較接近的橫向串列視圖、網格視圖、瀑布流視圖等提供了原始碼，

比較適合剛剛入門的小白查看

1.添加依賴

在project下的build.gradle下添加陳述句,如果有新版本，按照提示修改版本數字即可，此版本當前為最新版本，并點擊右上角的跳出的提醒的 sync now

implementation 'androidx.recyclerview:recyclerview:1.1.0'

在這里插入圖片描述

2.新建recyclerview的Activity檔案


public class RecycleViewActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_recycle_view);
    }

}

3.設定recyclervIew的layout檔案

這里有四個功能，所以有四個按鈕，跳轉到新的界面，大家可以一個一個按鈕添加，我這里就不重復展示了，直接放了完整代碼

<?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="match_parent"
    android:padding="15dp"
    android:orientation="vertical">

    <Button
        android:id="@+id/BBTTNN01"
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:text="串列視圖"
        android:textSize="40sp"
        android:textColor="@color/white"
        android:background="@color/teal_700"
        />
    <Button
        android:id="@+id/BBTTNN02"
        android:layout_marginTop="10dp"
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:text="水平滾動"
        android:textSize="40sp"
        android:textColor="@color/white"
        android:background="@color/teal_700"
        />
    <Button
        android:id="@+id/BBTTNN03"
        android:layout_marginTop="10dp"
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:text="網格視圖"
        android:textSize="40sp"
        android:textColor="@color/white"
        android:background="@color/teal_700"
        />
    <Button
        android:id="@+id/BBTTNN04"
        android:layout_marginTop="10dp"
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:text="瀑布流"
        android:textSize="40sp"
        android:textColor="@color/white"
        android:background="@color/teal_700"
        />
</LinearLayout>

5.設定recyclerview的activity檔案讓四個按鈕分別跳轉到四個功能的界面


public class RecycleViewActivity extends AppCompatActivity {

    private Button BT01_rec;
    private Button BT02_rec;
    private Button BT03_rec;
    private Button BT04_rec;

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

        BT01_rec=findViewById(R.id.BBTTNN01);

        BT01_rec.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent=new Intent(RecycleViewActivity.this,LinearRecyclerActivity.class);
                startActivity(intent);
            }
        });
        BT02_rec=findViewById(R.id.BBTTNN02);
        BT02_rec.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent=new Intent(RecycleViewActivity.this,HorRecycActivity.class);
                startActivity(intent);
            }
        });

        BT03_rec=findViewById(R.id.BBTTNN03);
        BT03_rec.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent=new Intent(RecycleViewActivity.this,GrideRActivity.class);
                startActivity(intent);
            }
        });
        BT04_rec=findViewById(R.id.BBTTNN04);
        BT04_rec.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent=new Intent(RecycleViewActivity.this,PUBUrecActivity.class);
                startActivity(intent);
            }
        });


    }

}

6.接下來開始實作第一個功能：縱向串列視圖

（1）新建Activity檔案，命名LinearRecyclerActivity

public class LinearRecyclerActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_linear_layout); //這個R可能會報紅，根據系統提示修改即可
    }
}

（2）來到activity_linear_layout檔案，新建一個整體上的recycrview的layout

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rv_main"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"       
        android:background="@color/gray"
        />

</RelativeLayout>

注意android:layout_height=“wrap_content” 設定成wrap_content，不要設定成match_parent，不然間距會非常大，有興趣的朋友可以設定一下體驗一下，

（3）回到LinearRecyclerActivity，新建一個實體

public class LinearRecyclerActivity extends AppCompatActivity {
    private RecyclerView mrv;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_linear_layout);
        mrv=findViewById(R.id.rv_main);
    }
}

（4）接下來設定視圖的方向：橫向或者縱向

加入以下陳述句到LinearRecyclerActivity

LinearLayoutManager layoutManager=new LinearLayoutManager(this);
layoutManager.setOrientation(RecyclerView.VERTICAL); //VERTICAL指設定成縱向
mrv.setLayoutManager(layoutManager);

加了之后的代碼

public class LinearRecyclerActivity extends AppCompatActivity {
    private RecyclerView mrv;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_linear_layout);
        mrv=findViewById(R.id.rv_main);
        LinearLayoutManager layoutManager=new LinearLayoutManager(this);
        layoutManager.setOrientation(RecyclerView.VERTICAL);
        mrv.setLayoutManager(layoutManager);
    }
}

（5）現在要寫一下每一個recyclerview每一個子元素的樣式

新建一個layout檔案命名為 layout_linear_item.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/white"
    android:paddingLeft="20dp"
    android:paddingRight="20dp"
    android:paddingTop="10dp"
    android:paddingBottom="10dp"
    >
    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:id="@+id/iv_re01"
        android:layout_gravity="center_horizontal"
        android:background="@color/teal_700"

        />
    <TextView
        android:paddingLeft="20dp"
        android:paddingTop="20dp"
        android:id="@+id/tv_re01"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@color/teal_700"
        android:textSize="20sp"
        android:text="Fruit"
        android:layout_gravity="center_horizontal"

        />
</LinearLayout>

（6）接下來我們要為這個實體寫一個配接器，添加它的默認效果

新建一個java class 命名LinearAdapter，繼承于RecyclerView.Adapter，泛型<LinearAdapter.LinearViewHolder>

public class LinearAdapter extends RecyclerView.Adapter<LinearAdapter.LinearViewHolder> {
    private Context wcontext;

    public LinearAdapter(Context context){
        this.wcontext=context;
    }


     class LinearViewHolder extends RecyclerView.ViewHolder{
        private TextView textView;
        private ImageView imageView;

        public LinearViewHolder(@NonNull View itemView) {
            super(itemView);
						//找到我們剛剛設定的子元素的效果中的兩個控制元件			
            textView=itemView.findViewById(R.id.tv_re01);
            imageView=itemView.findViewById(R.id.iv_re01);

        }

    }
    @NonNull
    @Override
    public LinearViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {

        return new LinearViewHolder(LayoutInflater.from(wcontext).inflate(R.layout.layout_linear_item, parent, false));
    }

    @Override
    public void onBindViewHolder(@NonNull LinearAdapter.LinearViewHolder holder, int position) {
        holder.textView.setText("Hello");             //設定需要顯示的文字
        holder.imageView.setImageResource(R.drawable.fruit01); //設定需要顯示的圖片
    }

    @Override
    public int getItemCount() {
        return 30;                          //設定子元素的數量 ,這里設定成三十個，你也可以設定成其他數字
    }
}

（7）回到LinearRecyclerActivity，應用剛剛寫的配接器



public class LinearRecyclerActivity extends AppCompatActivity {

    private RecyclerView mrv;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_linear_layout);
        mrv=findViewById(R.id.rv_main);
        LinearLayoutManager layoutManager=new LinearLayoutManager(this);
        layoutManager.setOrientation(RecyclerView.VERTICAL);
        mrv.setLayoutManager(layoutManager);
        mrv.setAdapter(new LinearAdapter(LinearRecyclerActivity.this));

    }
}

可以運行了！

在這里插入圖片描述

（8）我們的recyclerview已經成功運行，接下來我們為它添加點擊的效果（監聽事件），目標實作輕點后和長按后彈出不同的Toast效果

來到LinearAdapter
首先宣告

private OnItemClickListener wlistener;
private OnItemLongClickListener wwlistener;

然后修改public LinearAdapter，要添加點擊事件


public LinearAdapter(Context context, OnItemClickListener wlistener,OnItemLongClickListener wwlistener){
    this.wlistener=wlistener;
    this.wcontext=context;
    this.wwlistener=wwlistener;
}

然后修改public void onBindViewHolder，同樣添加點擊效果


    @Override
    public void onBindViewHolder(@NonNull LinearAdapter.LinearViewHolder holder, int position) {
        holder.textView.setText("Hello");             //設定需要顯示的文字
        holder.imageView.setImageResource(R.drawable.fruit01); //設定需要顯示的圖片
				holder.itemView.setOnClickListener(new View.OnClickListener() {             //輕點
            @Override
            public void onClick(View v) {
                wlistener.onClick(position);

            }
        });
		        holder.itemView.setOnLongClickListener(new View.OnLongClickListener() {   //長按
            @Override
            public boolean onLongClick(View v) {
                wwlistener.onLongClick(position);
                return true;
            }
        });
    }

新建兩個介面，分別給click和longclick

public interface OnItemClickListener {
        void onClick(int pos);
    }

    public interface OnItemLongClickListener {
        void onLongClick(int pos);
    }

完整的LinearAdapter代碼如下

public class LinearAdapter extends RecyclerView.Adapter<LinearAdapter.LinearViewHolder> {
    private Context wcontext;
    private OnItemClickListener wlistener;
    private OnItemLongClickListener wwlistener;


    public LinearAdapter(Context context, OnItemClickListener wlistener,OnItemLongClickListener wwlistener){
    this.wlistener=wlistener;
    this.wcontext=context;
    this.wwlistener=wwlistener;
     }

     class LinearViewHolder extends RecyclerView.ViewHolder{
        private TextView textView;
        private ImageView imageView;

        public LinearViewHolder(@NonNull View itemView) {
            super(itemView);
						//找到我們剛剛設定的子元素的效果中的兩個控制元件			
            textView=itemView.findViewById(R.id.tv_re01);
            imageView=itemView.findViewById(R.id.iv_re01);

        }

    }
    @NonNull
    @Override
    public LinearViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {

        return new LinearViewHolder(LayoutInflater.from(wcontext).inflate(R.layout.layout_linear_item, parent, false));
    }

    @Override
    public void onBindViewHolder(@NonNull LinearAdapter.LinearViewHolder holder, int position) {
        holder.textView.setText("Hello");             //設定需要顯示的文字
        holder.imageView.setImageResource(R.drawable.fruit01); //設定需要顯示的圖片
				holder.itemView.setOnClickListener(new View.OnClickListener() {             //輕點
            @Override
            public void onClick(View v) {
                wlistener.onClick(position);

            }
        });
		        holder.itemView.setOnLongClickListener(new View.OnLongClickListener() {   //長按
            @Override
            public boolean onLongClick(View v) {
                wwlistener.onLongClick(position);
                return true;
            }
        });
    }
    @Override
    public int getItemCount() {
        return 30;                          //設定子元素的數量 ,這里設定成三十個，你也可以設定成其他數字
    }

		public interface OnItemClickListener {
        void onClick(int pos);
    }

    public interface OnItemLongClickListener {
        void onLongClick(int pos);
    }
}

（9）回到LinearRecyclerActivity，重新應用剛剛寫的配接器



public class LinearRecyclerActivity extends AppCompatActivity {

    private RecyclerView mrv;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_linear_layout);
        mrv=findViewById(R.id.rv_main);
        LinearLayoutManager layoutManager=new LinearLayoutManager(this);
        layoutManager.setOrientation(RecyclerView.VERTICAL);
        mrv.setLayoutManager(layoutManager);
        
        mrv.setAdapter(new LinearAdapter(LinearRecyclerActivity.this, new LinearAdapter.OnItemClickListener() {
            @Override
            public void onClick(int pos) {
                Toast.makeText(LinearRecyclerActivity.this, "click" + pos, Toast.LENGTH_SHORT).show();
            }
        }, new LinearAdapter.OnItemLongClickListener() {
            @Override
            public void onLongClick(int pos) {
                Toast.makeText(LinearRecyclerActivity.this, "Longclick" + pos, Toast.LENGTH_SHORT).show();
            }
        }
		   	));

    }
	}

（10）運行，嘗試長按子元素和點擊子元素，會出現不同的效果

在這里插入圖片描述

（11）我們發現子元素之間的邊界不是很明顯，我們為我們的子元素之間添加邊界

在values檔案夾下新建檔案dimens.xml
內容如下

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <dimen name="dividerHeigh" >2dp</dimen>
</resources>

來到LinearRecyclerActivity，新建Java類，class Mydecoration，繼承于RecyclerView.ItemDecoration

class  Mydecoration extends  RecyclerView.ItemDecoration{
        @Override
        public void getItemOffsets(@NonNull Rect outRect, @NonNull View view, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) {
            super.getItemOffsets(outRect, view, parent, state);
            outRect.set(0,0,0,getResources().getDimensionPixelOffset(R.dimen.dividerHeigh));
        }
    }

并在 protected void onCreate(Bundle savedInstanceState)中添加以下陳述句

mrv.addItemDecoration(new Mydecoration());

完整的LinearRecyclerActivity代碼如下

public class LinearRecyclerActivity extends AppCompatActivity {

    private RecyclerView mrv;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_linear_layout);
        mrv=findViewById(R.id.rv_main);
        LinearLayoutManager layoutManager=new LinearLayoutManager(this);
        layoutManager.setOrientation(RecyclerView.VERTICAL);
        mrv.setLayoutManager(layoutManager);
        
        mrv.setAdapter(new LinearAdapter(LinearRecyclerActivity.this, new LinearAdapter.OnItemClickListener() {
            @Override
            public void onClick(int pos) {
                Toast.makeText(LinearRecyclerActivity.this, "click" + pos, Toast.LENGTH_SHORT).show();
            }
        }, new LinearAdapter.OnItemLongClickListener() {
            @Override
            public void onLongClick(int pos) {
                Toast.makeText(LinearRecyclerActivity.this, "Longclick" + pos, Toast.LENGTH_SHORT).show();
            }
        }
		   	));
				mrv.addItemDecoration(new Mydecoration());

    }
		class  Mydecoration extends  RecyclerView.ItemDecoration{
        @Override
        public void getItemOffsets(@NonNull Rect outRect, @NonNull View view, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) {
            super.getItemOffsets(outRect, view, parent, state);
            outRect.set(0,0,0,getResources().getDimensionPixelOffset(R.dimen.dividerHeigh));
        }
    }
	}

運行查看效果，子元素之間已經添加好效果，當然這個效果耶可以通過margin來實作，這里也不多說了
在這里插入圖片描述

7.我們來實作橫向串列視圖

按照橫向視圖一模一樣的方法建立,將HorRecyclerActivity中的以下陳述句

layoutManager.setOrientation(RecyclerView.VERTICAL);

修改為

layoutManager.setOrientation(RecyclerView.HORIZONTAL);

注意hor_linear_recycler_item的子元素的layout檔案，可以設定成這樣的形式，放上我的代碼提供參考

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="wrap_content"
    android:layout_height="200dp"
    android:background="@color/white"
    android:paddingLeft="20dp"
    android:paddingRight="20dp"
    android:paddingTop="10dp"
    android:paddingBottom="10dp"
    >
    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:id="@+id/iv_hor_re01"
        android:layout_gravity="center_horizontal"
        android:background="@color/teal_700"

        />
    <TextView
        android:paddingLeft="20dp"
        android:paddingTop="20dp"
        android:id="@+id/tv_hor_re01"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@color/teal_700"
        android:textSize="20sp"
        android:text="Fruit"
        android:layout_gravity="center_horizontal"

        />

</LinearLayout>

在這里插入圖片描述

8.實作網格視圖

activity檔案



public class GrideRActivity extends AppCompatActivity {

    private RecyclerView recvg;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_gride_r);
        recvg = findViewById(R.id.grv);
        recvg.setLayoutManager(new GridLayoutManager(GrideRActivity.this,3));
        recvg.setAdapter(new GrideViewRecAdapter(GrideRActivity.this,new GrideViewRecAdapter.OnItemClickListener(){

            @Override
            public void onClick(int pos) {
                Toast.makeText(GrideRActivity.this,"click"+pos,Toast.LENGTH_SHORT).show();
            }
        },new GrideViewRecAdapter.OnItemLongClickListener(){

            @Override
            public void onLongClick(int pos) {
                Toast.makeText(GrideRActivity.this,"Longclick"+pos,Toast.LENGTH_SHORT).show();
            }
        }));

        recvg.addItemDecoration(new Mydecoration());
    }
    class Mydecoration extends RecyclerView.ItemDecoration{
        @Override
        public void getItemOffsets(@NonNull Rect outRect, @NonNull View view, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) {
            super.getItemOffsets(outRect, view, parent, state);
            outRect.set(getResources().getDimensionPixelOffset(R.dimen.dividerHeigh),getResources().getDimensionPixelOffset(R.dimen.dividerHeigh),getResources().getDimensionPixelOffset(R.dimen.dividerHeigh),getResources().getDimensionPixelOffset(R.dimen.dividerHeigh));
        }
    }
}

adapter檔案



public class GrideViewRecAdapter extends RecyclerView.Adapter<GrideViewRecAdapter.LinearViewHolder> {


    private Context mcontext;
    private OnItemClickListener mlistener;
    private OnItemLongClickListener mylistener;

    public GrideViewRecAdapter(Context context, OnItemClickListener mlistener, OnItemLongClickListener mylistener){
        this.mlistener=mlistener;
        this.mcontext=context;
        this.mylistener=mylistener;
    }
    @NonNull
    @Override
    public LinearViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        return new LinearViewHolder(LayoutInflater.from(mcontext).inflate(R.layout.layout_griderecview_item,parent,false));
    }

    @Override
    public void onBindViewHolder(@NonNull LinearViewHolder holder, int position) {
        holder.textView.setText("Hello World!");
        holder.imageView.setImageResource(R.drawable.fruit01);
        holder.itemView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                mlistener.onClick(position);

            }
        });
        holder.itemView.setOnLongClickListener(new View.OnLongClickListener() {
            @Override
            public boolean onLongClick(View v) {
                mylistener.onLongClick(position);
                return true;
            }
        });

    }

    @Override
    public int getItemCount() {
        return 30;
    }

    class LinearViewHolder extends RecyclerView.ViewHolder{
        private TextView textView;
        private ImageView imageView;


        public LinearViewHolder(@NonNull View itemView) {

            super(itemView);

            textView=itemView.findViewById(R.id.tv_grc_re01);
            imageView=itemView.findViewById(R.id.iv_grc_re01);
        }

    }


    public interface OnItemClickListener {
        void onClick(int pos);
    }

    public interface OnItemLongClickListener {
        void onLongClick(int pos);
    }
}

layout檔案

<?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="match_parent"
    android:padding="10dp"
    >
    <androidx.recyclerview.widget.RecyclerView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/grv"
        android:background="@color/gray"
        />

</LinearLayout>

item的layout檔案

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@color/white"
    android:paddingLeft="20dp"
    android:paddingRight="20dp"
    android:paddingTop="10dp"
    android:paddingBottom="10dp"
    >
    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:id="@+id/iv_grc_re01"
        android:layout_gravity="center_horizontal"
        android:background="@color/teal_700"

        />
    <TextView
        android:paddingLeft="20dp"
        android:paddingTop="20dp"
        android:id="@+id/tv_grc_re01"
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:textColor="@color/teal_700"

        android:text="Fruit"
        />

</LinearLayout>

在這里插入圖片描述

9.瀑布流

activity



public class PUBUrecActivity extends AppCompatActivity {

    private RecyclerView repb;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_p_u_b_urec);
        repb=findViewById(R.id.re_pb);
        repb.setLayoutManager(new StaggeredGridLayoutManager(3,StaggeredGridLayoutManager.VERTICAL));
        repb.setAdapter(new StaggeredGrideViewRecAdapter(PUBUrecActivity.this, new StaggeredGrideViewRecAdapter.OnItemClickListener() {
            @Override
            public void onClick(int pos) {
                Toast.makeText(PUBUrecActivity.this,"click:"+pos,Toast.LENGTH_SHORT).show();
            }
        }));


        repb.addItemDecoration(new Mydecoration());
    }
    class  Mydecoration extends  RecyclerView.ItemDecoration{
        @Override
        public void getItemOffsets(@NonNull Rect outRect, @NonNull View view, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) {
            super.getItemOffsets(outRect, view, parent, state);
            outRect.set(getResources().getDimensionPixelOffset(R.dimen.dividerHeigh),getResources().getDimensionPixelOffset(R.dimen.dividerHeigh),getResources().getDimensionPixelOffset(R.dimen.dividerHeigh),getResources().getDimensionPixelOffset(R.dimen.dividerHeigh));
        }
    }
}

adapter檔案



public class StaggeredGrideViewRecAdapter extends RecyclerView.Adapter<StaggeredGrideViewRecAdapter.LinearViewHolder> {


    private Context mcontext;
    private OnItemClickListener mlistener;


    public StaggeredGrideViewRecAdapter(Context context, OnItemClickListener mlistener){
        this.mlistener=mlistener;
        this.mcontext=context;

    }
    @NonNull
    @Override
    public LinearViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        return new LinearViewHolder(LayoutInflater.from(mcontext).inflate(R.layout.layout_staggeredgride_item,parent,false));
    }

    @Override
    public void onBindViewHolder(@NonNull LinearViewHolder holder, int position) {
        if(position %2==0)

        {
            holder.imageView.setImageResource(R.drawable.fruit04);
        }
        else if (position % 2 == 1)
        {
            holder.imageView.setImageResource(R.drawable.fruit05);
        }


        holder.itemView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                mlistener.onClick(position);

            }
        });


    }

    @Override
    public int getItemCount() {
        return 50;
    }

    class LinearViewHolder extends RecyclerView.ViewHolder{

        private ImageView imageView;


        public LinearViewHolder(@NonNull View itemView) {

            super(itemView);

            imageView=itemView.findViewById(R.id.sta_gv_img);
        }

    }


    public interface OnItemClickListener {
        void onClick(int pos);
    }

}

瀑布流的layout檔案

<?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="match_parent"
    >
    <androidx.recyclerview.widget.RecyclerView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/re_pb"
        android:background="@color/gray"
        />

</LinearLayout>

item的layout檔案

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"

    >


    <ImageView

        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/sta_gv_img"
        android:scaleType="fitCenter"
        android:background="@color/white"

        />


</LinearLayout>

在這里插入圖片描述

9.實作交替的串列視圖

在這里插入圖片描述

想要實作這樣的交替串列視圖？

下面提供原始碼

activity檔案

package com.example.androidlearning.recyclerview;

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;

import android.graphics.Rect;
import android.os.Bundle;
import android.view.View;
import android.widget.Toast;

import com.example.androidlearning.R;

public class LinearRecyclerActivity extends AppCompatActivity {


    private RecyclerView mrv;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_linear_layout);
        mrv=findViewById(R.id.rv_main);
        LinearLayoutManager layoutManager=new LinearLayoutManager(this);
        layoutManager.setOrientation(RecyclerView.VERTICAL);
        mrv.setLayoutManager(layoutManager);

        mrv.setAdapter(new LinearAdapter(LinearRecyclerActivity.this, new LinearAdapter.OnItemClickListener() {
            @Override
            public void onClick(int pos) {
                Toast.makeText(LinearRecyclerActivity.this, "click" + pos, Toast.LENGTH_SHORT).show();
            }
        }, new LinearAdapter.OnItemLongClickListener() {
            @Override
            public void onLongClick(int pos) {
                Toast.makeText(LinearRecyclerActivity.this, "Longclick" + pos, Toast.LENGTH_SHORT).show();
            }
        }


        ));
        mrv.addItemDecoration(new Mydecoration());

    }

    class  Mydecoration extends  RecyclerView.ItemDecoration{
        @Override
        public void getItemOffsets(@NonNull Rect outRect, @NonNull View view, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) {
            super.getItemOffsets(outRect, view, parent, state);
            outRect.set(getResources().getDimensionPixelOffset(R.dimen.dividerHeigh),getResources().getDimensionPixelOffset(R.dimen.dividerHeigh),getResources().getDimensionPixelOffset(R.dimen.dividerHeigh),getResources().getDimensionPixelOffset(R.dimen.dividerHeigh));
        }
    }
}

adapter檔案

package com.example.androidlearning.recyclerview;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;

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

import com.example.androidlearning.R;
public class LinearAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {


    private Context mcontext;
    private OnItemClickListener mlistener;
    private OnItemLongClickListener mylistener;

    public LinearAdapter(Context context,OnItemClickListener mlistener, OnItemLongClickListener mylistener){
        this.mlistener=mlistener;
        this.mcontext=context;
        this.mylistener=mylistener;
    }
    @NonNull
    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        if(viewType==0){
            return new LinearViewHolder(LayoutInflater.from(mcontext).inflate(R.layout.layout_linear_item,parent,false));
        }
        else
        {
            return new LinearViewHolder2(LayoutInflater.from(mcontext).inflate(R.layout.layout_linear_item_2,parent,false));
        }


    }

    @Override
    public int getItemViewType(int position) {
        if(position % 2 ==0)
        {
            return 0;
        }
        else
        {
            return  1;
        }
    }

    @Override
    public void onBindViewHolder(@NonNull RecyclerView.ViewHolder holder, int position) {
        if(getItemViewType(position)==0)
        {
            ((LinearViewHolder)holder).textView.setText("Hello World!");
            ((LinearViewHolder)holder).imageView.setImageResource(R.drawable.fruit01);
            ((LinearViewHolder)holder).itemView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    mlistener.onClick(position);

                }
            });
            ((LinearViewHolder)holder).itemView.setOnLongClickListener(new View.OnLongClickListener() {
                @Override
                public boolean onLongClick(View v) {
                    mylistener.onLongClick(position);
                    return true;
                }
            });
        }
        else
        {
            ((LinearViewHolder2)holder).textView.setText("Hello World!");

            ((LinearViewHolder2)holder).itemView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    mlistener.onClick(position);

                }
            });
            ((LinearViewHolder2)holder).itemView.setOnLongClickListener(new View.OnLongClickListener() {
                @Override
                public boolean onLongClick(View v) {
                    mylistener.onLongClick(position);
                    return true;
                }
            });
        }

    }

    @Override
    public int getItemCount() {
        return 30;
    }

    class LinearViewHolder extends RecyclerView.ViewHolder{
        private TextView textView;
        private ImageView imageView;


        public LinearViewHolder(@NonNull View itemView) {

            super(itemView);

            textView=itemView.findViewById(R.id.tv_re01);
            imageView=itemView.findViewById(R.id.iv_re01);
        }

    }
    class LinearViewHolder2 extends RecyclerView.ViewHolder{
        private TextView textView;



        public LinearViewHolder2(@NonNull View itemView) {

            super(itemView);

            textView=itemView.findViewById(R.id.xtv_re01);

        }

    }

    public interface OnItemClickListener {
        void onClick(int pos);
    }

    public interface OnItemLongClickListener {
        void onLongClick(int pos);
    }
}

layout檔案

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rv_main"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/gray"
        />

</RelativeLayout>

item-1 layout檔案

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/white"
    android:paddingLeft="20dp"
    android:paddingRight="20dp"
    android:paddingTop="10dp"
    android:paddingBottom="10dp"
    >
    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:id="@+id/iv_re01"
        android:layout_gravity="center_horizontal"
        android:background="@color/teal_700"

        />
    <TextView
        android:paddingLeft="20dp"
        android:paddingTop="20dp"
        android:id="@+id/tv_re01"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@color/teal_700"
        android:textSize="20sp"
        android:text="Fruit"
        android:layout_gravity="center_horizontal"

        />

</LinearLayout>

item-2的layout

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/white"
    android:paddingLeft="20dp"
    android:paddingRight="20dp"
    android:paddingTop="10dp"
    android:paddingBottom="10dp"
    >

    <TextView
        android:paddingLeft="20dp"
        android:paddingTop="20dp"
        android:id="@+id/xtv_re01"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@color/teal_700"
        android:textSize="20sp"
        android:text="Fruit"
        android:layout_gravity="center_horizontal"

        />

</LinearLayout>

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/254094.html

標籤：其他

上一篇：PackageManagerService啟動詳解(一)之整體流程分析

下一篇：Android 滑動Scrollview標題欄漸變仿京東toolbar