viewpager + 滑动导航条的实现
2016-01-27 14:59
337 查看
效果图:
ViewpagerNavigationActivity
viewpager_navigation_main.xml
用到的素材图片:
整理自课程
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; } }
用到的素材图片:
整理自课程
相关文章推荐
- Android 自定义View (一)
- hibernate调用mysql存储过程
- 解决html5新标签【placeholder】低版本浏览器下不兼容问题
- Python基础学习二
- :after伪类+content内容生成
- javascript学习导图
- 网上图书商城项目学习笔记-011Book模块查询(分页)
- java中hashcode()和equals()的详解
- 基于分块统计和机器学习的主题类网页内容识别算法实现和应用范例
- WTL安装到VS2008和VS2010中
- Window7 64位环境下搭建redis开发环境(踩坑)
- Spring Tool Suite 设置必看,设置大全。
- 新的开始
- 基于分块统计和机器学习的主题类网页内容识别算法实现和应用范例
- html+css学习笔记:Sass语法学习
- [ExtJS5学习笔记]第三节 sencha cmd学习笔记 生成应用程序构建的内部细节
- Apache POI使用详解(excel为主)
- 性能测试的基本过程
- 在视频中实时地显示帧率
- Android Binder进程间通信深入分析