首页 > 代码库 > 可滑动的顶部导航页ViewPager和Fragment的使用

可滑动的顶部导航页ViewPager和Fragment的使用

2024-11-15 15:29:01   202人阅读

可滑动的顶部导航页ViewPager和Fragment的使用

通过ViewPager和Fragment实现侧滑切换导航栏的功能，如下图所示。    
技术分享
一、定义主布局文件main.xml

最上面是一个导航栏，分别有三个textview构成，然后再textview下面设置一个标签卡最下面是使用Android.support.v4.view.viewpager构成

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<?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" >
     
    <LinearLayout  
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        android:orientation="horizontal"> 
           
           
        <TextView  
            android:id="@+id/tv_guid1" 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content" 
            android:layout_weight="1.0" 
            android:gravity="center" 
            android:text="特性1" 
            android:textSize="18sp"/> 
        <TextView   
            android:id="@+id/tv_guid2"   
            android:layout_width="wrap_content"   
            android:layout_height="wrap_content"   
            android:layout_weight="1.0"   
            android:gravity="center"   
            android:text="特性2"    
            android:textSize="18sp"/>   
     
        <TextView   
            android:id="@+id/tv_guid3"   
            android:layout_width="wrap_content"   
            android:layout_height="wrap_content"   
            android:layout_weight="1.0"   
            android:gravity="center"   
            android:text="特性3 "    
            android:textSize="18sp"/>   
     
        <TextView   
            android:id="@+id/tv_guid4"   
            android:layout_width="wrap_content"   
            android:layout_height="wrap_content"   
            android:layout_weight="1.0"   
            android:gravity="center"   
            android:text="特性4"    
            android:textSize="18sp"/> 
    </LinearLayout> 
   
    <TextView  
        android:id="@+id/cursor" 
        android:layout_width="80dp" 
        android:layout_height="5dp"
        android:background="#990033" 
        /> 
       
    <android.support.v4.view.ViewPager 
        android:id="@+id/viewpager" 
        android:layout_width="fill_parent" 
        android:layout_height="fill_parent" 
        android:flipInterval="30" 
        android:persistentDrawingCache="animation"/>
</LinearLayout>
二、在MainActivity.java中加载主布局文件mian.xml
定义一个ArrayList<Fragment>将初始化后的Fragment添加到集合中。然后设定viewpager的适配器，同时要自定义FragmentPagerAdapter。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
public class MainActivity extends FragmentActivity{
     private ViewPager mPager; 
        private ArrayList<Fragment> fragmentList; 
        private TextView barText; 
        private TextView view1, view2, view3, view4; 
        private int currIndex;//当前页卡编号
        protected void onCreate(Bundle savedInstanceState) { 
            super.onCreate(savedInstanceState); 
            setContentView(R.layout.main); 
               
            InitTextView(); 
            InitTextBar(); 
            InitViewPager(); 
        } 
          
         // 初始化标签名
        public void InitTextView(){ 
            view1 = (TextView)findViewById(R.id.tv_guid1); 
            view2 = (TextView)findViewById(R.id.tv_guid2); 
            view3 = (TextView)findViewById(R.id.tv_guid3); 
            view4 = (TextView)findViewById(R.id.tv_guid4); 
               
            view1.setOnClickListener(new txListener(0)); 
            view2.setOnClickListener(new txListener(1)); 
            view3.setOnClickListener(new txListener(2)); 
            view4.setOnClickListener(new txListener(3)); 
        } 
           
        public class txListener implements View.OnClickListener{ 
            private int index=0; 
               
            public txListener(int i) { 
                index =i; 
            } 
            @Override 
            public void onClick(View v) { 
                mPager.setCurrentItem(index); 
            } 
        } 
          
        // 初始化标签卡的位移像素
        public void InitTextBar(){ 
            barText = (TextView) super.findViewById(R.id.cursor);
            Display display = getWindow().getWindowManager().getDefaultDisplay();
                      // 得到屏幕的宽度
            DisplayMetrics metrics = new DisplayMetrics();
            display.getMetrics(metrics);
                      // 1/3得到屏幕
            int  tabLineLength = metrics.widthPixels / 4;
             LayoutParams lp = (LayoutParams) barText.getLayoutParams();
             lp.width = tabLineLength;
             barText.setLayoutParams(lp);
        } 
       
         // 初始化ViewPager
        public void InitViewPager(){ 
            mPager = (ViewPager)findViewById(R.id.viewpager); 
            fragmentList = new ArrayList<Fragment>(); 
            Fragment btFragment= new ButtonFragment(); 
            Fragment secondFragment = TestFragment.newInstance("this is second fragment"); 
            Fragment thirdFragment = TestFragment.newInstance("this is third fragment"); 
            Fragment fourthFragment = TestFragment.newInstance("this is fourth fragment"); 
            fragmentList.add(btFragment); 
            fragmentList.add(secondFragment); 
            fragmentList.add(thirdFragment); 
            fragmentList.add(fourthFragment); 
              //给ViewPager设置适配器 
            mPager.setAdapter(new MyFragmentPagerAdapter(getSupportFragmentManager(), fragmentList)); 
            mPager.setCurrentItem(0);//设置当前显示标签页为第一页
            mPager.setOnPageChangeListener(new MyOnPageChangeListener());//页面变化时的监听器
        } 
       
        public class MyOnPageChangeListener implements OnPageChangeListener{ 
            public void onPageScrolled(int arg0, float arg1, int arg2) { 
                  //取得该控件的实例
                LinearLayout.LayoutParams ll = (android.widget.LinearLayout.LayoutParams) barText
                        .getLayoutParams();
                 
                if(currIndex == arg0){
                     ll.leftMargin = (int) (currIndex * barText.getWidth() + arg1
                             * barText.getWidth());
                }else if(currIndex > arg0){
                     ll.leftMargin = (int) (currIndex * barText.getWidth() - (1 - arg1)* barText.getWidth());
                }
                barText.setLayoutParams(ll);
            } 
               
            public void onPageScrollStateChanged(int arg0) { 
            } 
               
            public void onPageSelected(int arg0) { 
                currIndex = arg0;  
                int i = currIndex + 1; 
                Toast.makeText(MainActivity.this, "您选择了第"+i+"个页卡", Toast.LENGTH_SHORT).show(); 
            } 
        } 
}


三、自定义FragmentPagerAdapter

自定义的FragmentPagerAdapter要继承FragmentPagerAdapter

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
public class MyFragmentPagerAdapter extends FragmentPagerAdapter {
 
    ArrayList<Fragment> list;
    public MyFragmentPagerAdapter(FragmentManager fm, ArrayList<Fragment> list) {
        super(fm);
        this.list = list;
 
    }
 
    public int getCount() {
        return list.size();
    }
 
    public Fragment getItem(int arg0) {
        return list.get(arg0);
    }
}
四、Fragment的布局加载。

Fragment加载布局文件实现viewpager中单个页面的内容。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
public class ButtonFragment extends Fragment {
    Button myButton;
 
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        View rootView = inflater.inflate(R.layout.guide_1, container, false);// 关联布局文件
        myButton = (Button) rootView.findViewById(R.id.mybutton);// 根据rootView找到button
         
        myButton.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
                Toast.makeText(ButtonFragment.this.getActivity(),
                        "button is click!", Toast.LENGTH_SHORT).show();
            }
        });
 
        return rootView;
    }
}


可滑动的顶部导航页ViewPager和Fragment的使用


联系
我们