智慧北京开发第三天（下）

头条新闻标题设置 & 使用ViewpagerIndicator实现头条新闻位置指示器

tab_detail_pager.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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="160dp">

        <com.xbmu.wisdombj.view.NewTopViewPager
            android:id="@+id/vp_tab_top"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:background="#a000">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:padding="3dp"
                android:id="@+id/tv_news_title"
                android:textColor="#fff" />
            <com.viewpagerindicator.CirclePageIndicator
                android:id="@+id/indicator"
                android:padding="10dp"
                android:layout_alignParentRight="true"
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                app:radius="3dp"
                app:fillColor="#f00"
                app:pageColor="#fff"
                />
        </RelativeLayout>
    </RelativeLayout>
    <ListView
        android:id="@+id/lv_tab_list"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

    </ListView>
</LinearLayout>

TabDetailPager.java

package com.xbmu.wisdombj.base;

import android.app.Activity;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.TextView;
import android.widget.Toast;
import com.google.gson.Gson;
import com.lidroid.xutils.BitmapUtils;
import com.lidroid.xutils.HttpUtils;
import com.lidroid.xutils.ViewUtils;
import com.lidroid.xutils.exception.HttpException;
import com.lidroid.xutils.http.ResponseInfo;
import com.lidroid.xutils.http.callback.RequestCallBack;
import com.lidroid.xutils.http.client.HttpRequest.HttpMethod;
import com.lidroid.xutils.view.annotation.ViewInject;
import com.viewpagerindicator.CirclePageIndicator;
import com.xbmu.wisdombj.R;
import com.xbmu.wisdombj.bean.NewsData.NewsTabData;
import com.xbmu.wisdombj.bean.TabData;
import com.xbmu.wisdombj.bean.TabData.TopNewsData;
import com.xbmu.wisdombj.global.GlobalVariables;

import java.util.ArrayList;


/**
 * 页签详情页，表示每一个页签的对象
 * Created by Administrator on 2016/2/7 0007.
 */
public class TabDetailPager extends BaseNewsDetailPager implements ViewPager.OnPageChangeListener{

    private NewsTabData mTabData;//新闻的 11个子标签标题

    @ViewInject(R.id.vp_tab_top)
    private ViewPager vpTabPagerTop;

    @ViewInject(R.id.lv_tab_list)
    private ListView lvTabList;

    @ViewInject(R.id.tv_news_title)
    private TextView tvNewsTitle;

    @ViewInject(R.id.indicator)
    private CirclePageIndicator indicator;

    private String mUrl;
    private TabData tabData;//页签数据
    private ArrayList<TopNewsData> topNewsDatas;//头条新闻数据集合
    private TopNewsData topNewsData;//头条新闻数据

    public TabDetailPager(Activity mActivity, NewsTabData newsTabDatas) {
        super(mActivity);
        this.mTabData = newsTabDatas;
        mUrl = GlobalVariables.BASE_URL + newsTabDatas.url;
    }

    @Override
    public View initView() {
        View view = View.inflate(mActivity, R.layout.tab_detail_pager,null);
        ViewUtils.inject(this,view);
        return view;
    }

    @Override
    public void initData() {
        super.initData();
        getDataFromServer();

    }

    /**
     * 从服务器获取数据
     */
    public void getDataFromServer() {
        HttpUtils httpUtils = new HttpUtils();
        httpUtils.send(HttpMethod.GET, mUrl, new RequestCallBack<String>() {
            @Override
            public void onSuccess(ResponseInfo<String> responseInfo) {
                String result = responseInfo.result;
                System.out.print("从网络获取的子页签详情数据:" + result);

                //解析数据
                paserData(result);
            }

            @Override
            public void onFailure(HttpException e, String msg) {
                Toast.makeText(mActivity, msg, Toast.LENGTH_SHORT).show();
                e.printStackTrace();
            }
        });
    }

    /**
     * 解析数据
     * @param result
     */
    private void paserData(String result) {
        Gson gson = new Gson();
        tabData = gson.fromJson(result, TabData.class);
        topNewsDatas = tabData.data.topnews;
        if(topNewsDatas!=null){
            vpTabPagerTop.setAdapter(new NewsTopAdapter());
            indicator.setOnPageChangeListener(this);
            indicator.setSnap(true);//支持快照显示
            indicator.onPageSelected(0);//让指示器重新定位到第一个点
            indicator.setViewPager(vpTabPagerTop);
            
            tvNewsTitle.setText(topNewsDatas.get(0).title);
        }
    }

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    @Override
    public void onPageSelected(int position) {
        tvNewsTitle.setText(topNewsDatas.get(position).title);
    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }

