Android应用中使用ViewPager和ViewPager指示器来制作Tab标签

2019-12-10 18:37:30丽君

4.定义ViewPager每一个Item的代码(每一个Fragment)
此例只定义了一个Fragment,R.layout.fragment仅定义了一个TextView。在这个Fragment代码中,通过Bundle传递一个Key-value数据,内容仅一个字符串。实际开发的时候,针对每个ViewPager的item,要设计每个不同的Fragment的布局、代码内容等。此例代码只做示范。

public class ItemFragment extends Fragment {

 @Override
 public View onCreateView(LayoutInflater inflater, ViewGroup container,
   Bundle savedInstanceState) {

  //动态找到布局文件,再从这个布局中find出TextView对象
  View contextView = inflater.inflate(R.layout.fragment_item, container, false);
  TextView mTextView = (TextView) contextView.findViewById(R.id.textview);

  //获取Activity传递过来的参数
  Bundle mBundle = getArguments();
  String  mTextView.setText(title);

  return contextView;
 }

 @Override
 public void onActivityCreated(Bundle savedInstanceState) {
  super.onActivityCreated(savedInstanceState);
 } 
}

5.Indicator的样式修改
第1步:在values/styles中添加<style>:
本例中,添加了3个<style>,其中"StyledIndicators"是我们需要的<style>,它其中的<item>使用了"CustomTabPageIndicator"这个<style>,这个<style>其中的一个<item>又使用了"CustomTabPageIndicator.Text"这个<style>。
实际上可以把"StyledIndicators"<style>的<item>属性全部写死在"StyledIndicators"下面。 但这样层级分离式的写法,增强了代码的复用性,以便后期维护和功能代码增删操作。

 <style name="StyledIndicators" parent="@android:style/Theme.Light">
  <item name="vpiTabPageIndicatorStyle">@style/CustomTabPageIndicator</item>
 </style>

 <style name="CustomTabPageIndicator" parent="Widget.TabPageIndicator">
  <item name="android:background">@drawable/tab_indicator</item>
  <item name="android:textAppearance">@style/CustomTabPageIndicator.Text</item>
  <item name="android:textSize">14sp</item>
  <item name="android:dividerPadding">8dp</item>
  <item name="android:showDividers">middle</item>
  <item name="android:paddingLeft">10dp</item>
  <item name="android:paddingRight">10dp</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>
  <item name="android:textColor">@drawable/selector_tabtext</item>
 </style>