ViewPager + HorizontalScrollView 实现可滚动的标签栏

2023-12-07 13:58
文章标签 实现 标签 滚动 viewpager horizontalscrollview

本文主要是介绍ViewPager + HorizontalScrollView 实现可滚动的标签栏，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

工程目录结构如下图所示




运行效果如下：





主界面布局文件activity_main.xml

[html]  view plain copy
  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     xmlns:tools="http://schemas.android.com/tools"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent"  
  5.     tools:context=".MainActivity" >  
  6.   
  7.     <RelativeLayout  
  8.         android:id="@+id/rl_tab"  
  9.         android:layout_width="fill_parent"  
  10.         android:layout_height="wrap_content"  
  11.         android:background="#F2F2F2" >  
  12.   
  13.         <com.example.playtabtest.view.SyncHorizontalScrollView  
  14.             android:id="@+id/mHsv"  
  15.             android:layout_width="fill_parent"  
  16.             android:layout_height="40dip"  
  17.             android:fadingEdge="none"  
  18.             android:scrollbars="none" >  
  19.   
  20.             <RelativeLayout  
  21.                 android:id="@+id/rl_nav"  
  22.                 android:layout_width="fill_parent"  
  23.                 android:layout_height="wrap_content"  
  24.                 android:layout_gravity="top"  
  25.                 android:background="#5AB0EB" >  
  26.   
  27.                 <RadioGroup  
  28.                     android:id="@+id/rg_nav_content"  
  29.                     android:layout_width="fill_parent"  
  30.                     android:layout_height="38dip"  
  31.                     android:layout_alignParentTop="true"  
  32.                     android:background="#F2F2F2"  
  33.                     android:orientation="horizontal" >  
  34.                 </RadioGroup>  
  35.   
  36.                 <ImageView  
  37.                     android:id="@+id/iv_nav_indicator"  
  38.                     android:layout_width="1dip"  
  39.                     android:layout_height="5dip"  
  40.                     android:layout_alignParentBottom="true"  
  41.                     android:background="#5AB0EB"  
  42.                     android:contentDescription="@string/nav_desc"  
  43.                     android:scaleType="matrix" />  
  44.             </RelativeLayout>  
  45.         </com.example.playtabtest.view.SyncHorizontalScrollView>  
  46.   
  47.         <ImageView  
  48.             android:id="@+id/iv_nav_left"  
  49.             android:layout_width="wrap_content"  
  50.             android:layout_height="wrap_content"  
  51.             android:layout_alignParentLeft="true"  
  52.             android:layout_centerVertical="true"  
  53.             android:contentDescription="@string/nav_desc"  
  54.             android:paddingBottom="1dip"  
  55.             android:src="@drawable/iv_navagation_scroll_left"  
  56.             android:visibility="gone" >  
  57.         </ImageView>  
  58.   
  59.         <ImageView  
  60.             android:id="@+id/iv_nav_right"  
  61.             android:layout_width="wrap_content"  
  62.             android:layout_height="wrap_content"  
  63.             android:layout_alignParentRight="true"  
  64.             android:layout_centerVertical="true"  
  65.             android:contentDescription="@string/nav_desc"  
  66.             android:paddingBottom="1dip"  
  67.             android:src="@drawable/iv_navagation_scroll_right"  
  68.             android:visibility="visible" >  
  69.         </ImageView>  
  70.     </RelativeLayout>  
  71.   
  72.     <android.support.v4.view.ViewPager  
  73.         android:id="@+id/mViewPager"  
  74.         android:layout_width="wrap_content"  
  75.         android:layout_height="wrap_content"  
  76.         android:layout_alignParentBottom="true"  
  77.         android:layout_below="@id/rl_tab"  
  78.         android:layout_gravity="center"  
  79.         android:background="#ffffff"  
  80.         android:flipInterval="30"  
  81.         android:persistentDrawingCache="animation" />  
  82.   
  83. </RelativeLayout>  


MainActivity.java

