仿 今日头条布局：TabLayout+ViewPager+Fragment+ListView多条目加载+Webview
一. MainActivity.java：
import android.support.design.widget.TabLayout; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentPagerAdapter; import android.support.v4.view.ViewPager; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import Fragment.NewsFragment; import java.util.ArrayList; import java.util.List; public class MainActivity extends AppCompatActivity { private TabLayout tabLayout; private ViewPager viewPager; private Listlist; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); tabLayout = (TabLayout) findViewById(R.id.tabLayout); viewPager = (ViewPager) findViewById(R.id.viewPager); /** * TabLayout标题栏对应的参数(标题)可选值为： * top(头条),shehui(社会),guonei(国内),guoji(国际),yule(娱乐), * tiyu(体育)junshi(军事), keji(科技),caijing(财经),shishang(财经) */ list = new ArrayList<>(); list.add("头条"); list.add("社会"); list.add("国内"); list.add("国际"); list.add("娱乐"); list.add("体育"); list.add("军事"); list.add("科技"); list.add("财经"); list.add("财经"); //设置使用ViewPager+Fragment显示新闻列表数据布局的适配器 viewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) { //得到当前页的标题,,,也就是设置当前页面显示的标题是tabLayout对应的标题 @Override public CharSequence getPageTitle(int position) { return list.get(position); } @Override public Fragment getItem(int position) { //在这个位置对比一下标题是什么,,,然后返回对应的fragment NewsFragment newsFragment = new NewsFragment(); //判断所选的标题，进行传值显示 Bundle bundle = new Bundle(); if (list.get(position).equals("头条")){ bundle.putString("name","top"); }else if (list.get(position).equals("社会")){ bundle.putString("name","shehui"); }else if (list.get(position).equals("国内")){ bundle.putString("name","guonei"); }else if (list.get(position).equals("国际")){ bundle.putString("name","guoji"); }else if (list.get(position).equals("娱乐")){ bundle.putString("name","yule"); }else if (list.get(position).equals("体育")){ bundle.putString("name","tiyu"); }else if (list.get(position).equals("军事")){ bundle.putString("name","junshi"); }else if (list.get(position).equals("科技")){ bundle.putString("name","keji"); }else if (list.get(position).equals("财经")){ bundle.putString("name","caijing"); }else if (list.get(position).equals("时尚")){ bundle.putString("name","shishang"); } newsFragment.setArguments(bundle); return newsFragment; } @Override public int getCount() { return list.size(); } }); //TabLyout要与ViewPager关联显示 tabLayout.setupWithViewPager(viewPager); } }
二. 自定义适配器类：
import android.content.Context;
import android.graphics.Bitmap;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;
import com.nostra13.universalimageloader.core.DisplayImageOptions;
import com.nostra13.universalimageloader.core.ImageLoader;
import com.nostra13.universalimageloader.core.ImageLoaderConfiguration;
import com.nostra13.universalimageloader.core.assist.ImageScaleType;
import java.util.List;
import Bean.NewsTopBean;
import androidthree_1509d.Newstop.R;
public class MyTabAdapter extends BaseAdapter{
private List list;
private Context context;
private int IMAGE_01 = 0;
private int IMAGE_02 = 1;
private int IMAGE_03 = 2;
public MyTabAdapter(Context context, List list) {
this.context = context;
this.list = list;
//配置Imageloader类
ImageLoader.getInstance().init(ImageLoaderConfiguration.createDefault(context));
}
@Override
public int getCount() {
return list.size();
}
@Override
public Object getItem(int position) {
return list.get(position);
}
@Override
public long getItemId(int position) {
return position;
}
@Override
public int getViewTypeCount() {
return 3;
}
@Override
public int getItemViewType(int position) {
if (list.get(position).getThumbnail_pic_s() != null && list.get(position).getThumbnail_pic_s02() != null && list.get(position).getThumbnail_pic_s03() != null){
return IMAGE_03;
}else if (list.get(position).getThumbnail_pic_s() != null && list.get(position).getThumbnail_pic_s02() != null){
return IMAGE_02;
}
return IMAGE_01;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
if (getItemViewType(position) == IMAGE_01){
Image01_ViewHolder holder;
if (convertView == null){
convertView =View.inflate(context, R.layout.item_layout01,null);
holder =new Image01_ViewHolder();
//查找控件
holder.author_name = (TextView) convertView.findViewById(R.id.author_name);
holder.title = (TextView) convertView.findViewById(R.id.title);
holder.image = (ImageView) convertView.findViewById(R.id.image);
convertView.setTag(holder);
}else {
holder = (Image01_ViewHolder) convertView.getTag();
}
//获取数据重新赋值
holder.title.setText(list.get(position).getTitle());
holder.author_name.setText(list.get(position).getAuthor_name());
ImageLoader.getInstance().displayImage(list.get(position).getThumbnail_pic_s(),holder.image,getOption());
}else if (getItemViewType(position) == IMAGE_02){
Image02_ViewHolder holder;
if (convertView == null){
convertView =View.inflate(context, R.layout.item_layout02,null);
holder =new Image02_ViewHolder();
//查找控件
holder.image002 = (ImageView) convertView.findViewById(R.id.image002);
holder.image001 = (ImageView) convertView.findViewById(R.id.image001);
holder.title = (TextView) convertView.findViewById(R.id.title);
convertView.setTag(holder);
}else {
holder = (Image02_ViewHolder) convertView.getTag();
}
//获取数据重新赋值
holder.title.setText(list.get(position).getTitle());
ImageLoader.getInstance().displayImage(list.get(position).getThumbnail_pic_s(),holder.image001,getOption());
ImageLoader.getInstance().displayImage(list.get(position).getThumbnail_pic_s02(),holder.image002,getOption());
} else {
Image03_ViewHolder holder;
if (convertView == null){
convertView =View.inflate(context, R.layout.item_layout03,null);
holder =new Image03_ViewHolder();
//查找控件
holder.image01 = (ImageView) convertView.findViewById(R.id.image01);
holder.image02 = (ImageView) convertView.findViewById(R.id.image02);
holder.image03 = (ImageView) convertView.findViewById(R.id.image03);
holder.title = (TextView) convertView.findViewById(R.id.title);
convertView.setTag(holder);
}else {
holder = (Image03_ViewHolder) convertView.getTag();
}
//获取数据重新赋值
holder.title.setText(list.get(position).getTitle());
ImageLoader.getInstance().displayImage(list.get(position).getThumbnail_pic_s(),holder.image01,getOption());
ImageLoader.getInstance().displayImage(list.get(position).getThumbnail_pic_s02(),holder.image02,getOption());
ImageLoader.getInstance().displayImage(list.get(position).getThumbnail_pic_s03(),holder.image03,getOption());
}
return convertView;
}
//配置图片加载失败和加载中显示的Android小机器人logo
public static DisplayImageOptions getOption() {
DisplayImageOptions options = new DisplayImageOptions.Builder()
.showImageOnLoading(R.mipmap.ic_launcher) // 设置图片下载期间显示的图片
.showImageForEmptyUri(R.mipmap.ic_launcher) // 设置图片Uri为空或是错误的时候显示的图片
.showImageOnFail(R.mipmap.ic_launcher) // 设置图片加载或解码过程中发生错误显示的图片
.resetViewBeforeLoading(true) // default 设置图片在加载前是否重置、复位
.delayBeforeLoading(1000) // 下载前的延迟时间
.cacheInMemory(true) // default 设置下载的图片是否缓存在内存中
.cacheOnDisk(true) // default 设置下载的图片是否缓存在SD卡中
.imageScaleType(ImageScaleType.EXACTLY_STRETCHED) // default 设置图片以如何的编码方式显示
.bitmapConfig(Bitmap.Config.RGB_565) // default 设置图片的解码类型
.build();
return options;
}
static class Image01_ViewHolder{
TextView title,author_name;
ImageView image;
}
static class Image02_ViewHolder{
TextView title;
ImageView image001,image002;
}
static class Image03_ViewHolder{
TextView title;
ImageView image01,image02,image03;
}
}
三. 请求网络数据的Bean类（自定义）
四. 自定义的Fragment类
import android.content.Intent;
import android.os.AsyncTask;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.ListView;
import com.google.gson.Gson;
import java.io.BufferedReader;
import java.io.InputStream;
import java.io.InputStreamReader;
import java.net.HttpURLConnection;
import java.net.URL;
import java.util.List;
import Adapter.MyTabAdapter;
import Bean.NewsTopBean;
import androidthree_1509d.Newstop.R;
import androidthree_1509d.Newstop.WebActivity;
public class NewsFragment extends Fragment{
private List list;
private ListView listView;
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.list_item, container, false);
listView = (ListView) view.findViewById(R.id.listView);
return view;
}
@Override
public void onActivityCreated(@Nullable Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState);
//获取传递的标题数据
Bundle bundle = getArguments();
String data = bundle.getString("name", "top");
//异步加载数据
getDataFromNet(data);
//设置点击条目时的监听事件
listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView parent, View view, int position, long id) {
//获取点击条目的路径，传值显示webview页面
String url = list.get(position).getUrl();
Intent intent = new Intent(getActivity(), WebActivity.class);
intent.putExtra("url",url);
startActivity(intent);
}
});
}
private void getDataFromNet(final String data) {
AsyncTask task = new AsyncTask() {
@Override
protected String doInBackground(Void... params) {
try {
String path = "http://v.juhe.cn/toutiao/index?type="+data+"&key=2f092bd9ce76c0257052d6d3c93c11b4";
//连接网络
URL url = new URL(path);
HttpURLConnection connection = (HttpURLConnection) url.openConnection();
connection.setRequestMethod("GET");
connection.setReadTimeout(5000);
connection.setConnectTimeout(5000);
//响应数据
int responseCode = connection.getResponseCode();
if (responseCode == 200){
InputStream inputStream = connection.getInputStream();
String json = streamToString(inputStream,"utf-8");
return json;
}
} catch (Exception e) {
e.printStackTrace();
}
return "";
}
@Override
protected void onPostExecute(String result) {
NewsTopBean newsBean = new Gson().fromJson(result, NewsTopBean.class);
list = newsBean.getResult().getData();
//设置适配器
MyTabAdapter adapter = new MyTabAdapter(getActivity(), list);
listView.setAdapter(adapter);
}
};
task.execute();
}
private String streamToString(InputStream inputStream, String charset) {
try {
InputStreamReader inputStreamReader = new InputStreamReader(inputStream,charset);
BufferedReader bufferedReader = new BufferedReader(inputStreamReader);
String s = null;
StringBuilder builder = new StringBuilder();
while ((s = bufferedReader.readLine()) != null){
builder.append(s);
}
bufferedReader.close();
return builder.toString();
} catch (Exception e) {
e.printStackTrace();
}
return null;
}
} 五. 显示webview页面的Activity.java
import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.webkit.WebSettings; import android.webkit.WebView; public class WebActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_web); WebView webView = (WebView) findViewById(R.id.webView); //获取传递的路径 String url = getIntent().getStringExtra("url"); //加载路径 webView.loadUrl(url); //显示JavaScript页面 WebSettings settings = webView.getSettings(); settings.setJavaScriptEnabled(true); settings.setJavaScriptCanOpenWindowsAutomatically(true); } }
六. 自定义布局：
1. activity_main.xml
xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <RelativeLayout android:layout_height="50dp" android:background="#FF0000" android:layout_width="match_parent" > <TextView android:text="今日头条" android:textSize="23sp" android:textStyle="bold" android:textColor="#ffffff" android:layout_centerInParent="true" android:layout_width="wrap_content" android:layout_height="wrap_content" /> RelativeLayout> <android.support.design.widget.TabLayout android:layout_width="match_parent" app:tabSelectedTextColor="#FF0000" android:id="@+id/tabLayout" android:layout_height="60dp" app:tabTextColor="#000000" app:tabMode="scrollable"> android.support.design.widget.TabLayout> <android.support.v4.view.ViewPager android:id="@+id/viewPager" android:layout_width="match_parent" android:layout_height="match_parent">android.support.v4.view.ViewPager> LinearLayout>
2. activity_web.xml
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" > <WebView android:id="@+id/webView" android:layout_width="match_parent" android:layout_height="match_parent">WebView> RelativeLayout>
3. list_item.xml
xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <ListView android:scrollbars="none" android:id="@+id/listView" android:layout_width="match_parent" android:layout_height="match_parent">ListView> LinearLayout>
4. item_layout01.xml
xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:layout_weight="2" android:layout_width="0dp" android:orientation="vertical" android:layout_height="wrap_content" android:layout_alignParentLeft="true"> <TextView android:textSize="18sp" android:id="@+id/title" android:textStyle="bold" android:layout_marginLeft="10dp" android:layout_marginTop="20dp" android:layout_width="match_parent" android:layout_height="wrap_content" /> <TextView android:textSize="13sp" android:id="@+id/author_name" android:layout_marginLeft="10dp" android:layout_marginTop="20dp" android:layout_width="wrap_content" android:layout_height="wrap_content" /> LinearLayout> <ImageView android:id="@+id/image" android:layout_weight="1" android:layout_width="0dp" android:layout_height="100dp" android:layout_marginRight="5dp" android:layout_gravity="center_vertical" /> LinearLayout>
5. item_layout02.xml
xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:textSize="18sp" android:id="@+id/title" android:textStyle="bold" android:layout_marginLeft="10dp" android:layout_marginTop="20dp" android:layout_width="match_parent" android:layout_height="wrap_content" /> <LinearLayout android:orientation="horizontal" android:layout_marginTop="18dp" android:layout_marginLeft="10dp" android:layout_marginRight="10dp" android:layout_width="match_parent" android:layout_height="wrap_content" > <ImageView android:layout_weight="1" android:layout_width="0dp" android:id="@+id/image001" android:layout_height="120dp" /> <ImageView android:layout_weight="1" android:layout_width="0dp" android:id="@+id/image002" android:layout_height="120dp" android:layout_marginLeft="3dp"/> <ImageView android:layout_weight="1" android:layout_width="0dp" android:layout_height="120dp" android:layout_marginLeft="3dp"/> LinearLayout> LinearLayout>
6. item_layout03.xml
xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:textSize="18sp" android:id="@+id/title" android:textStyle="bold" android:layout_marginLeft="10dp" android:layout_marginTop="20dp" android:layout_width="match_parent" android:layout_height="wrap_content" /> <LinearLayout android:orientation="horizontal" android:layout_marginTop="18dp" android:layout_marginLeft="10dp" android:layout_marginRight="10dp" android:layout_width="match_parent" android:layout_height="wrap_content" > <ImageView android:layout_weight="1" android:id="@+id/image01" android:layout_width="0dp" android:layout_height="120dp" /> <ImageView android:layout_weight="1" android:id="@+id/image02" android:layout_width="0dp" android:layout_height="120dp" android:layout_marginLeft="3dp"/> <ImageView android:layout_weight="1" android:id="@+id/image03" android:layout_width="0dp" android:layout_height="120dp" android:layout_marginLeft="3dp"/> LinearLayout> LinearLayout>