Android自定义TabWeight (修改样式)

400 阅读2分钟

郑州小白一个,最近公司不赶项目了,事情少了,本来以为轻松几天谁知道,让改颜色,我的天。这也忒多了把。此时心里有句妈卖批不知当讲不当讲。(负面情绪抱 歉。)进入整体。其实修改样式很简单,这里是想做个记录。毕竟好记性不如烂笔头 嘛。也算是分享把,如果对您有帮助,我也会很高兴的。

1. 编写界面。

    <TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/tabhost"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical" >

        <LinearLayout
            android:id="@+id/ll_title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentTop="true"
            android:orientation="vertical" >

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:background="@color/title_bg" >

                <ImageButton
                    android:id="@+id/ib_back"
                    android:layout_width="40dp"
                    android:layout_height="40dp"
                    android:layout_centerVertical="true"
                    android:background="@null"
                    android:src="@drawable/ib_back" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerHorizontal="true"
                    android:layout_centerVertical="true"
                    android:text="系统信息"
                    android:textColor="@color/black"
                    android:textSize="@dimen/titel_textsize" />

                <TextView
                    android:id="@+id/tv_operate"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentRight="true"
                    android:layout_centerVertical="true"
                    android:layout_marginRight="@dimen/big_margin_or_padding"
                    android:text="添加"
                    android:textColor="@color/black"
                    android:textSize="@dimen/small_textsize"
                    android:visibility="gone" />
            </RelativeLayout>

            <View
                android:layout_width="match_parent"
                android:layout_height="0.5dp"
                android:background="@color/view_color" />
        </LinearLayout>

        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="fill_parent"
            android:layout_height="50dp"
            android:gravity="center" />

        <View
            android:layout_width="match_parent"
            android:layout_height="@dimen/small_margin_or_padding"
            android:background="@color/view_color" />

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="fill_parent"
            android:layout_height="0dp"
            android:layout_weight="1" />
    </LinearLayout>

</TabHost>

这个是我的项目中用的代码。需要注意的就是 控件中的 id ,必须要使用系统的id。相信大多人都知道。别的就没有什么好多解释的代码。

2. 创建 tab_item 布局


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:orientation="vertical" >
    
    <!--  -->
    
    <TextView
        android:id="@+id/tab_lable"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="TextView" />

</LinearLayout>

代码很简单就是放入一个文字这里就是我们顶部的文字。

3. 代码的控制

// 首先获取TabWidget
		LayoutInflater inflater = getLayoutInflater();

		View view1 = inflater.inflate(R.layout.tab_item_system, null);
		TextView txt1 = (TextView) view1.findViewById(R.id.tab_lable);
		txt1.setText("未读");

		View view2 = inflater.inflate(R.layout.tab_item_system, null);
		TextView txt2 = (TextView) view2.findViewById(R.id.tab_lable);
		txt2.setText("已读");
		// 得到TabHost对象实例
		mTabHost = (TabHost) findViewById(android.R.id.tabhost);
		// 调用 TabHost.setup()
		mTabHost.setup();
		TabWidget tabWidget = mTabHost.getTabWidget();
		// 创建Tab标签
		Intent intent;
		intent = new Intent().setClass(this, ClientUnReadSysActivity.class);
		mTabHost.addTab(mTabHost.newTabSpec("wd").setIndicator(view1)
				.setContent(intent));
		intent = new Intent().setClass(this, ClientReadSysActivity.class);
		mTabHost.addTab(mTabHost.newTabSpec("yd").setIndicator(view2)
				.setContent(intent));

		// 设置第一次打开时默认显示的标签
		mTabHost.setCurrentTab(0);
		// 初始化Tab的颜色,和字体的颜色
		updateTab(mTabHost);
		// 选择监听器
		mTabHost.setOnTabChangedListener(new OnReceiveTabChangedListener());


/**
	 * 更新Tab标签的颜色,和字体的颜色
	 * 
	 * @param tabHost
	 */
	@SuppressLint("NewApi")
	private void updateTab(final TabHost tabHost) {
		for (int i = 0; i < tabHost.getTabWidget().getChildCount(); i++) {
			View view = tabHost.getTabWidget().getChildAt(i);
			TextView tv = (TextView) tabHost.getTabWidget().getChildAt(i)
					.findViewById(R.id.tab_lable);
			tv.setTextSize(16);
			tv.setTypeface(Typeface.SERIF, 0); // 设置字体和风格
			if (tabHost.getCurrentTab() == i) {
				// 选中
				view.setBackground(getResources().getDrawable(
						R.drawable.system_select));// 选中后的背景
				tv.setTextColor(this.getResources().getColorStateList(
						R.color.home_orange));
			} else {
				// 不选中
				view.setBackground(getResources().getDrawable(
						R.drawable.system_unselect));// 非选择的背景
				tv.setTextColor(this.getResources().getColorStateList(
						android.R.color.black));
			}
		}
	}

class OnReceiveTabChangedListener implements OnTabChangeListener {

		@Override
		public void onTabChanged(String tabId) {
			mTabHost.setCurrentTabByTag(tabId);
			mTabHost.setCurrentTabByTag(tabId);
            updateTab(mTabHost);
		}
	}

当然代码中 还用到两个图片 就是 你想要选中的 或者 没有选中的 item的样式。这个有条件的 找 UI 要一下。没有的 就没有然后了。代码 都有了 原理我都不多讲了,很简单的东西。就这样 总结完毕。

扯淡:提前祝大家 新年快乐。