[java]  view plain copy
  1. package com.example.playtabtest;  
  2.   
  3. import android.os.Bundle;  
  4. import android.support.v4.app.Fragment;  
  5. import android.support.v4.app.FragmentActivity;  
  6. import android.support.v4.app.FragmentManager;  
  7. import android.support.v4.app.FragmentPagerAdapter;  
  8. import android.support.v4.view.ViewPager;  
  9. import android.support.v4.view.ViewPager.OnPageChangeListener;  
  10. import android.util.DisplayMetrics;  
  11. import android.view.LayoutInflater;  
  12. import android.view.Menu;  
  13. import android.view.ViewGroup.LayoutParams;  
  14. import android.view.animation.LinearInterpolator;  
  15. import android.view.animation.TranslateAnimation;  
  16. import android.widget.ImageView;  
  17. import android.widget.RadioButton;  
  18. import android.widget.RadioGroup;  
  19. import android.widget.RadioGroup.OnCheckedChangeListener;  
  20. import android.widget.RelativeLayout;  
  21. import com.example.playtabtest.fragment.CommonUIFragment;  
  22. import com.example.playtabtest.fragment.LaunchUIFragment;  
  23. import com.example.playtabtest.view.SyncHorizontalScrollView;  
  24.   
  25. public class MainActivity extends FragmentActivity {  
  26.   
  27.     public static final String ARGUMENTS_NAME = "arg";  
  28.     private RelativeLayout rl_nav;  
  29.     private SyncHorizontalScrollView mHsv;  
  30.     private RadioGroup rg_nav_content;  
  31.     private ImageView iv_nav_indicator;  
  32.     private ImageView iv_nav_left;  
  33.     private ImageView iv_nav_right;  
  34.     private ViewPager mViewPager;  
  35.     private int indicatorWidth;  
  36.     public static String[] tabTitle = { "选项1", "选项2", "选项3", "选项4", "选项5" };    //标题  
  37.     private LayoutInflater mInflater;  
  38.     private TabFragmentPagerAdapter mAdapter;  
  39.     private int currentIndicatorLeft = 0;  
  40.   
  41.     @Override  
  42.     protected void onCreate(Bundle savedInstanceState) {  
  43.         super.onCreate(savedInstanceState);  
  44.         setContentView(R.layout.activity_main);  
  45.           
  46.         findViewById();  
  47.         initView();  
  48.         setListener();  
  49.     }  
  50.   
  51.     private void setListener() {  
  52.           
  53.         mViewPager.setOnPageChangeListener(new OnPageChangeListener() {  
  54.               
  55.             @Override  
  56.             public void onPageSelected(int position) {  
  57.                   
  58.                 if(rg_nav_content!=null && rg_nav_content.getChildCount()>position){  
  59.                     ((RadioButton)rg_nav_content.getChildAt(position)).performClick();  
  60.                 }  
  61.             }  
  62.               
  63.             @Override  
  64.             public void onPageScrolled(int arg0, float arg1, int arg2) {  
  65.                   
  66.             }  
  67.               
  68.             @Override  
  69.             public void onPageScrollStateChanged(int arg0) {  
  70.                   
  71.             }  
  72.         });  
  73.           
  74.         rg_nav_content.setOnCheckedChangeListener(new OnCheckedChangeListener() {  
  75.               
  76.             @Override  
  77.             public void onCheckedChanged(RadioGroup group, int checkedId) {  
  78.                   
  79.                 if(rg_nav_content.getChildAt(checkedId)!=null){  
  80.                       
  81.                     TranslateAnimation animation = new TranslateAnimation(  
  82.                             currentIndicatorLeft ,  
  83.                             ((RadioButton) rg_nav_content.getChildAt(checkedId)).getLeft(), 0f, 0f);  
  84.                     animation.setInterpolator(new LinearInterpolator());  
  85.                     animation.setDuration(100);  
  86.                     animation.setFillAfter(true);  
  87.                       
  88.                     //执行位移动画  
  89.                     iv_nav_indicator.startAnimation(animation);  
  90.                       
  91.                     mViewPager.setCurrentItem(checkedId);   //ViewPager 跟随一起 切换  
  92.                       
  93.                     //记录当前 下标的距最左侧的 距离  
  94.                     currentIndicatorLeft = ((RadioButton) rg_nav_content.getChildAt(checkedId)).getLeft();  
  95.                       
  96.                     mHsv.smoothScrollTo(  
  97.                             (checkedId > 1 ? ((RadioButton) rg_nav_content.getChildAt(checkedId)).getLeft() : 0) - ((RadioButton) rg_nav_content.getChildAt(2)).getLeft(), 0);  
  98.                 }  
  99.             }  
  100.         });  
  101.     }  
  102.   
  103.     private void initView() {  
  104.           
  105.         DisplayMetrics dm = new DisplayMetrics();  
  106.         getWindowManager().getDefaultDisplay().getMetrics(dm);  
  107.           
  108.         indicatorWidth = dm.widthPixels / 4;  
  109.           
  110.         LayoutParams cursor_Params = iv_nav_indicator.getLayoutParams();  
  111.         cursor_Params.width = indicatorWidth;// 初始化滑动下标的宽  
  112.         iv_nav_indicator.setLayoutParams(cursor_Params);  
  113.           
  114.         mHsv.setSomeParam(rl_nav, iv_nav_left, iv_nav_right, this);  
  115.           
  116.         //获取布局填充器  
  117.         mInflater = (LayoutInflater)this.getSystemService(LAYOUT_INFLATER_SERVICE);  
  118.   
  119.         //另一种方式获取  
  120. //      LayoutInflater mInflater = LayoutInflater.from(this);    
  121.           
  122.         initNavigationHSV();  
  123.           
  124.         mAdapter = new TabFragmentPagerAdapter(getSupportFragmentManager());  
  125.         mViewPager.setAdapter(mAdapter);  
  126.     }  
  127.   
  128.     private void initNavigationHSV() {  
  129.           
  130.         rg_nav_content.removeAllViews();  
  131.           
  132.         for(int i=0;i<tabTitle.length;i++){  
  133.               
  134.             RadioButton rb = (RadioButton) mInflater.inflate(R.layout.nav_radiogroup_item, null);  
  135.             rb.setId(i);  
  136.             rb.setText(tabTitle[i]);  
  137.             rb.setLayoutParams(new LayoutParams(indicatorWidth,  
  138.                     LayoutParams.MATCH_PARENT));  
  139.               
  140.             rg_nav_content.addView(rb);  
  141.         }  
  142.           
  143.     }  
  144.   
  145.     private void findViewById() {  
  146.           
  147.         rl_nav = (RelativeLayout) findViewById(R.id.rl_nav);  
  148.           
  149.         mHsv = (SyncHorizontalScrollView) findViewById(R.id.mHsv);  
  150.           
  151.         rg_nav_content = (RadioGroup) findViewById(R.id.rg_nav_content);  
  152.           
  153.         iv_nav_indicator = (ImageView) findViewById(R.id.iv_nav_indicator);  
  154.         iv_nav_left = (ImageView) findViewById(R.id.iv_nav_left);  
  155.         iv_nav_right = (ImageView) findViewById(R.id.iv_nav_right);  
  156.           
  157.         mViewPager = (ViewPager) findViewById(R.id.mViewPager);  
  158.     }  
  159.   
  160.     @Override  
  161.     public boolean onCreateOptionsMenu(Menu menu) {  
  162.         getMenuInflater().inflate(R.menu.main, menu);  
  163.         return true;  
  164.     }  
  165.       
  166.     public static class TabFragmentPagerAdapter extends FragmentPagerAdapter{  
  167.   
  168.         public TabFragmentPagerAdapter(FragmentManager fm) {  
  169.             super(fm);  
  170.         }  
  171.   
  172.         @Override  
  173.         public Fragment getItem(int arg0) {  
  174.             Fragment ft = null;  
  175.             switch (arg0) {  
  176.             case 0:  
  177.                 ft = new LaunchUIFragment();  
  178.                 break;  
  179.   
  180.             default:  
  181.                 ft = new CommonUIFragment();  
  182.                   
  183.                 Bundle args = new Bundle();  
  184.                 args.putString(ARGUMENTS_NAME, tabTitle[arg0]);  
  185.                 ft.setArguments(args);  
  186.                   
  187.                 break;  
  188.             }  
  189.             return ft;  
  190.         }  
  191.   
  192.         @Override  
  193.         public int getCount() {  
  194.               
  195.             return tabTitle.length;  
  196.         }  
  197.           
  198.     }  
  199.   
  200. }  


