Viewpager+Fragment联动+水平滚动

原创 2016年06月01日 11:31:49
在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="match_parent"
    android:orientation="vertical" >
    -

    <HorizontalScrollView
        android:id="@+id/home_hsv"
        android:layout_width="fill_parent"
        android:layout_height="40dip"
        android:fadingEdge="none"
        android:scrollbars="none" >
 -

        <RelativeLayout
            android:id="@+id/rl_nav"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="top"
            android:background="#5AB0EB" >

            <RadioGroup
                android:id="@+id/home_group"
                android:layout_width="fill_parent"
                android:layout_height="38dip"
                android:layout_alignParentTop="true"
                android:background="#F2F2F2"
                android:orientation="horizontal" >
            </RadioGroup>

            <ImageView
                android:id="@+id/home_img"
                android:layout_width="1dip"
                android:layout_height="5dip"
                android:layout_alignParentBottom="true"
                android:background="#0f0"
                android:scaleType="matrix" />
        </RelativeLayout>
    </HorizontalScrollView>

    <android.support.v4.view.ViewPager
        android:id="@+id/home_vp"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

在Fragment中

package com.bwie.mynews.fragment;

import java.util.zip.Inflater;

import android.content.Context;
import android.os.AsyncTask;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.DisplayMetrics;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup.LayoutParams;
import android.view.animation.LinearInterpolator;
import android.view.animation.TranslateAnimation;
import android.widget.HorizontalScrollView;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.RadioGroup.OnCheckedChangeListener;

import com.bwie.mynews.R;
import com.bwie.mynews.adapter.HomeVpAdapter;
import com.bwie.mynews.base.BaseFragment;
import com.bwie.mynews.data.MyData;
import com.bwie.mynews.http.CustomerHttpClient;
import com.google.gson.Gson;

public class TypeFragment extends BaseFragment {

	private View view;
	private RadioGroup homeGroup;
	private HorizontalScrollView homeHsv;
	private ViewPager homeVp;
	private ImageView homeImg;
	private int indicatorWidth;
	private LayoutInflater mInflater;
	private int currentIndicatorLeft = 0;

	@Override
	public View getView(LayoutInflater inflater) {
		
		view = inflater.inflate(R.layout.fragment_type, null);
		return view;
	}

	@Override
	public void findView() {
		homeGroup = (RadioGroup) view.findViewById(R.id.home_group);
		homeHsv = (HorizontalScrollView) view.findViewById(R.id.home_hsv);
		homeVp = (ViewPager) view.findViewById(R.id.home_vp);
		homeImg = (ImageView) view.findViewById(R.id.home_img);
	}

	@Override
	public void initData() {
		
	}

	@Override
	public boolean hasHttp() {
		// TODO Auto-generated method stub
		return false;
	}

	@Override
	public void setData() {
		initImg();
		initHsz();
		initVp();
		//设置缓存的最大数目
//		homeVp.setOffscreenPageLimit(4);
	}

	@Override
	public void setListener() {
		homeVp.setOnPageChangeListener(new OnPageChangeListener() {
			
			@Override
			public void onPageSelected(int arg0) {
				if(homeGroup!=null && homeGroup.getChildCount()>arg0){
					((RadioButton)homeGroup.getChildAt(arg0)).performClick();
				}
			}
			
			@Override
			public void onPageScrolled(int arg0, float arg1, int arg2) {
				// TODO Auto-generated method stub
				
			}
			
			@Override
			public void onPageScrollStateChanged(int arg0) {
				// TODO Auto-generated method stub
				
			}
		});

		homeGroup.setOnCheckedChangeListener(new OnCheckedChangeListener() {
			
			@Override
			public void onCheckedChanged(RadioGroup group, int checkedId) {
				
				if(homeGroup.getChildAt(checkedId)!=null){
					
					TranslateAnimation animation = new TranslateAnimation(
							currentIndicatorLeft ,
							((RadioButton) homeGroup.getChildAt(checkedId)).getLeft(), 0f, 0f);
					animation.setInterpolator(new LinearInterpolator());
					animation.setDuration(100);
					animation.setFillAfter(true);
					
					//执行位移动画
					homeImg.startAnimation(animation);
					
					homeVp.setCurrentItem(checkedId);	//ViewPager 跟随一起 切换
					
					//记录当前 下标的距最左侧的 距离
					currentIndicatorLeft = ((RadioButton) homeGroup.getChildAt(checkedId)).getLeft();
					
					homeHsv.smoothScrollTo(
							(checkedId > 1 ? ((RadioButton) homeGroup.getChildAt(checkedId)).getLeft() : 0) - ((RadioButton) homeGroup.getChildAt(2)).getLeft(), 0);
				 }
			}
		});
	}

