一、摘要
ViewPagerIndicator使用以及自定义样式修改。网上有关JakeWharton大神的ViewPagerIndicator控件使用的文章也比较多,这里主要是自己学习使用过程中的一个简单记录。
二、源码下载
https://github.com/JakeWharton/Android-ViewPagerIndicator
下载后导入这个library到自己的项目中。
三、布局文件
activity_main.xml
<?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"
android:background="#fff"
>
<com.viewpagerindicator.TabPageIndicator
android:id="@+id/tabTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
>
</android.support.v4.view.ViewPager>
</LinearLayout>
tab_fragment.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
>
<TextView
android:id="@+id/titleview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:textSize="22sp"
android:gravity="center"
/>
</RelativeLayout>
四、后台code
MainActivity .java
package com.example.viewpagertest;
import java.util.ArrayList;
import java.util.List;
import com.viewpagerindicator.TabPageIndicator;
import android.app.Activity;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.ViewGroup;
public class MainActivity extends FragmentActivity {
private ViewPager viewPager;
private TabPageIndicator tabTitle;
private List<Fragment> fragList;
private List<String> titleList;
@Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
}
private void initView() {
viewPager = (ViewPager) findViewById(R.id.viewPager);
tabTitle = (TabPageIndicator) findViewById(R.id.tabTitle);
initFragmentList();
viewPager.setAdapter(new MyFragmentPagerAdapter(getSupportFragmentManager()));
//关联viewpagerIndicator
tabTitle.setViewPager(viewPager);
tabTitle.setOnPageChangeListener(new OnPageChangeListener() {
@Override
public void onPageSelected(int position) {
System.out.println("onPageSelected----"+titleList.get(position));
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
@Override
public void onPageScrollStateChanged(int arg0) {
}
});
}
private void initFragmentList() {
fragList = new ArrayList<Fragment>();
for(int i = 0; i < 10; i++){
TabFragment frag = new TabFragment();
Bundle b = new Bundle();
b.putInt("position", i+1);
frag.setArguments(b);
fragList.add(frag);
}
titleList = new ArrayList<String>();
for(int i = 0; i < 10; i++){
titleList.add("标题"+(i+1));
}
}
class MyFragmentPagerAdapter extends FragmentPagerAdapter{
public MyFragmentPagerAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int arg0) {
return fragList.get(arg0);
}
@Override
public int getCount() {
return fragList.size();
}
@Override
public CharSequence getPageTitle(int position) {
return titleList.get(position)==null?"标题":titleList.get(position);
}
}
}
TabFragment.java
package com.example.viewpagertest;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
public class TabFragment extends Fragment {
private TextView textview;
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.tab_fragment, null);
Bundle b = getArguments();
int position = b.getInt("position");
initView(view, position);
return view;
}
private void initView(View view, int position) {
textview = (TextView) view.findViewById(R.id.titleview);
textview.setText("这是第"+position+"个页面");
}
}
五、自定义样式
这里要使用viewPagerIndicator提供的主题Theme.PageIndicatorDefaults
<activity
android:name="com.example.viewpagertest.MainActivity"
android:label="@string/app_name"
android:theme="@style/Theme.PageIndicatorDefaults"
>
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
自定义指示器样式的话,也要通过配置activity的theme的方式来修改。
要注意的是自定义主题是通过重新定义vpiTabPageIndicatorStyle样式,不能改为其他名字,这个是viewPagerIndicator自定义的属性,并且在TabPageIndicator.java中引用。如下:
public TabPageIndicator(Context context, AttributeSet attrs) {
super(context, attrs);
setHorizontalScrollBarEnabled(false);
mTabLayout = new IcsLinearLayout(context, R.attr.vpiTabPageIndicatorStyle);
addView(mTabLayout, new ViewGroup.LayoutParams(WRAP_CONTENT, MATCH_PARENT));
}
自定义主题,重定义vpiIconPageIndicatorStyle
<style name="MyPageIndicatorDefaults" parent="android:Theme">
<item name="vpiTabPageIndicatorStyle">@style/myTabPageIndicator</item>
</style>
<!--继承Widget.TabPageIndicator,修改需要重新定义的属性-->
<style name="myTabPageIndicator" parent="Widget.TabPageIndicator">
<!--修改背景图片,可以设置按下或者选中的背景图-->
<item name="android:background">@drawable/my__tab_indicator</item>
<item name="android:paddingLeft">20dip</item>
<item name="android:paddingRight">20dip</item>
<item name="android:textSize">18sp</item>
</style>
之后配置theme就可以了
<activity
android:name="com.example.viewpagertest.MainActivity"
android:label="@string/app_name"
android:theme="@style/MyPageIndicatorDefaults"
>
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>