SyncHorizontalScrollView.java

[java]  view plain copy
  1. package com.example.playtabtest.view;  
  2.   
  3. import android.app.Activity;  
  4. import android.content.Context;  
  5. import android.util.AttributeSet;  
  6. import android.util.DisplayMetrics;  
  7. import android.view.View;  
  8. import android.widget.HorizontalScrollView;  
  9. import android.widget.ImageView;  
  10.   
  11. public class SyncHorizontalScrollView extends HorizontalScrollView {  
  12.   
  13.     private View view;  
  14.     private ImageView leftImage;  
  15.     private ImageView rightImage;  
  16.     private int windowWitdh = 0;  
  17.     private Activity mContext;  
  18.   
  19.     public void setSomeParam(View view, ImageView leftImage,  
  20.             ImageView rightImage, Activity context) {  
  21.         this.mContext = context;  
  22.         this.view = view;  
  23.         this.leftImage = leftImage;  
  24.         this.rightImage = rightImage;  
  25.         DisplayMetrics dm = new DisplayMetrics();  
  26.         this.mContext.getWindowManager().getDefaultDisplay().getMetrics(dm);  
  27.         windowWitdh = dm.widthPixels;  
  28.     }  
  29.   
  30.     public SyncHorizontalScrollView(Context context) {  
  31.         super(context);  
  32.         // TODO Auto-generated constructor stub  
  33.     }  
  34.   
  35.     public SyncHorizontalScrollView(Context context, AttributeSet attrs) {  
  36.         super(context, attrs);  
  37.         // TODO Auto-generated constructor stub  
  38.     }  
  39.   
  40.     // 显示和隐藏左右两边的箭头  
  41.     public void showAndHideArrow() {  
  42.         if (!mContext.isFinishing() && view != null) {  
  43.             this.measure(0, 0);  
  44.             if (windowWitdh >= this.getMeasuredWidth()) {  
  45.                 leftImage.setVisibility(View.GONE);  
  46.                 rightImage.setVisibility(View.GONE);  
  47.             } else {  
  48.                 if (this.getLeft() == 0) {  
  49.                     leftImage.setVisibility(View.GONE);  
  50.                     rightImage.setVisibility(View.VISIBLE);  
  51.                 } else if (this.getRight() == this.getMeasuredWidth()  
  52.                         - windowWitdh) {  
  53.                     leftImage.setVisibility(View.VISIBLE);  
  54.                     rightImage.setVisibility(View.GONE);  
  55.                 } else {  
  56.                     leftImage.setVisibility(View.VISIBLE);  
  57.                     rightImage.setVisibility(View.VISIBLE);  
  58.                 }  
  59.             }  
  60.         }  
  61.     }  
  62.   
  63.     protected void onScrollChanged(int l, int t, int oldl, int oldt) {  
  64.         super.onScrollChanged(l, t, oldl, oldt);  
  65.         if (!mContext.isFinishing() && view != null && rightImage != null  
  66.                 && leftImage != null) {  
  67.             if (view.getWidth() <= windowWitdh) {  
  68.                 leftImage.setVisibility(View.GONE);  
  69.                 rightImage.setVisibility(View.GONE);  
  70.             } else {  
  71.                 if (l == 0) {  
  72.                     leftImage.setVisibility(View.GONE);  
  73.                     rightImage.setVisibility(View.VISIBLE);  
  74.                 } else if (view.getWidth() - l == windowWitdh) {  
  75.                     leftImage.setVisibility(View.VISIBLE);  
  76.                     rightImage.setVisibility(View.GONE);  
  77.                 } else {  
  78.                     leftImage.setVisibility(View.VISIBLE);  
  79.                     rightImage.setVisibility(View.VISIBLE);  
  80.                 }  
  81.             }  
  82.         }  
  83.     }  
  84. }  


