Custom TabLayout Start Center

Question

Ich möchte benutzerdefinierte TabLayout machen. Wenn eine Aktivität erstellt wurde, muss der erste Tab zentriert gestartet werden. Und zweite Tabs ersten 3 Buchstaben im Design gezeigt.

nach dem Scrollen Tabs, muss es wie folgt aussieht:

ich versuche, viele Code für macht dies jedoch, wenn ich app anderen Telefon padding Wechsel normal und Design nicht funktionieren installieren. Wie kann ich das machen? Danke vielmals.

Answer 1

Verwenden PagerTabStrip im ViewPager

ist hier mein Bild.

Sie können wie folgt tun.

xml Code

<?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> 

Aktivität Code

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; 
     } 
    }; 
} 
} 

Sie müssen sich über setTabIndicatorColorResource und getPageTitle in the PagerAdapter, und diese sind wichtiger wissen.