搞定RecyclerView适配器+Glide图片调用实现新闻简单列表

总体思路:总布局设计好,recyclerview数据用适配器填充,适配器的数据即多个子布局(由图片和文字组成)组成的一个列表,后台实现需要用相应的带有图片和文字属性的类进行数据传输

按顺序看该文档

1.总布局activity_main.xml设置顶层导航栏,设置recyclerView(用适配器填充内容)

<?xml version="1.0" encoding="utf-8"?>
<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="wrap_content"
    android:orientation="vertical"
    tools:context=".MainActivity">


    <HorizontalScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent">

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

            <TextView
            android:id="@+id/textView11"
            android:layout_marginRight="20px"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="TextView" />

            <TextView
                android:id="@+id/textView9"
                android:layout_marginRight="20px"

                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="TextView" />

            <TextView
                android:id="@+id/textView10"
                android:layout_marginRight="20px"

                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="TextView" />

            <TextView
                android:id="@+id/textView8"
                android:layout_marginRight="20px"

                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="TextView" />

            <TextView
                android:id="@+id/textView2"
                android:layout_marginRight="20px"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="TextView" />

            <TextView
                android:id="@+id/textView3"
                android:layout_marginRight="20px"

                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="TextView" />

            <TextView
                android:id="@+id/textView4"
                android:layout_marginRight="20px"

                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="TextView" />

            <TextView
                android:id="@+id/textView5"
                android:layout_marginRight="20px"

                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="TextView" />

            <TextView
                android:id="@+id/textView6"
                android:layout_marginRight="20px"

                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="TextView" />
            <TextView
                android:id="@+id/textView7"
                android:layout_marginRight="20px"

                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="TextView" />
            <TextView
                android:id="@+id/textView12"
                android:layout_marginRight="20px"

                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="TextView" />

        </LinearLayout>
    </HorizontalScrollView>

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</LinearLayout>

2.编写新闻子布局:layout.xml:添加图片和文本

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

    <ImageView
        android:id="@+id/imageView"
        android:layout_marginLeft="5px"
        android:layout_marginRight="5px"
        android:layout_marginTop="5dp"
        android:layout_marginBottom="5dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:scaleType="centerCrop"
        app:srcCompat="@mipmap/ic_launcher" />

    <TextView
        android:id="@+id/textView"
        android:layout_marginLeft="5px"
        android:layout_marginRight="5px"
        android:layout_marginTop="5dp"
        android:layout_marginBottom="5dp"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_weight="2"
        android:text="TextView" />

</LinearLayout>

3.添加新闻类News.java用于传子布局的图片和文本 

package com.example.news;

public class News {
    private String name;
    private int imageId;//两个成员变量

    public News(String name, int imageId) {//构造方法,用以赋值
        this.name = name;
        this.imageId = imageId;//赋予变量值
    }

    public String getName() {//获得Name的值
        return name;
    }

    public int getImageId() {//用以获得图片ID的值
        return imageId;
    }
}

4.难点 :为News.java编写适配器 

  • 该适配器继承recyclerview的适配器,泛型为ViewHolder,理解为一个子布局类型的列表就好
  • 1要做ViewHolder内部类(在其中构造函数Viewholder获取图片,文本id);2做适配器的构造函数即传入一个新闻类的列表
  • 为适配器重写加载,传输(即渲染recycler中的每个子布局)
    • 加载:传入layout样式,返回ViewHoldler子布局
    • 传输:新闻类的列表传入,添加子布局(自动添加无需循环)
    • 最后给一个列表长度
package com.example.news;

import android.text.Layout;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.TextView;

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

import com.bumptech.glide.Glide;

import java.util.ArrayList;
import java.util.List;