以下是两个Fragment的源代码


LaunchUIFragment.java

[java]  view plain copy
  1. package com.example.playtabtest.fragment;  
  2.   
  3. import android.os.Bundle;  
  4. import android.support.v4.app.Fragment;  
  5. import android.view.LayoutInflater;  
  6. import android.view.View;  
  7. import android.view.ViewGroup;  
  8.   
  9. import com.example.playtabtest.R;  
  10.   
  11. public class LaunchUIFragment extends Fragment {  
  12.   
  13.     @Override  
  14.     public View onCreateView(LayoutInflater inflater, ViewGroup container,  
  15.             Bundle savedInstanceState) {  
  16.           
  17.         View rootView = inflater.inflate(R.layout.fragment_selection_launch, container, false);  
  18.           
  19.         return rootView;  
  20.     }  
  21.     @Override  
  22.     public void onActivityCreated(Bundle savedInstanceState) {  
  23.         // TODO Auto-generated method stub  
  24.         super.onActivityCreated(savedInstanceState);  
  25.     }  
  26.       
  27. }  


CommonUIFragment.java

[java]  view plain copy
  1. package com.example.playtabtest.fragment;  
  2.   
  3. import android.os.Bundle;  
  4. import android.support.v4.app.Fragment;  
  5. import android.view.LayoutInflater;  
  6. import android.view.View;  
  7. import android.view.ViewGroup;  
  8. import android.widget.TextView;  
  9.   
  10. import com.example.playtabtest.MainActivity;  
  11. import com.example.playtabtest.R;  
  12.   
  13. public class CommonUIFragment extends Fragment {  
  14.       
  15.     @Override  
  16.     public View onCreateView(LayoutInflater inflater, ViewGroup container,  
  17.             Bundle savedInstanceState) {  
  18.           
  19.         View rootView = inflater.inflate(R.layout.fragment_selection_common, container, false);  
  20.           
  21.         TextView tv_tabName = (TextView) rootView.findViewById(R.id.tv_tabName);  
  22.           
  23.         Bundle bundle = getArguments();  
  24.           
  25.         tv_tabName.setText(bundle.getString(MainActivity.ARGUMENTS_NAME, ""));  
  26.           
  27.         return rootView;  
  28.     }  
  29.     @Override  
  30.     public void onActivityCreated(Bundle savedInstanceState) {  
  31.         // TODO Auto-generated method stub  
  32.         super.onActivityCreated(savedInstanceState);  
  33.     }  
  34.       
  35. }  


