使用TabLayout製作不同尺寸的標籤android

Question

試圖重新創建與Instagram相同的頂級TabLayout。

main tab side tabs

試過許多東西：

• 應用：tabMode = 「固定」
• 應用：tabMode = 「滾動」

我設法創建這個編程如下：

View view1 = getLayoutInflater().inflate(R.layout.customtab, null); 
view1.findViewById(R.id.icon).setBackgroundResource(R.drawable.my1); 
tabLayout.addTab(tabLayout.newTab().setCustomView(view1)); 


View view2 = getLayoutInflater().inflate(R.layout.customtab, null); 
view2.findViewById(R.id.icon).setBackgroundResource(R.drawable.my2); 
tabLayout.addTab(tabLayout.newTab().setCustomView(view2)); 


View view3 = getLayoutInflater().inflate(R.layout.customtab, null); 
view3.findViewById(R.id.icon).setBackgroundResource(R.drawable.my3); 
tabLayout.addTab(tabLayout.newTab().setCustomView(view3)); 

center_tab.xml：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:orientation="vertical" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 

    <ImageView 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:scaleType="fitCenter" 
     android:id="@+id/icon" 
     android:layout_gravity="center_horizontal" /> 
</LinearLayout> 

side_tabs.xml：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:orientation="vertical" 
    android:layout_width="wrap_content" 
    android:layout_height="match_parent"> 

    <ImageView 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:scaleType="fitCenter" 
     android:id="@+id/icon" 
     android:layout_gravity="center_horizontal" /> 
</LinearLayout> 

但setupWithViewPager後（[MY PAGE ADAPTER]）的視圖得到完全改變。

如何使用ViewPager和TabLayout與不同大小的選項卡？

Answer 1

找到了解決辦法 - 都需要做的是給TabLayout和頁適配器像這樣與手動連接：

mViewPager = (ViewPager) findViewById(R.id.container); 
     mViewPager.setAdapter(mSectionsPagerAdapter); 

     mViewPager.addOnPageChangeListener(
       new ViewPager.SimpleOnPageChangeListener() { 
        @Override 
        public void onPageSelected(int position) { 
         TabLayout.Tab tab = tabLayout.getTabAt(position); 
         tab.select(); 

        } 
       }); 


     tabLayout = (TabLayout) findViewById(R.id.tabs); 
     tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() { 
      @Override 
      public void onTabSelected(TabLayout.Tab tab) { 
       mViewPager.setCurrentItem(tab.getPosition()); 
      } 

      @Override 
      public void onTabUnselected(TabLayout.Tab tab) { 

      } 

      @Override 
      public void onTabReselected(TabLayout.Tab tab) { 

      } 
     }); 

     View view1 = getLayoutInflater().inflate(R.layout.side, null); 

     tabLayout.addTab(tabLayout.newTab().setCustomView(view1)); 


     View view2 = getLayoutInflater().inflate(R.layout.center, null); 

     tabLayout.addTab(tabLayout.newTab().setCustomView(view2)); 


     View view3 = getLayoutInflater().inflate(R.layout.side, null); 

     tabLayout.addTab(tabLayout.newTab().setCustomView(view3)); 

side.xml：

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

    <ImageView 
     android:id="@+id/bla" 
     android:layout_width="30dp" 
     android:src="@mipmap/ic_launcher" 
     android:layout_height="wrap_content" /> 

</LinearLayout> 

center.xml：

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

    <LinearLayout 
     android:layout_width="match_parent" 
     android:layout_height="match_parent"> 

    <View 
     android:layout_width="0dp" 
     android:layout_height="1dp" 
     android:layout_weight="1" 
     android:id="@+id/view" /> 

    <ImageView 
     android:id="@+id/bla" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:src="@mipmap/ic_launcher"/> 

    <View 
     android:layout_width="0dp" 
     android:layout_height="1dp" 
     android:layout_weight="1" 
     android:id="@+id/view2" /> 

    </LinearLayout> 


</LinearLayout> 

而不是使用tabLayout.setupWithViewPager（[MY PAGE ADAPTER]）

Answer 2

嘿這是我的實現你正在努力實現的。我從你的代碼開始，但它在我的最終沒有工作，所以我調整了一下。

這是在一個片段內，請記住名字，我目前正在研究這個項目。我不得不計算屏幕寬度，以便爲側面和中心標籤獲得正確的尺寸。

您必須設置tabLayout.setTabMode（TabLayout.MODE_SCROLLABLE）或它不起作用。

