引言
不知道列位看新闻都用什么软件？今日头条？还是新浪新闻？现如今很多的app都采用横向的tab来进行分类，可以滚动和滑动，上一篇我们使用RecyclerView实现了类似ListView的瀑布流布局。
本期，让我们一起来学习如何用RecyclerView实现横向列表滚动，它来了它来了——它带着横向布局走来了！
传送门
回顾上一篇—> RecyclerView实现瀑布流布局（类似ListView）
RecycylerView与ListView的区别也请走传送门！
介绍
本期主题：【使用RecycleView实现横向布局】
Tips：之前看的很多博客系列版的都是需要在上一篇的基础上改，如果系列的篇幅过多，就显得很是冗余，而且代码不独立往往需要从头看起，所以我想要将功能独立出来，使得每篇博客的代码都能独立编译，因此每个功能我都会将完整的代码贴出来，以遍我们一起学习和交流。
此外，我会在最后的解析中区别本期与前期，对改动作出解析。
用法
第一步：添加相关依赖（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>
第三步：创建实体类Fruit（为RecyclerView填充数据使用）
/**
* @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;
}
}
第四步：创建RecyclerView的适配器类
/**
* @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："+"你点击了"+fruit.getName(),Toast.LENGTH_SHORT).show();
}
});
}
public static class MyViewHolder extends RecyclerView.ViewHolder{
View fruitView;
//图片
public ImageView fruitHorImage;
//标题
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中为控件绑定适配器类
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填充数据
List<Fruit> mList = new ArrayList();
for ( int i=1 ; i<20 ; i++){
mList.add(new Fruit("apple"+i,R.mipmap.apple));
}
//横向滑动布局
adapter = new FruitHorRecyclerVIewAdapter(mList);
layoutManager = new LinearLayoutManager(this);
layoutManager.setOrientation(RecyclerView.HORIZONTAL);
mRecyclerView.setLayoutManager(layoutManager);
mRecyclerView.setAdapter(adapter);
mRecyclerView.setItemAnimator(new DefaultItemAnimator());
}
}
运行效果
本期效果：
RecyclerView横向布局.gif
解析
（1）布局管理器设置
需要指定布局管理器LinearLayoutManager为
RecyclerView.HORIZONTAL，而且要注意先于setAdapte之前设置，否则RecyclerView将报错,无法正常显示。这是因为布局管理需要先指定方向，方向对了干事快，否则事倍功半！甚至功败垂成！
layoutManager.setOrientation(RecyclerView.HORIZONTAL);
（2）子布局layout_item.xml改动
需要重新设置item的布局，从之前的“左图+右字”——>“上图+下字”。
千夜零一："之前总是看各种博客学习东西，现在我想用博客记录下我的学习脚步，好东西也需要分享，索取和给予是相互的。以后会尽量日更的！目标完成1001篇博客哈哈。”
如果觉得对你有所帮助，请不要吝啬你的点赞，有问题也可以在下方评论区留言哦，关注我一起学习吧～
