【问题标题】:How to set Custom tab in tab layout in android如何在android的选项卡布局中设置自定义选项卡
【发布时间】:2018-06-23 17:34:57
【问题描述】:

actvity_main.xml

<android.support.design.widget.CoordinatorLayout 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.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

            <android.support.design.widget.TabLayout
                android:id="@+id/tabs"
                android:background="#ef9f9f"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:tabGravity="fill"
                app:tabMode="fixed" />

        </android.support.design.widget.AppBarLayout>

        <android.support.v4.view.ViewPager
            android:id="@+id/viewpager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    </android.support.design.widget.CoordinatorLayout>

// 主活动:

public class MainActivity extends AppCompatActivity {

    private TabLayout tabLayout;
    public ViewPager viewPager;

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

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

        tabLayout = (TabLayout) findViewById(R.id.tabs);
        tabLayout.setupWithViewPager(viewPager);

        View headerView = ((LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE))
                .inflate(R.layout.custom_tab, null, false);

        final LinearLayout linearLayoutOne = (LinearLayout) headerView.findViewById(R.id.ll);
        final LinearLayout linearLayout2 = (LinearLayout) headerView.findViewById(R.id.ll2);
        final TextView text1 = (TextView) headerView.findViewById(R.id.tvtab1);
        final TextView text2 = (TextView) headerView.findViewById(R.id.tvtab2);
        tabLayout.getTabAt(0).setCustomView(linearLayoutOne);
        tabLayout.getTabAt(1).setCustomView(linearLayout2);


        tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {

                if (tab.getText().equals("ONE")) {

                    text1.setVisibility(View.VISIBLE);
                } else {

                    text2.setVisibility(View.VISIBLE);
                }
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {

                if (tab.getText().equals("ONE")) {
                    text1.setVisibility(View.GONE);
                } else {
                    text2.setVisibility(View.GONE);
                }

            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });

    }

    private void setupViewPager(ViewPager viewPager) {
        ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
        adapter.addFragment(new OneFragment(), "ONE");
        adapter.addFragment(new TwoFragment(), "TWO");
        viewPager.setAdapter(adapter);
    }

    class ViewPagerAdapter extends FragmentPagerAdapter {
        private final List<Fragment> mFragmentList = new ArrayList<>();
        private final List<String> mFragmentTitleList = new ArrayList<>();

        public ViewPagerAdapter(FragmentManager manager) {
            super(manager);
        }

        @Override
        public Fragment getItem(int position) {
            return mFragmentList.get(position);
        }

        @Override
        public int getCount() {
            return mFragmentList.size();
        }

        public void addFragment(Fragment fragment, String title) {
            mFragmentList.add(fragment);
            mFragmentTitleList.add(title);
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return mFragmentTitleList.get(position);
        }
    }

}

这是我的代码,我想设置自定义选项卡,就像我选择第一个选项卡时一样然后第一个标签指示器或重量应该减少,第二个标签文本和图像应该可见:

我当前的屏幕:

在这个你可以看到标签一被选中图像和文本是可见的标签第二个没有被取消选择所以唯一的图像是可见的没有文字:

但我的预期标签是这样的:

当我们选择标签时看看这个,然后标签的指示器和宽度增加,标签 2 减少请建议我如何实现这个。thanx

【问题讨论】:

  • 任何人请建议我的问题如何解决
  • 你可以用膨胀的cutome布局来做到这一点,你不需要设置可见性。
  • ii 尝试过但无法做到@farhana 我在过去 3 天被困在这个问题上,所以我发布了问题

标签: android android-layout android-tablayout


【解决方案1】:

您可以通过标签布局轻松实现自定义标签, 试试这个:

public void setupTabView(){
    for (int i = 0; i < tabLayout.getTabCount(); i++) {
        tabLayout.getTabAt(i).setCustomView(R.layout.custom_tab);
        TextView tab_name = (TextView) tabLayout.getTabAt(i).getCustomView().findViewById(R.id.txt_tab_name);
        tab_name.setText("" + tabNames[i]);
    }
}

并制作一个名为 custom_tab 的可绘制文件:

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

    <TextView
        android:id="@+id/txt_tab_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:textSize="14sp" />

</RelativeLayout>

【讨论】:

  • Okk Thanx @ishu 让我试试这个
  • @Issue 我已经设置了这个但是我减少了未选择的标签
  • 请看看我的问题我想减少标签宽度未选中标签
  • 看看这个链接可能对你有帮助。 medium.com/@elsenovraditya/…
  • 如何更改选择时的文本颜色