	private void initHsz() {
		//获取布局填充器
		mInflater = (LayoutInflater)getActivity().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
		for (int i = 0; i < MyData.HOME_TOP_ITEM.length; i++) {
			RadioButton rb=(RadioButton) mInflater.inflate(R.layout.item_radiogroup,null);
			rb.setId(i);
			rb.setText(MyData.HOME_TOP_ITEM[i]);
			rb.setLayoutParams(new LayoutParams(indicatorWidth,
					LayoutParams.MATCH_PARENT));
			
			homeGroup.addView(rb);
		}
	}

	private void initImg() {
		DisplayMetrics dm = new DisplayMetrics();
		getActivity().getWindowManager().getDefaultDisplay().getMetrics(dm);
		indicatorWidth = dm.widthPixels / 4;
		LayoutParams cursor_Params = homeImg.getLayoutParams();
		cursor_Params.width = indicatorWidth;// 初始化滑动下标的宽
		homeImg.setLayoutParams(cursor_Params);
	}

	private void initVp() {
		HomeVpAdapter adapter=new HomeVpAdapter(this.getChildFragmentManager(), getActivity(), MyData.HOME_TOP_ITEM);
		homeVp.setAdapter(adapter);
	}

}

ViewPager适配器可以自定义

导航栏联动效果( HorizontalScrollView+ViewPager)

依然直接上效果图 当导航栏有多个选项,超出了手机屏幕的宽度,我们需要一个导航栏和下面内容联动的效果。上面两个图对比可以看出,当滑动到第四页时,整个导航栏都往左移动了。导航栏在initGroup()动态...
  • zxc123e
  • zxc123e
  • 2016年08月26日 17:22
  • 3376

水平/垂直滚动联动

证券炒股软件经常会遇到有很多Tab要显示,使得控件的上下/垂直滚动联动经常要使用到,比如撤单,查询等业务都要用到这个控件,今天刚好项目没那么紧,就把这个控件的实现总结一下。 先看看我们实现后的效果 ...
  • jiang547860818
  • jiang547860818
  • 2016年11月15日 21:09
  • 554

ViewPager+TabLayout+Fragment 的联动效果

实现这个效果需要以下几步 1.导入design包 2.创建若干个fragment 3.创建MyFragmentPagerAdapter继承FragmentPagerAdapter 4.在Mai...
  • zhangxxxq
  • zhangxxxq
  • 2018年01月31日 16:23
  • 39

水平滚动和ViewPager联动

首先,继承FragmentActivity -------------------------------------------------------------- public class ...
  • qq_34060722
  • qq_34060722
  • 2016年05月31日 20:59
  • 156

在easyui中实现datagrid滚动条联动

//竖向滚动条联动 var contents = $('#importform div.datagrid-body'); contents.scroll(function () { ...
  • yang_lover
  • yang_lover
  • 2016年07月22日 16:28
  • 3093

Android Fragment+ViewPager实现循环滑动

关于实现ViewPager循环滑动的方法有几种,之前用过加最大值的方法,但是有点问题,所以本篇文章主要介绍的是前后各加一个项的方法,首先看代码(布局代码我就不贴出来了,太简单了,就是一个viewpag...
  • u014483723
  • u014483723
  • 2015年07月27日 16:46
  • 2169

Android实现两个ScrollView互相联动,同步滚动的效果

公众号:smart_android 作者:loonggg 点击“阅读原文”,可查看更多内容和干货 最近在做一个项目,用到了两个ScrollView互相联动的效果,简单来说联动效果意思就是滑动...
  • loongggdroid
  • loongggdroid
  • 2015年08月12日 10:34
  • 5373

viewPager+fragment实现循环滚动

主要有两个思路:      1、viewPager的适配器 getCount() 方法返回Integer.max;  getItem() 方法 返回 list.get(position%list.s...
  • ylj15503473366
  • ylj15503473366
  • 2016年03月10日 12:02
  • 1695

Android 垂直与水平滚动条:Scrollview与HorizontalScrollView

一、ScrollView介绍  滚动视图ScrollView由FrameLayout派生而出,它的内部最多只能包含一个组件,而它的作用是为该组件添加垂直滚动条,使它可以滑动。那么我们为什么要学习Src...
  • danfengw
  • danfengw
  • 2015年09月08日 08:43
  • 2584

js控制滚动条联动

//控制两个div的滚动条联动,便于页面对比 function funcsrcoll1() { document.getElementById("div2").scrollLeft = documen...
  • u011411069
  • u011411069
  • 2015年09月05日 18:21
  • 1652
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Viewpager+Fragment联动+水平滚动
举报原因:
原因补充:

(最多只允许输入30个字)