android线性布局实现轮播,安卓仿手机网易新闻app项目开发系列之（二）轮播图显示和RecyclerView适配器编写...

一.项目简介和思路

接着上周项目继续，上周主要实现了tablayout的标题栏界面和屏幕切换效果。这次咱们来实现给屏幕页面填充些网页图片数据。看看大致效果图：

可以看出界面有两部分构成，上面是轮播图，下面是类似listview的列表控件，在这里分别采用的是banner和recycleview来实现效果，接下来是具体的流程

二.项目的流程

1.编写recycleview布局

新建一个fragment的xml文件，代码如下：

2.编写recycleview适配器

1)设置数据填充

public class FirstPageAdapter extends RecyclerView.Adapter{

private final int TYPE_HEAD=0; //表示首个位置，显示轮播视图

private final int TYPE_NORMAL=1; //表示下面的itemview

private final Context mcontext;

private Listbanner_url; //轮播图片路径

//这个构造函数的用于把要展示的数据传进来

public FirstPageAdapter(Context context, Listbanner_url){

this.mcontext=context;

this.banner_url=banner_url;

}

public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {

RecyclerView.ViewHolder holder=null;

if(viewType==TYPE_HEAD){

//此处创建顶部banner的viewholder

holder=new BannerViewHolder(LayoutInflater.from(mcontext).inflate(R.layout.itemheader_banner,parent,false));

//把最外层布局加载然后传到构造函数BannerViewHolder()； 此句语句等同于：

// View view=LayoutInflater.from(mcontext).inflate(R.layout.itemheader_banner,parent,false);

// RecyclerView.ViewHolder holder=new BannerViewHolder(view) ;

}else (viewType==TYPE_NORMAL) {

holder=new ItemViewHolder(LayoutInflater.from(mcontext).inflate(R.layout.item_firstfragment,parent,false));

}

return holder;

}

public void onBindViewHolder(RecyclerView.ViewHolder holder, final int position) {

//判断holder是不是BannerViewHolder

if (holder instanceof BannerViewHolder) {

BannerViewHolder bannerViewHolder = (BannerViewHolder) holder; // 把指向子类对象的父类引用holder赋给子类的引用 bannerViewHolder，

//属于向下转换，需要强制转换类型

bannerViewHolder.banner.setImages(banner_url);

// bannerViewHolder.banner.setBannerStyle(BannerConfig.CIRCLE_INDICATOR_TITLE);

// bannerViewHolder.banner.setBannerTitle(bean.getTitle());

// bannerViewHolder.banner.setImages( bean.getImg_url());

// Log.i("tag","--------------------------onbindview");

} else if (holder instanceof ItemViewHolder) {

ItemViewHolder itemViewHolder = (ItemViewHolder) holder;

itemViewHolder.textView.setText(banner_url.get(position - 1));

itemViewHolder.simpleView.setImageURI(banner_url.get(position - 1)); //

}

}

//返回数据源长度

public int getItemCount() {

return banner_url.size()+1;}

//告诉创建什么类型viewholder

public int getItemViewType(int position) {

if(position==0){

return TYPE_HEAD;

}

else {

return TYPE_NORMAL;

}

}

//初始化UI

class ItemViewHolder extends RecyclerView.ViewHolder{

SimpleDraweeView simpleView;

TextView textView;

public ItemViewHolder(View itemView) {

super(itemView);

simpleView= (SimpleDraweeView) itemView.findViewById(R.id.simpleView);

textView= (TextView) itemView.findViewById(R.id.news_text);

}

}

// 首位的banner

class BannerViewHolder extends RecyclerView.ViewHolder{

Banner banner;

public BannerViewHolder(View itemView) {

super(itemView);

banner= (Banner) itemView.findViewById(R.id.banner);

//Log.i("tag","------------------66666");

}

}

此部分代码有点多，但是具体功能也不是很复杂。就是重写了几个适配器的方法和一个构造方法。首先调用getitemcount()返回数据总长度；然后调用oncreatviewhodler()l来创建itemview视图，然后返回相应的viewhodler 。最后，调用onbindviewholder(  )，把位置和相应的viewholder传入，adapter会根据对应的位置找到相应viewholder的视图(itemview)，然后把数据与其绑定，即将数据填充到视图上。整个代码执行完后，recycleview上就可以在屏幕显示出itemview数据了。

到这里有人可能会问viewholder是什么呢？可以理解viewholer就是一个装着itemview的容器。具体的一些内容可以参考这篇文章，写的很详细，还详解了recycleview的基本结构。我也是参考了这篇文章RecyclerView详细解释

2)模拟数据源关联适配器

public class FirstpageFragment extends Fragment{

private RecyclerView mRecyclerView;

private FirstPageAdapter adapter;

private Listbanner_url;

public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {

View v=getActivity().getLayoutInflater().inflate(R.layout.fragment_layout,

(ViewGroup)getActivity().findViewById(R.id.view_pager),false);

banner_url=new ArrayList<>();

banner_url.add("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1495535521175&di=abf42742f3808e2c9f3ad7889b60c5d3&imgtype=0&src=http%3A%2F%2Fimg.mp.itc.cn%2Fupload%2F20161108%2Fad0cb46844754d1b9844e5edd37e6990_th.jpeg");

banner_url.add("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1495535647123&di=1bfb6b6e626ac5deb329fdeb0fc5abab&imgtype=0&src=http%3A%2F%2Folpic.tgbusdata.cn%2Fuploads%2Fallimg%2F141106%2F22-141106112011.jpg");

banner_url.add("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1495535647123&di=1bfb6b6e626ac5deb329fdeb0fc5abab&imgtype=0&src=http%3A%2F%2Folpic.tgbusdata.cn%2Fuploads%2Fallimg%2F141106%2F22-141106112011.jpg");

mRecyclerView= (RecyclerView) v.findViewById(R.id.recycle_view);

adapter=new FirstPageAdapter(getActivity(),banner_url);

mRecyclerView.setLayoutManager(new LinearLayoutManager(getContext()));

mRecyclerView.setAdapter(adapter);

return v;

}

这部分代码主要是模拟数据源，然后把数据和适配器绑定，最后通过适配器把数据在视图recycleview上显示出来。在这里需要注意的是关联适配器的时候多了一步，也比较关键，没设置的话可能会有问题，就是15//代码写的，这是recycview控件显示布局的设置，在这里我们设置的是一般的线性布局，默认是纵向布局。

3)轮播图和itemview的布局

轮播图banner

普通itemview

要引用这两种控件需要添加依赖，一个是banner的，另一个是fresco，banner就是轮播图的控件，具体的使用可以点击此处链接看看 点击打开链接 ，在这里我用是compile

'com.youth.banner:banner:1.2.6' ；

fresco是一个比较强大的图片加载的框架，可以支持各种格式的图片，它的

包是'com.facebook.fresco:fresco:1.3.0'；

banner的布局文件比较简单，就简单给个id和宽高；而fresco布局是使用左边一张图片，右边对应文字。

4)添加网络访问

因为要上网访问图片，所以需要添加网络权限，在Androidmanifest.xml里添加：

5)fresco初始化

在这里有个点大家得注意，可能会遇到item图片加载不出来的问题，就是在main.activity中需要fresco初始化，代码如下：

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);Fresco.initialize(this);initData();

initView();

}

这样大体代码写完了，看看运行后的效果图(这里也是和之前原因一样，所以先借用磨砺新闻的视频图)：