两个Fragment的布局文件

fragment_selection_launch.xml

[html]  view plain copy
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent"  
  5.     android:orientation="vertical" >  
  6.       
  7.     <TextView android:id="@+id/tv_intro"  
  8.             android:layout_width="300dp"  
  9.             android:layout_height="wrap_content"  
  10.             android:layout_marginTop="20dp"  
  11.             android:layout_marginBottom="16dp"  
  12.             android:text="@string/launch_intro"/>  
  13.       
  14.     <Button android:id="@+id/bt_click"  
  15.             android:layout_width="300dp"  
  16.             android:layout_height="wrap_content"  
  17.             android:layout_marginBottom="16dp"  
  18.             android:text="@string/launch_click_me"/>  
  19.   
  20. </LinearLayout>  


fragment_selection_common.xml

[html]  view plain copy
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent"  
  5.     android:orientation="vertical" >  
  6.       
  7.     <TextView   
  8.         android:layout_width="300dp"  
  9.         android:layout_height="wrap_content"  
  10.         android:textSize="18sp"  
  11.         android:text="@string/common_intro"  
  12.         />  
  13.       
  14.     <TextView   
  15.         android:id="@+id/tv_tabName"  
  16.         android:layout_marginTop="30dp"  
  17.         android:layout_width="wrap_content"  
  18.         android:layout_height="30dp"  
  19.         android:layout_gravity="center"  
  20.         android:textSize="20sp"  
  21.         />  
  22.   
  23. </LinearLayout>  




