Android 新闻界面模拟ListView和ViewPager的应用
作者：西门吃雪 发布时间：2022-09-19 09:41:46
标签：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));
}
}
}
}
0
投稿猜你喜欢
单例模式算是设计模式中最容易理解，也是最容易手写代码的模式，但是其中涉及的知识点却一点也不少，所以经常作为面试题来考。一般单例都是五种写法：- 关于刮刮卡的实现效果不需要做太多解释，特别是在电商APP中，每当做活动的时候都会有它的身影存在，趁着美好周末，来实现下这个效果，也算是对零
- 1.生成自己的注解（为了确定在哪些位置使用）/** * 关闭patch delete的model处理，否则会报错 */@Target({El
- 本文实例为大家分享了Java实现图片旋转，供大家参考，具体内容如下方法一：普通方法实现图片旋转/** * 图像旋转
- 1.网关简介所谓的网关就是指系统的统一入口，它封装了运用程序的内部结构，为客户端提供统一的服务，一些与业务功能无关的公共逻辑可以在这里实现，
- 象棋，很多人多接触过，学者写了一个，大神可以指点一下~直接上代码：贴出主要代码，想要Demo的点击下载：中国象棋Demopackage wy
- 通过一个变量控制线程中断代码：package com.itsoku.chat05;import java.util.concurrent.T
- 背景：使用Idea编辑器一. SpringBoot项目打war包步骤：在pom.xml文件中的<build>标签，使用<f
- 问：怎样才能将XML文件导入SQL Server 2000？ 答：将XML文件导入SQL Server有若干种方法，这里提供其中的3种： 大
- 最常用的序列化是把某个类序列化成二进制文件.但有时我们也会把类序列化成xml文件. 假如有如下一个类 class Arwen { priva
- 本文实例为大家分享了java连接SQL Server数据库的具体代码，供大家参考，具体内容如下操作系统：windows 10 64位java
- 模板方法-基类封装Activity和Fragment应该是Android最常用的组件，对他进行简单的封装对提高代码的简洁性也有很大的帮助。B
- import java.io.BufferedReader;import java.io.InputStreamReader;import
- DrawerLayout顾名思义就是一个管理布局的。使用方式可以与其它的布局类类似。DrawerLayout带有滑动的功能。只要按照draw
- 文件数据流在java语言中，进行文件输入和输出时，经常会使用到FileIntputStream和FileOutputStream两个文件数据
- 1、lock是可中断锁，而synchronized 不是可中断锁线程A和B都要获取对象O的锁定，假设A获取了对象O锁，B将等待A释放对O的锁
- 本文实例讲述了Spring实战之@Autowire注解用法。分享给大家供大家参考，具体如下：一 配置<?xml version=&qu
- 一.协程间的通信当需要进行协程间的通信时，可以调用Channel方法，创建一个Channel接口指向的对象，通过调用该对象的send方法和r
- 一. Thread.yield( )方法：使当前线程从执行状态（运行状态）变为可执行态（就绪状态）。cpu会从众多的可执行态里选择，也就是说
- 本文介绍了Android是如何设置组件半透明和透明的效果，分享出来供大家参考，下面来看看详细的介绍：1、Button或者ImageButto
