Android 新闻界面模拟ListView和ViewPager的应用

模拟新闻 APP 的界面

1)写 ListView 之前先写布局：

这里有两种 Item 的布局：





  

  

  


activity_item




  

  

    

    

    
  

  




activity_item2

第一种是单张图片，第二种是三张图片。

在 ListView 添加的头部布局，用 ViewPager 实现滑动的效果：




  

  



activity_item_header

最后是 ListView 的布局;




  


activity_main

2)ListView 中要显示的数据这里先自己设定，不进行网络请求。




  
    那些被捕上岸的不寻常的大鱼，往往成为大家关注的焦点。一种奇观和一段足以津津乐道的传奇经历。
    自2008年正式推出，杭州公共自行车在国内外圈粉无数，它超越了一道风景、一张名片的定义，成为杭州的生活方式。
    奥运历史上，像美国队单独重赛这样荒诞的场面也不时出现。
    在巴西里约奥运赛场上，菲尔普斯身上“神秘的东方红圈”走红。
    里约奥运会正式启幕，为国出征的运动员激战正酣。而在奥运赛场之外，一大波隐藏的民间运动高手也蠢蠢欲动。
    6月30日以来，第四轮强降雨给湖北造成严重损失。
    查阅世界上城市地下排水系统中的佼佼者，可以发现，那些真正的良心下水道，即使多年过去，仍在发挥效用。
  

  
    吴建明和中国外交
    同性恋酒吧：是天堂也是地狱
    那些年，我们这样过端午
    马英九8年：从万人迷到受气包
    朝鲜外宣里的幸福平壤
  



arrays

图片资源可以自由添加

3)自定义适配器继承 baseAdapter：

package com.dragon.android.baseadapter;

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

import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.List;
import java.util.Locale;


public class MyAdapter extends baseAdapter {

  private final Context context;
  private List mData;

  public MyAdapter(Context context, List data) {
    this.mData = data;
    this.context = context;
  }

  
  @Override
  public int getCount() {
    return mData == null ? 0 : mData.size();
  }

  
  @Override
  public View getView(int position, View convertView, ViewGroup parent) {
    View view;
    Data data = getItem(position);
    if (position % 3 == 0) {
      view = LayoutInflater.from(context).inflate(R.layout.acyivity_item_2, parent, false);
      ImageView imageView1 = (ImageView) view.findViewById(R.id.imageView1);
      ImageView imageView2 = (ImageView) view.findViewById(R.id.imageView2);
      ImageView imageView3 = (ImageView) view.findViewById(R.id.imageView3);
      imageView1.setImageResource(data.getImgResId()[0]);
      imageView2.setImageResource(data.getImgResId()[1]);
      imageView3.setImageResource(data.getImgResId()[2]);

    } else {
      view = LayoutInflater.from(context).inflate(R.layout.activity_item, parent, false);
      ImageView imageView = (ImageView) view.findViewById(R.id.imageView);
      imageView.setImageResource(data.getImgResId()[0]);
    }
    TextView tv_title = (TextView) view.findViewById(R.id.tv_title);
    tv_title.setText(data.getTitle());

    TextView tv_time = (TextView) view.findViewById(R.id.tv_time);
    String time = new SimpleDateFormat("HH:mm", Locale.CHINA).format(new Date(data.getTime()));
    tv_time.setText(time);
    return view;
  }

  
  @Override
  public Data getItem(int position) {
    // Log.d("TAG", position + "");
    return mData.get(position);
  }

  
  @Override
  public long getItemId(int position) {
    return 10086;
  }

}

MyAdapter

4)因为头部布局使用 ViewPager 实现，所以要添加自定义的适配器继承 PagerAdapter：

package com.dragon.android.baseadapter;

import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

import java.util.List;


class MyPagerAdapter extends PagerAdapter {

  private List mList;

  public MyPagerAdapter(List mList) {
    this.mList = mList;
  }

  
  @Override
  public int getCount() {

    // 2的31次方-1
    // mList.size=5:0--4
    // position:0---9
    // 0%5=0,4%5=4,
    // 5%5=0,6%5=1....9%5=4
    return Integer.MAX_VALUE;
  }

  
  @Override
  public Object instantiateItem(ViewGroup container, int position) {
    // 将ImageView添加到ViewPager容器中.
    container.addView(mList.get(position % mList.size()));

    return mList.get(position % mList.size());
  }

  
  @Override
  public boolean isViewFromObject(View view, Object obj) {

    return view == obj;
  }

  
  @Override
  public void destroyItem(ViewGroup container, int position, Object object) {
    // 从容器中移除视图
    container.removeView(mList.get(position % mList.size()));
  }

}

