Android tabhost模仿網易新聞奧運版效果
關于TabHost的使用，網上有很多例子，也有很多教程。本來沒有必要再進行重復這些東西，但是就在前一個項目，由于BOSS認為UI設計的沒有震撼力，于是迫于壓力更改UI。本人對色彩搭配實在是沒有一點感覺，于是乎找來各大互聯網公司的例子來看，碰巧奧運會，網易新聞推出了奧運版，動感十足，于是拿來參考。不料，網易大公司，重寫了TabWidget。代碼如下：
olympic_main_layout.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" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<RelativeLayout
android:id="@id/tabwidget"
android:layout_width="fill_parent"
android:layout_height="41.0dip"
android:layout_alignParentBottom="true" >
<ImageView
android:id="@id/newsreader_home"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="@android:id/tabs"
android:layout_alignTop="@android:id/tabs"
android:layout_centerHorizontal="true"
android:src="@drawable/olympic_news_home_selector"
android:visibility="gone" />
<com.netease.newsreader.view.MyTabWidget
android:id="@android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="41.0dip"
android:layout_alignParentBottom="true" />
</RelativeLayout>
<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="@id/tabwidget" />
<FrameLayout
android:id="@id/realtabcontent"
android:layout_width="0.0dip"
android:layout_height="0.0dip"
android:layout_above="@id/tabwidget" />
<ImageView
android:id="@id/tab_bg_bg"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_above="@id/tabwidget"
android:background="@drawable/bottom_weight_bg" />
</RelativeLayout>
</TabHost>但是，沒辦法，只能找些替代性的方案來仿制奧運版效果，于是乎找到了位于 C:\android-sdk-windows\platforms\android-8\data\res\layout目錄下的tab_indicator.xml文件，也就是tabhost中TabWidget的所要表現的文件。同時在這個目錄下，找到了tab_content.xml文件這兩個文件的源代碼分別是：
tab_content.xml
<?xml version="1.0" encoding="utf-8"?>
<!--
/* //device/apps/common/assets/res/layout/tab_content.xml
**
** Copyright 2006, The Android Open Source Project
**
** Licensed under the Apache License, Version 2.0 (the "License");
** you may not use this file except in compliance with the License.
** You may obtain a copy of the License at
**
** http://www.apache.org/licenses/LICENSE-2.0
**
** Unless required by applicable law or agreed to in writing, software
** distributed under the License is distributed on an "AS IS" BASIS,
** WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
** See the License for the specific language governing permissions and
** limitations under the License.
*/
-->
<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">
<LinearLayout android:orientation="vertical"
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:layout_weight="0" />
<FrameLayout android:id="@android:id/tabcontent"
android:layout_width="match_parent" android:layout_height="0dip"
android:layout_weight="1"/>
</LinearLayout>
</TabHost>tab_indicator.xml <?xml version="1.0" encoding="utf-8"?>
<!-- Copyright (C) 2008 The Android Open Source Project
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="0dip"
android:layout_height="64dip"
android:layout_weight="1"
android:layout_marginLeft="-3dip"
android:layout_marginRight="-3dip"
android:orientation="vertical"
android:background="@android:drawable/tab_indicator">
<ImageView android:id="@+id/icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
/>
<TextView android:id="@+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
style="?android:attr/tabWidgetStyle"
/>
</RelativeLayout>
在這里我們只關注tab_indicator.xml文件
看到這里當然豁然開朗了， tab_indicator.xml文件使用了RelativeLayout而不是LinearLayout。這就使我們的自定義工作容易不少，于是在代碼中對tab_indicator.xml文件進行了重新組合定位，實現了底部效果
底部效果關鍵代碼
for (int i = 0; i < tabWidget.getChildCount(); i++) {
TextView tv = (TextView) tabWidget.getChildAt(i).findViewById(
android.R.id.title);
android.widget.RelativeLayout.LayoutParams tvp = new android.widget.RelativeLayout.LayoutParams(
RelativeLayout.LayoutParams.WRAP_CONTENT,
RelativeLayout.LayoutParams.WRAP_CONTENT);
tvp.addRule(RelativeLayout.ALIGN_PARENT_TOP);
tvp.addRule(RelativeLayout.CENTER_HORIZONTAL);
tv.setLayoutParams(tvp);
ImageView iv = (ImageView) tabWidget.getChildAt(i).findViewById(
android.R.id.icon);
android.widget.RelativeLayout.LayoutParams ivp = new android.widget.RelativeLayout.LayoutParams(
RelativeLayout.LayoutParams.WRAP_CONTENT,
RelativeLayout.LayoutParams.WRAP_CONTENT);
ivp.addRule(RelativeLayout.CENTER_HORIZONTAL);
ivp.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM);
iv.setLayoutParams(ivp);
// 得到每個tab
View vvv = tabWidget.getChildAt(i);
// 設置背景色為透明
vvv.setBackgroundColor(Color.TRANSPARENT);
// 設置字體顏色和大小
tv.setTextColor(this.getResources()
.getColorStateList(R.color.white));
tv.setTextSize(15);
}
頂部效果
頂部效果關鍵代碼
for (int i = 0; i < tabWidget.getChildCount(); i++) {
TextView tv = (TextView) tabWidget.getChildAt(i).findViewById(
android.R.id.title);
android.widget.RelativeLayout.LayoutParams tvp = new android.widget.RelativeLayout.LayoutParams(
RelativeLayout.LayoutParams.WRAP_CONTENT,
RelativeLayout.LayoutParams.WRAP_CONTENT);
tvp.addRule(RelativeLayout.CENTER_HORIZONTAL);
//設置距離頂部6dip
tvp.setMargins(0, 6, 0, 0);
tv.setLayoutParams(tvp);
ImageView iv = (ImageView) tabWidget.getChildAt(i).findViewById(
android.R.id.icon);
android.widget.RelativeLayout.LayoutParams ivp = new android.widget.RelativeLayout.LayoutParams(
RelativeLayout.LayoutParams.WRAP_CONTENT,
RelativeLayout.LayoutParams.WRAP_CONTENT);
ivp.addRule(RelativeLayout.CENTER_HORIZONTAL);
ivp.setMargins(0, 6, 0, 0);
iv.setLayoutParams(ivp);
// 得到每個tab
View vvv = tabWidget.getChildAt(i);
// 設置背景色為透明
vvv.setBackgroundColor(Color.TRANSPARENT);
// 設置字體顏色和大小
tv.setTextColor(this.getResources()
.getColorStateList(R.color.white));
tv.setTextSize(15);
} 整體效果
源碼下載地址
本文由用戶 openkk 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！