源码下载地址：http://download.csdn.net/detail/fx_sky/5475985



根据上面内容做的整合


效果图： 
在此输入图片描述

在此输入图片描述

主要布局文件：


<?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" ><RelativeLayoutandroid:id="@+id/rl_nav"android:layout_width="fill_parent"android:layout_height="wrap_content"android:layout_gravity="top" ><RadioGroupandroid: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><ImageViewandroid:id="@+id/iv_nav_indicator"android:layout_width="1dip"android:layout_height="5dip"android:layout_alignParentBottom="true"android:background="#FF0000"android:contentDescription="@string/mygo_share"android:scaleType="matrix" /></RelativeLayout></LinearLayout>

标签的布局： 
sync_nav_radiogroup_item.xml


<?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:textSize="15sp" />

以下是工具类代码：


import android.app.Activity;
import android.content.Context;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.LinearInterpolator;
import android.view.animation.TranslateAnimation;
import android.widget.HorizontalScrollView;
import android.widget.ImageView;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.RadioGroup.OnCheckedChangeListener;public class SyncHorizontalScrollView extends HorizontalScrollView {private View view;private ImageView leftImage;private ImageView rightImage;private int windowWitdh = 0;private Activity mContext;private RadioGroup rg_nav_content;private ImageView iv_nav_indicator;private LayoutInflater mInflater;private int count;// 屏幕显示的标签个数private int indicatorWidth;// 每个标签所占的宽度private int currentIndicatorLeft = 0;// 当前所在标签页面的位移private ViewPager mViewPager;private int scrollX;public SyncHorizontalScrollView(Context context) {super(context);// TODO Auto-generated constructor stub}public SyncHorizontalScrollView(Context context, AttributeSet attrs) {super(context, attrs);// TODO Auto-generated constructor stub}/*** * 方法描述：* @param mViewPager* @param leftImage 左箭頭* @param rightImage 右箭頭* @param tabTitle 標籤欄的名稱* @param count 一頁顯示的標籤個數* @param context * <pre>* 修改日期      修改人       修改说明* 2014-2-17   chen     新建* </pre>*/public void setSomeParam(ViewPager mViewPager, ImageView leftImage,ImageView rightImage, String[] tabTitle, int count, Activity context) {this.mContext = context;this.mViewPager = mViewPager;// this.view = view;mInflater = LayoutInflater.from(context);this.view = mInflater.inflate(R.layout.sync_hsv_item, null);this.addView(view);this.leftImage = leftImage;this.rightImage = rightImage;DisplayMetrics dm = new DisplayMetrics();context.getWindowManager().getDefaultDisplay().getMetrics(dm);windowWitdh = dm.widthPixels;this.count = count;indicatorWidth = windowWitdh / count;init(tabTitle);}private void init(String[] tabTitle) {rg_nav_content = (RadioGroup) view.findViewById(R.id.rg_nav_content);iv_nav_indicator = (ImageView) view.findViewById(R.id.iv_nav_indicator);initIndicatorWidth();initNavigationHSV(tabTitle);setListener();}// 初始化滑动下标的宽private void initIndicatorWidth() {ViewGroup.LayoutParams cursor_Params = iv_nav_indicator.getLayoutParams();cursor_Params.width = indicatorWidth;iv_nav_indicator.setLayoutParams(cursor_Params);}// 添加顶部标签private void initNavigationHSV(String[] tabTitle) {rg_nav_content.removeAllViews();for (int i = 0; i < tabTitle.length; i++) {RadioButton rb = (RadioButton) mInflater.inflate(R.layout.sync_nav_radiogroup_item, null);rb.setId(i);rb.setText(tabTitle[i]);rb.setLayoutParams(new LayoutParams(indicatorWidth,LayoutParams.MATCH_PARENT));rg_nav_content.addView(rb);}RadioButton rb = (RadioButton) mInflater.inflate(R.layout.sync_nav_radiogroup_item, null);rg_nav_content.addView(rb);}private void setListener() {rg_nav_content.setOnCheckedChangeListener(new OnCheckedChangeListener() {@Overridepublic void onCheckedChanged(RadioGroup group, int checkedId) {if (rg_nav_content.getChildAt(checkedId) != null) {moveAnimation(checkedId);mViewPager.setCurrentItem(checkedId); // ViewPager// 跟随一起 切换}}});}//动画移动效果private void moveAnimation(int checkedId){TranslateAnimation animation = new TranslateAnimation(currentIndicatorLeft,indicatorWidth * checkedId,0f, 0f);animation.setInterpolator(new LinearInterpolator());animation.setDuration(100);animation.setFillAfter(true);// 执行位移动画iv_nav_indicator.startAnimation(animation);// 记录当前 下标的距最左侧的 距离currentIndicatorLeft = indicatorWidth * checkedId;scrollX = (checkedId > 1 ? currentIndicatorLeft: 0)- indicatorWidth * 2;this.post(runnable);}// 模拟点击事件public void performLabelClick(int position) {if (rg_nav_content != null && rg_nav_content.getChildCount() > position) {((RadioButton) rg_nav_content.getChildAt(position)).performClick();}}private Runnable runnable = new Runnable() {@Overridepublic void run() {// TODO Auto-generated method stubsmoothScrollTo(scrollX, 0);}};// 显示和隐藏左右两边的箭头protected void onScrollChanged(int l, int t, int oldl, int oldt) {super.onScrollChanged(l, t, oldl, oldt);if (!mContext.isFinishing() && view != null && rightImage != null&& leftImage != null) {if (view.getWidth() <= windowWitdh) {leftImage.setVisibility(View.GONE);rightImage.setVisibility(View.GONE);} else {if (l == 0) {leftImage.setVisibility(View.GONE);rightImage.setVisibility(View.VISIBLE);} else if (view.getWidth() - l == windowWitdh) {leftImage.setVisibility(View.VISIBLE);rightImage.setVisibility(View.GONE);} else {leftImage.setVisibility(View.VISIBLE);rightImage.setVisibility(View.VISIBLE);}}}}public int getIndicatorWidth(){return indicatorWidth;}
}