MyPagerAdapter

这里面要注意如何实现 ViewPager 滑动时的循环效果 --- 即设置一个非常大的边界，循环显示。

5)需要一个容器来存放要展示的数据，这里封装一个 Data 类

package com.dragon.android.baseadapter;

import java.util.Arrays;


public class Data {

  private int[] imgResId;
  private String title;
  private long time;

  @Override
  public String toString() {
    return "Data{" +
 "imgResId=" + Arrays.toString(imgResId) +
 ", title='" + title + ''' +
 ", time=" + time +
 '}';
  }

  public Data() {
  }

  public Data(String title, int[] imgResId, long time) {
    this.imgResId = imgResId;
    this.title = title;
    this.time = time;
  }

  public int[] getImgResId() {
    return imgResId;
  }

  public void setImgResId(int[] imgResId) {
    this.imgResId = imgResId;
  }

  public String getTitle() {
    return title;
  }

  public void setTitle(String title) {
    this.title = title;
  }

  public long getTime() {
    return time;
  }

  public void setTime(long time) {
    this.time = time;
  }
}

Data

6)最后在 MainActivity 中对 ListView 和 ViewPager 配置适配器（同时实现文本随 ViewPager 的滑动同步改变）

package com.dragon.android.baseadapter;

import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.TextView;

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

public class MainActivity extends AppCompatActivity {

  private ListView listView;
  private List mData;
  private List mList;
  private ViewPager mVp;
  private TextView mTv;

  private int[] imgResIds = {R.mipmap.c1, R.mipmap.c2, R.mipmap.c3,
      R.mipmap.c4, R.mipmap.c5, R.mipmap.c6, R.mipmap.c7, R.mipmap.c8,
      R.mipmap.c9, R.mipmap.c10, R.mipmap.c11, R.mipmap.c12, R.mipmap.c13};

  private int[] imageHeaderIds = {R.mipmap.a1,R.mipmap.a2,R.mipmap.a3,R.mipmap.a4,R.mipmap.a5};

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

    listView = (ListView) findViewById(R.id.listView);
    String[] stringArray = getResources().getStringArray(R.array.titles);

    mData = new ArrayList<>();
    initData(stringArray);

    addHeader();

    MyAdapter myAdapter = new MyAdapter(this, mData);
    listView.setAdapter(myAdapter);
  }

  
  private void addHeader() {
    View view = getLayoutInflater().from(this).inflate(R.layout.activity_item_header, listView, false);
    listView.addHeaderView(view);

    mVp = (ViewPager) view.findViewById(R.id.vp);
    mTv = (TextView) view.findViewById(R.id.tv_msg);
    String[] msgs = getResources().getStringArray(R.array.msgs);

    // 创建数据源.存放头部布局要展示的视图
    mList = new ArrayList();
    for (int i = 0; i < imageHeaderIds.length; i++) {
      ImageView iv = new ImageView(this);
      iv.setBackgroundResource(imageHeaderIds[i]);
      mList.add(iv);
    }
    MyPagerAdapter adapter = new MyPagerAdapter(mList);
    mVp.setAdapter(adapter);

    // 设置ViewPager当前是第几个视图
    mVp.setCurrentItem(1000 * mList.size());

    // mVp.setonPageChangeListener(listener);
    mVp.addonPageChangeListener(new ViewPager.SimpleonPageChangeListener() {

      @Override
      public void onPageSelected(int position) {
 String[] msgs = getResources().getStringArray(R.array.msgs);

 // 让标题随着ViewPager的切换而切换
 mTv.setText(msgs[position % mList.size()]);
      }
    });
  }

  
  private void initData(String[] stringArray) {
    int j = 0;
    for (int i = 0; i < stringArray.length; i++) {
      long l = System.currentTimeMillis();
      if (i % 3 == 0) {
 mData.add(new Data(stringArray[i], new int[]{imgResIds[j++], imgResIds[j++], imgResIds[j++]}, l + 1000000 * i));
      } else {
 mData.add(new Data(stringArray[i], new int[]{imgResIds[j++]}, l + 1000000 * i));
      }
    }
  }
}

以上就是新闻界面的模拟示例，有需要的朋友可以看一下，谢谢大家对本站的支持！

Android 新闻界面模拟ListView和ViewPager的应用

Android相关栏目本月热门文章