Android 中 viewpager 滑动指示器的实例代码
作者:安卓吧 时间:2022-06-30 19:43:06
先看下效果图:
这个需要用到1个开源的 库,这个后面也会说下的。
工程目录:
1. MainActivity.java
public class MainActivity extends FragmentActivity {
private ViewPagerFrameAdapter adapter; //适配器(标题和内容)
private ViewPager mPager;
private TabPageIndicator tabbPageIndicator; //
private UnderlinePageIndicatorEx underlinePageIndicator;
private int COUNT = 0;
private List<String> titles = new ArrayList<String>(); //标题
@Override
protected void onCreate(Bundle bundle) {
super.onCreate(bundle);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
//标题,这里自己造的假数据
for (int j = 0; j < 3 ; j++){
titles.add( "第"+ j +"标签卡");
}
mPager = (ViewPager)findViewById(R.id.pager);
adapter = new ViewPagerFrameAdapter(getSupportFragmentManager(),titles);
mPager.setAdapter(adapter);
//得到指示器
tabbPageIndicator = (TabPageIndicator) findViewById(R.id.tab_indicator);
tabbPageIndicator.setViewPager(mPager);
//下标
underlinePageIndicator = (UnderlinePageIndicatorEx)findViewById(R.id.underline_indicator);
underlinePageIndicator.setViewPager(mPager);
underlinePageIndicator.setFades(false);
//设置指示器
tabbPageIndicator.setOnPageChangeListener(underlinePageIndicator);
}
//adapter 没啥好说的 跟前面的一样
private class ViewPagerFrameAdapter extends FragmentStatePagerAdapter{
private List<String> title; //页面标题头部数据
public ViewPagerFrameAdapter(FragmentManager fm, List<String> title) {
super(fm);
this.title = title;
}
//根据position 返回 fragment
@Override
public Fragment getItem(int position) {
return ArrayFragment.newInstance(position);
}
//size
@Override
public int getCount() {
return title.size();
}
//顶部的title
@Override
public CharSequence getPageTitle(int position) {
if (titles != null){
return titles.get(position).toString();
}
return super.getPageTitle(position);
}
}
}
UnderlinePageIndicatorEx.java
//继承这个然后重写
public class UnderlinePageIndicatorEx extends UnderlinePageIndicator{
public UnderlinePageIndicatorEx(Context context) {
super(context, null);
}
public UnderlinePageIndicatorEx(Context context, AttributeSet attrs) {
super(context, attrs, R.attr.vpiUnderlinePageIndicatorStyle);
}
public UnderlinePageIndicatorEx(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
//自身的 ViewPage传递过去
@Override
public void setViewPager(ViewPager viewPager) {
if (mViewPager == viewPager){
return;
}
// if (mViewPager != null) {
// mViewPager.setOnPageChangeListener(null);
// }
if (viewPager.getAdapter() == null) {
throw new IllegalStateException(" pager 没有 加入 adapter");
}
mViewPager = viewPager;
// mViewPager.setOnPageChangeListener(this);
invalidate();
post(new Runnable(){
@Override public void run() {
if (mFades) {
post(mFadeRunnable);
}
}
});
}
}
ArrayFragment.java
public class ArrayFragment extends Fragment{
private int position;
public ArrayFragment(int position){
this.position = position;
}
// 返回 viwePager 下面滑动的页面
public static ArrayFragment newInstance(int position){
return new ArrayFragment(position);
}
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
}
@Override
public void onDestroy() {
super.onDestroy();
}
// 根据position 返回不同的view
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.layoutaa, null);
return view;
}
}
好了接下来是 布局xml了。
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
>
<!-- 标题 和 标题下面的 指示器 -->
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="35dp"
android:orientation="vertical"
android:background="@drawable/main_header_background">
<com.viewpagerindicator.TabPageIndicator
android:id="@+id/tab_indicator"
android:layout_height="wrap_content"
android:layout_width="fill_parent"/>
<com.test.linepagerindictor.widget.UnderlinePageIndicatorEx
android:id="@+id/underline_indicator"
android:layout_height="3dip"
android:layout_width="fill_parent"
android:layout_alignParentBottom="true"/>
</LinearLayout>
<android.support.v4.view.ViewPager
android:id="@+id/pager"
android:layout_width="fill_parent"
android:layout_height="fill_parent"/>
</LinearLayout>
接下来设置 滑动指示器的style
<!-- 总 style 直接引用 这个 由 tab style 和 Indicator style 组成 -->
<style name="StyledAllIndicators" parent="@android:style/Theme.Light">
<item name="vpiTabPageIndicatorStyle">@style/CustomTabPageIndicator</item>
<item name="vpiUnderlinePageIndicatorStyle">@style/CustomUnderlinePageIndicator</item>
</style>
<!-- tab的 style -->
<style name="CustomTabPageIndicator" parent="Widget.TabPageIndicator">
<item name="android:background">#00000000</item>
<item name="android:textAppearance">@style/CustomTabPageIndicator_text</item>
<item name="android:textColor">@color/selector_tab</item>
<item name="android:textSize">20sp</item>
<!-- 分割线,可有可无的 -->
<item name="android:divider">@drawable/custom_tab_indicator_divider</item>
<item name="android:dividerPadding">10dip</item>
<item name="android:showDividers">middle</item>
<item name="android:paddingTop">4dp</item>
<item name="android:paddingLeft">8dp</item>
<item name="android:paddingBottom">4dp</item>
<item name="android:paddingRight">8dp</item>
<item name="android:fadingEdge">horizontal</item>
<item name="android:fadingEdgeLength">8dp</item>
</style>
<style name="CustomTabPageIndicator_text" parent="android:TextAppearance.Medium">
<item name="android:typeface">monospace</item>
</style>
<!-- 下标的指示器的颜色 -->
<style name="CustomUnderlinePageIndicator">
<item name="selectedColor">#EB5548</item>
<item name="android:background">#00000000</item>
<item name="fadeLength">1000</item>
<item name="fadeDelay">1000</item>
</style>
selector_tab.xml 这个是 选择器 在style中引用的,是用来切换 被选中的背景色的
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true" android:color="#91D228" />
<item android:state_focused="true" android:color="#91D228" />
<item android:color="#dddddd" />
</selector>
来源:https://www.cnblogs.com/android100/archive/2013/11/15/android-viewpager.html
标签:android,viewpager,指示器
0
投稿
猜你喜欢
Java 中如何使用 stream 流
2021-10-09 01:13:37
JAVA发送http get/post请求,调用http接口、方法详解
2021-11-02 16:41:19
java同步之如何写一个锁Lock
2023-04-23 08:10:54
Java最全文件操作实例汇总
2023-11-14 13:00:17
SpringBoot使用Spark过程详解
2021-07-30 06:19:21
Android开发自学笔记(六):声明权限和Activity
2021-05-26 07:25:49
PageHelper插件实现一对多查询时的分页问题
2021-11-05 07:02:34
详解Java中的println输入和toString方法的重写问题
2022-12-24 05:26:33
android开发之Json文件的读写的示例代码
2021-12-02 11:55:18
详解Java中的数组与字符串相关知识
2023-02-10 03:31:10
Unity实现打砖块游戏
2023-12-06 04:45:04
Java Socket通信(一)之客户端程序 发送和接收数据
2023-07-05 00:34:48
深入分析Android系统中SparseArray的源码
2022-09-16 13:54:42
Java中@ConfigurationProperties实现自定义配置绑定问题分析
2023-01-23 23:23:47
SpringBoot万字爆肝高级配置
2022-09-17 06:34:08
C#使用Socket发送和接收TCP数据实例
2022-12-13 13:33:46
Java中JDBC连接数据库详解
2023-08-10 16:57:18
java Semaphore共享锁实现原理解析
2021-11-02 23:12:38
java io读取文件操作代码实例
2023-04-12 08:53:57
Spring请求参数校验功能实例演示
2023-04-26 02:05:53