TabHost使用及字体、背景更改，自定义TabWeight+Fragment

Ann_R

已于 2022-06-23 15:41:35 修改

阅读量431

点赞数

文章标签： android

于 2022-05-30 15:47:46 首次发布

本文链接：https://blog.csdn.net/Ann_52547/article/details/125046482

版权

1. TabHost使用及字体、背景更改

2. 自定义TabWeight+Fragment

1. TabHost使用及字体、背景更改

xml:

<!--注意：app:tabIndicator="@drawable/layer_tab_indicator"
自己写背景样式用于背景更改-->
		<TabHost
            android:background="@color/white"
            app:tabIndicator="@drawable/layer_tab_indicator"
            android:id="@android:id/tabhost"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:paddingLeft="15dp"
            android:paddingRight="15dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/tv_title">-->

            <LinearLayout
                android:background="@color/white"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical">

                <!-- TabWidget组件id值不可变-->
                <TabWidget
                    android:backgroundTint="@color/white"
                    android:id="@android:id/tabs"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"/>

                <!-- FrameLayout布局，id值不可变-->
                <FrameLayout
                    android:id="@android:id/tabcontent"
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent"
                    android:layout_above="@android:id/tabs">

                    <!-- 第一个tab的布局 -->
                    <LinearLayout
                        android:id="@+id/tab1"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:orientation="vertical">

                        <!--<ListView
                            android:id="@+id/lv_list"
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"/>-->

                        <View
                            android:layout_marginTop="5dp"
                            android:layout_width="match_parent"
                            android:layout_height="1dp"
                            android:background="#F3F3F3"/>

                        <include
                            android:id="@+id/view1"
                            layout="@layout/item_test" />

                        <include
                            android:id="@+id/view2"
                            layout="@layout/item_test" />

                        <include
                            android:id="@+id/view3"
                            layout="@layout/item_test" />


                    </LinearLayout>


                    <!-- 第二个tab的布局 -->
                    <LinearLayout
                        android:id="@+id/tab2"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:orientation="vertical">

                        <ScrollView
                            android:layout_width="match_parent"
                            android:layout_height="match_parent">

                            <LinearLayout
                                android:id="@+id/lay_tab2"
                                android:layout_width="match_parent"
                                android:layout_height="match_parent"
                                android:orientation="vertical">		 		</LinearLayout>
                        </ScrollView>

                    </LinearLayout>

                    <!-- 第三个tab的布局 -->
                    <LinearLayout
                        android:id="@+id/tab3"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:orientation="vertical">
                        <!--<LinearLayout
                            android:layout_width="match_parent"
                            android:layout_height="1dp"
                            android:background="@color/gray3"/>

                        <TextView
                            android:id="@+id/tv_null"
                            android:visibility="gone"
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            android:text=""
                            android:textSize="16sp"
                            android:gravity="center"
                            android:textColor="@color/gray1"/>
-->
                    </LinearLayout>
                </FrameLayout>
            </LinearLayout>
        </TabHost>

layer_tab_indicator.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <!--填充色，者利用的颜色渐变-->
    <!--<solid android:color="@color/shengou_bg" />-->
    <gradient android:startColor="#333333"
        android:endColor="#999999"
        android:angle="0" />

    <!--线条-->
    <!--<stroke
        android:width="2dp"
        android:color="#FF0000" />-->
    <!--角度-->
    <corners android:radius="3dp" />
</shape>

layer_tab_selector.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_selected="false" android:drawable="@drawable/tab_unselected_holo" />
    <item android:state_selected="true"  android:drawable="@drawable/tab_selected_holo" />


    <!-- Non focused states -->
    <!--<item android:state_focused="false" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/tab_unselected_holo" />
    <item android:state_focused="false" android:state_selected="true"  android:state_pressed="false" android:drawable="@drawable/tab_selected_holo" />

    &lt;!&ndash; Focused states &ndash;&gt;
    <item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/tab_unselected_focused_holo" />
    <item android:state_focused="true" android:state_selected="true"  android:state_pressed="false" android:drawable="@drawable/tab_selected_focused_holo" />

    &lt;!&ndash; Pressed &ndash;&gt;
    &lt;!&ndash;    Non focused states &ndash;&gt;
    <item android:state_focused="false" android:state_selected="false" android:state_pressed="true" android:drawable="@drawable/tab_unselected_pressed_holo" />
    <item android:state_focused="false" android:state_selected="true"  android:state_pressed="true" android:drawable="@drawable/tab_selected_pressed_holo" />

    &lt;!&ndash;    Focused states &ndash;&gt;
    <item android:state_focused="true" android:state_selected="false" android:state_pressed="true" android:drawable="@drawable/tab_unselected_pressed_holo" />
    <item android:state_focused="true" android:state_selected="true"  android:state_pressed="true" android:drawable="@drawable/tab_selected_pressed_holo" />-->
</selector>

