本文链接http://blog.csdn.net/jan_s/article/details/50765831,转载请留言。
其实这个组件已经有两年没有更新了,为什么我要写这个示例?因为我很久以前写过一篇同样的测评,[Android初级]开源Widget之PagerSlidingTabStrip新手测试,但因为代码乱七八糟,这次就完善一下,可以给那些觉得不错的人提供一个指导性的案例。
本示例中的PagerSlidingTabStrip做了一些调整:对字体颜色跟随tab底部滑动条的颜色等。
效果图:
使用步骤和说明
1. 先看看我们的布局文件是怎么引入的。其实核心组件就是PagerSlidingTabStrip这个类,由于代码很多这里不直接ctrl v了,待会儿一起把demo上传了,大家有兴趣可以下载看看。
activity_pager.xml
<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" xmlns:app="http://schemas.android.com/apk/res/com.example.pagerslidingtabstrip">
<com.astuetz.PagerSlidingTabStrip
android:id="@+id/main_tabs"
android:layout_width="match_parent"
android:layout_height="45dp"
app:pstsShouldExpand="true" <!-- 设置标题布局是否可扩展,自己可以尝试看看效果 -->
app:pstsIndicatorHeight="5dp" <!-- 滑动条的高度设置 -->
app:pstsUnderlineColor="@android:color/transparent" <!-- 整个标题栏下的下划线颜色,这里我让他看不见啦啦啦德玛西亚 -->
app:pstsIndicatorColor="#43C6B4" <!-- 滑动条的颜色,就是效果图中的绿色 -->
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" >
</com.astuetz.PagerSlidingTabStrip>
<android.support.v4.view.ViewPager
android:id="@+id/main_viewPager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/main_tabs" />
</RelativeLayout>
2.java代码更简单了。先看Activity里面怎么玩的吧
PagerSildingDemoActivity.java
import android.annotation.SuppressLint;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.view.ViewPager;
import com.astuetz.PagerSlidingTabStrip;
@SuppressLint({ "NewApi", "ResourceAsColor" })
public class PagerSildingDemoActivity extends FragmentActivity {
private static final String TAG = "PagerSildingDemoActivity";
private PagerSlidingTabStrip tabStrip;
private ViewPager mPager;
private MainViewPagerAdapter mPagerAdapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_pager);
tabStrip = (PagerSlidingTabStrip) findViewById(R.id.main_tabs);
mPager = (ViewPager) findViewById(R.id.main_viewPager);
FragmentManager fm = getSupportFragmentManager();
String[] arrays = new String[]{"标题1","标题2","标题3"};
mPagerAdapter = new MainViewPagerAdapter(fm,arrays);
mPager.setAdapter(mPagerAdapter);
tabStrip.setFollowTabColor(true);//设置标题是否跟随
tabStrip.setViewPager(mPager);
}
}
MainViewPagerAdapter.java
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
public class MainViewPagerAdapter extends FragmentPagerAdapter {
private String[] mPagerTitles;
public MainViewPagerAdapter(FragmentManager fm,String[] titles) {
super(fm);
this.mPagerTitles = titles;
}
@Override
public CharSequence getPageTitle(int position) {
return mPagerTitles[position];
}
@Override
public Fragment getItem(int position) {
return SuperAwesomeCardFragment.newInstance(position);
}
@Override
public int getCount() {
return mPagerTitles.length;
}
}
SuperAwesomeCardFragment.java 这是我们显示内容的fragment,这里面简单写了个position显示别介意。
public class SuperAwesomeCardFragment extends Fragment {
private static final String ARG_POSITION = "position";
private int position;
public static SuperAwesomeCardFragment newInstance(int position) {
SuperAwesomeCardFragment f = new SuperAwesomeCardFragment();
Bundle b = new Bundle();
b.putInt(ARG_POSITION, position);
f.setArguments(b);
return f;
}
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
position = getArguments().getInt(ARG_POSITION);
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
LayoutParams params = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
FrameLayout fl = new FrameLayout(getActivity());
fl.setLayoutParams(params);
final int margin = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 0, getResources()
.getDisplayMetrics());
TextView v = new TextView(getActivity());
params.setMargins(margin, margin, margin, margin);
v.setLayoutParams(params);
v.setLayoutParams(params);
v.setGravity(Gravity.CENTER);
v.setBackgroundResource(R.drawable.background_card);
v.setText("内容 " + (position + 1));
fl.addView(v);
return fl;
}
}
下载
demo地址:点击打开下载示例代码界面