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。

相关文章

hdu1043（八数码问题，广搜 + hash（实现状态压缩） ）

hdu1043（八数码问题，广搜 + hash（实现状态压缩） ）

利用康拓展开将一个排列映射成一个自然数，然后就变成了普通的广搜题。 #include<iostream>#include<algorithm>#include<string>#include<stack>#include<queue>#include<map>#include<stdio.h>#include<stdlib.h>#include<ctype.h>#inclu
阅读更多...
【C++】_list常用方法解析及模拟实现

【C++】_list常用方法解析及模拟实现

相信自己的力量，只要对自己始终保持信心，尽自己最大努力去完成任何事，就算事情最终结果是失败了，努力了也不留遗憾。💓💓💓 目录   ✨说在前面 🍋知识点一：什么是list？ •🌰1.list的定义 •🌰2.list的基本特性 •🌰3.常用接口介绍 🍋知识点二：list常用接口 •🌰1.默认成员函数 🔥构造函数（⭐） 🔥析构函数 •🌰2.list对象
阅读更多...
【Prometheus】PromQL向量匹配实现不同标签的向量数据进行运算

【Prometheus】PromQL向量匹配实现不同标签的向量数据进行运算

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯，先赞后看哦~🎈🎈 🏆 作者简介：景天科技苑 🏆《头衔》：大厂架构师，华为云开发者社区专家博主，阿里云开发者社区专家博主，CSDN全栈领域优质创作者，掘金优秀博主，51CTO博客专家等。 🏆《博客》：Python全栈，前后端开发，小程序开发，人工智能，js逆向，App逆向，网络系统安全，数据分析，Django，fastapi
阅读更多...
让树莓派智能语音助手实现定时提醒功能

让树莓派智能语音助手实现定时提醒功能

最初的时候是想直接在rasa 的chatbot上实现，因为rasa本身是带有remindschedule模块的。不过经过一番折腾后，忽然发现，chatbot上实现的定时，语音助手不一定会有响应。因为，我目前语音助手的代码设置了长时间无应答会结束对话，这样一来，chatbot定时提醒的触发就不会被语音助手获悉。那怎么让语音助手也具有定时提醒功能呢？ 我最后选择的方法是用threading.Time
阅读更多...
Android实现任意版本设置默认的锁屏壁纸和桌面壁纸（两张壁纸可不一致）

Android实现任意版本设置默认的锁屏壁纸和桌面壁纸（两张壁纸可不一致）

客户有些需求需要设置默认壁纸和锁屏壁纸  在默认情况下 这两个壁纸是相同的  如果需要默认的锁屏壁纸和桌面壁纸不一样 需要额外修改 Android13实现 替换默认桌面壁纸： 将图片文件替换frameworks/base/core/res/res/drawable-nodpi/default_wallpaper.*  （注意不能是bmp格式） 替换默认锁屏壁纸： 将图片资源放入vendo
阅读更多...
C#实战|大乐透选号器[6]：实现实时显示已选择的红蓝球数量

C#实战|大乐透选号器[6]：实现实时显示已选择的红蓝球数量

哈喽，你好啊，我是雷工。 关于大乐透选号器在前面已经记录了5篇笔记，这是第6篇； 接下来实现实时显示当前选中红球数量，蓝球数量； 以下为练习笔记。 01 效果演示 当选择和取消选择红球或蓝球时，在对应的位置显示实时已选择的红球、蓝球的数量； 02 标签名称 分别设置Label标签名称为：lblRedCount、lblBlueCount
阅读更多...
Kubernetes PodSecurityPolicy：PSP能实现的5种主要安全策略

Kubernetes PodSecurityPolicy：PSP能实现的5种主要安全策略

Kubernetes PodSecurityPolicy：PSP能实现的5种主要安全策略 1. 特权模式限制2. 宿主机资源隔离3. 用户和组管理4. 权限提升控制5. SELinux配置 💖The Begin💖点点关注，收藏不迷路💖 Kubernetes的PodSecurityPolicy（PSP）是一个关键的安全特性，它在Pod创建之前实施安全策略，确保P
阅读更多...
工厂ERP管理系统实现源码（JAVA）

工厂ERP管理系统实现源码（JAVA）

工厂进销存管理系统是一个集采购管理、仓库管理、生产管理和销售管理于一体的综合解决方案。该系统旨在帮助企业优化流程、提高效率、降低成本，并实时掌握各环节的运营状况。 在采购管理方面，系统能够处理采购订单、供应商管理和采购入库等流程，确保采购过程的透明和高效。仓库管理方面，实现库存的精准管理，包括入库、出库、盘点等操作，确保库存数据的准确性和实时性。 生产管理模块则涵盖了生产计划制定、物料需求计划、
阅读更多...
C++——stack、queue的实现及deque的介绍

C++——stack、queue的实现及deque的介绍

目录 1.stack与queue的实现 1.1stack的实现  1.2 queue的实现 2.重温vector、list、stack、queue的介绍 2.1 STL标准库中stack和queue的底层结构  3.deque的简单介绍 3.1为什么选择deque作为stack和queue的底层默认容器  3.2 STL中对stack与queue的模拟实现 ①stack模拟实现
阅读更多...
EMLOG程序单页友链和标签增加美化

EMLOG程序单页友链和标签增加美化

单页友联效果图： 标签页面效果图： 源码介绍 EMLOG单页友情链接和TAG标签，友链单页文件代码main{width: 58%;是设置宽度 自己把设置成与您的网站宽度一样，如果自适应就填写100%，TAG文件不用修改 安装方法：把Links.php和tag.php上传到网站根目录即可，访问 域名/Links.php、域名/tag.php 所有模板适用，代码就不粘贴出来，已经打
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2