Activity:

        public TabHost tabHost;

        tabHost = (TabHost) itemView.findViewById(android.R.id.tabhost);

		//初始化TabHost容器
        tabHost.setup();
        //在TabHost创建标签，然后设置：标题／图标／标签页布局
        tabHost.addTab(tabHost.newTabSpec("tab1").setIndicator("tab1Name" , null).setContent(R.id.tab1));
        tabHost.addTab(tabHost.newTabSpec("tab2").setIndicator("tab2Name" , null).setContent(R.id.tab2));
        tabHost.addTab(tabHost.newTabSpec("tab3").setIndicator("tab3Name" , null).setContent(R.id.tab3));

        upDateTab(tabHost);
        //设置 TabWidget 的布局参数
        tabHost.setOnTabChangedListener(new TabHost.OnTabChangeListener() {
            @Override
            public void onTabChanged(String tabId) {
//                mTabHost.setCurrentTabByTag(tabId);
                upDateTab(tabHost);
            }
        });


	//更改字体颜色和样式
    private void upDateTab(TabHost mTabHost) {
        for (int i = 0; i < mTabHost.getTabWidget().getChildCount(); i++) {
            View a = mTabHost.getTabWidget().getChildAt(i);
//            a.setBackgroundResource(R.animator.layer_tab_selector);
            TextView tv = (TextView) a.findViewById(android.R.id.title);
            if (mTabHost.getCurrentTab() == i) {//选中
                tv.setTextColor(ctx.getResources().getColor(R.color.333333)); 
                tv.setTextSize(R.dimen.sp_14);
                tv.setTypeface(null, Typeface.BOLD);
                a.setBackgroundResource(R.drawable.tab_selected_holo);
//                tv.setBackgroundResource(R.drawable.bg_topic_video);
            } else {//不选中
                tv.setTextColor(ctx.getResources().getColor(R.color.999999));
                tv.setTextSize(R.dimen.sp_14);
                a.setBackgroundResource(R.drawable.tab_unselected_holo);
            }

        }
    }

2. 自定义TabWeight+Fragment

xml：

		<LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            app:layout_constraintTop_toBottomOf="@+id/tv_title">

            <TabWidget
                android:id="@+id/tabWidget1"
                android:layout_width="match_parent"
                android:layout_height="40dp"
                android:gravity="right|center_vertical" />
            <View
                android:layout_marginTop="5dp"
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:background="#F3F3F3"/>

            <android.support.v4.view.ViewPager
                android:id="@+id/viewPager1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />
            <LinearLayout
                android:visibility="gone"
                android:id="@+id/ll_lay"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical" />

        </LinearLayout>

tab_title.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="40dp"
    android:background="@color/white"
    android:orientation="vertical">

    <TextView
        android:id="@+id/tv_title"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="11"
        android:layout_marginTop="5dp"
        android:text="TabName"
        android:textSize="@dimen/dp_14"
        android:textColor="@color/color_999999"
        android:background="@color/white"
        android:layout_gravity="center"
        android:gravity="center"/>
    <TextView
        android:id="@+id/tv_strip_down"
        android:layout_width="20dp"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:layout_marginBottom="5dp"
        android:background="@color/white"
        android:layout_gravity="center"
        android:gravity="center"/>
</LinearLayout>

layout_fragment.xml:

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="xxxx"
        android:textColor="@color/color_999999"
        android:textSize="50dp"
        android:id="@+id/textView1"/>
</LinearLayout>

Activity:

	private Context ctx;
    private ViewPager mViewPager;
    private PagerAdapter mPagerAdapter;
    private TabWidget mTabWidget;

	private String[] addresses = { "Tab1Name", "Tab2Name", "Tab3Name" };
    private  CustomTab[] mCustomTabs=new CustomTab[addresses.length];

tabWidget1 = (TabWidget) itemView.findViewById(R.id.tabWidget1);
            mViewPager = (ViewPager) itemView.findViewById(R.id.viewPager1);
	tabWidget1.setBackgroundColor(ctx.getResources().getColor(R.color.white));
        //不让原生的strip显示
        tabWidget1.setStripEnabled(false);
        for (int i=0;i<addresses.length;i++)
        {
            mCustomTabs[i]=new CustomTab(ctx);
            mCustomTabs[i].setTitle(addresses[i], R.color.999999);
            mCustomTabs[i].stripDown.setBackgroundResource(R.color.white);
            mCustomTabs[i].title.setOnClickListener(mTabClickListener);
            mTabWidget.addView(mCustomTabs[i].getView());
        }

        mPagerAdapter = new MyPagerAdapter(getSupportFragmentManager());
        mViewPager.setAdapter(mPagerAdapter);
        mViewPager.setOnPageChangeListener(mPageChangeListener);
        //默认选择第一个以及选中效果
        mTabWidget.setCurrentTab(0);
        mCustomTabs[0].title.setTextColor(ctx.getResources().getColor(R.color.333333));
        mCustomTabs[0].title.setTypeface(null, Typeface.BOLD);
        mCustomTabs[0].stripDown.setBackgroundResource(R.drawable.layer_tab_indicator);


