Android 新闻界面模拟ListView和ViewPager的应用
作者：西门吃雪
本文主要介绍 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));
}
}
}
}
以上就是新闻界面的模拟示例，有需要的朋友可以看一下，谢谢大家对本站的支持！