在 TabView 中添加两个 TextView

Question

我正在尝试获得与此类似的选项卡布局，其中顶部是星期几，底部是月份。 Layout

我只需要一些关于如何做到这一点的想法。我虽然在选项卡中添加了两个 TextView，但无法使其正常工作。这是我到目前为止所得到的。

private Toolbar toolbar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
        ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
                this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
        drawer.setDrawerListener(toggle);
        toggle.syncState();

        NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
        navigationView.setNavigationItemSelectedListener(this);

        toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        toolbar.setElevation(0);

        ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
        setupViewPager(viewPager);

        TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);
        tabLayout.setupWithViewPager(viewPager);
        setupNumTab();
    }
    private void setupViewPager(ViewPager viewPager) {
        ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
        adapter.addFrag(new OneFragment(), "ONE", 1);
        adapter.addFrag(new TwoFragment(), "TWO", 2);
        adapter.addFrag(new ThreeFragment(), "THREE", 3);
        adapter.addFrag(new FourFragment(), "FOUR", 4);
        adapter.addFrag(new FiveFragment(), "FIVE", 5);
        viewPager.setAdapter(adapter);
    }

    public void setupNumTab() {
        LinearLayout layout = new LinearLayout(this);
        layout.setOrientation(LinearLayout.VERTICAL);
        TextView nameView = new TextView(this);
        nameView.setText("TEST");
        layout.addView(nameView);
        TextView anotherView = new TextView(this);
        anotherView.setText("12");
        layout.addView(anotherView);
        setContentView(layout);
    }

Answer 1

一种方法是使用 TabLayout 并为每个项目使用 customView。

然后将它与 viewPager 一起附加。

如果您有很多标签要显示，请使用 fragmentStatePagerAdapter，或者如果您只有 2 或 3 个标签，请使用 fragmentPagerAdapter。您可以阅读更多关于它们的信息。

做这样的事情......

假设这是您的一个 mainActivity xml 布局。

<android.support.design.widget.TabLayout
    android:id="@+id/tab_layout"
    android:layout_width="match_parent"
    android:layout_height="61.8dp"
    android:background="#06acef"
    android:elevation="0dp"
    android:theme="@style/ThemeOverlay.AppCompat.Dark"
    app:elevation="0dp"
    app:tabGravity="center"
    app:tabIndicatorColor="@color/white"
    app:tabMode="fixed"
    app:tabPaddingEnd="-1dp"
    app:tabPaddingStart="-1dp"
    android:fillViewport="false">
</android.support.design.widget.TabLayout>

   <ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    </ViewPager>

它们的父级可以是 LinearLayout 或 RelativeLayout。怎么做就看你自己了。

现在，为您的标签再创建一种布局。说 tab_layout.xml

<TextView
    android:id="@+id/text1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />
<TextView
    android:layout_below="@id/text2"
    android:id="@+id/show_time_tab_date"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

现在在你的主要活动中..

内部onCreate()回调

   ViewPageAdapter viewPageAdapter = new ViewPageAdapter(getSupportFragmentManager(), getApplicationContext(),this);

        mViewPager.setAdapter(viewPageAdapter);
        mTabLayout.setupWithViewPager(mViewPager);

       // bind each tab data here
        for (int i = 0; i < range; i++) {
            TabLayout.Tab tab = mTabLayout.getTabAt(i);
            tab.setCustomView(viewPageAdapter.getTabView(i));
        }

现在，你的 ViewPageAdapter

public class ViewPageAdapter extends FragmentStatePagerAdapter{
    @Override
    public Fragment getItem(int position) {

       return YoutFragment.newInstance();
    }

    @Override
    public int getCount() {
        return 10;
    }

    public View getTabView(int position) {
        LayoutInflater layoutInflater = LayoutInflater.from(mContext);
        View tabView = layoutInflater.inflate(R.layout.your_custom_tab_layout, null, false);
        TextView text1 = (TextView) tabView.findViewById(R.id.text1);
        TextView text2 = (TextView) tabView.findViewById(R.id.text2);
        text1.setText("text1");
        text2.setText("dateStr[1]");
        return tabView;
    }
}

最后，你的片段，对于每个 viewpagerAdapter，在 getItem() 回调中调用。

public class YourFragment extends Fragment{
      public static YourFragment newInstance(){
          return new YourFragment()
      }
}