private OnClickListener mTabClickListener = new OnClickListener() {
        @Override
        public void onClick(View v)
        {
            //先将所有tab设为未选中效果
            for (int i = 0; i < addresses.length; i++) {
                mCustomTabs[i].title.setTextColor(ctx.getResources().getColor(R.color.999999));
                mCustomTabs[i].stripDown.setBackgroundResource(R.color.white);
            }
            //添加选中效果
            if (v == mCustomTabs[0].title)
            {
                mCustomTabs[0].title.setTextColor(ctx.getResources().getColor(R.color.333333));
                mCustomTabs[0].title.setTypeface(null, Typeface.BOLD);
                mCustomTabs[0].stripDown.setBackgroundResource(R.drawable.layer_tab_indicator);
                mViewPager.setCurrentItem(0);
            } else if (v == mCustomTabs[1].title)
            {
                mCustomTabs[1].title.setTextColor(ctx.getResources().getColor(R.color.333333));
                mCustomTabs[1].title.setTypeface(null, Typeface.BOLD);
                mCustomTabs[1].stripDown.setBackgroundResource(R.drawable.layer_tab_indicator);
                mViewPager.setCurrentItem(1);
            } else if (v == mCustomTabs[2].title)
            {
                mCustomTabs[2].title.setTextColor(ctx.getResources().getColor(R.color.333333));
                mCustomTabs[2].title.setTypeface(null, Typeface.BOLD);
                mCustomTabs[2].stripDown.setBackgroundResource(R.drawable.layer_tab_indicator);
                mViewPager.setCurrentItem(2);
            }
        }
    };

private OnPageChangeListener mPageChangeListener = new OnPageChangeListener() {

        @Override
        public void onPageSelected(int arg0)
        {
            for (int i = 0; i < addresses.length; i++) {
                mCustomTabs[i].title.setTextColor(ctx.getResources().getColor(R.color.color_999999));
                mCustomTabs[i].stripDown.setBackgroundResource(R.color.white);
            }
            mCustomTabs[arg0].title.setTextColor(ctx.getResources().getColor(R.color.color_3b3b3b));
            mCustomTabs[arg0].title.setTypeface(null, Typeface.BOLD);
            mCustomTabs[arg0].stripDown.setBackgroundResource(R.drawable.layer_tab_indicator);
            mTabWidget.setCurrentTab(arg0);
        }

        @Override
        public void onPageScrolled(int arg0, float arg1, int arg2)
        {

        }

        @Override
        public void onPageScrollStateChanged(int arg0)
        {

        }
    };

	//我这边viewpager显示fragment显示不出来，代码应该没问题，就是画面显示不出来，原因不明，各位作为代码参考即可
    private class MyPagerAdapter extends FragmentStatePagerAdapter
    {
        public MyPagerAdapter(FragmentManager fm)
        {
            super(fm);
        }
        @Override
        public Fragment getItem(int position)
        {
            return MyFragment.create(addresses[position]);
        }
        @Override
        public int getCount()
        {
            return addresses.length;
        }
    }

    public static class MyFragment extends Fragment
    {
        public static MyFragment create(String address)
        {
            MyFragment f = new MyFragment();
            Bundle b = new Bundle();
            b.putString("address", address);
            f.setArguments(b);
            return f;
        }
        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
                                 Bundle savedInstanceState)
        {
        	//这边根据需要改为自己的item即可
            Random r = new Random(System.currentTimeMillis());
            Bundle b = getArguments();
            View v = inflater.inflate(R.layout.layout_fragment, null);
            TextView title1 = v.findViewById(R.id.textView1);
            title1.setText(b.getString("address", ""));
            return v;
        }
    }

CustomTab:

public class CustomTab extends  View {

    public View view;
    public TextView title;
    public TextView stripUp;
    public TextView stripDown;
    public   CustomTab( Context context) {
        super(context);
        view= LayoutInflater.from(context).inflate(R.layout.xwr_tab_title, null);
        title=(TextView) view.findViewById(R.id.tv_title);
        stripDown =(TextView) view.findViewById(R.id.tv_strip_down);
    }
    public View getView(){
        return view;
    }
    public void setTitle(String s,int cid)
    {
        title.setText(s);
        title.setTextColor(cid);
    }
}

参考：
1.Android自定义view解决TabWidget 的下方的横线（Strip）颜色问题
2.自定义TabHost+Fragment+ViewPager
3.tabhost(tabweight自定义)

Ann_R

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
TabHost使用及字体、背景更改，自定义TabWeight+Fragment

1. TabHost使用及字体、背景更改2. 自定义TabWeight+Fragment1. TabHost使用及字体、背景更改xml: <TabHost android:background="@color/white" app:tabIndicator="@drawable/lay
复制链接

扫一扫