viewpager + 滑動導航條的實現
阿新 • • 發佈：2019-01-08
效果圖：
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; } }
用到的素材圖片：
整理自課程