tab界面实现方式之ViewPager+TabPageIndicator

Posted 2020-08-12

今天我来说说ViewPager+tabPageIndicator来实现tab界面。首先tabPageIndicator是在第三方的library包里面-- viewPagerlibrary，在githup上可以下载，我们需要将它导入eclipse中，然后在关联它。当我们使用这个包的时候，有一个问题需要注意：可能主工程中会报错，但是我们又不知道是哪里错了，最好看看libs下的v4包，一定要保证主工程和library中的v4包要么一模一样，要么只有一个，所以要么将其中一个v4包用另一个v4覆盖，或者直接删除一个包。

好的，现在直接贴代码

MainActivity布局文件代码

xml代码

 1 <LinearLayout 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     android:orientation="vertical"
 6     tools:context="com.example.android_tab4.MainActivity" >
 7 
 8     <LinearLayout
 9         android:layout_width="match_parent"
10         android:layout_height="wrap_content" >
11 
12         <include layout="@layout/top" />
13     </LinearLayout>
14 
15     <LinearLayout
16         android:layout_width="fill_parent"
17         android:layout_height="wrap_content" >
18 
19         <com.viewpagerindicator.TabPageIndicator
20             android:id="@+id/TabPageIndicator"
21             android:background="@android:color/transparent"
22             android:layout_width="match_parent"
23             android:layout_height="match_parent" >
24         </com.viewpagerindicator.TabPageIndicator>
25     </LinearLayout>
26     <LinearLayout 
27         android:layout_width="match_parent"
28         android:layout_height="0dp"
29         android:layout_weight="1"
30         >
31         <android.support.v4.view.ViewPager
32             android:id="@+id/viewpager"
33             android:layout_width="match_parent"
34             android:layout_height="match_parent"
35             />
36     </LinearLayout>
37 
38 </LinearLayout>

MainActivity代码

Java代码

 1 package com.example.android_tab4;
 2 
 3 import com.example.Util.Myadapter;
 4 import com.viewpagerindicator.TabPageIndicator;
 5 
 6 import android.os.Bundle;
 7 import android.support.v4.app.FragmentActivity;
 8 import android.support.v4.view.ViewPager;
 9 import android.view.Window;
10 
11 public class MainActivity extends FragmentActivity {
12     private ViewPager viewpager = null;
13     private TabPageIndicator tabPageIndicator = null;
14     private Myadapter myadapter = null;
15     protected void onCreate(Bundle savedInstanceState) {
16         super.onCreate(savedInstanceState);
17         requestWindowFeature(Window.FEATURE_NO_TITLE);
18         setContentView(R.layout.activity_main);
19         initView();
20     }
21     private void initView() 
22     {
23         viewpager = (ViewPager) findViewById(R.id.viewpager);
24         tabPageIndicator = (TabPageIndicator) findViewById(R.id.TabPageIndicator);
25         myadapter = new Myadapter(getSupportFragmentManager());
26         viewpager.setAdapter(myadapter);
27         tabPageIndicator.setViewPager(viewpager, 0);
28     }
29 }

MyFragment代码

JAVA代码

 1 package com.example.Util;
 2 
 3 import com.example.android_tab4.R;
 4 
 5 import android.os.Bundle;
 6 import android.support.v4.app.Fragment;
 7 import android.view.LayoutInflater;
 8 import android.view.View;
 9 import android.view.ViewGroup;
10 import android.widget.TextView;
11 
12 public class MyFragment extends Fragment{
13     String string = null;
14     public MyFragment(int position)
15     {
16         string = Myadapter.string[position];
17     }
18     public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
19         View view = inflater.inflate(R.layout.fragment, container, false);
20         
21         TextView textview = (TextView) view.findViewById(R.id.textview);
22         textview.setText(string);
23         return view;
24     }
25 }

MyFragment布局文件代码

xml代码

 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     <TextView 
 7         android:id="@+id/textview"
 8         android:layout_width="match_parent"
 9         android:layout_height="match_parent"
10         android:gravity="center"
11         />
12 
13 </LinearLayout>

MyAdapter代码

JAVA代码

 1 package com.example.Util;
 2 
 3 import android.support.v4.app.Fragment;
 4 import android.support.v4.app.FragmentManager;
 5 import android.support.v4.app.FragmentPagerAdapter;
 6 
 7 public class Myadapter extends FragmentPagerAdapter{
 8     public  static String string[] = { "课程", "问答", "求课", "学习", "计划" };
 9     public Myadapter(FragmentManager fm) {
10         super(fm);
11     }
12 
13     public Fragment getItem(int arg0) {
14         MyFragment myfragment = new MyFragment(arg0);
15         return myfragment;
16     }
17     public int getCount() {
18         return string.length;
19     }
20     public CharSequence getPageTitle(int position) {
21 
22         return string[position];
23     }
24 
25 }

top.xml代码

xml代码

 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="wrap_content"
 5     android:background="#07a7a5"
 6     android:orientation="horizontal" >
 7     <ImageView 
 8         android:layout_width="wrap_content"
 9         android:layout_height="wrap_content"
10         android:src="@drawable/idx_logo"
11         />
12     <TextView 
13         android:layout_width="wrap_content"
14         android:layout_height="fill_parent"
15         android:text="慕课网"
16         android:gravity="center_vertical"
17         android:layout_marginLeft="5dp"
18         android:textColor="#ffffff"
19         android:textSize="16sp"
20         android:textStyle="bold"
21         />
22 </LinearLayout>