仿美丽说底部TAB布局实现

最新推荐文章于 2022-07-06 10:27:58 发布

Ricky_Fung

最新推荐文章于 2022-07-06 10:27:58 发布

阅读量2.9k

点赞数

分类专栏： Android 文章标签：仿美丽说tab tabhost

本文链接：https://blog.csdn.net/top_code/article/details/12747839

版权

Android 专栏收录该内容

157 篇文章 1 订阅

订阅专栏

今天下载美丽说应用，感觉它底部TAB布局挺特别的，于是模仿实现了一下。素材资源部分取自美丽说APK，仅研究、学习之用！

效果图：

maintabs.xml

<?xml version="1.0" encoding="utf-8"?>
<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" >

    <FrameLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="#fff8f8f8" >

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent" />

        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:visibility="gone" />

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="60.0dip"
            android:layout_gravity="bottom"
            android:background="@drawable/details_home_nav_bg"
            android:gravity="center_vertical"
            android:orientation="horizontal"
            android:paddingTop="12.0dip" >

            <TextView
                android:id="@+id/tv_main_menu_text_subject"
                android:layout_width="0.0dip"
                android:layout_height="fill_parent"
                android:layout_weight="1.0"
                android:drawablePadding="-2.0dip"
                android:drawableTop="@drawable/poster_nav_topic"
                android:gravity="center_horizontal"
                android:text="@string/main_bottom_subject"
                android:textColor="@color/main_text_color"
                android:textSize="9.0sp" />

            <TextView
                android:id="@+id/tv_main_menu_text_category"
                android:layout_width="0.0dip"
                android:layout_height="fill_parent"
                android:layout_weight="1.0"
                android:drawablePadding="-2.0dip"
                android:drawableTop="@drawable/poster_nav_classification"
                android:gravity="center_horizontal"
                android:text="@string/main_bottom_category"
                android:textColor="@color/main_text_color"
                android:textSize="9.0sp" />

            <View
                android:layout_width="20.0dip"
                android:layout_height="wrap_content" />

            <TextView
                android:id="@+id/tv_main_menu_text_home"
                android:layout_width="0.0dip"
                android:layout_height="fill_parent"
                android:layout_weight="1.0"
                android:drawablePadding="-2.0dip"
                android:drawableTop="@drawable/poster_nav_home"
                android:gravity="center_horizontal"
                android:text="@string/main_bottom_home"
                android:textColor="@color/main_text_color"
                android:textSize="9.0sp" />

            <View
                android:layout_width="20.0dip"
                android:layout_height="wrap_content" />

            <TextView
                android:id="@+id/tv_main_menu_text_me"
                android:layout_width="0.0dip"
                android:layout_height="fill_parent"
                android:layout_weight="1.0"
                android:drawablePadding="-2.0dip"
                android:drawableTop="@drawable/poster_nav_me"
                android:gravity="center_horizontal"
                android:text="@string/main_bottom_me"
                android:textColor="@color/main_text_color"
                android:textSize="9.0sp" />

            <TextView
                android:id="@+id/tv_main_menu_text_more"
                android:layout_width="0.0dip"
                android:layout_height="fill_parent"
                android:layout_weight="1.0"
                android:drawablePadding="-2.0dip"
                android:drawableTop="@drawable/poster_nav_more"
                android:gravity="center_horizontal"
                android:text="@string/main_bottom_more"
                android:textColor="@color/main_text_color"
                android:textSize="9.0sp" />
        </LinearLayout>
    </FrameLayout>

</TabHost>

MainActivity.java

package com.example.customtab;

import android.app.TabActivity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.TabHost;
import android.widget.TextView;

public class MainActivity extends TabActivity implements OnClickListener {

	private TabHost tabHost;
	private TextView tv_main_menu_subject;
	private TextView tv_main_menu_category;
	private TextView tv_main_menu_home;
	private TextView tv_main_menu_me;
	private TextView tv_main_menu_more;
	private int previous = -1;

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