private void setupViews(View containerView, LayoutInflater inflater) { 
    mViewPager = (HomePageViewer) containerView.findViewById(R.id.fragment_workout_time_container); 
    tabLayout = (TabLayout) containerView.findViewById(R.id.fragment_workout_time_tabs); 

    //setSupportActionBar(toolbar); 

    setupViewPager(); 

    // In Home we used the line below, but in order to get the different sizes in the tab we will not use this. 
    //tabLayout.setupWithViewPager(mViewPager); 
    tabLayout.setOnTabSelectedListener(tabSelectedListener); 

    DisplayMetrics metrics = new DisplayMetrics(); 
    getActivity().getWindowManager().getDefaultDisplay().getMetrics(metrics); 

    Logs.print("window metrics", metrics); 

    float density = metrics.density; 
    float dpHeight = metrics.heightPixels/density; 
    float dpWidth = metrics.widthPixels/density; 

    Logs.print(dpHeight + "", dpWidth); 
    Logs.print("", getResources().getDisplayMetrics().density); 


    View leftBarButton = inflater.inflate(R.layout.fragment_workout_time_left_bar_button, null); 
    leftBarButton.findViewById(R.id.fragment_workout_time_left_bar_button_imageview) 
      .setLayoutParams(new RelativeLayout.LayoutParams((int) (metrics.widthPixels * 0.05), RelativeLayout.LayoutParams.MATCH_PARENT)); 

    tabLayout.addTab(tabLayout.newTab().setCustomView(leftBarButton)); 


    View centerBarButton = inflater.inflate(R.layout.fragment_workout_time_center_bar_button, null); 
    centerBarButton.findViewById(R.id.fragment_workout_time_center_bar_button_imageview) 
      .setLayoutParams(new RelativeLayout.LayoutParams((int) (metrics.widthPixels * 0.56), RelativeLayout.LayoutParams.MATCH_PARENT)); 

    tabLayout.addTab(tabLayout.newTab().setCustomView(centerBarButton)); 

    View rightBarButton = inflater.inflate(R.layout.fragment_workout_time_right_bar_button, null); 
    rightBarButton.findViewById(R.id.fragment_workout_time_right_bar_button_imageview) 
      .setLayoutParams(new RelativeLayout.LayoutParams((int) (metrics.widthPixels * 0.05), RelativeLayout.LayoutParams.MATCH_PARENT)); 

    tabLayout.addTab(tabLayout.newTab().setCustomView(rightBarButton)); 

    //tabLayout.setTabGravity(TabLayout.GRAVITY_CENTER); 
    tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE); 

    //Basically selects the fragment that will user will interact with first. 
    tabLayout.getTabAt(tabLayout.getSelectedTabPosition() + 1).select(); 
    //Then get that same fragment then makes it retrieve the latest data. 
    //Logs.print("hey there", "I am here first"); 
    //fragments.get(tabLayout.getTabAt(tabLayout.getSelectedTabPosition()).getText()).active = true; 
} 

TabLayout.OnTabSelectedListener tabSelectedListener = new TabLayout.OnTabSelectedListener() { 
    @Override 
    public void onTabSelected(TabLayout.Tab tab) { 
     Log.i(TAG, " In tab listener - onTabSelected"); 
     mViewPager.setCurrentItem(tab.getPosition()); 
     //fragments.get(tab.getText()).active = true; 
    } 

    @Override 
    public void onTabUnselected(TabLayout.Tab tab) { 
     Log.i(TAG, " In tab listener - onTabUnselected"); 
     //fragments.get(tab.getText()).active = false; 
    } 

    @Override 
    public void onTabReselected(TabLayout.Tab tab) { 

    } 
}; 

/** 
* This method creates an adapter for the pager, creates new instances of every fragment, adds 
* the fragment to the adapter, then set that adapter as the pager's adapter. 
*/ 
private void setupViewPager() { 
    HomeActivity.SectionsPagerAdapter adapter = new HomeActivity.SectionsPagerAdapter(getFragmentManager()); 

    Logs.print("setupViewPager", TAG); 

    BasePagerFragment fragment; 

    fragment = new ProfileFragment().newInstance(uid); 
    adapter.addFragment(fragment, "frag 1"); 
    fragments.put("frag 1", fragment); 

    fragment = new FindAChubFragment().newInstance(uid); 
    adapter.addFragment(fragment, getString(R.string.findachub_fragment)); 
    fragments.put(getString(R.string.findachub_fragment), fragment); 


    fragment = new ProfileFragment().newInstance(uid); 
    adapter.addFragment(fragment, "frag 3"); 
    fragments.put("frag 3", fragment); 

    mViewPager.setAdapter(adapter); 

    // Used to change the what fragments are being displayed 
    mViewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout)); 
} 

如果屏幕出現轉動，您將不得不重新計算寬度，否則標籤將不會填充到最後。

side.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
android:layout_width="wrap_content" 
android:layout_height="match_parent"> 

<ImageView 
    android:id="@+id/fragment_workout_time_left_bar_button_imageview" 
    android:layout_width="@dimen/workout_time_fragment_side_tab_dimen" 
    android:layout_height="match_parent" 
    android:src="@mipmap/ic_launcher"/> 

Center.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
android:layout_width="match_parent" 
android:layout_height="match_parent"> 

<ImageView 
android:id="@+id/fragment_workout_time_center_bar_button_imageview" 
android:layout_width="@dimen/workout_time_fragment_center_tab_dimen" 
android:layout_height="match_parent" 
android:src="@mipmap/ic_launcher"/> 
</RelativeLayout>