Wie kann ich einen Viewpager mit benutzerdefinierten Tabs wie diesem erstellen?

Question

Wie erreiche ich einen Tab/Viewpager Stil?

Es sieht also nicht wie die normale Sliding Tab Layout wie here.

Gibt es einige Leitfäden, die man da draußen ausführen kann? Es sieht sehr individuell mir

Answer 1

Zunächst definieren die slidingTabLayout mit Blick Pager zu simulieren:

<com.forthcode.androidoze.Utils.SlidingTabLayout 
    android:id="@+id/sliding_tabs" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:background="#FFFFFFFF"/> 

<android.support.v4.view.ViewPager 
    android:id="@+id/vpPager" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content"> 

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

In obigen Code ich genommen habe das Gleiten Registerkarte Farbe als transparent, können Sie jede nach Ihren Bedürfnissen nehmen. Definieren Sie jetzt eine benutzerdefinierte Ansicht, die Ihre einzelne Registerkarte darstellt.

customtab.xml

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:orientation="horizontal" 
android:gravity="center_horizontal" 
android:padding="10dp"> 
<TextView 
    android:id="@+id/textView1" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:gravity="center_vertical" 
    android:layout_gravity="center" 
    android:textAppearance="?android:attr/textAppearanceMedium"/> 
</LinearLayout> 

nun einen selector.xml innerhalb des ziehbar Ordner erstellen, die Textfarbe der Registerkarte definiert, wenn sie ausgewählt werden und nicht ausgewählt.

selector.xml

<?xml version="1.0" encoding="utf-8"?> 
<selector xmlns:android="http://schemas.android.com/apk/res/android"> 
<item android:state_selected="true" android:color="#ccc" /> 
<item android:state_focused="true" android:color="#ccc" /> 
<item android:state_pressed="true" android:color="#ccc" /> 
<item android:color="#fff" /> 
</selector> 

In der letzten Zeile der selector.xml ist die Standard-Registerkarte Textfarbe, wenn die Registerkarte nicht ausgewählt ist.

Nun endlich in Ihrem Leere populateTabStrip() -Methode von SlidingTabLayout Klasse fügen Sie einfach den Code, um die Wähler mit der Lasche zu implementieren, wie unten dargestellt:

tabTitleView.setTextColor(getResources().getColorStateList(R.drawable.selector)); 

diese Zeile Denken Sie daran, sollten in das Innere der populateTabStrip() sein nur für Schleife, um es einfach schreibe ich die komplette Methode populateTabStrip() {} von slidingTabLayout, so dass Ihre populateTabStrip() sollte wie folgt aussehen:

private void populateTabStrip() { 
    final PagerAdapter adapter = mViewPager.getAdapter(); 
    final OnClickListener tabClickListener = new TabClickListener(); 



    for (int i = 0; i < adapter.getCount(); i++) { 
     View tabView = null; 
     TextView tabTitleView = null; 

     if (mTabViewLayoutId != 0) { 
      // If there is a custom tab view layout id set, try and inflate it 
      tabView = LayoutInflater.from(getContext()).inflate(mTabViewLayoutId, mTabStrip, 
        false); 
      tabTitleView = (TextView) tabView.findViewById(mTabViewTextViewId); 
     } 

     if (tabView == null) { 
      tabView = createDefaultTabView(getContext()); 
     } 

     if (tabTitleView == null && TextView.class.isInstance(tabView)) { 
      tabTitleView = (TextView) tabView; 
     } 

     if (mDistributeEvenly) { 
      LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) tabView.getLayoutParams(); 
      lp.width = 0; 
      lp.weight = 1; 
     } 

     tabTitleView.setText(adapter.getPageTitle(i)); 
     tabView.setOnClickListener(tabClickListener); 
        tabTitleView.setTextColor(getResources().getColorStateList(R.drawable.selector)); 
     String desc = mContentDescriptions.get(i, null); 
     if (desc != null) { 
      tabView.setContentDescription(desc); 
     } 

     mTabStrip.addView(tabView); 
     if (i == mViewPager.getCurrentItem()) { 
      tabView.setSelected(true); 
     } 
    } 
} 

Jetzt in der Aktivität oder Fragment, wo Sie verwenden Die Registerkarte definiert den vi ewpager, slidingtablayout und der viewpager adapter, und setze den adapter mit view pager und setze das riptab mit view pager wie unten gezeigt (Hinweis ich habe innerhalb von fragment verwendet, wenn du Activity verwendest und dann nach deinen Bedürfnissen modifizierst):

SlidingTabLayout mSlidingTabLayout; 
ViewPager mViewPager; 
PagerAdapter mPagerAdapter; 
SharedPreferences mySharedpref; 

@Override 
public View onCreateView(LayoutInflater inflater, ViewGroup container, 
         Bundle savedInstanceState) { 
    // Inflate the layout for this fragment 
    View view= inflater.inflate(R.layout.fragment_home, container, false); 

    mPagerAdapter=new PagerAdapter(getChildFragmentManager()); 
    mViewPager= (ViewPager) view.findViewById(R.id.vpPager); 
    mSlidingTabLayout= (SlidingTabLayout) view.findViewById(R.id.sliding_tabs); 
    mViewPager.setAdapter(mPagerAdapter); 
    mSlidingTabLayout.setCustomTabView(R.layout.customtab, R.id.textView1); 
    mSlidingTabLayout.setSelectedIndicatorColors(R.color.tabIndicator); 
    mSlidingTabLayout.setCustomTabColorizer(new SlidingTabLayout.TabColorizer() {//change the color of the tab indcator 

     @Override 
     public int getIndicatorColor(int position) { 
      // TODO Auto-generated method stub 
      return getResources().getColor(R.color.tabIndicator); 
     } 
    }); 

    mSlidingTabLayout.setViewPager(mViewPager); 
    mViewPager.setCurrentItem(tabPosition); 
return view; 
} 

Dies sollte gut funktionieren. Wenn Sie irgendein Problem dann Kommentar finden, werde ich versuchen,

Answer 2

Sie ein Top-Layout in Ihrer Tätigkeit haben können, in oben in der Ansicht Pager. Im OnPageSelected des ViewPager können Sie die Textfarbe des oberen Layout ändern Registerkarte Auswahl