		findView();
	}

	private void findView() {

		tabHost = getTabHost();
		tabHost.addTab(tabHost.newTabSpec("subject").setIndicator("Subject")
				.setContent(new Intent(this, SubjectActivity.class)));
		tabHost.addTab(tabHost.newTabSpec("category").setIndicator("Category")
				.setContent(new Intent(this, CategoryActivity.class)));
		tabHost.addTab(tabHost.newTabSpec("home").setIndicator("Home")
				.setContent(new Intent(this, HomeActivity.class)));
		tabHost.addTab(tabHost.newTabSpec("me").setIndicator("Me")
				.setContent(new Intent(this, ProfileActivity.class)));
		tabHost.addTab(tabHost.newTabSpec("more").setIndicator("More")
				.setContent(new Intent(this, MoreActivity.class)));

		tv_main_menu_subject = (TextView) findViewById(R.id.tv_main_menu_text_subject);
		tv_main_menu_category = (TextView) findViewById(R.id.tv_main_menu_text_category);
		tv_main_menu_home = (TextView) findViewById(R.id.tv_main_menu_text_home);
		tv_main_menu_me = (TextView) findViewById(R.id.tv_main_menu_text_me);
		tv_main_menu_more = (TextView) findViewById(R.id.tv_main_menu_text_more);

		tv_main_menu_subject.setOnClickListener(this);
		tv_main_menu_category.setOnClickListener(this);
		tv_main_menu_home.setOnClickListener(this);
		tv_main_menu_me.setOnClickListener(this);
		tv_main_menu_more.setOnClickListener(this);
		
		//初始化 首页
		tv_main_menu_home.setCompoundDrawablesWithIntrinsicBounds(0,
				R.drawable.poster_nav_home_press, 0, 0);
		tv_main_menu_home
				.setTextColor(getResources().getColor(R.color.red));

		tabHost.setCurrentTabByTag("home");
		previous = 3;
	}

	@Override
	public void onClick(View v) {

		initPreTextView();

		switch (v.getId()) {
		case R.id.tv_main_menu_text_subject:

			tv_main_menu_subject.setCompoundDrawablesWithIntrinsicBounds(0,
					R.drawable.poster_nav_topic_press, 0, 0);
			tv_main_menu_subject.setTextColor(getResources().getColor(
					R.color.red));

			tabHost.setCurrentTabByTag("subject");
			previous = 1;
			break;
		case R.id.tv_main_menu_text_category:
			tv_main_menu_category.setCompoundDrawablesWithIntrinsicBounds(0,
					R.drawable.poster_nav_classification_press, 0, 0);
			tv_main_menu_category.setTextColor(getResources().getColor(
					R.color.red));

			tabHost.setCurrentTabByTag("category");
			previous = 2;
			break;
		case R.id.tv_main_menu_text_home:

			tv_main_menu_home.setCompoundDrawablesWithIntrinsicBounds(0,
					R.drawable.poster_nav_home_press, 0, 0);
			tv_main_menu_home
					.setTextColor(getResources().getColor(R.color.red));

			tabHost.setCurrentTabByTag("home");
			previous = 3;
			break;
		case R.id.tv_main_menu_text_me:

			tv_main_menu_me.setCompoundDrawablesWithIntrinsicBounds(0,
					R.drawable.poster_nav_me_press, 0, 0);
			tv_main_menu_me.setTextColor(getResources().getColor(R.color.red));

			tabHost.setCurrentTabByTag("me");
			previous = 4;
			break;
		case R.id.tv_main_menu_text_more:

			tv_main_menu_more.setCompoundDrawablesWithIntrinsicBounds(0,
					R.drawable.poster_nav_more_press, 0, 0);
			tv_main_menu_more
					.setTextColor(getResources().getColor(R.color.red));

			tabHost.setCurrentTabByTag("more");
			previous = 5;
			break;

		default:
			break;
		}
	}

	private void initPreTextView() {
		switch (previous) {
		case 1:
			tv_main_menu_subject.setCompoundDrawablesWithIntrinsicBounds(0,
					R.drawable.poster_nav_topic, 0, 0);
			tv_main_menu_subject.setTextColor(getResources().getColor(
					R.color.main_text_color));
			break;
		case 2:
			tv_main_menu_category.setCompoundDrawablesWithIntrinsicBounds(0,
					R.drawable.poster_nav_classification, 0, 0);
			tv_main_menu_category.setTextColor(getResources().getColor(
					R.color.main_text_color));
			break;
		case 3:
			tv_main_menu_home.setCompoundDrawablesWithIntrinsicBounds(0,
					R.drawable.poster_nav_home, 0, 0);
			tv_main_menu_home.setTextColor(getResources().getColor(
					R.color.main_text_color));
			break;
		case 4:
			tv_main_menu_me.setCompoundDrawablesWithIntrinsicBounds(0,
					R.drawable.poster_nav_me, 0, 0);
			tv_main_menu_me.setTextColor(getResources().getColor(
					R.color.main_text_color));
			break;
		case 5:
			tv_main_menu_more.setCompoundDrawablesWithIntrinsicBounds(0,
					R.drawable.poster_nav_more, 0, 0);
			tv_main_menu_more.setTextColor(getResources().getColor(
					R.color.main_text_color));
			break;

		default:
			break;
		}
	}
}

工程下载地址：http://download.csdn.net/detail/fx_sky/6401763