【解决方案2】:

使用下面的代码。它有两个选项。 (i) 创建自定义 TabLayout (ii) 更改自定义 tablayout 文本颜色

(i) 自定义标签布局

 <TextView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/tab"
android:layout_width="match_parent"
android:textSize="15sp"
android:gravity="center"
android:textColor="@color/txtbox_text_color_darek"
android:layout_height="match_parent"
/>

源代码为:

        TextView tabOne = (TextView) 
        LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
        tabOne.setText("KPIs" + " ");
        tabOne.setCompoundDrawablesWithIntrinsicBounds(0, 0, R.drawable.alert_gray, 
        0);
        Objects.requireNonNull(tabLayout.getTabAt(4)).setCustomView(tabOne);

(二)改变颜色

     private void custom_tablayout_select_unselected_four(final TextView tabOne) {

     tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
        @Override
        public void onTabSelected(TabLayout.Tab tab) {
            if (Objects.requireNonNull(tabLayout.getTabAt(4)).isSelected()) {
                tabOne.setTextColor(getResources().getColor(R.color.text_color_darkblue));
            } else {


      tabOne.setTextColor(getResources().getColor(R.color.txtbox_text_color_darek));
            }

        }

        @Override`
        public void onTabUnselected(TabLayout.Tab tab) {
            // tabOne.setTextColor(Color.GREEN);
        }

        @Override
        public void onTabReselected(TabLayout.Tab tab) {
            // tabOne.setTextColor(Color.GREEN);
        }
    });

}

【讨论】:

    【解决方案3】:

    创建自定义选项卡布局

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="48dp">
    
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:orientation="horizontal">
    
        <TextView
            android:id="@+id/tv_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@drawable/tab_text_color_selector"
            android:textSize="@dimen/medium_text"
            android:textStyle="bold" />
    
        <TextView
            android:id="@+id/tv_count"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:layout_marginStart="4dp"
            android:background="@drawable/badge_background"
            android:gravity="center"
            android:textColor="@color/colorPrimary"
            android:textSize="@dimen/medium_text"
            android:textStyle="bold"
            android:visibility="gone" />
    </LinearLayout>
    

    tabTitles = new String[]{getString(R.string.main_tab_call), getString(R.string.main_tab_chat), getString(R.string.main_tab_contact)};
    
      private void setupTabIcons() {
        for (int i = 0; i < tabTitles.length; i++) {
            mTabLayout.getTabAt(i).setCustomView(prepareTabView(i));
        }
    }
    
    
    private View prepareTabView(int pos) {
        View view = getLayoutInflater().inflate(R.layout.custom_tab, null);
        TextView tv_title = view.findViewById(R.id.tv_title);
        TextView tv_count = view.findViewById(R.id.tv_count);
        tv_title.setText(tabTitles[pos]);
        return view;
    }
    

    【讨论】:

    • 看看我的问题,当我取消选择标签时,我可以设置我想要的标签,然后我必须减小标签宽度
    【解决方案4】:

    我从here复制了解决方案,也许对你有用

     Display display = getWindowManager().getDefaultDisplay();
        int width = display.getWidth();
    
        setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
    
       TabHost mTabHost = getTabHost();
    
       mTabHost.addTab(mTabHost.newTabSpec("tab_test1")
               .setIndicator((""),getResources().getDrawable(R.drawable.mzl_05))
         .setContent(new Intent(this, NearBy.class)));
       mTabHost.addTab(mTabHost.newTabSpec("tab_test2")
               .setIndicator((""),getResources().getDrawable(R.drawable.mzl_08))
         .setContent(new Intent(this, SearchBy.class)));
               mTabHost.setCurrentTab(0);
               mTabHost.getTabWidget().getChildAt(0).setLayoutParams(new
                 LinearLayout.LayoutParams((width/2)-2,50));
          mTabHost.getTabWidget().getChildAt(1).setLayoutParams(new
                     LinearLayout.LayoutParams((width/2)-2,50));
    

    您可以尝试其他代码tabHost.getTabWidget().getChildAt(0).getLayoutParams().width = 50;

    【讨论】:

    • thanx @farhana 好的,让我试试这个
    • TabHost mTab​​Host = getTabHost();我无法声明它@farhana
    • 那被描绘成@farhana 我们不能再使用了
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2015-10-31
    • 1970-01-01
    • 2023-03-09
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多