关闭

水平滚动和ViewPager联动

155人阅读 评论(0) 收藏 举报
分类:

首先,继承FragmentActivity

--------------------------------------------------------------

public class MainActivity extends FragmentActivity {


public static final String ARGUMENTS_NAME = "arg";
private RelativeLayout rl_nav;
private HorizontalScrollView mHsv;
private RadioGroup rg_nav_content;
private ImageView iv_nav_indicator;
private ImageView iv_nav_left;
private ImageView iv_nav_right;
private ViewPager mViewPager;
private int indicatorWidth;
public static String[] tabTitle = { "选项1", "选项2", "选项3", "选项4", "选项5" }; // 标题
private LayoutInflater mInflater;
private TabFragmentPagerAdapter mAdapter;
private int currentIndicatorLeft = 0;


@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);


findViewById();
initView();
setListener();
}


private void setListener() {
mViewPager.setOnPageChangeListener(new OnPageChangeListener() {
@Override
public void onPageSelected(int position) {
if (rg_nav_content != null
&& rg_nav_content.getChildCount() > position) {
((RadioButton) rg_nav_content.getChildAt(position))
.performClick();
}
}


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


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


rg_nav_content
.setOnCheckedChangeListener(new OnCheckedChangeListener() {


@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {


if (rg_nav_content.getChildAt(checkedId) != null) {


TranslateAnimation animation = new TranslateAnimation(
currentIndicatorLeft,
((RadioButton) rg_nav_content
.getChildAt(checkedId)).getLeft(),
0f, 0f);
animation.setInterpolator(new LinearInterpolator());
animation.setDuration(100);
animation.setFillAfter(true);


// 执行位移动画
iv_nav_indicator.startAnimation(animation);


mViewPager.setCurrentItem(checkedId); // ViewPager
// 跟随一起 切换


// 记录当前 下标的距最左侧的 距离
currentIndicatorLeft = ((RadioButton) rg_nav_content
.getChildAt(checkedId)).getLeft();


mHsv.smoothScrollTo(
(checkedId > 1 ? ((RadioButton) rg_nav_content
.getChildAt(checkedId)).getLeft()
: 0)
- ((RadioButton) rg_nav_content
.getChildAt(2)).getLeft(),
0);
}
}
});
}


private void initView() {
DisplayMetrics dm = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(dm);
indicatorWidth = dm.widthPixels / 4;
LayoutParams cursor_Params = iv_nav_indicator.getLayoutParams();
cursor_Params.width = indicatorWidth;// 初始化滑动下标的宽
iv_nav_indicator.setLayoutParams(cursor_Params);
// mHsv.setSomeParam(rl_nav, iv_nav_left, iv_nav_right, this);
// 获取布局填充器
mInflater = (LayoutInflater) this
.getSystemService(LAYOUT_INFLATER_SERVICE);
// 另一种方式获取
// LayoutInflater mInflater = LayoutInflater.from(this);
initNavigationHSV();
mAdapter = new TabFragmentPagerAdapter(getSupportFragmentManager());
mViewPager.setAdapter(mAdapter);
}


private void initNavigationHSV() {
rg_nav_content.removeAllViews();
for (int i = 0; i < tabTitle.length; i++) {
RadioButton rb = (RadioButton) mInflater.inflate(
R.layout.nav_radiogroup_item, null);
rb.setId(i);
rb.setText(tabTitle[i]);
rb.setLayoutParams(new LayoutParams(indicatorWidth,
LayoutParams.MATCH_PARENT));
rg_nav_content.addView(rb);
}


}


private void findViewById() {
rl_nav = (RelativeLayout) findViewById(R.id.rl_nav);
mHsv = (HorizontalScrollView) findViewById(R.id.mHsv);
rg_nav_content = (RadioGroup) findViewById(R.id.rg_nav_content);
iv_nav_indicator = (ImageView) findViewById(R.id.iv_nav_indicator);
iv_nav_left = (ImageView) findViewById(R.id.iv_nav_left);
iv_nav_right = (ImageView) findViewById(R.id.iv_nav_right);
mViewPager = (ViewPager) findViewById(R.id.mViewPager);
}


public static class TabFragmentPagerAdapter extends FragmentPagerAdapter {


public TabFragmentPagerAdapter(FragmentManager fm) {
super(fm);
}


@Override
public Fragment getItem(int arg0) {
Fragment ft = null;
switch (arg0) {
case 0:
ft = new LaunchUIFragment();
break;


default:
ft = new CommonUIFragment();


Bundle args = new Bundle();
args.putString(ARGUMENTS_NAME, tabTitle[arg0]);
ft.setArguments(args);


break;
}
return ft;
}


@Override
public int getCount() {


return tabTitle.length;
}


}
}

--------------------------------创建LaunchUIFragment---------------------------------

package com.example.scvp;


import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class LaunchUIFragment extends Fragment {


@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {

View rootView = inflater.inflate(R.layout.fragment_selection_launch, container, false);

return rootView;
}
@Override
public void onActivityCreated(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onActivityCreated(savedInstanceState);
}

}

---------------------创建CommonUIFragment------------------------------------

package com.example.scvp;


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.TextView;


public class CommonUIFragment extends Fragment {

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {

View rootView = inflater.inflate(R.layout.fragment_selection_common, container, false);

TextView tv_tabName = (TextView) rootView.findViewById(R.id.tv_tabName);

Bundle bundle = getArguments();

tv_tabName.setText(bundle.getString(MainActivity.ARGUMENTS_NAME, ""));

return rootView;
}
@Override
public void onActivityCreated(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onActivityCreated(savedInstanceState);
}

}

------------------------------------主布局---------------------------------------------

<RelativeLayout 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"
    tools:context=".MainActivity" >


    
    <RelativeLayout
        android:id="@+id/rl_tab"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="#F2F2F2" >


        <HorizontalScrollView
            android:id="@+id/mHsv"
            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/rg_nav_content"
                    android:layout_width="fill_parent"
                    android:layout_height="38dip"
                    android:layout_alignParentTop="true"
                    android:background="#F2F2F2"
                    android:orientation="horizontal" >
                </RadioGroup>


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


        <ImageView
            android:id="@+id/iv_nav_left"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true"
            android:contentDescription="@string/nav_desc"
            android:paddingBottom="1dip"
            android:visibility="gone" >
        </ImageView>


        <ImageView
            android:id="@+id/iv_nav_right"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:contentDescription="@string/nav_desc"
            android:paddingBottom="1dip"
            android:visibility="visible" >
        </ImageView>
    </RelativeLayout>


    <android.support.v4.view.ViewPager
        android:id="@+id/mViewPager"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_below="@id/rl_tab"
        android:layout_gravity="center"
        android:background="#ffffff"
        android:flipInterval="30"
        android:persistentDrawingCache="animation" />


</RelativeLayout>

-------------------创建布局 nav_radiogroup_item-----------

<?xml version="1.0" encoding="utf-8"?>
<RadioButton xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="0dip"
    android:layout_height="fill_parent"
    android:background="#F2F2F2"
    android:button="@null"
    android:checked="true"
    android:gravity="center"
    android:text=""
    android:textColor="@drawable/rb_blue_bg"
    android:textSize="14.0dip" />

-------------------创建fragment_selection_common

<?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" >
    
    <TextView 
        android:layout_width="300dp"
        android:layout_height="wrap_content"
    android:textSize="18sp"
    android:text="@string/common_intro"
        />
    
    <TextView 
        android:id="@+id/tv_tabName"
        android:layout_marginTop="30dp"
        android:layout_width="wrap_content"
        android:layout_height="30dp"
        android:layout_gravity="center"
    android:textSize="20sp"
        />


</LinearLayout>

----------------------创建fragment_selection_launch-------------------------

<?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" >
    
    <TextView android:id="@+id/tv_intro"
            android:layout_width="300dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:layout_marginBottom="16dp"
            android:text="@string/launch_intro"/>
    
    <Button android:id="@+id/bt_click"
            android:layout_width="300dp"
            android:layout_height="wrap_content"
            android:layout_marginBottom="16dp"
            android:text="@string/launch_click_me"/>


</LinearLayout>

---------------------在drawable文件夹下创建rb_blue_bg选择器

<?xml version="1.0" encoding="UTF-8"?>
<selector
  xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:color="#5AB0EB" />
    <item android:state_checked="false" android:color="#000000"/>
</selector>

1
0
查看评论

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

依然直接上效果图 当导航栏有多个选项,超出了手机屏幕的宽度,我们需要一个导航栏和下面内容联动的效果。上面两个图对比可以看出,当滑动到第四页时,整个导航栏都往左移动了。导航栏在initGroup()动态生成,注意联动效果的控制,其他都很简单,直接上代码。IndexActivity类全部代码/**Cre...
  • zxc123e
  • zxc123e
  • 2016-08-26 17:22
  • 3363

水平垂直都可滑动的HorizontalVerticalViewPager实现

水平垂直都可滑动的HorizontalVerticalViewPager实现自定义一个可以在垂直方向上滑动的ViewPager,同时支持水平和垂直方向手动切换和自动切换(根据手势判断),垂直方向的实现通过PageTransformer来完成,自动切换功能则涉及到手势的相关内容。一下是内容简介: 垂直...
  • Violet_yang
  • Violet_yang
  • 2016-09-02 16:31
  • 1034

Android_ViewPager_实现多个图片水平滚动

1.示意图                       2.实现分析 (1).xml配置 <LinearLayout android:id="...
  • strawberry2013
  • strawberry2013
  • 2013-11-21 17:25
  • 4489

如何实现两个ViewPager的联动

以前写过一篇文章,讲的是如何实现zaker5.0的引导界面效果,见 仿zaker最新版本引导界面的视图联动效果(修改viewpager实现)  ,没有写完就了事了,这篇文章算是对那篇的继续。 我们先来看看最终效果: 联动ViewPager的意思就是当一个viewpager在滑动的时候,...
  • jianghejie123
  • jianghejie123
  • 2014-11-03 10:39
  • 1837

ViewPager+scrollview的水平滚动

XML布局                  android:id="@+id/hsv"       &...
  • huimeiad
  • huimeiad
  • 2016-05-18 09:56
  • 140

三:tabLayout与ViewPager联动使用

去财务开了下去年网费用的发票,被告知只有周五才能开生了我一肚子气,得出一个结论所有事业单位的财务就没有好东西,然后气鼓鼓的回来继续撸代码,之前实现的是一组菜单,接着再来实现第一个模块新闻列表,今天先把ViewPage的框架搞好,实现好之后是这个样子的: 其实本来只用ViewPager也能实现类...
  • SuoMaLiXiongMao
  • SuoMaLiXiongMao
  • 2016-05-16 15:56
  • 3829

HorizontalScrollView和ViewPager联动效果

以下代码为网上下载的,经测试可以运行,我只是加了一些注释,供大家参考MainActivity/** * HorizontalScrollView和ViewPager联动效果 上面为HorizontalScrollView,下面为ViewPager * * @author zj 2012-5-...
  • Android_Study_OK
  • Android_Study_OK
  • 2015-06-19 16:26
  • 4001

水平/垂直滚动联动

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

Android : ViewPager+RecyclerView的联动效果

今天有个需求,上面是一组图片,下面也是一组图片,要求上面和下面的图片都能滑动,然后2者之间能联动,通俗讲就是上面的选中了下面也要跟着滑到那个图片,然后下面的图片滑动了上面也要跟着选中那个图片,所以产生了联动效果。 类似这样的,然后我就开始想了  上面一个recyclerview ...
  • qq_27263999
  • qq_27263999
  • 2016-10-13 18:04
  • 3650

安卓手把手教你实现RecycleView横向和ViewPage的级联滑动

之前做过一个horizontalScrollView+viewpage的级联滑动,总结如下: 既然我们有了recycleView为何不用? recycleview可以在horizontalScrollView的基础上增加多行,实现更多变更多定制化的效果。 我们都知道recycleview有三种效果...
  • u012534831
  • u012534831
  • 2016-06-02 20:52
  • 3507
    个人资料
    • 访问:9668次
    • 积分:382
    • 等级:
    • 排名:千里之外
    • 原创:26篇
    • 转载:1篇
    • 译文:2篇
    • 评论:2条
    文章分类
    最新评论