Android之Tab分頁標籤的實現方法一-----美化TabHost(四)
阿新 • • 發佈:2019-01-05
安卓預設的TabHost樣式是比較樸素的,可以對它進行樣式美化。對佈局進行美化的時候需要在佈局檔案中體現出來。TabHost標籤應由一個TabWidget和一個FrameLayout組成。其中TabWidget定義了標籤的屬性,而frameLayout定義了標籤的內容。
一、最普通tabHost
我們將activity_main.xml修改為:
<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@android:id/tabhost"
android:orientation="vertical"
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">
</TabWidget>
<FrameLayout android:id="@android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
</FrameLayout>
</TabHost>
注意點:1.各個標籤的id基本是必須要交這個名字的;
MainActivity.java中程式碼如下:
public class MainActivity extends TabActivity {
TabHost tabHost;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//獲取TabHost物件
tabHost = getTabHost();
//新建一個newTabSpec,設定標籤和圖示(setIndicator),設定內容(setContent)
tabHost.addTab(tabHost.newTabSpec("Main_page")
.setIndicator("",getResources()
.getDrawable(android.R.drawable.ic_menu_call))
.setContent(new Intent(this,Main.class)));
tabHost.addTab(tabHost.newTabSpec("Search")
.setIndicator("",getResources()
.getDrawable(android.R.drawable.ic_menu_camera))
.setContent(new Intent(this,Main.class)));
......
//設定當前現實哪一個標籤
tabHost.setCurrentTab(0); //0為標籤ID
}
}
注意點:1.TabHost定義需要全域性,方便在其他acitivity中呼叫;
2.tabHost = getTabHost()方法可以獲取一個tabhost物件;
3.tabHost.addTab新增一個標籤,注意後面的一堆set和get...然後其中的Main.class是自己新建的一個acitivity,這樣四個標籤頁可以跳轉到四個acitivity(在這個demo中是跳轉到同一個activity)。
這樣就可以得到第一個最普通的tabHost版本如下:
其中的進度圈就是Main.class這個acitivity的內容。
二、下置在底下版(如大家普遍使用的app,微信、微博等) 將TabHost下置在螢幕下方只需要在xml佈局檔案中新增一句話: android:layout_alignParentBottom="true" 這是TabWidget的屬性。 但是為了使這個alignParentBottom生效,必須將整個tabs封裝在一個RelativeLayout中。 所以xml檔案變為: <?xml version="1.0" encoding="utf-8"?> <TabHost xmlns:android="http://schemas.android.com/apk/res/android" android:id="@android:id/tabhost" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <RelativeLayout 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:layout_alignParentBottom="true"> </TabWidget> <FrameLayout android:id="@android:id/tabcontent" android:layout_width="fill_parent" android:layout_height="fill_parent"> </FrameLayout> </RelativeLayout> </TabHost> .java檔案是不變的。 那麼置底的tabhost效果圖即為:
三、美化tabHost 1.修改tabHost圖示 將圖示複製到res->drawable資料夾下(任意一個即可) 為了使按鍵美觀一些,每個圖示至少需要兩種屬性:選中,未選中。 如,不太會ps的我將利用如下兩個圖示分別表示選中和未選中:
將圖片命名為mainpage或其他存放到drawable目錄下。 然後修改.java中的程式碼改變tab屬性: tabHost.addTab(tabHost.newTabSpec("Main_page") .setIndicator("", getResources().getDrawable(R.drawable.mainpage)) .setContent(new Intent(this,Main.class))); setIndicator中,第一個引數為tab顯示的文字,如果需要文字輔助則在此新增字串,否則置為空即可。第二個引數為圖示,圖示需要從drawable資料夾中取出,同時需要為這個圖示設定內容,即點選這個圖示會顯示什麼事件。 這只是改變了圖示本身,但是動畫並未改變,保留了原來android預設的樣式,這些均可以修改。只需要再定義一個state List.(每個tab按鈕都需要一個state list)。 在drawable資料夾下新建xml檔案,定義selector. drawable/tab_mainpage.xml: <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/mainpage_light" android:state_selected="true"/> <item android:drawable="@drawable/mainpage"/> </selector> 那麼在設定tab屬性的時候,就利用這個佈局檔案,而不是單一的圖片: tabHost.addTab(tabHost.newTabSpec("Main_page") .setIndicator("", getResources().getDrawable(R.drawable.tab_mainpage)) .setContent(new Intent(this, Main.class))); 2.修改tabHost背景 預設的tabHost背景好樸素&……,可以將它進行修改。修改方式也許有更好的,但我選擇的是在.java檔案中進行修改。每個tab鍵是一個view型別的,可以對它直接進行backgroud的設定。 int i; for (i = 0; i < tabHost.getTabWidget().getChildCount(); i++) { tabHost.getTabWidget().getChildAt(i).setBackgroundColor(Color.parseColor("#ECE2C2"));} 3.進一步美化 做到這一步基本上就出來形了,不過有細心的人會發現,這個tabHost下面總是留有一條,在被點選的時候會變黃,非常影響美觀。這是由於tabHost控制元件本來是會出現在頁面上方的,那麼這一條也是按鈕效果之一。把它去掉的方法不難,我採用了簡單粗暴的,修改margin_bottom值的方法: 在xml中,TabWidget下加入一個屬性:android:layout_marginBottom="-3dip" 這裡用負值是沒有問題的,而且-3左右剛好能把那一條去掉。整個介面就乾淨多了。 四、最終效果圖如下:(分別選擇主頁和搜尋tab)
附:程式碼彙總:activity_main.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" android:orientation="vertical" > <RelativeLayout 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:layout_alignParentBottom="true" android:layout_marginBottom="-3dip"> </TabWidget> <FrameLayout android:id="@android:id/tabcontent" android:layout_width="fill_parent" android:layout_height="fill_parent" > </FrameLayout> </RelativeLayout> </TabHost> MainAcivity.java: package com.example.h1; import android.app.TabActivity; import android.content.Intent; import android.graphics.Color; import android.os.Bundle; import android.widget.TabHost; public class MainActivity extends TabActivity { TabHost tabHost; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // 獲取TabHost物件 tabHost = getTabHost(); // 新建一個newTabSpec,設定標籤和圖示(setIndicator),設定內容(setContent) tabHost.addTab(tabHost .newTabSpec("Main_page") .setIndicator("", getResources().getDrawable(R.drawable.tab_mainpage)) .setContent(new Intent(this, Main.class))); tabHost.addTab(tabHost .newTabSpec("Search") .setIndicator("", getResources().getDrawable(R.drawable.tab_search)) .setContent(new Intent(this, Main.class))); tabHost.addTab(tabHost .newTabSpec("Shelf") .setIndicator("", getResources().getDrawable(R.drawable.tab_shelf)) .setContent(new Intent(this, Main.class))); tabHost.addTab(tabHost .newTabSpec("Setting") .setIndicator("", getResources().getDrawable(R.drawable.tab_setting)) .setContent(new Intent(this, Main.class))); int i; for (i = 0; i < tabHost.getTabWidget().getChildCount(); i++) { tabHost.getTabWidget().getChildAt(i) .setBackgroundColor(Color.parseColor("#ECE2C2")); } // 設定當前現實哪一個標籤 tabHost.setCurrentTab(0); // 0為標籤ID } }
二、下置在底下版(如大家普遍使用的app,微信、微博等) 將TabHost下置在螢幕下方只需要在xml佈局檔案中新增一句話: android:layout_alignParentBottom="true" 這是TabWidget的屬性。 但是為了使這個alignParentBottom生效,必須將整個tabs封裝在一個RelativeLayout中。 所以xml檔案變為: <?xml version="1.0" encoding="utf-8"?> <TabHost xmlns:android="http://schemas.android.com/apk/res/android" android:id="@android:id/tabhost" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <RelativeLayout 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:layout_alignParentBottom="true"> </TabWidget> <FrameLayout android:id="@android:id/tabcontent" android:layout_width="fill_parent" android:layout_height="fill_parent"> </FrameLayout> </RelativeLayout> </TabHost> .java檔案是不變的。 那麼置底的tabhost效果圖即為:
三、美化tabHost 1.修改tabHost圖示 將圖示複製到res->drawable資料夾下(任意一個即可) 為了使按鍵美觀一些,每個圖示至少需要兩種屬性:選中,未選中。 如,不太會ps的我將利用如下兩個圖示分別表示選中和未選中:
將圖片命名為mainpage或其他存放到drawable目錄下。 然後修改.java中的程式碼改變tab屬性: tabHost.addTab(tabHost.newTabSpec("Main_page") .setIndicator("", getResources().getDrawable(R.drawable.mainpage)) .setContent(new Intent(this,Main.class))); setIndicator中,第一個引數為tab顯示的文字,如果需要文字輔助則在此新增字串,否則置為空即可。第二個引數為圖示,圖示需要從drawable資料夾中取出,同時需要為這個圖示設定內容,即點選這個圖示會顯示什麼事件。 這只是改變了圖示本身,但是動畫並未改變,保留了原來android預設的樣式,這些均可以修改。只需要再定義一個state List.(每個tab按鈕都需要一個state list)。 在drawable資料夾下新建xml檔案,定義selector. drawable/tab_mainpage.xml: <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/mainpage_light" android:state_selected="true"/> <item android:drawable="@drawable/mainpage"/> </selector> 那麼在設定tab屬性的時候,就利用這個佈局檔案,而不是單一的圖片: tabHost.addTab(tabHost.newTabSpec("Main_page") .setIndicator("", getResources().getDrawable(R.drawable.tab_mainpage)) .setContent(new Intent(this, Main.class))); 2.修改tabHost背景 預設的tabHost背景好樸素&……,可以將它進行修改。修改方式也許有更好的,但我選擇的是在.java檔案中進行修改。每個tab鍵是一個view型別的,可以對它直接進行backgroud的設定。 int i; for (i = 0; i < tabHost.getTabWidget().getChildCount(); i++) { tabHost.getTabWidget().getChildAt(i).setBackgroundColor(Color.parseColor("#ECE2C2"));} 3.進一步美化 做到這一步基本上就出來形了,不過有細心的人會發現,這個tabHost下面總是留有一條,在被點選的時候會變黃,非常影響美觀。這是由於tabHost控制元件本來是會出現在頁面上方的,那麼這一條也是按鈕效果之一。把它去掉的方法不難,我採用了簡單粗暴的,修改margin_bottom值的方法: 在xml中,TabWidget下加入一個屬性:android:layout_marginBottom="-3dip" 這裡用負值是沒有問題的,而且-3左右剛好能把那一條去掉。整個介面就乾淨多了。 四、最終效果圖如下:(分別選擇主頁和搜尋tab)
附:程式碼彙總:activity_main.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" android:orientation="vertical" > <RelativeLayout 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:layout_alignParentBottom="true" android:layout_marginBottom="-3dip"> </TabWidget> <FrameLayout android:id="@android:id/tabcontent" android:layout_width="fill_parent" android:layout_height="fill_parent" > </FrameLayout> </RelativeLayout> </TabHost> MainAcivity.java: package com.example.h1; import android.app.TabActivity; import android.content.Intent; import android.graphics.Color; import android.os.Bundle; import android.widget.TabHost; public class MainActivity extends TabActivity { TabHost tabHost; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // 獲取TabHost物件 tabHost = getTabHost(); // 新建一個newTabSpec,設定標籤和圖示(setIndicator),設定內容(setContent) tabHost.addTab(tabHost .newTabSpec("Main_page") .setIndicator("", getResources().getDrawable(R.drawable.tab_mainpage)) .setContent(new Intent(this, Main.class))); tabHost.addTab(tabHost .newTabSpec("Search") .setIndicator("", getResources().getDrawable(R.drawable.tab_search)) .setContent(new Intent(this, Main.class))); tabHost.addTab(tabHost .newTabSpec("Shelf") .setIndicator("", getResources().getDrawable(R.drawable.tab_shelf)) .setContent(new Intent(this, Main.class))); tabHost.addTab(tabHost .newTabSpec("Setting") .setIndicator("", getResources().getDrawable(R.drawable.tab_setting)) .setContent(new Intent(this, Main.class))); int i; for (i = 0; i < tabHost.getTabWidget().getChildCount(); i++) { tabHost.getTabWidget().getChildAt(i) .setBackgroundColor(Color.parseColor("#ECE2C2")); } // 設定當前現實哪一個標籤 tabHost.setCurrentTab(0); // 0為標籤ID } }