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"><ImageViewandroid:layout_width="100dp"android:layout_height="60dp"android:id="@+id/imageView"android:background="@mipmap/ic_launcher"android:layout_centerVertical="true"android:layout_alignParentRight="true" /><TextViewandroid: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" /><TextViewandroid: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"><TextViewandroid:id="@+id/tv_title"android:layout_width="match_parent"android:layout_height="wrap_content"android:text="@string/app_name"android:singleLine="true"/><LinearLayoutandroid:id="@+id/line1"android:layout_width="match_parent"android:layout_height="60dp"android:layout_below="@id/tv_title"android:layout_marginTop="10dp"><ImageViewandroid:id="@+id/imageView1"android:layout_width="100dp"android:layout_height="60dp"android:layout_weight="1"android:layout_marginRight="10dp"android:background="@mipmap/ic_launcher" /><ImageViewandroid:id="@+id/imageView2"android:layout_width="100dp"android:layout_height="60dp"android:layout_weight="1"android:layout_marginRight="10dp"android:background="@mipmap/ic_launcher" /><ImageViewandroid:id="@+id/imageView3"android:layout_width="100dp"android:layout_height="60dp"android:layout_weight="1"android:background="@mipmap/ic_launcher" /></LinearLayout><TextViewandroid: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.ViewPagerandroid:id="@+id/vp"android:layout_width="match_parent"android:layout_height="200dp" /><TextViewandroid: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"><ListViewandroid: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 的数量 */@Overridepublic int getCount（） {return mData == null ? 0 : mData.size（）;}/** * @param position * @param convertView <重点： 得到每个 Item 将要显示的视图 * @param parent * @return */@Overridepublic 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 */@Overridepublic Data getItem（int position） {// Log.d（"TAG", position + ""）;return mData.get（position）;}/** * @param position 当用户设置了 ListView 的Item 的点击时间的时候，将此值作为 第四个参数 传递 * @return */@Overridepublic 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 可滑动的边界 */@Overridepublic 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=4return Integer.MAX_VALUE;}/** * 产生item.container:容器.--->ViewPager * @param container * @param position * @return */@Overridepublic 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 */@Overridepublic boolean isViewFromObject（View view, Object obj） {return view == obj;}/** * 移除一个item * @param container * @param position * @param object */@Overridepublic 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;@Overridepublic 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};@Overrideprotected 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（） {@Overridepublic 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））;}}}}

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