您的位置:首页 > 其它

viewpager + 滑动导航条的实现

2016-01-27 14:59 337 查看
效果图:



ViewpagerNavigationActivity

package com.example.example;
import android.animation.ObjectAnimator;
import android.annotation.SuppressLint;
import android.os.Bundle;
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.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.Log;
import android.view.animation.TranslateAnimation;
import android.widget.HorizontalScrollView;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.RadioGroup.OnCheckedChangeListener;
import android.widget.TextView;

@SuppressLint("NewApi")
public class ViewpagerNavigationActivity extends FragmentActivity implements
OnCheckedChangeListener, OnPageChangeListener {
HorizontalScrollView hsv;
RadioGroup rg;
ViewPager viewPager;
TextView tvLine;
int[] flags;
int fromX;

/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.viewpager_navigation_main);
hsv = (HorizontalScrollView) findViewById(R.id.hsv);
rg = (RadioGroup) findViewById(R.id.rg);
tvLine = (TextView) findViewById(R.id.tvline);
viewPager = (ViewPager) findViewById(R.id.viewpager);
// List<Fragment> fragments = new ArrayList<Fragment>();
MyAdapter adapter = new MyAdapter(getSupportFragmentManager());
flags = new int[] { R.drawable.china, R.drawable.korea,
R.drawable.nkorea, R.drawable.japan, R.drawable.usa,
R.drawable.india, R.drawable.tail };
viewPager.setAdapter(adapter);
rg.setOnCheckedChangeListener(this);
viewPager.setOnPageChangeListener(this);
}

private class MyAdapter extends FragmentPagerAdapter {

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

// 决定每一页是什么样
@Override
public Fragment getItem(int arg0) {
// TODO Auto-generated method stub
ViewpagerNavigationFragment fragment = new ViewpagerNavigationFragment();
Bundle bundle = new Bundle();
bundle.putInt("path", flags[arg0]);// 麻布袋
bundle.putInt("position", arg0);
fragment.setArguments(bundle);
return fragment;
}

// 决定有多少页
@Override
public int getCount() {
// TODO Auto-generated method stub
return rg.getChildCount();
}

}

public void onCheckedChanged(RadioGroup group, int checkedId) {
// TODO Auto-generated method stub
switch (checkedId) {
case R.id.china:
// 中国被选中
viewPager.setCurrentItem(0);
break;
case R.id.korea:
// 韩国被选中
viewPager.setCurrentItem(1);
break;
case R.id.nkorea:
// 朝鲜被选中
viewPager.setCurrentItem(2);
break;
case R.id.japan:
// 日本被选中
viewPager.setCurrentItem(3);
break;
case R.id.america:
viewPager.setCurrentItem(4);
break;
case R.id.india:
viewPager.setCurrentItem(5);
break;
case R.id.tail:
viewPager.setCurrentItem(6);
// 中国被选中
break;
default:
break;
}
}

public void onPageScrolled(int position, float positionOffset,
int positionOffsetPixels) {
int total = (int) ((position + positionOffset) * rg.getChildAt(0)
.getWidth());
int left = (viewPager.getWidth() - rg.getChildAt(0).getWidth()) / 2;
int scrollX = total - left;
hsv.scrollTo(scrollX, 0);
moveLine(position, positionOffset);
}

private void moveLine(int position, float positionOffset) {
// position表示将来第几个选项被选中
RadioButton rb = (RadioButton) rg.getChildAt(position);
// 坐标
int[] location = new int[2];
rb.getLocationInWindow(location);
// 利用位移动画滑到对应的按钮的位置
float toX = location[0] + positionOffset * rb.getWidth();
Log.i("Main", "location[0]=" + location[0] + "     fromX:" + fromX
+ "    toX:" + toX);
// TranslateAnimation animation = new TranslateAnimation(fromX, toX, 0,
// 0);
// animation.setDuration(50);// 持续时间,稍短一点
// animation.setFillAfter(true);// 滑动后停下来
fromX = (int) (location[0] + positionOffset * rb.getWidth());
// tvLine.startAnimation(animation);
ObjectAnimator.ofFloat(tvLine, "translationX", fromX, toX)
.setDuration(50).start();
}

public void onPageSelected(int position) {

}

public void onPageScrollStateChanged(int state) {

}
}


viewpager_navigation_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@android:color/white"
android:orientation="vertical" >

<HorizontalScrollView
android:id="@+id/hsv"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:scrollbars="none" >

<RadioGroup
android:id="@+id/rg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#ffffff"
android:orientation="horizontal" >

<RadioButton
android:id="@+id/china"
style="@style/rb_style"
android:text="中国" />

<RadioButton
android:id="@+id/korea"
style="@style/rb_style"
android:text="韩国" />

<RadioButton
android:id="@+id/nkorea"
style="@style/rb_style"
android:text="朝鲜" />

<RadioButton
android:id="@+id/japan"
style="@style/rb_style"
android:text="日本" />

<RadioButton
android:id="@+id/america"
style="@style/rb_style"
android:text="美国" />

<RadioButton
android:id="@+id/india"
style="@style/rb_style"
android:text="印度" />

<RadioButton
android:id="@+id/tail"
style="@style/rb_style"
android:text="泰国" />
</RadioGroup>
</HorizontalScrollView>

<FrameLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >

<TextView
android:id="@+id/tvline"
android:layout_width="100dp"
android:layout_height="2dp"
android:layout_marginTop="5dip"
android:background="#ff0000" />
</FrameLayout>

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

</LinearLayout>


package com.example.example;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

public class ViewpagerNavigationFragment extends Fragment{
private int path;
private int position;
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
Bundle bundle = this.getArguments();
path = bundle.getInt("path");
position = bundle.getInt("position");
ImageView img = new ImageView(this.getActivity());
img.setImageResource(path);
return img;
}
}


用到的素材图片:















整理自课程
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: