引言
??不知道列位看新聞都用什么軟件？今日頭條船惨？還是新浪新聞柜裸？現(xiàn)如今很多的app都采用橫向的tab來(lái)進(jìn)行分類(lèi)，可以滾動(dòng)和滑動(dòng)粱锐，上一篇我們使用RecyclerView實(shí)現(xiàn)了類(lèi)似ListView的瀑布流布局疙挺。
??本期，讓我們一起來(lái)學(xué)習(xí)如何用RecyclerView實(shí)現(xiàn)橫向列表滾動(dòng)怜浅，它來(lái)了它來(lái)了——它帶著橫向布局走來(lái)了铐然！
傳送門(mén)
回顧上一篇—>?RecyclerView實(shí)現(xiàn)瀑布流布局（類(lèi)似ListView）
RecycylerView與ListView的區(qū)別也請(qǐng)走傳送門(mén)！
介紹
本期主題：【使用RecycleView實(shí)現(xiàn)橫向布局】
Tips：之前看的很多博客系列版的都是需要在上一篇的基礎(chǔ)上改恶座，如果系列的篇幅過(guò)多搀暑，就顯得很是冗余，而且代碼不獨(dú)立往往需要從頭看起跨琳，所以我想要將功能獨(dú)立出來(lái)自点，使得每篇博客的代碼都能獨(dú)立編譯，因此每個(gè)功能我都會(huì)將完整的代碼貼出來(lái)脉让，以遍我們一起學(xué)習(xí)和交流桂敛。
此外功炮，我會(huì)在最后的解析中區(qū)別本期與前期，對(duì)改動(dòng)作出解析术唬。
用法
第一步：添加相關(guān)依賴(lài)（app下build.gradle）
//RecyclerView
implementation 'com.android.support:recyclerview-v7:27.1.1'
第二步：布局文件
（1）主布局：activity的xml文件
<LinearLayout 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=".blog.Case21"
android:orientation="vertical">
<androidx.appcompat.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:title="Recyclerview橫向示例"
app:titleTextColor="@color/white"
android:background="@color/green"/>
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
（2）子布局：R.layout.case7_item_hor_fruit.xml
形式：上邊圖片 + 下邊文字
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:background="@color/white"
android:orientation="vertical"
android:padding="10dp"
tools:ignore="MissingConstraints">
<ImageView
android:id="@+id/fruit_hor_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:ignore="MissingConstraints" />
<TextView
android:id="@+id/fruit_hor_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:gravity="center"
android:textColor="@color/black"
tools:ignore="MissingConstraints" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
第三步：創(chuàng)建實(shí)體類(lèi)Fruit（為RecyclerView填充數(shù)據(jù)使用）
/**
* @data on 2020/8/27 9:47 PM
* @auther ArmStrong
* @describe
*/
public class Fruit {
private String name;
private int imageId;
public Fruit(String name, int imageId) {
this.name = name;
this.imageId = imageId;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getImageId() {
return imageId;
}
public void setImageId(int imageId) {
this.imageId = imageId;
}
}
第四步：創(chuàng)建RecyclerView的適配器類(lèi)
/**
* @data on 2020/8/29 11:17 AM
* @auther
* @describe
*/
public class FruitHorRecyclerVIewAdapter extends RecyclerView.Adapter<FruitHorRecyclerVIewAdapter.MyViewHolder>{
private List<Fruit> fruitList;
public FruitHorRecyclerVIewAdapter(List<Fruit> fruitList) {
this.fruitList = fruitList;
}
@NonNull
@Override
public MyViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
View itemView = LayoutInflater.from(parent.getContext()).inflate(R.layout.case7_item_hor_fruit,parent,false);
final MyViewHolder myViewHolder = new MyViewHolder(itemView);
return myViewHolder;
}
@Override
public void onBindViewHolder(@NonNull MyViewHolder holder, int position) {
Fruit horItem = fruitList.get(position);
holder.fruitHorImage.setImageResource(horItem.getImageId());
holder.fruitHorName.setText(horItem.getName());
holder.fruitView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
int positon = holder.getAdapterPosition();
Fruit fruit = fruitList.get(positon);
Toast.makeText(v.getContext(),"hor："+"你點(diǎn)擊了"+fruit.getName(),Toast.LENGTH_SHORT).show();
}
});
}
public static class MyViewHolder extends RecyclerView.ViewHolder{
View fruitView;
//圖片
public ImageView fruitHorImage;
//標(biāo)題
public TextView fruitHorName;
public MyViewHolder(View itemView) {
super(itemView);
fruitView = itemView;
fruitHorImage = itemView.findViewById(R.id.fruit_hor_image);
fruitHorName = itemView.findViewById(R.id.fruit_hor_name);
}
}
@Override
public int getItemCount() {
return fruitList.size();
}
}
第五步：Activity中為控件綁定適配器類(lèi)
public class Case21 extends AppCompatActivity {
private RecyclerView mRecyclerView;
private FruitHorRecyclerVIewAdapter adapter;
private LinearLayoutManager layoutManager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_case21);
mRecyclerView = findViewById(R.id.recyclerView);
//RecyclerView填充數(shù)據(jù)
List<Fruit> mList = new ArrayList();
for ( int i=1 ; i<20 ; i++){
mList.add(new Fruit("apple"+i,R.mipmap.apple));
}
//橫向滑動(dòng)布局
adapter = new FruitHorRecyclerVIewAdapter(mList);
layoutManager = new LinearLayoutManager(this);
layoutManager.setOrientation(RecyclerView.HORIZONTAL);
mRecyclerView.setLayoutManager(layoutManager);
mRecyclerView.setAdapter(adapter);
mRecyclerView.setItemAnimator(new DefaultItemAnimator());
}
}
運(yùn)行效果
本期效果：
解析
（1）布局管理器設(shè)置
??需要指定布局管理器LinearLayoutManager為
RecyclerView.HORIZONTAL薪伏，而且要注意先于setAdapte之前設(shè)置，否則RecyclerView將報(bào)錯(cuò),無(wú)法正常顯示粗仓。這是因?yàn)椴季止芾硇枰戎付ǚ较蚣藁常较驅(qū)α烁墒驴欤駝t事倍功半借浊！甚至功敗垂成塘淑！
layoutManager.setOrientation(RecyclerView.HORIZONTAL);
（2）子布局layout_item.xml改動(dòng)
需要重新設(shè)置item的布局，從之前的“左圖+右字”——>“上圖+下字”巴碗。
千夜零一："之前總是看各種博客學(xué)習(xí)東西朴爬，現(xiàn)在我想用博客記錄下我的學(xué)習(xí)腳步，好東西也需要分享橡淆，索取和給予是相互的召噩。以后會(huì)盡量日更的！目標(biāo)完成1001篇博客哈哈逸爵【叩危”
??如果覺(jué)得對(duì)你有所幫助，請(qǐng)不要吝嗇你的點(diǎn)贊师倔，有問(wèn)題也可以在下方評(píng)論區(qū)留言哦构韵，關(guān)注我一起學(xué)習(xí)吧～
