Question

我要创建这样的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"));
    }
}

我如何设置标签布局的样式，如所附图像？

Answer 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 ，并覆盖适当的方法，并为tabSelected和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创建一个可绘制对象。

Answer 2

他们不是一个简短的简单答案；但是您可以在“线性布局”中执行此操作，您所要做的就是添加相对布局，然后将最左侧的按钮垂直居中放置在左侧，然后每个其他按钮都相对于该按钮。稍微向右。 Video's that might be helpful.希望这会对您有所帮助，请在提出问题之前记得对任何事物进行一些研究。

Android自定义布局

2 个答案: