新闻、资讯类APP首页模板

viewpager + fragment + 列表页中上拉加载、下拉刷新 + 不影响listView的viewpager

在很多资讯类APP这些控件都是经常用到的，比如说今日头条的主界面。
顶部一个可滑动的TAG标签组，下面是一个可上拉、下拉的LISTVIEW，listView中顶部又有一个可滑动的广告位。
这是一个很常见的布局，但是要开发起来还是要费上一两天时间。
所以我将这些功能做了一下简单的整合，以后遇到类似的界面可以轻松实现，快速完成功能上的开发。
效果图如下,界面较丑。


**看到这两个界面同学们大概就明白这个界面的功能了，废话就不多说了。
http://download.csdn.net/detail/qq_26338009/9254113
下载地址在这里，需要的可以下载源码。**
另外还要说明一下参考的两位牛人，Android_ViewPager_PullrefershListView 和 ZJ_HorizontalScrollView的作者。时间有点久找不到原文了 不好意思。
贴一下主界面的代码：

package com.zj.horizontalsrollview;

import java.util.ArrayList;
import java.util.List;

import android.app.Activity;
import android.app.ListFragment;
import android.content.Context;
import android.os.Bundle;
import android.os.Parcelable;
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.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup.MarginLayoutParams;
import android.view.animation.Animation;
import android.view.animation.AnimationSet;
import android.view.animation.AnimationUtils;
import android.view.animation.TranslateAnimation;
import android.widget.HorizontalScrollView;
import android.widget.ImageView;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.RadioGroup.OnCheckedChangeListener;
import android.widget.RelativeLayout;
import android.widget.RelativeLayout.LayoutParams;
/**
 * HorizontalScrollView和ViewPager联动效果
 * 上面为HorizontalScrollView,下面为ViewPager
 * @author zj
 * 2012-5-23 下午1:07:06
 */
public class MainActivity extends FragmentActivity implements OnCheckedChangeListener{
    private RadioGroup mRadioGroup;
    private ImageView mImageView;
    private float mCurrentCheckedRadioLeft;//当前被选中的RadioButton距离左侧的距离
    private HorizontalScrollView mHorizontalScrollView;//上面的水平滚动控件
    private ViewPager mViewPager;   //下方的可横向拖动的控件
    private ArrayList<View> mViews;//用来存放下方滚动的layout(layout_1,layout_2,layout_3)

    private List<RadioButton> lstRadios = new ArrayList<RadioButton>();
    public static Context context;
    private List<Fragment> lstFragment = new ArrayList<Fragment>();
    //static View viewPager;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
      context = this;
      //viewPager = LayoutInflater.from(MainActivity.context).inflate(R.layout.index_photos, null);

        iniController();
        iniListener();
        iniFragment();