在调用时，先调用setSomeParam方法将需要用的的控件与数据传入，然后控件内部开始初始化。 
由于项目有需求，要在进入此控件使用到的页面时，自动定位到某一个标签，在此需使用View.post方法执行HorizontalScrollView 控件的smoothScrollTo方法，才能确保进入页面后标签已定位。原因是scrollTo方法要等到界面显示完毕才能有效，而view.post方法也是在界面刷新完毕之后才执行。 
定义一个performLabelClick方法，让外部调用此类来实现相应的页面跳转即可。

不过此处使用时有一个问题，就是从上一级页面跳转至此页面时，无法固定在最后一个标签位，调试时发现虽然执行了performLabelClick方法模拟点击事件，但是监听事件并没有被响应。暂时没找出问题所在。不过用了一个方法来解决此问题，即在调用initNavigationHSV方法添加标签时，为其多加一个空标签，宽度为0即可，这样即可解决标签栏上无法定位到最后一位的问题，因为真正的最后一位实际上是宽度为0的空标签。 
如果大家有遇到此问题或是有解决方法，欢迎告知，谢谢。

附上代码下载地址: 
http://www.oschina.net/code/snippet_1409622_33243



这篇关于ViewPager + HorizontalScrollView 实现可滚动的标签栏的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/466132。

相关文章

SpringBoot3实现Gzip压缩优化的技术指南

SpringBoot3实现Gzip压缩优化的技术指南

《SpringBoot3实现Gzip压缩优化的技术指南》随着Web应用的用户量和数据量增加,网络带宽和页面加载速度逐渐成为瓶颈,为了减少数据传输量,提高用户体验,我们可以使用Gzip压缩HTTP响应,... 目录1、简述2、配置2.1 添加依赖2.2 配置 Gzip 压缩3、服务端应用4、前端应用4.1 N
阅读更多...
SpringBoot实现数据库读写分离的3种方法小结

