两种特殊TabHost实现

最近看到网易新闻的底部导航栏的效果，觉得不错，就自己花了点时间试着写了一下。在此和大家分享一下。

下面先看这个效果图：

说明：这个效果在点击别的tabwidget的时候，下面绿色的部分有滑动的效果，这个和网易的那个导航一样的。

这个的实现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" >    <LinearLayout        android:layout_width="fill_parent"        android:layout_height="fill_parent"        android:orientation="vertical" >        <FrameLayout            android:id="@android:id/tabcontent"            android:layout_width="match_parent"            android:layout_height="match_parent"            android:layout_weight="1" />        <LinearLayout            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:background="#808080"            android:orientation="vertical" >            <TabWidget                android:id="@android:id/tabs"                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:layout_weight="0"                android:layout_marginTop="10dp"                android:tabStripEnabled="false" />            <ImageView                android:id="@+id/imageView"                android:layout_width="80dp"                android:layout_height="10dp"                android:background="#00CC00" />        </LinearLayout>    </LinearLayout></TabHost>

注意：

android:id="@android:id/tabhost"

android:id="@android:id/tabcontent"

android:id="@android:id/tabs"

以上三个Id 是固定的，如果更改的话是会报错的。

效果图下面绿色的部分只是TabWidget下加个ImageView,imageView 随着TabWidget的移动而移动就可以了。

实际上只是对TabHost的OnTabChangeListener事件监听就可以啦

实现java代码：

mTabHost.setOnTabChangedListener(new OnTabChangeListener() {int startX = 0;int endX =0;@Overridepublic void onTabChanged(String tabId) {Log.d("TabHost", "OnTabChangeListener = "+tabId);mTabSpecWidth = mTabHost.getCurrentTabView().getWidth();Log.e("TabHost", "mTabSpecWidth ="+mTabSpecWidth+"\ngetChildCount="+mTabHost.getChildCount());endX = mTabSpecWidth*(Integer.parseInt(tabId)-1);mTranslateAnimation = new TranslateAnimation(startX,endX,0,0);mTranslateAnimation.setDuration(200);mTranslateAnimation.setFillEnabled(true);mTranslateAnimation.setFillAfter(true);mImageView.startAnimation(mTranslateAnimation);startX = endX;if(tabId.equals("6")){startActivity(new Intent(TabHostBottomActivity.this,TabHostActivity.class));}}});

下面介绍一下第二种Tabhost的实现：

先上图，有图有真相啊

这种实现原理也简单，只是在点击的前换一下背景图就行了。

TabSpec.setsetIndicator(view )这个View 是自己是实现的View。

我实现的View源代码：

package cn.com.hh;import android.content.Context;import android.view.Gravity;import android.widget.ImageView;import android.widget.LinearLayout;import android.widget.TextView;public class TabHostView extends LinearLayout {private Context mContext;private LinearLayout parent;private TextView mTextView;private ImageView mImageView;public TabHostView(Context context) {super(context);}/** * 只有文字的选项卡 * @param context * @param str */public TabHostView(Context context, String str) {this(context,str,0,true);}/** * 含有文字和图片的选项卡 * @param context * @param str 文字 * @param imageResourceId 图片 */public TabHostView(Context context, String str, int imageResourceId) {this(context,str,imageResourceId,true);}/** * 含有文字和图片的选项卡,图片在上，文字在下 * @param context * @param str 文字 * @param imageResourceId 图片 * @param topNavigation 导航方向 */public TabHostView(Context context, String str, int imageResourceId,boolean topNavigation) {super(context);mContext = context;mTextView = new TextView(context);mTextView.setText(str);mTextView.setGravity(Gravity.CENTER);if(imageResourceId != 0){this.setOrientation(LinearLayout.VERTICAL);this.setGravity(Gravity.CENTER);mImageView = new ImageView(context);mImageView.setImageResource(imageResourceId);if(topNavigation ==true){this.addView(mImageView,new LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT));this.addView(mTextView,new LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT));}else{this.addView(mTextView,new LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT));this.addView(mImageView,new LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT));}}else{this.addView(mTextView,new LayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.MATCH_PARENT));}}/** * 初始化选项卡 */private void initTabHostView(){}}

由于个人表达能力不是很好，不知道说没说明白。不明白的请留言吧。

花了点时间看了一下TabHost实现的相关的源代码，看懂了点，但是目前没有理清楚思路。以后理清后在分享吧

项目完整的源代码地址：http://download.csdn.net/detail/nxh_love/3806607

更多相关文章

随机推荐