天天看點

TabActivity自定義底部導航欄

TabActivity本身繼承自ActivityGroup,主要功能是實作多個activity或者view之間的切換和顯示,要使用該類必須建立一個類來繼承TabActivity,并且該類的xml配置檔案中必須包含、、三個視圖(View),其中後面兩個标簽是前面一個标簽的子标簽,表示tab頁的頁籤,相當于菜單頁,表示顯示内容的區域。

1.自定義底部導航欄布局

由于TabWidget不友善自定義布局,是以在布局中将其隐藏,然後自己寫布局代替TabWidget效果。

注意TabHost TabWidget FrameLayout的id必須是固定的,不能自己定義Id

<?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="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

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

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

        <LinearLayout
            android:id="@+id/bottom"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_alignParentBottom="true"
            android:background="#ffffff"
            android:orientation="horizontal">

            <LinearLayout
                android:id="@+id/tab_nearby"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_weight="1"
                android:gravity="center"
                android:orientation="vertical">

                <ImageView
                    android:id="@+id/iv_nearby"
                    android:layout_width="25dp"
                    android:layout_height="20dp"
                    android:background="@drawable/nearby_select"
                    android:clickable="false" />

                <TextView
                    android:id="@+id/tv_nearby"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="2dp"
                    android:text="附近"
                    android:textColor="@color/text30"
                    android:textSize="12sp" />
            </LinearLayout>

            <LinearLayout
                android:id="@+id/tab_message"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_weight="1"
                android:gravity="center"
                android:orientation="vertical">

                <ImageView
                    android:id="@+id/iv_message"
                    android:layout_width="25dp"
                    android:layout_height="20dp"
                    android:background="@drawable/message_no"
                    android:clickable="false" />

                <TextView
                    android:id="@+id/tv_message"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="2dp"
                    android:text="消息"
                    android:textColor="@color/text30"
                    android:textSize="12sp" />
            </LinearLayout>

            <LinearLayout
                android:id="@+id/tab_home"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_weight="1"
                android:gravity="center"
                android:orientation="vertical">

                <ImageView
                    android:id="@+id/iv_home"
                    android:layout_width="25dp"
                    android:layout_height="20dp"
                    android:background="@drawable/home_no"
                    android:clickable="false" />

                <TextView
                    android:id="@+id/tv_home"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="2dp"
                    android:text="首頁"
                    android:textColor="@color/text30"
                    android:textSize="12sp" />
            </LinearLayout>

            <LinearLayout
                android:id="@+id/tab_find"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_weight="1"
                android:gravity="center"
                android:orientation="vertical">

                <ImageView
                    android:id="@+id/iv_find"
                    android:layout_width="25dp"
                    android:layout_height="20dp"
                    android:background="@drawable/find_no"
                    android:clickable="false" />

                <TextView
                    android:id="@+id/tv_find"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="2dp"
                    android:text="發現"
                    android:textColor="@color/text30"
                    android:textSize="12sp" />
            </LinearLayout>

            <LinearLayout
                android:id="@+id/tab_user"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_weight="1"
                android:gravity="center"
                android:orientation="vertical">

                <ImageView
                    android:id="@+id/iv_user"
                    android:layout_width="25dp"
                    android:layout_height="20dp"
                    android:background="@drawable/user_no"
                    android:clickable="false" />

                <TextView
                    android:id="@+id/tv_user"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="2dp"
                    android:text="我的"
                    android:textColor="@color/text30"
                    android:textSize="12sp" />
            </LinearLayout>
        </LinearLayout>
    </RelativeLayout>
</TabHost>
           

2.TabActivity使用

public class MainActivity extends TabActivity implements OnClickListener {
    private TabHost tabhost;
    public static final String TAB_NEAR = "tabNearby";
    public static final String TAB_MESSAGE = "tabMessage";
    public static final String TAB_HOME = "tabHome";
    public static final String TAB_FIND = "tabFind";
    public static final String TAB_USER = "tabUser";
    private LinearLayout li_tab_nearby, li_tab_message, li_tab_home,
            li_tab_find, li_tab_user;
    private ImageView img_nearby, img_message, img_home, img_find, img_user;
    private TextView tv_nearby, tv_message, tv_home, tv_find, tv_user;
    private Activity ac;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ac = this;
        initView();
        initEvent();
        //重置底部導航攔
        resetTab();
        //預設選中第一個頁籤
        selectTab();
    }

    @Override
    protected void onResume() {
        // TODO Auto-generated method stub
        super.onResume();
    }

    /**
     * 重置底部導航欄,由于每次點選效果都要改變,先重置成預設的,然後把點選的特殊處理
     */
    private void resetTab() {
        // TODO Auto-generated method stub
        img_nearby.setBackgroundResource(R.drawable.nearby_no);
        img_message.setBackgroundResource(R.drawable.message_no);
        img_home.setBackgroundResource(R.drawable.home_no);
        img_find.setBackgroundResource(R.drawable.find_no);
        img_user.setBackgroundResource(R.drawable.user_no);

        tv_nearby.setTextColor(getResources().getColor(R.color.text30));
        tv_message.setTextColor(getResources().getColor(R.color.text30));
        tv_home.setTextColor(getResources().getColor(R.color.text30));
        tv_find.setTextColor(getResources().getColor(R.color.text30));
        tv_user.setTextColor(getResources().getColor(R.color.text30));

    }

    private void initEvent() {
        // TODO Auto-generated method stub
        li_tab_nearby.setOnClickListener(this);
        li_tab_message.setOnClickListener(this);
        li_tab_home.setOnClickListener(this);
        li_tab_find.setOnClickListener(this);
        li_tab_user.setOnClickListener(this);
    }

    private void initView() {
        // TODO Auto-generated method stub
        li_tab_nearby = (LinearLayout) findViewById(R.id.tab_nearby);
        li_tab_message = (LinearLayout) findViewById(R.id.tab_message);
        li_tab_home = (LinearLayout) findViewById(R.id.tab_home);
        li_tab_find = (LinearLayout) findViewById(R.id.tab_find);
        li_tab_user = (LinearLayout) findViewById(R.id.tab_user);

        img_nearby = (ImageView) findViewById(R.id.iv_nearby);
        img_message = (ImageView) findViewById(R.id.iv_message);
        img_home = (ImageView) findViewById(R.id.iv_home);
        img_find = (ImageView) findViewById(R.id.iv_find);
        img_user = (ImageView) findViewById(R.id.iv_user);

        tv_nearby = (TextView) findViewById(R.id.tv_nearby);
        tv_message = (TextView) findViewById(R.id.tv_message);
        tv_home = (TextView) findViewById(R.id.tv_home);
        tv_find = (TextView) findViewById(R.id.tv_find);
        tv_user = (TextView) findViewById(R.id.tv_user);

        tabhost = getTabHost();
        tabhost.addTab(tabhost.newTabSpec(TAB_NEAR).setIndicator(TAB_NEAR)
                .setContent(new Intent(this, NearbyActivity.class)));
        tabhost.addTab(tabhost.newTabSpec(TAB_MESSAGE)
                .setIndicator(TAB_MESSAGE)
                .setContent(new Intent(this, MessageActivity.class)));
        tabhost.addTab(tabhost.newTabSpec(TAB_HOME).setIndicator(TAB_HOME)
                .setContent(new Intent(this, HomeActivity.class)));
        tabhost.addTab(tabhost.newTabSpec(TAB_FIND).setIndicator(TAB_FIND)
                .setContent(new Intent(this, FindActivity.class)));
        tabhost.addTab(tabhost.newTabSpec(TAB_USER).setIndicator(TAB_USER)
                .setContent(new Intent(this, UserActivity.class)));
    }

    /**
     * 頁籤的選擇,同時把選中的頁籤對應的導航欄做特殊處理
     */
    private void selectTab(int i) {
        switch (i) {
            case :
                resetTab();
                tabhost.setCurrentTabByTag(TAB_NEAR);
                img_nearby.setBackgroundResource(R.drawable.nearby_select);
                tv_nearby
                        .setTextColor(getResources().getColor(R.color.user_heart1));
                break;
            case :
                resetTab();
                tabhost.setCurrentTabByTag(TAB_MESSAGE);
                img_message.setBackgroundResource(R.drawable.message_select);
                tv_message.setTextColor(getResources()
                        .getColor(R.color.user_heart1));
                break;
            case :
                resetTab();
                tabhost.setCurrentTabByTag(TAB_HOME);
                img_home.setBackgroundResource(R.drawable.home_select);
                tv_home.setTextColor(getResources().getColor(R.color.user_heart1));
                break;
            case :
                resetTab();
                tabhost.setCurrentTabByTag(TAB_FIND);
                img_find.setBackgroundResource(R.drawable.find_select);
                tv_find.setTextColor(getResources().getColor(R.color.user_heart1));
                break;
            case :
                resetTab();
                tabhost.setCurrentTabByTag(TAB_USER);
                img_user.setBackgroundResource(R.drawable.user_select);
                tv_user.setTextColor(getResources().getColor(R.color.user_heart1));
                break;
            default:
                break;
        }
    }

    @Override
    public void onClick(View v) {
        // TODO Auto-generated method stub
        switch (v.getId()) {
            case R.id.tab_nearby:
                selectTab();
                break;
            case R.id.tab_message:
                selectTab();
                break;
            case R.id.tab_home:
                selectTab();
                break;
            case R.id.tab_find:
                selectTab();
                break;
            case R.id.tab_user:
                selectTab();
                break;
        }
    }

}
           

繼續閱讀