1.下载文件加入到项目中,
https://github.com/JakeWharton/ViewPagerIndicator
2.加入后需要更改
3.在app项目gradle中添加
4.添加后同步,开始写代码
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<com.viewpagerindicator.TabPageIndicator
android:id="@+id/tabpager"
android:layout_width="match_parent"
android:layout_height="wrap_content"></com.viewpagerindicator.TabPageIndicator>
<android.support.v4.view.ViewPager
android:id="@+id/vp"
android:layout_width="match_parent"
android:layout_height="match_parent"></android.support.v4.view.ViewPager>
</LinearLayout>
package com.example.zhuli.demo9_tabviewpagerindicator;
import android.graphics.Color;
import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.view.Gravity;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import com.viewpagerindicator.TabPageIndicator;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends AppCompatActivity {
private TabPageIndicator tabPageIndicator;
private ViewPager viewPager;
private String[] names = {"名字1", "名字2", "名字3", "名字4", "名字5"};
private List<TextView> list;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
tabPageIndicator = findViewById(R.id.tabpager);//1.创建tabPageIndicator
viewPager = findViewById(R.id.vp);//2.创建ViewPager
initViewPager();//3.初始化ViewPager
tabPageIndicator.setViewPager(viewPager);//4.设置ViewPager
}
private void initViewPager() {
list = new ArrayList<>();
//fore循环遍历添加数据到集合中
for (String name : names) {
TextView textView = new TextView(getApplicationContext());
textView.setText(name + "");
textView.setTextColor(Color.RED);
textView.setTextSize(16);
textView.setGravity(Gravity.CENTER);
list.add(textView);
}
//设置adapter
viewPager.setAdapter(new MyViewPagerAdapter());
}
public class MyViewPagerAdapter extends PagerAdapter {
/**
* 重写此方法才能出现标题头
* @return
*/
@Override
public int getCount() {
return list.size();
}
/**
* 获取标题的方法
*
* @param position
* @return
*/
@Nullable
@Override
public CharSequence getPageTitle(int position) {
return names[position];
}
@Override
public boolean isViewFromObject(@NonNull View view, @NonNull Object o) {
return view == o;
}
/**
* 提供实例的方法
*
* @param container
* @param position
* @return
*/
@NonNull
@Override
public Object instantiateItem(@NonNull ViewGroup container, int position) {
TextView textView = list.get(position);
container.addView(textView);
return textView;
}
/**
* 移除的方法
*
* @param container
* @param position
* @param object
*/
@Override
public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
container.removeView((View) object);
}
}
}
最后注意修改主题
要在AndroidManifest.xml中修改activity的主题,才可显示
主题要复制过去,自定义修改即可
<style name="MyTheme" parent="AppTheme">
<item name="vpiTabPageIndicatorStyle">@style/MyWidget.TabPageIndicator</item>
<item name="android:windowNoTitle">true</item>
<item name="android:animationDuration">5000</item>
<item name="android:windowContentOverlay">@null</item>
</style>
<style name="MyWidget.TabPageIndicator" parent="Widget">
<item name="android:gravity">center</item>
<item name="android:background">@drawable/vpi__tab_indicator</item>
<item name="android:paddingLeft">22dip</item>
<item name="android:paddingRight">22dip</item>
<item name="android:paddingTop">8dp</item>
<item name="android:paddingBottom">8dp</item>
<item name="android:textAppearance">@style/MyTextAppearance.TabPageIndicator</item>
<item name="android:textSize">16sp</item>
<item name="android:maxLines">1</item>
</style>
<style name="MyTextAppearance.TabPageIndicator" parent="Widget">
<item name="android:textStyle">bold</item>
<item name="android:textColor">@android:color/black</item>
</style>