android - 需要帮助创建自定义 TabHost

Question

我想创建一个带有选项卡的 Activity (可能使用 TabHost)，看起来像这样:

此布局也有一些按钮、复选框和 GridView ，但我最感兴趣的是了解如何让我的选项卡看起来像这样，因为默认情况下它们看起来像这样:

我的问题是我不知道该怎么做，我之前为一些 UI 组件制作了可绘制对象，但我认为这是不同的东西。

Answer 1

经过很长一段时间后，我想出了如何获得我想要的东西，通过尝试很多不同的方法来制作标签，我最终最终使用了带有 ViewPager 的 TabLayout。

我做了一个概念验证，它看起来像这样:

如果有人对代码感兴趣，这是主要 Activity 的布局

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

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:weightSum="10">

    <View
        android:layout_width="0dp"
        android:layout_height="1dp"
        android:layout_weight="0.2"/>

    <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="4"
        app:tabMode="fixed"
        app:tabGravity="fill"
        app:tabPaddingStart="2dp"
        app:tabPaddingEnd="2dp"
        app:tabPaddingTop="2dp"/>

    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="5.8"/>

</LinearLayout>

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

MainActivity.java:

import android.graphics.Color;
import android.net.Uri;
import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.view.LayoutInflater;
import android.widget.RelativeLayout;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity implements FirstTabFragment.OnFragmentInteractionListener, SecondTabFragment.OnFragmentInteractionListener {

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

    TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);
    ViewPager viewPager = (ViewPager) findViewById(R.id.pager);

    tabLayout.setSelectedTabIndicatorColor(Color.TRANSPARENT);

    viewPager.setAdapter(new SectionPagerAdapter(getSupportFragmentManager()));
    tabLayout.setupWithViewPager(viewPager);

    TabLayout.Tab tab = tabLayout.getTabAt(0);
    RelativeLayout relativeLayout = (RelativeLayout) LayoutInflater.from(this).inflate(R.layout.tab_layout_file1, tabLayout, false);
    TextView tabTextView = (TextView) relativeLayout.findViewById(R.id.tab_title);
    tabTextView.setText(tab.getText());
    tab.setCustomView(relativeLayout);

    TabLayout.Tab tab2 = tabLayout.getTabAt(1);
    RelativeLayout relativeLayout2 = (RelativeLayout) LayoutInflater.from(this).inflate(R.layout.tab_layout_file2, tabLayout, false);
    TextView tabTextView2 = (TextView) relativeLayout2.findViewById(R.id.tab_title);
    tabTextView2.setText(tab2.getText());
    tab2.setCustomView(relativeLayout2);

    tab.select();

}

@Override
public void onFragmentInteraction(Uri uri) {

}

public class SectionPagerAdapter extends FragmentPagerAdapter {

    public SectionPagerAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public Fragment getItem(int position) {
        switch (position) {
            case 0:
                return new FirstTabFragment();
            case 1:
            default:
                return new SecondTabFragment();
        }
    }

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

    @Override
    public CharSequence getPageTitle(int position) {
        switch (position) {
            case 0:
                return "First Tab";
            case 1:
            default:
                return "Second Tab";
        }
    }
}
}

TabLayout1(TabLayout2 相同但使用 shape2)

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

<TextView
    android:id="@+id/tab_title"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:background="@drawable/shape1"
    android:textColor="@android:color/white"/>

</RelativeLayout>

形状只是一个红色和一个蓝色的矩形， fragment 是默认的具有与形状相同颜色背景的空 fragment 。