    /**
     * 新闻头条适配器
     */
    private class NewsTopAdapter extends PagerAdapter{
        private BitmapUtils bitmapUtils;
        public NewsTopAdapter() {
            bitmapUtils = new BitmapUtils(mActivity);
            bitmapUtils.configDefaultLoadingImage(R.drawable.topnews_item_default);//设置默认图片
        }

        @Override
        public int getCount() {
            return topNewsDatas.size();
        }

        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view == object;
        }

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            ImageView imageView = new ImageView(mActivity);
            imageView.setScaleType(ImageView.ScaleType.FIT_XY);//基于控件大小填充图片
            topNewsData = topNewsDatas.get(position);
            bitmapUtils.display(imageView, topNewsData.topimage);//传递imageView对象和图片地址
            container.addView(imageView);

            System.out.println("topNews：" + position);
            return imageView;
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView((View)object);
        }
    }
}

运行效果：

新闻列表展示 & item布局编写

new_list_item.xml

<?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">
    <ImageView
        android:id="@+id/iv_pic"
        android:layout_width="140dp"
        android:layout_height="80dp"
        android:padding="1dp"
        android:scaleType="centerCrop"
        android:background="@android:color/darker_gray"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:src="@drawable/image_demo"/>
    <TextView
        android:id="@+id/tv_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="20dp"
        android:layout_toRightOf="@id/iv_pic"
        android:textColor="#000"
        android:maxLines="2"
        android:ellipsize="end"
        android:textSize="20sp"
        android:text="新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻"/>
    <TextView
        android:id="@+id/tv_date"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@id/tv_title"
        android:text="2016-02-09 10:10"
        android:layout_alignBottom="@id/iv_pic"
        android:textColor="@android:color/darker_gray"
        android:textSize="16sp"/>
</RelativeLayout>

效果图：

tab_detail_pager.xml

<?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="wrap_content"
    android:orientation="vertical">

    <ListView
        android:id="@+id/lv_tab_list"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">
    </ListView>
</LinearLayout>

new_top_ads.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <com.xbmu.wisdombj.view.NewTopViewPager
        android:id="@+id/vp_tab_top"
        android:layout_width="match_parent"
        android:layout_height="160dp" />

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="#a000">

        <TextView
            android:id="@+id/tv_news_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="3dp"
            android:textColor="#fff" />

        <com.viewpagerindicator.CirclePageIndicator
            android:id="@+id/indicator"
            app:fillColor="#f00"
            app:pageColor="#fff"
            app:radius="3dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:padding="10dp" />
    </RelativeLayout>
</RelativeLayout>

TabDetailPager.java

package com.xbmu.wisdombj.base;

import android.app.Activity;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
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 android.widget.Toast;
import com.google.gson.Gson;
import com.lidroid.xutils.BitmapUtils;
import com.lidroid.xutils.HttpUtils;
import com.lidroid.xutils.ViewUtils;
import com.lidroid.xutils.exception.HttpException;
import com.lidroid.xutils.http.ResponseInfo;
import com.lidroid.xutils.http.callback.RequestCallBack;
import com.lidroid.xutils.http.client.HttpRequest.HttpMethod;
import com.lidroid.xutils.view.annotation.ViewInject;
import com.viewpagerindicator.CirclePageIndicator;
import com.xbmu.wisdombj.R;
import com.xbmu.wisdombj.bean.NewsData.NewsTabData;
import com.xbmu.wisdombj.bean.TabData;
import com.xbmu.wisdombj.bean.TabData.TabNewsData;
import com.xbmu.wisdombj.bean.TabData.TopNewsData;
import com.xbmu.wisdombj.global.GlobalVariables;
import java.util.ArrayList;


/**
 * 页签详情页，表示每一个页签的对象
 * Created by Administrator on 2016/2/7 0007.
 */
public class TabDetailPager extends BaseNewsDetailPager implements ViewPager.OnPageChangeListener {

    private NewsTabData mTabData;//新闻的 11个子标签标题

    @ViewInject(R.id.vp_tab_top)
    private ViewPager vpTabPagerTop;

    @ViewInject(R.id.lv_tab_list)
    private ListView lvTabList;

    @ViewInject(R.id.tv_news_title)
    private TextView tvNewsTitle;

    @ViewInject(R.id.indicator)
    private CirclePageIndicator indicator;

    private String mUrl;
    private TabData tabData;//页签数据
    private ArrayList<TopNewsData> topNewsDatas;//头条新闻数据集合
    private TopNewsData topNewsData;//头条新闻数据
    private ArrayList<TabNewsData> tabNewsDatas;//新闻列表对象
    private View newTopView;//新闻顶部广告条

    public TabDetailPager(Activity mActivity, NewsTabData newsTabDatas) {
        super(mActivity);
        this.mTabData = newsTabDatas;
        mUrl = GlobalVariables.BASE_URL + newsTabDatas.url;
    }

    @Override
    public View initView() {
        View view = View.inflate(mActivity, R.layout.tab_detail_pager, null);
        newTopView = View.inflate(mActivity, R.layout.new_top_ads, null);
        ViewUtils.inject(this, view);
        ViewUtils.inject(this, newTopView);
        return view;
    }

    @Override
    public void initData() {
        super.initData();
        getDataFromServer();

    }

    /**
     * 从服务器获取数据
     */
    public void getDataFromServer() {
        HttpUtils httpUtils = new HttpUtils();
        httpUtils.send(HttpMethod.GET, mUrl, new RequestCallBack<String>() {
            @Override
            public void onSuccess(ResponseInfo<String> responseInfo) {
                String result = responseInfo.result;
                System.out.print("从网络获取的子页签详情数据:" + result);

                //解析数据
                paserData(result);
            }

            @Override
            public void onFailure(HttpException e, String msg) {
                Toast.makeText(mActivity, msg, Toast.LENGTH_SHORT).show();
                e.printStackTrace();
            }
        });
    }

    /**
     * 解析数据
     *
     * @param result
     */
    private void paserData(String result) {
        Gson gson = new Gson();
        tabData = gson.fromJson(result, TabData.class);
        topNewsDatas = tabData.data.topnews;
        if (topNewsDatas != null) {
            vpTabPagerTop.setAdapter(new NewsTopAdapter());
            indicator.setOnPageChangeListener(this);
            indicator.setSnap(true);//支持快照显示
            indicator.onPageSelected(0);//让指示器重新定位到第一个点
            indicator.setViewPager(vpTabPagerTop);

            tvNewsTitle.setText(topNewsDatas.get(0).title);
        }
        tabNewsDatas = tabData.data.news;
        if (tabNewsDatas != null) {
            lvTabList.addHeaderView(newTopView);
            lvTabList.setAdapter(new NewsItemAdapter());
        }
    }

    private class NewsItemAdapter extends BaseAdapter {

        private  BitmapUtils bitmapUtils;

        public NewsItemAdapter() {
            bitmapUtils = new BitmapUtils(mActivity);
        }

        @Override
        public int getCount() {
            return tabNewsDatas.size();
        }

        @Override
        public TabNewsData getItem(int position) {
            return tabNewsDatas.get(position);
        }

        @Override
        public long getItemId(int position) {
            return position;
        }

        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            ViewHolder viewHolder;
            if(convertView==null){
                convertView = View.inflate(mActivity,R.layout.new_list_item,null);
                viewHolder = new ViewHolder();
                viewHolder.ivNewIcon = (ImageView) convertView.findViewById(R.id.iv_pic);
                viewHolder.tvNewTitle = (TextView) convertView.findViewById(R.id.tv_title);
                viewHolder.tvNewDate = (TextView) convertView.findViewById(R.id.tv_date);
                convertView.setTag(viewHolder);
            }else{
                viewHolder = (ViewHolder) convertView.getTag();
            }
            viewHolder.tvNewTitle.setText(getItem(position).title);
            viewHolder.tvNewDate.setText(getItem(position).pubdate);
            bitmapUtils.display(viewHolder.ivNewIcon,getItem(position).listimage);

            return convertView;
        }
    }
    static class ViewHolder{
        ImageView ivNewIcon;
        TextView tvNewTitle;
        TextView tvNewDate;
    }

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    @Override
    public void onPageSelected(int position) {
        tvNewsTitle.setText(topNewsDatas.get(position).title);
    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }

    /**
     * 新闻头条适配器
     */
    private class NewsTopAdapter extends PagerAdapter {
        private BitmapUtils bitmapUtils;

        public NewsTopAdapter() {
            bitmapUtils = new BitmapUtils(mActivity);
            bitmapUtils.configDefaultLoadingImage(R.drawable.topnews_item_default);//设置默认图片
        }

        @Override
        public int getCount() {
            return topNewsDatas.size();
        }

        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view == object;
        }

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            ImageView imageView = new ImageView(mActivity);
            imageView.setScaleType(ImageView.ScaleType.FIT_XY);//基于控件大小填充图片
            topNewsData = topNewsDatas.get(position);
            bitmapUtils.display(imageView, topNewsData.topimage);//传递imageView对象和图片地址
            container.addView(imageView);

            System.out.println("topNews：" + position);
            return imageView;
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView((View) object);
        }
    }
}

运行效果：

全部代码：
http://download.csdn.net/detail/btt2013/9429457