类似于网易新闻客户端的界面实现02

最新推荐文章于 2017-11-30 23:03:06 发布

hi_0123

最新推荐文章于 2017-11-30 23:03:06 发布

阅读量1.1k

点赞数 3

分类专栏： Android开发之ViewPager

本文链接：https://blog.csdn.net/kuangxiaoguo0123/article/details/49079757

版权

Android开发之ViewPager 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

上篇博文中点击打开链接我们已经实现了网易新闻的大概视图，但是这次的实现和上次有点不同，但是大体的思路都是一样的。

和上篇博文中的唯一不同是：

上篇博文中我们是在ActionBar中通过添加Tab的方式添加titles，并实现Tab的监听事件

而在本篇博文中我们实现的是在布局文件中添加titles并添加点击事件

好了，我们直接看代码吧。

一、首先是activity_main.xml文件：

<LinearLayout 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:orientation="vertical" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="#f00"
        android:orientation="vertical" >

        <TextView
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_weight="1"
            android:gravity="bottom"
            android:text="网易新闻"
            android:textSize="16sp" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/layout"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="horizontal" >

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="国际" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="军事" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="体育" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="娱乐" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="科技" />
    </LinearLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="8" >
    </android.support.v4.view.ViewPager>

</LinearLayout>

二、MainActivity：

package com.example.text_01;

import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;

import com.example.text_01_bean.Data;
import com.example.text_01_http.HttpUtils;

import android.os.AsyncTask;
import android.os.Bundle;
import android.app.Activity;
import android.graphics.Color;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.Menu;
import android.view.View;
import android.view.Window;
import android.widget.LinearLayout;
import android.widget.TextView;

public class MainActivity extends FragmentActivity {

	private ViewPager viewPager;
	private LinearLayout layout;
	private MyFragment fragment;
	private List<Fragment> fragments;
	private TextView titles[];

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		requestWindowFeature(Window.FEATURE_NO_TITLE);
		setContentView(R.layout.activity_main);
		viewPager = (ViewPager) findViewById(R.id.viewPager);
		layout = (LinearLayout) findViewById(R.id.layout);

		// 初始化List<Fragment>
		initFragment();
		// 初始化标题栏
		initTitles();

		// 设置viewPager的适配器，需要传一个SupportFragmentManager管理者对象
		viewPager.setAdapter(new MyAdapter(getSupportFragmentManager()));

		// 给ViewPager设置监听事件
		viewPager.setOnPageChangeListener(new OnPageChangeListener() {
			// 当我们滚动屏幕时，设置title显示不同的颜色
			@Override
			public void onPageSelected(int arg0) {
				// 其他位置设置为灰色
				for (int i = 0; i < titles.length; i++) {
					titles[i].setTextColor(Color.GRAY);
				}
				// 当前所处界面的title设置为红色
				titles[arg0].setTextColor(Color.RED);
			}

			@Override
			public void onPageScrolled(int arg0, float arg1, int arg2) {
			}

			@Override
			public void onPageScrollStateChanged(int arg0) {
			}
		});

	}

	// 初始化标题栏
	private void initTitles() {
		// 设置标题长度
		titles = new TextView[fragments.size()];
		// 初始化标题
		for (int i = 0; i < titles.length; i++) {
			// 根据线性布局控件的getChildAt(index)方法得到TextView
			titles[i] = (TextView) layout.getChildAt(i);
			// 设置一个标记便于添加点击事件
			titles[i].setTag(i);
			titles[i].setTextColor(Color.GRAY);
			// 给标题设置监听事件，点击标题时进行相应页面的切换
			titles[i].setOnClickListener(new View.OnClickListener() {

				@Override
				public void onClick(View v) {
					viewPager.setCurrentItem((Integer) v.getTag());
				}
			});
		}
		// 默认设置0角标为红色
		titles[0].setTextColor(Color.RED);
	}

	// 初始化List<Fragment>
	private void initFragment() {
		fragments = new ArrayList<Fragment>();
		for (int i = 0; i < 5; i++) {
			fragment = new MyFragment();
			// 传一个索引给Fragment
			Bundle bundle = new Bundle();
			bundle.putSerializable("tabIndex", i);
			fragment.setArguments(bundle);
			fragments.add(fragment);
		}
	}

	// 设置适配器
	class MyAdapter extends FragmentPagerAdapter {

		public MyAdapter(FragmentManager fm) {
			super(fm);

		}

		@Override
		public Fragment getItem(int arg0) {

			return fragments.get(arg0);
		}

		@Override
		public int getCount() {

			return fragments.size();
		}

	}

}

三、接下来就是在v4包下的Fragment的子类中实现网络数据的加载，这里为了增加用户体验，在Fragment的布局文件fragment中，我们除了添加一个

ListView外，还添加了一个TextView，我们设置当ListView中没有加载数据时，在界面显示TextView“正在加载。。。”

fragment布局文件：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical" >

    <ListView
        android:id="@+id/lv"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <TextView
        android:id="@+id/tv"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="正在加载..."
        android:textSize="20sp" />

</LinearLayout>

接下来是MyFragment：

package com.example.text_01;

import java.net.HttpURLConnection;
import java.net.MalformedURLException;
import java.net.URL;
import java.util.List;

import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.AsyncTask;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.TextView;

import com.example.text_01_bean.Data;
import com.example.text_01_http.HttpUtils;

public class MyFragment extends Fragment {

	private ListView lv;
	private List<Data> list;
	private Data data;
	private TextView tv;
	// 我们解析Json数据的网址
	private String path[] = new String[] {
			"http://litchiapi.jstv.com/api/GetFeeds?column=4&PageSize=20&pageIndex=1&val=100511D3BE5301280E0992C73A9DEC41",
			"http://litchiapi.jstv.com/api/GetFeeds?column=5&PageSize=20&pageIndex=1&val=100511D3BE5301280E0992C73A9DEC41",
			"http://litchiapi.jstv.com/api/GetFeeds?column=6&PageSize=20&pageIndex=1&val=100511D3BE5301280E0992C73A9DEC41",
			"http://litchiapi.jstv.com/api/GetFeeds?column=7&PageSize=20&pageIndex=1&val=100511D3BE5301280E0992C73A9DEC41",
			"http://litchiapi.jstv.com/api/GetFeeds?column=8&PageSize=20&pageIndex=1&val=100511D3BE5301280E0992C73A9DEC41", };

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		View view = inflater.inflate(R.layout.fragment, null);
		lv = (ListView) view.findViewById(R.id.lv);
		tv = (TextView) view.findViewById(R.id.tv);
		// 当ListView中还没有内容时，设置界面显示TextView
		lv.setEmptyView(tv);
		// 得到传来的索引的值，根据不同的索引加载不同的网络数据
		Bundle bundle = getArguments();
		int tabIndex = bundle.getInt("tabIndex");
		switch (tabIndex) {
		case 0:
			new MyTask().execute(path[0]);
			break;
		case 1:
			new MyTask().execute(path[1]);
			break;
		case 2:
			new MyTask().execute(path[2]);
			break;
		case 3:
			new MyTask().execute(path[3]);
			break;
		case 4:
			new MyTask().execute(path[4]);
			break;

		default:
			break;
		}
		return view;
	}

	// 异步任务加载数据得到List<Data>集合
	class MyTask extends AsyncTask<String, Void, List<Data>> {
		@SuppressWarnings("unchecked")
		@Override
		protected List<Data> doInBackground(String... params) {
			list = HttpUtils.getList(params[0]);
			return list;
		}

		@Override
		protected void onPostExecute(List<Data> result) {

			super.onPostExecute(result);
			// 给ListView设置适配器
			lv.setAdapter(new MyAdapter());
		}
	}

	// 创建自定义适配器
	class MyAdapter extends BaseAdapter {

		@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 View getView(int position, View convertView, ViewGroup parent) {
			final ViewHolder holder;
			if (convertView == null) {
				holder = new ViewHolder();
				convertView = LayoutInflater.from(getActivity()).inflate(
						R.layout.item, null);
				holder.tvSubject = (TextView) convertView
						.findViewById(R.id.tv_subject);
				holder.tvSummary = (TextView) convertView
						.findViewById(R.id.tv_summary);
				holder.tvChanged = (TextView) convertView
						.findViewById(R.id.tv_changed);
				holder.ivCover = (ImageView) convertView
						.findViewById(R.id.iv_cover);

				convertView.setTag(holder);
			} else {
				holder = (ViewHolder) convertView.getTag();
			}
			data = list.get(position);
			holder.tvChanged.setText(data.getChanged());
			holder.tvSubject.setText(data.getSubject());
			holder.tvSummary.setText(data.getSummary());
			String path = data.getCover();
			new ImageTask(new ImageCallback() {

				@Override
				public void send(Bitmap bitmap, String path) {
					holder.ivCover.setImageBitmap(bitmap);
				}
			}).execute(path);
			return convertView;
		}

		class ViewHolder {
			private TextView tvSubject, tvSummary, tvChanged;
			private ImageView ivCover;
		}
	}

	// 加载图片的异步任务
	class ImageTask extends AsyncTask<String, Void, Bitmap> {
		private ImageCallback callback;
		private String path;

		public ImageTask(ImageCallback callback) {
			super();
			this.callback = callback;
		}

		@Override
		protected Bitmap doInBackground(String... params) {
			Bitmap bitmap = null;
			try {
				URL url = new URL(params[0]);
				HttpURLConnection conn = (HttpURLConnection) url
						.openConnection();
				bitmap = BitmapFactory.decodeStream(conn.getInputStream());
			} catch (Exception e) {

				e.printStackTrace();
			}

			return bitmap;
		}

		@Override
		protected void onPostExecute(Bitmap result) {

			super.onPostExecute(result);
			if (result != null) {
				callback.send(result, path);
			}
		}
	}

	public interface ImageCallback {
		void send(Bitmap bitmap, String path);
	}
}

