Question

我想创建一个带有标签的Activity（可能使用TabHost），如下所示：

这个布局还有一些按钮，复选框和gridview，但我最感兴趣的是找出如何让我的标签看起来像这样，因为默认情况下它们看起来像这样：

我的问题是我不知道如何做到这一点，我之前已经为一些UI组件制作了drawable，但我认为这是不同的。

Answer 1

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

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

如果有人对代码感兴趣，那么这就是主要活动的布局

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

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

需要帮助创建自定义TabHost

1 个答案: