Android 自定义标签布局答案

【问题标题】：Android custom tablayoutAndroid 自定义标签布局
【发布时间】：2018-08-05 06:03:29
【问题描述】：

我想创建这样的 tablayout 视图：

这是我为标签布局编写的代码：

public class MainActivity extends AppCompatActivity {

    TabLayout tabLayout;

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

        Toolbar toolbar = findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        toolbar.setTitle("Suman Restaurant");

        tabLayout = findViewById(R.id.tabLayout);

        tabLayout.addTab(tabLayout.newTab().setText("Chinese"));
        tabLayout.addTab(tabLayout.newTab().setText("Noodles"));
        tabLayout.addTab(tabLayout.newTab().setText("Snacks"));
        tabLayout.addTab(tabLayout.newTab().setText("Pizza"));
    }
}

我怎样才能像附件图片一样设置标签布局的样式？

【问题讨论】：

请用您尝试的代码更新您的问题，以便社区可以帮助您改进您的想法。
请添加一些代码，然后我们可以找到问题并解决您的问题！
我会尽快更新问题，我是堆栈溢出的新手，所以有点困惑。

标签： android android-layout layout android-tablayout

【解决方案1】：

我知道现在发布此答案为时已晚，但我觉得这对将来的某人有帮助，所以我将其发布。

我正在做类似的选项卡布局，我搜索了很多，但没有找到任何有用的解决方案。这是位长度的解决方案，但它可以满足您的需求。

添加一种方法，该方法将在选项卡布局中添加选项卡，例如

private void addTabsOnTablayout() {
    tablayout.addTab(tablayout.newTab().setText("Chinese"), 0);
    tablayout.addTab(tablayout.newTab().setText("Noodles"), 1);
    tablayout.addTab(tablayout.newTab().setText("Snacks"), 2);
    tablayout.addTab(tablayout.newTab().setText("Pizza"), 3);
    tablayout.addOnTabSelectedListener(this);

    for (int i = 0; i < tablayout.getTabCount(); i++) {
        TabLayout.Tab tab = tablayout.getTabAt(i);
        if (tab != null) {
            TextView tabTextView = new TextView(getActivity());
            tabTextView.setTextAlignment(View.TEXT_ALIGNMENT_CENTER);
            tabTextView.setTextSize(16);
            tabTextView.setPadding(0, 4, 0, 4);
            tabTextView.setBackgroundResource(R.drawable.tab_inactive);
            tabTextView.setTextColor(getResources().getColor(R.color.tab_unselected_text_color));
            tab.setCustomView(tabTextView);

            tabTextView.setText(tab.getText());

            // First tab is the selected tab, so if i==0 then set BOLD typeface
            if (i == 0) {
                tabTextView.setBackgroundResource(R.drawable.tab_active);
                tabTextView.setTextColor(getResources().getColor(R.color.tab_selected_text_color));
                tab.setCustomView(tabTextView);
            }
        }
    }
}

实现 TabLayout.OnTabSelectedListener 并覆盖适当的方法并为 on tabSelected 和 on notselected 编写代码

 @Override
public void onTabSelected(TabLayout.Tab tab) {
    TextView tabTextView = (TextView) tab.getCustomView();
    tabTextView.setBackgroundResource(R.drawable.tab_active);
    tabTextView.setTextColor(getResources().getColor(R.color.tab_selected_text_color));
    tab.setCustomView(tabTextView);
    showSnack();

}

@Override
    public void onTabUnselected(TabLayout.Tab tab) {
        TextView tabTextView = (TextView) tab.getCustomView();
        tabTextView.setBackgroundResource(R.drawable.tab_inactive);
        tabTextView.setTextColor(getResources().getColor(R.color.tab_unselected_text_color));
        tab.setCustomView(tabTextView);
    }

最后为 tab_active 和 tab_inactive 创建一个drawable。

【讨论】：

感谢 Suraj Ghadge 发布答案。我跳过了 tabLayout 部分并开始处理剩余的东西现在我在我的代码中添加了它，它就像魅力一样工作。

【解决方案2】：

他们的答案并不简单；但是你可以在线性布局中做到这一点，你所要做的就是添加一个相对布局，然后让最左边的按钮垂直居中，向左，然后每个其他按钮都相对于那个按钮.稍微向右。 Video's that might be helpful.希望这对你有帮助，记得在提问之前做一些研究。

【讨论】：