SpringBoot实现数据库读写分离的3种方法小结

《SpringBoot实现数据库读写分离的3种方法小结》为了提高系统的读写性能和可用性,读写分离是一种经典的数据库架构模式,在SpringBoot应用中,有多种方式可以实现数据库读写分离,本文将介绍三... 目录一、数据库读写分离概述二、方案一：基于AbstractRoutingDataSource实现动态
阅读更多...
Python FastAPI+Celery+RabbitMQ实现分布式图片水印处理系统

Python FastAPI+Celery+RabbitMQ实现分布式图片水印处理系统

《PythonFastAPI+Celery+RabbitMQ实现分布式图片水印处理系统》这篇文章主要为大家详细介绍了PythonFastAPI如何结合Celery以及RabbitMQ实现简单的分布式... 实现思路FastAPI 服务器Celery 任务队列RabbitMQ 作为消息代理定时任务处理完整
阅读更多...
Java枚举类实现Key-Value映射的多种实现方式

Java枚举类实现Key-Value映射的多种实现方式

《Java枚举类实现Key-Value映射的多种实现方式》在Java开发中,枚举(Enum)是一种特殊的类,本文将详细介绍Java枚举类实现key-value映射的多种方式,有需要的小伙伴可以根据需要... 目录前言一、基础实现方式1.1 为枚举添加属性和构造方法二、http://www.cppcns.co
阅读更多...
使用Python实现快速搭建本地HTTP服务器

使用Python实现快速搭建本地HTTP服务器

《使用Python实现快速搭建本地HTTP服务器》：本文主要介绍如何使用Python快速搭建本地HTTP服务器,轻松实现一键HTTP文件共享,同时结合二维码技术,让访问更简单,感兴趣的小伙伴可以了... 目录1. 概述2. 快速搭建 HTTP 文件共享服务2.1 核心思路2.2 代码实现2.3 代码解读3.
阅读更多...
MySQL双主搭建+keepalived高可用的实现

MySQL双主搭建+keepalived高可用的实现

《MySQL双主搭建+keepalived高可用的实现》本文主要介绍了MySQL双主搭建+keepalived高可用的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,... 目录一、测试环境准备二、主从搭建1.创建复制用户2.创建复制关系3.开启复制，确认复制是否成功4.同
阅读更多...
Java实现文件图片的预览和下载功能

Java实现文件图片的预览和下载功能

《Java实现文件图片的预览和下载功能》这篇文章主要为大家详细介绍了如何使用Java实现文件图片的预览和下载功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... Java实现文件（图片）的预览和下载 @ApiOperation("访问文件") @GetMapping("
阅读更多...
MyBatis 动态 SQL 优化之标签的实战与技巧(常见用法)

MyBatis 动态 SQL 优化之标签的实战与技巧(常见用法)

《MyBatis动态SQL优化之标签的实战与技巧(常见用法)》本文通过详细的示例和实际应用场景,介绍了如何有效利用这些标签来优化MyBatis配置,提升开发效率,确保SQL的高效执行和安全性,感... 目录动态SQL详解一、动态SQL的核心概念1.1 什么是动态SQL？1.2 动态SQL的优点1.3 动态S
阅读更多...
Python基于wxPython和FFmpeg开发一个视频标签工具

Python基于wxPython和FFmpeg开发一个视频标签工具

《Python基于wxPython和FFmpeg开发一个视频标签工具》在当今数字媒体时代,视频内容的管理和标记变得越来越重要,无论是研究人员需要对实验视频进行时间点标记,还是个人用户希望对家庭视频进行... 目录引言1. 应用概述2. 技术栈分析2.1 核心库和模块2.2 wxpython作为GUI选择的优
阅读更多...
使用Sentinel自定义返回和实现区分来源方式

使用Sentinel自定义返回和实现区分来源方式

《使用Sentinel自定义返回和实现区分来源方式》：本文主要介绍使用Sentinel自定义返回和实现区分来源方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Sentinel自定义返回和实现区分来源1. 自定义错误返回2. 实现区分来源总结Sentinel自定
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2