修復PagerTabStrip中的標籤

Question

我有我的PagerTabStrip設置，但標籤看起來不太好。我如何製作標籤看起來很正常？ （集中在中間 - 沒有雙線）

Here is a picture of it

感謝如果你能帶我到一個解決方案。我覺得它真的很奇怪，我怎麼似乎無法找到這個問題的答案

這是XML - 它很簡單。

<android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@+id/pager" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:visibility="visible"> 

    <android.support.v4.view.PagerTabStrip 
     android:id="@+id/pager_title_strip" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:background="@color/primary_blue" 
     android:textColor="#fff" /> 

</android.support.v4.view.ViewPager> 

Answer 1

使用PagerTabStrip在ViewPager

這裏是我的照片。

你可以這樣做。

XML代碼

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent"> 

    <android.support.v4.view.ViewPager 
     android:id="@+id/viewpager" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_gravity="center"> 

     <android.support.v4.view.PagerTabStrip 
      android:id="@+id/pagertab" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:layout_gravity="top" 
      android:background="@color/colorPrimary" 
      android:paddingBottom="20dp" 
      android:paddingTop="20dp"/> 
    </android.support.v4.view.ViewPager> 
</RelativeLayout> 

活動代碼

public class MainActivity extends AppCompatActivity { 
// layouts below the Tab 
private View view1, view2, view3; 
private List<View> viewList; 
private ViewPager viewPager; 
private PagerTabStrip mPagerTabStrip; 
private List<String> titleList; 

@Override 
protected void onCreate(Bundle savedInstanceState) { 
    super.onCreate(savedInstanceState); 
    setContentView(R.layout.activity_main); 

    initView(); 

    initTitle(); 

    PagerAdapter pagerAdapter = getAdapter(); 

    viewPager.setAdapter(pagerAdapter); 
} 

/** 
* init view 
*/ 
private void initView() { 
    viewPager = (ViewPager) findViewById(R.id.viewpager); 
    mPagerTabStrip = (PagerTabStrip) findViewById(R.id.pagertab); 
    // Tab Indicator Color setting 
    mPagerTabStrip.setTabIndicatorColorResource(R.color.colorAccent); 

    LayoutInflater inflater = getLayoutInflater(); 
    view1 = inflater.inflate(R.layout.layout1, null); 
    view2 = inflater.inflate(R.layout.layout2, null); 
    view3 = inflater.inflate(R.layout.layout3, null); 

    // Add view to the viewList 
    viewList = new ArrayList<View>(); 
    viewList.add(view1); 
    viewList.add(view2); 
    viewList.add(view3); 
} 

/** 
* add title to the titleList 
*/ 
private void initTitle() { 
    titleList = new ArrayList<String>(); 
    titleList.add("January, 2017"); 
    titleList.add("February, 2017"); 
    titleList.add("July, 2017"); 
} 

@NonNull 
private PagerAdapter getAdapter() { 
    return new PagerAdapter() { 

     @Override 
     public boolean isViewFromObject(View arg0, Object arg1) { 
      return arg0 == viewList.get((int) Integer.parseInt(arg1.toString())); 
     } 

     @Override 
     public int getCount() { 
      return viewList.size(); 
     } 

     @Override 
     public void destroyItem(ViewGroup container, int position, Object object) { 
      container.removeView(viewList.get(position)); 
     } 

     @Override 
     public Object instantiateItem(ViewGroup container, int position) { 
      container.addView(viewList.get(position)); 
      return position; 
     } 

     /** 
     * title 
     * @param pos 
     * @return 
     */ 
     @Override 
     public CharSequence getPageTitle(int pos) { 
      // title icon setting ,space added before text for 
      SpannableStringBuilder spannableStringBuilder = new SpannableStringBuilder(" " + titleList.get(pos)); // 
      Drawable drawable = getResources().getDrawable(R.mipmap.ic_launcher); 
      drawable.setBounds(0, 0, drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight()); 
      ImageSpan span = new ImageSpan(drawable, ImageSpan.ALIGN_BASELINE); 

      // text color setting 
      ForegroundColorSpan fcs = new ForegroundColorSpan(Color.WHITE); 
      // icon setting 
      // ssb.setSpan(span, 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE); 
      // text color setting 
      spannableStringBuilder.setSpan(fcs, 1, spannableStringBuilder.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE); 
      spannableStringBuilder.setSpan(new RelativeSizeSpan(1.2f), 1, spannableStringBuilder.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE); 
      return spannableStringBuilder; 
     } 
    }; 
} 
} 

您需要了解setTabIndicatorColorResource和getPageTitle in the PagerAdapter，而這些都是比較重要的。