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();
}
}
}
}