public class News_Adapter extends RecyclerView.Adapter<News_Adapter.ViewHolder> {
    private List<News> mnewsList;
    View view;
//    ArrayList<String>url=new ArrayList<>();
//    //导入Url
//    public static String[] Images = {
//            "http://i.imgur.com/rFLNqWI.jpg",
//            "http://i.imgur.com/C9pBVt7.jpg",
//            "http://i.imgur.com/rT5vXE1.jpg",
//            "http://i.imgur.com/aIy5R2k.jpg",
//            "http://i.imgur.com/MoJs9pT.jpg",
//            "http://i.imgur.com/S963yEM.jpg",
//            "http://i.imgur.com/rLR2cyc.jpg",
//            "http://i.imgur.com/SEPdUIx.jpg",
//            "http://i.imgur.com/aC9OjaM.jpg",
//            "http://i.imgur.com/76Jfv9b.jpg",
//            "http://i.imgur.com/fUX7EIB.jpg",
//            "http://i.imgur.com/syELajx.jpg",
//            "http://i.imgur.com/COzBnru.jpg",
//            "http://i.imgur.com/Z3QjilA.jpg",
//    };
//    private ArrayList<String> getData()
//    {
//        for (String next : Images) {
//            url.add(next);
//        }
//        return url;
//    }
    //内部类ViewHolder
    public class ViewHolder extends RecyclerView.ViewHolder {
        ImageView newsImage;
        TextView newsText;
        //ViewHolder构造函数
        public ViewHolder(View itemView) {
            super(itemView);
            newsImage= itemView.findViewById(R.id.imageView);
            newsText=itemView.findViewById(R.id.textView);
        }
    }
    //适配器构造函数
    public  News_Adapter (List<News>newsList)
    {
        mnewsList=newsList;
    }

    @Override
    //只是加载子布局
    public News_Adapter.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        //初始url
//        getData();
        //加载子布局
        view = LayoutInflater.from(parent.getContext()).inflate(R.layout.layout,parent,false);
        //返回ViewHolder实例
        ViewHolder holder=new ViewHolder(view);
        return holder;
    }

    @Override
    //子项赋值,加载全局:通过数组的使用一项项添加组成全局
    public void onBindViewHolder(News_Adapter.ViewHolder holder, int position) {
        News news=mnewsList.get(position);
//        holder.newsImage.setImageResource(news.getImageId());
//        在主函数使用自己添加的图片则用该项,使用网络图片用Glide(这样News类里面的image没有使用)
//        Glide.with(view).load(url.get(position)).into(holder.newsImage);
        Glide.with(view).load(R.drawable.default_launch_image).override(350,280).into(holder.newsImage);
        holder.newsText.setText(news.getName());
    }
    @Override
    public int getItemCount() {
        return mnewsList.size();
    }

}

5.编写主活动,按照总体思路进行;

package com.example.news;

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

import android.os.Bundle;
import android.widget.LinearLayout;

import java.util.ArrayList;
import java.util.List;
public class MainActivity extends AppCompatActivity {
    private List<News>newsList=new ArrayList<>();
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //添加新闻数据,返回newList
        initNews();
        RecyclerView recyclerView =findViewById(R.id.recycler_view);
        LinearLayoutManager layoutManager = new LinearLayoutManager(this);
        recyclerView.setLayoutManager(layoutManager);
        //可设置横向
        // layoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);
        //添加分割线
        recyclerView.addItemDecoration(new DividerItemDecoration(this,DividerItemDecoration.VERTICAL));
        //导入适配器
        News_Adapter adapter=new News_Adapter(newsList);
        recyclerView.setAdapter(adapter);
    }
    private void initNews()
    {
        for(int i=0;i<2;i++)
        {
            News t1 = new News("NewsTitle",R.drawable.ic_launcher_background);
            newsList.add(t1);
            News t2 = new News("NewsTitle",R.drawable.ic_launcher_background);
            newsList.add(t2);
            News t3 = new News("NewsTitle",R.drawable.ic_launcher_background);
            newsList.add(t3);
            News t4 = new News("NewsTitle",R.drawable.ic_launcher_background);
            newsList.add(t4);
            News t5 = new News("NewsTitle",R.drawable.ic_launcher_background);
            newsList.add(t5);
        }
    }
}

6.其中使用了顶层的横向滑动栏很简单不讲,又使用了Glide是用来给布局添加网络图片的,glide的使用想来想去还是放在了适配器中,在传输数据的时候使用其传图片给子布局,而不使用原来的调用类中的图片,需要就用,不需要就注释

7.解决依赖包

其他同理,百分百解决依赖包问题

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值