四、接下来是把我们要解析的数据封装成了一个类Data

package com.example.text_01_bean;

public class Data {

	private String subject;
	private String summary;
	private String changed;
	private String cover;
	public String getSubject() {
		return subject;
	}
	public void setSubject(String subject) {
		this.subject = subject;
	}
	public String getSummary() {
		return summary;
	}
	public void setSummary(String summary) {
		this.summary = summary;
	}
	public String getChanged() {
		return changed;
	}
	public void setChanged(String changed) {
		this.changed = changed;
	}
	public String getCover() {
		return cover;
	}
	public void setCover(String cover) {
		this.cover = cover;
	}
	
}

下面是把我们的网址解析为List<Data>集合的工具类HttpUtils：

package com.example.text_01_http;

import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;
import java.net.HttpURLConnection;
import java.net.URL;
import java.util.ArrayList;
import java.util.List;

import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;

import com.example.text_01_bean.Data;

import android.graphics.Bitmap;
import android.graphics.BitmapFactory;

public class HttpUtils {

	// 得到Json字符串的方法
	public static String getJsonContent(String path) {
		String result = "";
		BufferedReader bufr = null;
		try {
			URL url = new URL(path);
			HttpURLConnection conn = (HttpURLConnection) url.openConnection();
			bufr = new BufferedReader(new InputStreamReader(
					conn.getInputStream()));
			String line = "";
			while ((line = bufr.readLine()) != null) {
				result += line;
			}
		} catch (Exception e) {

			e.printStackTrace();
		} finally {
			try {
				bufr.close();
			} catch (IOException e) {

				e.printStackTrace();
			}
		}
		return result;
	}

	// 得到List<Data>集合的方法
	public static List<Data> getList(String path) {

		List<Data> list = new ArrayList<Data>();
		String json = getJsonContent(path);
		try {
			JSONObject obj = new JSONObject(json);
			JSONArray arr = obj.getJSONObject("paramz").getJSONArray("feeds");
			for (int j = 0; j < arr.length(); j++) {
				JSONObject obj2 = arr.getJSONObject(j).getJSONObject("data");
				Data data = new Data();
				data.setSubject(obj2.getString("subject"));
				data.setSummary(obj2.getString("summary"));
				data.setChanged(obj2.getString("changed"));
				data.setCover("http://litchiapi.jstv.com"
						+ obj2.getString("cover"));
				list.add(data);
			}
		} catch (JSONException e) {

			e.printStackTrace();
		}
		return list;
	}
}

好了，写了那么多，看一下运行结果吧：第一幅图是我们还没有得到数据时的显示

hi_0123

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
类似于网易新闻客户端的界面实现02

上篇博文中我们已经实现了网易新闻的大概视图，但是这次的实现和上次有点不同，但是大体的思路都是一样的。和上篇博文中的唯一不同是：上篇博文中我们是在ActionBar中通过添加Tab的方式添加titles，并实现Tab的监听事件而在本篇博文中我们实现的是在布局文件中添加titles并添加点击事件好了，我们直接看代码吧。一、首先是activity_main.xml文件：<Line
复制链接

扫一扫

专栏目录