Android之ListView&ViewPager模拟新闻界面

模拟新闻 APP 的界面

1)写 ListView 之前先写布局：

这里有两种 Item 的布局：

 <?xml version="1.0" encoding="utf-8"?>
 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
     android:layout_height="100dp"
     android:padding="10dp">

     <ImageView
         android:layout_width="100dp"
         android:layout_height="60dp"
         android:id="@+id/imageView"
         android:background="@mipmap/ic_launcher"
         android:layout_centerVertical="true"
         android:layout_alignParentRight="true" />

     <TextView
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:text="New Text"
         android:id="@+id/tv_title"
         android:maxLines="3"
         android:layout_marginRight="10dp"
         android:layout_alignParentTop="true"
         android:layout_alignParentLeft="true"
         android:layout_toLeftOf="@+id/imageView" />

     <TextView
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:textAppearance="?android:attr/textAppearanceSmall"
         android:text="Small Text"
         android:id="@+id/tv_time"
         android:layout_alignParentBottom="true"
         android:layout_alignParentLeft="true"/>
 </RelativeLayout>

activity_item

 <?xml version="1.0" encoding="utf-8"?>
 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:padding="10dp">

     <TextView
         android:id="@+id/tv_title"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:text="@string/app_name"
         android:singleLine="true"/>

     <LinearLayout
         android:id="@+id/line1"
         android:layout_width="match_parent"
         android:layout_height="60dp"
         android:layout_below="@id/tv_title"
         android:layout_marginTop="10dp">

         <ImageView
             android:id="@+id/imageView1"
             android:layout_width="100dp"
             android:layout_height="60dp"
             android:layout_weight="1"
             android:layout_marginRight="10dp"
             android:background="@mipmap/ic_launcher" />

         <ImageView
             android:id="@+id/imageView2"
             android:layout_width="100dp"
             android:layout_height="60dp"
             android:layout_weight="1"
             android:layout_marginRight="10dp"
             android:background="@mipmap/ic_launcher" />

         <ImageView
             android:id="@+id/imageView3"
             android:layout_width="100dp"
             android:layout_height="60dp"
             android:layout_weight="1"
             android:background="@mipmap/ic_launcher" />
     </LinearLayout>

     <TextView
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:textAppearance="?android:attr/textAppearanceSmall"
         android:text="Small Text"
         android:id="@+id/tv_time"
         android:layout_below="@id/line1"
         android:layout_alignParentLeft="true"/>

 </RelativeLayout>

activity_item2

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

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

 <?xml version="1.0" encoding="utf-8"?>
 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
     android:layout_height="match_parent">

     <android.support.v4.view.ViewPager
         android:id="@+id/vp"
         android:layout_width="match_parent"
         android:layout_height="200dp" />

     <TextView
         android:id="@+id/tv_msg"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_centerHorizontal="true"
         android:layout_marginBottom="5dp"
         android:layout_alignBottom="@+id/vp"
         android:textColor="#ddd"
         android:text="吴建明和中国外交"
         android:singleLine="true" />

 </RelativeLayout>

activity_item_header

最后是 ListView 的布局;

 <?xml version="1.0" encoding="utf-8"?>
 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:padding="10dp"
     tools:context="com.dragon.android.baseadapter.MainActivity">

     <ListView
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:scrollbars="none"
         android:dividerHeight="1dp"
         android:divider="#ccc"
         android:id="@+id/listView"/>
 </RelativeLayout>

activity_main

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

 <?xml version="1.0" encoding="utf-8"?>
 <resources>

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

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

 </resources>

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;

 /**
  * Created by Auser on 2016/9/8.
  */
 public class MyAdapter extends BaseAdapter {

     private final Context context;
     private List<Data> mData;

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

     /**
      * @return item 的数量
      */
     @Override
     public int getCount() {
         return mData == null ? 0 : mData.size();
     }

     /**
      * @param position
      * @param convertView <重点： 得到每个 Item 将要显示的视图
      * @param parent
      * @return
      */
     @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;
     }

     /**
      * 给开发者自己实现，一般用来的二道当前 position 位置的 数据
      * 当 Item 可以在屏幕显示的时候，会调用 getView 且传递显示的 Item 的位置
      *
      * @param position 新显示的 Item 的位置
      * @return
      */
     @Override
     public Data getItem(int position) {
         // Log.d("TAG", position + "");
         return mData.get(position);
     }

     /**
      * @param position 当用户设置了 ListView 的Item 的点击时间的时候，将此值作为 第四个参数 传递
      * @return
      */
     @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;

 /**
  * Created by Auser on 2016/9/8.
  */
 class MyPagerAdapter extends PagerAdapter {

     private List<ImageView> mList;

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

     /**
      * 决定ViewPager中能够显示几个子视图
      * @return 可滑动的边界
      */
     @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;
     }

     /**
      * 产生item.container:容器.--->ViewPager
      * @param container
      * @param position
      * @return
      */
     @Override
     public Object instantiateItem(ViewGroup container, int position) {
         // 将ImageView添加到ViewPager容器中.
         container.addView(mList.get(position % mList.size()));

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

     /**
      * 判断当前的view是否是第一次产生的.
      * @param view
      * @param obj
      * @return
      */
     @Override
     public boolean isViewFromObject(View view, Object obj) {

         return view == obj;
     }

     /**
      * 移除一个item
      * @param container
      * @param position
      * @param object
      */
     @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;

 /**
  * Created by Auser on 2016/9/8.
  */
 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<Data> mData;
     private List<ImageView> 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);
     }

     /**
      * 添加头部布局 ViewPager
      */
     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<ImageView>();
         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()]);
             }
         });
     }

     /**
      * 创建数据源
      * @param stringArray
      */
     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));
             }
         }
     }
 }

******************************************