        lstRadios.get(0).setChecked(true);
        mViewPager.setCurrentItem(0);
        mCurrentCheckedRadioLeft = getCurrentCheckedRadioLeft(0);

    }

    private void iniController() {
        // TODO Auto-generated method stub
        mRadioGroup = (RadioGroup)findViewById(R.id.radioGroup);

        for(int i=0;i<4;i++){
            RadioButton radioButton = structRadioButton(i);
            mRadioGroup.addView(radioButton);
            lstRadios.add(radioButton);
        }

        mImageView = (ImageView)findViewById(R.id.img1);

        mHorizontalScrollView = (HorizontalScrollView)findViewById(R.id.horizontalScrollView);

        mViewPager = (ViewPager)findViewById(R.id.pager);
    }

    int anRadioButtonWidth = 0 ;

    /**
     * 构建一个 按钮
     * @param id
     * @return
     */
    private RadioButton structRadioButton(int id){
        RadioButton radioButton = (RadioButton) LayoutInflater.from(this).inflate(R.layout.radio,null);
        radioButton.setId(id);
        radioButton.setText(id+"号");


        //int gwidth = PublicUtil.getwidthPixels(context);//屏幕宽度
//      int width = gwidth/4;
//      if (width<200) {
//          width = PublicUtil.dip2px(context, 120);
//      }
        int height=PublicUtil.dip2px(context, 50);
        int width = PublicUtil.dip2px(context, 100);
        anRadioButtonWidth = width;
        radioButton.setLayoutParams(new LayoutParams(width, height));

        return radioButton;
    }

    private void iniFragment() {
        // TODO Auto-generated method stub

        for(int i=0;i<4;i++){
            if(i == 0){
                lstFragment.add(OneFragment.newInstance(i));
            } else{
                lstFragment.add(TwoFragmnet.newInstance(i));
            }
        }

        mViewPager.setAdapter(new MyFragmentPagerAdapter(getSupportFragmentManager()));//设置ViewPager的适配器
    }

    /**
     * RadioGroup点击CheckedChanged监听
     */
    @Override
    public void onCheckedChanged(RadioGroup group, int checkedId) {

        AnimationSet _AnimationSet = new AnimationSet(true);
        TranslateAnimation _TranslateAnimation;
        int duration = 800;

        float animationXto = anRadioButtonWidth*(checkedId);
        if(checkedId == 0){
            animationXto = 0;
        }
        _TranslateAnimation = new TranslateAnimation(mCurrentCheckedRadioLeft, animationXto , 0f, 0f);
        _AnimationSet.addAnimation(_TranslateAnimation);
        _AnimationSet.setFillBefore(true);
        _AnimationSet.setFillAfter(true);
        _AnimationSet.setDuration(duration);

        mImageView.startAnimation(_AnimationSet);//开始上面蓝色横条图片的动画切换
        mViewPager.setCurrentItem(checkedId);//让下方ViewPager跟随上面的HorizontalScrollView切换

        mCurrentCheckedRadioLeft = getCurrentCheckedRadioLeft(checkedId);//更新当前蓝色横条距离左边的距离

        mHorizontalScrollView.smoothScrollTo((int)animationXto, 0);

        //Log.e("gg","mCurrentCheckedRadioLeft: "+mCurrentCheckedRadioLeft);
        //Log.e("gg","smoothScrollTo: "+((int)animationXto));
    }

    /**
     * 获得当前被选中的RadioButton距离左侧的距离
     */
    private float getCurrentCheckedRadioLeft(int id) {
        // TODO Auto-generated method stub
        return id*anRadioButtonWidth;
    }

    private void iniListener() {
        // TODO Auto-generated method stub

        mRadioGroup.setOnCheckedChangeListener(this);
        mViewPager.setOnPageChangeListener(new MyPagerOnPageChangeListener());
    }

    /**
     * FragmentPagerAdapter的适配器
     */
    private class MyFragmentPagerAdapter extends FragmentPagerAdapter{

        public MyFragmentPagerAdapter(FragmentManager fm) {
            super(fm);
            // TODO Auto-generated constructor stub
        }

        @Override
        public Fragment getItem(int arg0) {
            // TODO Auto-generated method stub
            return (lstFragment == null || lstFragment.size() == 0) ? null: lstFragment.get(arg0);
            //return OneFragment.newInstance(arg0);
        }

        @Override
        public int getCount() {
            // TODO Auto-generated method stub
            return 4;
        }

    }
    /**
     * ViewPager的PageChangeListener(页面改变的监听器)
     * @author zj
     * 2012-5-24 下午3:14:27
     */
    private class MyPagerOnPageChangeListener implements OnPageChangeListener{

        @Override
        public void onPageScrollStateChanged(int arg0) {
            // TODO Auto-generated method stub

        }

        @Override
        public void onPageScrolled(int arg0, float arg1, int arg2) {
            // TODO Auto-generated method stub

        }
        /**
         * 滑动ViewPager的时候,让上方的HorizontalScrollView自动切换
         */
        @Override
        public void onPageSelected(int position) {
            // TODO Auto-generated method stub


            if (position == 0) {
                mViewPager.setCurrentItem(0);
                lstRadios.get(0).performClick();
            } else {
                lstRadios.get(position).performClick();
            }

        }

    }

}