Android 新聞界面模擬ListView和ViewPager的應(yīng)用
更新時(shí)間：2016年09月09日 14:54:07 作者：西門(mén)吃雪
本文主要介紹 Android ListView和ViewPager的應(yīng)用，這里模擬了新聞界面及實(shí)現(xiàn)示例代碼，有需要的小伙伴可以參考下
模擬新聞 APP 的界面
1)寫(xiě) ListView 之前先寫(xiě)布局：
這里有兩種 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 實(shí)現(xiàn)滑動(dòng)的效果：
<?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="吳建明和中國(guó)外交"
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 中要顯示的數(shù)據(jù)這里先自己設(shè)定，不進(jìn)行網(wǎng)絡(luò)請(qǐng)求。
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string-array name="titles">
<item>那些被捕上岸的不尋常的大魚(yú)，往往成為大家關(guān)注的焦點(diǎn)。一種奇觀和一段足以津津樂(lè)道的傳奇經(jīng)歷。</item>
<item>自2008年正式推出，杭州公共自行車(chē)在國(guó)內(nèi)外圈粉無(wú)數(shù)，它超越了一道風(fēng)景、一張名片的定義，成為杭州的生活方式。</item>
<item>奧運(yùn)歷史上，像美國(guó)隊(duì)單獨(dú)重賽這樣荒誕的場(chǎng)面也不時(shí)出現(xiàn)。</item>
<item>在巴西里約奧運(yùn)賽場(chǎng)上，菲爾普斯身上“神秘的東方紅圈”走紅。</item>
<item>里約奧運(yùn)會(huì)正式啟幕，為國(guó)出征的運(yùn)動(dòng)員激戰(zhàn)正酣。而在奧運(yùn)賽場(chǎng)之外，一大波隱藏的民間運(yùn)動(dòng)高手也蠢蠢欲動(dòng)。</item>
<item>6月30日以來(lái)，第四輪強(qiáng)降雨給湖北造成嚴(yán)重?fù)p失。</item>
<item>查閱世界上城市地下排水系統(tǒng)中的佼佼者，可以發(fā)現(xiàn)，那些真正的良心下水道，即使多年過(guò)去，仍在發(fā)揮效用。</item>
</string-array>
<string-array name="msgs">
<item>吳建明和中國(guó)外交</item>
<item>同性戀酒吧：是天堂也是地獄</item>
<item>那些年，我們這樣過(guò)端午</item>
<item>馬英九8年：從萬(wàn)人迷到受氣包</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 的數(shù)量
*/
@Override
public int getCount() {
return mData == null ? 0 : mData.size();
}
/**
* @param position
* @param convertView <重點(diǎn)： 得到每個(gè) 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;
}
/**
* 給開(kāi)發(fā)者自己實(shí)現(xiàn)，一般用來(lái)的二道當(dāng)前 position 位置的 數(shù)據(jù)
* 當(dāng) Item 可以在屏幕顯示的時(shí)候，會(huì)調(diào)用 getView 且傳遞顯示的 Item 的位置
*
* @param position 新顯示的 Item 的位置
* @return
*/
@Override
public Data getItem(int position) {
// Log.d("TAG", position + "");
return mData.get(position);
}
/**
* @param position 當(dāng)用戶(hù)設(shè)置了 ListView 的Item 的點(diǎn)擊時(shí)間的時(shí)候，將此值作為 第四個(gè)參數(shù) 傳遞
* @return
*/
@Override
public long getItemId(int position) {
return 10086;
}
}
MyAdapter
4)因?yàn)轭^部布局使用 ViewPager 實(shí)現(xiàn)，所以要添加自定義的適配器繼承 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中能夠顯示幾個(gè)子視圖
* @return 可滑動(dòng)的邊界
*/
@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;
}
/**
* 產(chǎn)生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());
}
/**
* 判斷當(dāng)前的view是否是第一次產(chǎn)生的.
* @param view
* @param obj
* @return
*/
@Override
public boolean isViewFromObject(View view, Object obj) {
return view == obj;
}
/**
* 移除一個(gè)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
這里面要注意如何實(shí)現(xiàn) ViewPager 滑動(dòng)時(shí)的循環(huán)效果 --- 即設(shè)置一個(gè)非常大的邊界，循環(huán)顯示。
5)需要一個(gè)容器來(lái)存放要展示的數(shù)據(jù)，這里封裝一個(gè) Data 類(lèi)
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 中對(duì) ListView 和 ViewPager 配置適配器（同時(shí)實(shí)現(xiàn)文本隨 ViewPager 的滑動(dòng)同步改變）
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);
// 創(chuàng)建數(shù)據(jù)源.存放頭部布局要展示的視圖
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);
// 設(shè)置ViewPager當(dāng)前是第幾個(gè)視圖
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);
// 讓標(biāo)題隨著ViewPager的切換而切換
mTv.setText(msgs[position % mList.size()]);
}
});
}
/**
* 創(chuàng)建數(shù)據(jù)源
* @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));
}
}
}
}
以上就是新聞界面的模擬示例，有需要的朋友可以看一下，謝謝大家對(duì)本站的支持！
您可能感興趣的文章:
相關(guān)文章
android: targetSdkVersion升級(jí)中Only fullscreen activities can r
這篇文章主要給大家介紹了關(guān)于Android target SDK和build tool版本升級(jí)中遇到Only fullscreen activities can request orientation問(wèn)題的解決方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下2018-09-09
從5月27日開(kāi)始，谷歌（Google）在華的幾乎所有的服務(wù)都處于無(wú)法使用的狀態(tài)，除了搜索引擎遭到屏蔽之外，谷歌的郵箱（Gmail）、日歷（Calendar）、翻譯（Translate）、地圖（Maps）、分析（Analytics）和Google AdSense等產(chǎn)品也受到了影響。同時(shí)安裝安卓環(huán)境的時(shí)候同樣容易出現(xiàn)問(wèn)題2014-06-06
Android實(shí)現(xiàn)新浪微博一鍵分享的實(shí)例代碼
這篇文章主要介紹了Android實(shí)現(xiàn)新浪微博一鍵分享的實(shí)例代碼,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
ProtoBuf動(dòng)態(tài)拆分Gradle?Module解析
這篇文章主要為大家介紹了ProtoBuf動(dòng)態(tài)拆分Gradle?Module解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
從Cocos2d-x2遷移到Cocos2d-x3的過(guò)程分享
Cocos2d-x 3.0發(fā)布沒(méi)多久，我就迫不及待地將手頭的一個(gè)習(xí)作嘗試從2.2.2版本遷移到3.0rc0引擎上，本問(wèn)介紹了遷移流程和遇到的問(wèn)題，以及發(fā)現(xiàn)了針對(duì)Android平臺(tái)的變動(dòng),需要的朋友可以參考下2014-04-04
這篇文章主要介紹了Android Fragment使用的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)使用Android開(kāi)發(fā)，感興趣的朋友可以了解下2021-04-04
這篇文章主要為大家詳細(xì)介紹了android線程消息機(jī)制之Handler的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
Android開(kāi)發(fā)中計(jì)算器的sin、cos及tan值計(jì)算問(wèn)題分析
這篇文章主要介紹了Android開(kāi)發(fā)中計(jì)算器的sin、cos及tan值計(jì)算問(wèn)題,結(jié)合實(shí)例形式分析了Android三角函數(shù)運(yùn)算中的弧度與角度計(jì)算問(wèn)題與相關(guān)解決方法,需要的朋友可以參考下2017-11-11
Android為textView設(shè)置setText的時(shí)候報(bào)錯(cuò)的講解方案
今天小編就為大家分享一篇關(guān)于Android為textView設(shè)置setText的時(shí)候報(bào)錯(cuò)的講解方案，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧2019-03-03
Android編程之SQLite數(shù)據(jù)庫(kù)操作方法詳解
這篇文章主要介紹了Android編程之SQLite數(shù)據(jù)庫(kù)操作方法,簡(jiǎn)單介紹了SQLite數(shù)據(jù)庫(kù)及Android操作SQLite數(shù)據(jù)庫(kù)的步驟與相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-08-08