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));
}
}
}
}
以上就是新闻界面的模拟示例，有需要的朋友可以看一下，谢谢大家对本站的支持！
相关推荐
-
Android仿微信列表滑动删除 如何实现滑动列表SwipeListView
接上一篇,本篇主要讲如何实现滑动列表SwipeListView. 上篇完成了滑动控件SwipeItemView,这个控件是一个自定义的ViewGroup,作为列表的一个item,为列表提供一些方法让这个SwipeItemView能滑动其视图内容,同时滑动过程中会有顺滑的动画效果.而本篇讲的SwipeListView则是这个列表的具体实现了.当然啦,这个SwipeListView继承自ListView,为了实现我们需要的功能,重点就是重写ListView的onTouchEvent()以及onInt
-
Android开发之ListView、GridView 详解及示例代码
ListView与GridView是Android开发中的常用控件,它们和Adapter配合使用能够实现很多界面效果.下面分别以实例说明ListView.GridView的用法. 1.ListView的Android开发实例 ListView 是android开发中最常用的控件之一,一般构成列表包括三个元素,ListView:用来展示列表的视图.Adapter:数据与视图连接的桥梁.Data:具体的数据包括字符串 .图片或者控件. 适配器一般有以下几种类型: ArrayAdapte
-
Android自定义ListView实现仿QQ可拖拽列表功能
我们大致的思路,其实是这样子的,也是我的设想,我们可以先去实现一个简单的ListView的数据,但是他的Adapter,我们可以用系统封装好的,然后传递进去一个实体类,最后自定义一个listview去操作,所以我们先把准备的工作做好,比如? list_item.xml <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.a
-
Android ListView中动态显示和隐藏Header&Footer的方法
ListView的模板写法 ListView模板写法的完整代码: •android代码优化----ListView中自定义adapter的封装(ListView的模板写法) 以后每写一个ListView,就这么做:直接导入ViewHolder.java和ListViewAdapter,然后写一个自定义adapter继承自ListViewAdapter就行了. ListView中动态显示和隐藏Header&Footer 如果需要动态的显示和隐藏footer的话,按照惯例,误以为直接通过setVis
-
Android ListView万能适配器实例代码
ListView是开发中最常用的控件了,但是总是会写重复的代码,浪费时间又没有意义. 最近参考一些资料,发现一个万能ListView适配器,代码量少,节省时间,总结一下分享给大家. 首先有一个自定义的Adapter继承于BaseAdapter,下面是自定义的Adapter,精华在getView()方法中 package com.example.mylistview.util; import java.util.List; import android.content.Context; impor
-
Android中ListView绑定CheckBox实现全选增加和删除功能(DEMO)
ListView控件还是挺复杂的,也是项目中应该算是比较常用的了,所以写了一个小Demo来讲讲,主要是自定义adapter的用法,加了很多的判断等等等等-.我们先来看看实现的效果吧! 好的,我们新建一个项目LvCheckBox 我们事先先把这两个布局写好吧,一个是主布局,还有一个listview的item.xml,相信不用多说 activity_main.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/
-
Android 根据EditText搜索框ListView动态显示数据
根据EditText搜索框ListView动态显示数据是根据需求来的,觉得这之中涉及的东西可能比较的有意思,所以动手来写一写,希望对大家有点帮助. 首先,我们来分析下整个过程: 1.建立一个layout,包含一个EditText搜索框和一个ListView 2.创建一个数据集mData,用于ListView的Adapter的创建 3.添加EditText的文本改变的监听器 4.利用notifyDataSetChanged()动态更新ListView 第一步:创建一个搜索框 这个还是比较容易的,这
-
Android listview与adapter详解及实例代码
一个ListView通常有两个职责. (1)将数据填充到布局. (2)处理用户的选择点击等操作. 第一点很好理解,ListView就是实现这个功能的.第二点也不难做到,在后面的学习中读者会发现,这非常简单. 一个ListView的创建需要3个元素. (1)ListView中的每一列的View. (2)填入View的数据或者图片等. (3)连接数据与ListView的适配器. 也就是说,要使用ListView,首先要了解什么是适配器.适配器是一个连接数据和AdapterView(ListView就
-
Android ListView自动显示隐藏布局的实现方法
借助View的OnTouchListener接口来监听listView的滑动,通过比较与上次坐标的大小,判断滑动方向,并通过滑动方向来判断是否需显示或者隐藏对应的布局,并且带有动画效果. 1.自动显示隐藏Toolbar 首先给listView增加一个HeaderView,避免第一个Item被Toolbar遮挡. View header=new View(this); header.setLayoutParams(new AbsListView.LayoutParams( AbsListView.
-
Android实现上拉加载更多ListView(PulmListView)
思路 今天带大家实现一个上拉加载更多的ListView.GitHub传送门:PulmListView, 欢迎大家fork&&star. 先带大家理一下思路, 如果我们要实现一个上拉加载更多的ListView, 我们需要实现的功能包括: 1.一个自定义的ListView, 并且该ListView能够判断当前是否已经处于最底部. 2.一个自定义的FooterView, 用于在ListView加载更多的过程中进行UI展示. 3.关联FooterView和ListView, 包括加载时机判断.
-
Android ListView滚动到底后自动加载数据
熟悉Android的朋友们都知道,不管是微博客户端还是新闻客户端,都离不开列表组件,可以说列表组件是Android数据展现方面最重要的组件,我们 今天就要讲一讲列表组件ListView加载数据的相关内容.通常来说,一个应用在展现大量数据时,不会将全部的可用数据都呈现给用户,因为这不管对于服 务端还是客户端来说都是不小的压力,因此,很多应用都是采用分批次加载的形式来获取用户所需的数据.比如:微博客户端可能会在用户滑动至列表底端时自动加 载下一页数据,也可能在底部放置一个"加载更多"按钮,