这篇文章主要是分析网易主页的tabhost的制作和动态的移动背景实现,首先说一下tabhost这个组件,android原生的tabhost的tab导航是在屏幕上方显示显示的,如果要使tab导航在屏幕下方需要在xml布局文件中把TabWidget布局到tabcontent下方即可,下面来看下具体是怎样布局的:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TabHost
android:id="@+id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_below="@id/column_navi" >
<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:paddingBottom="41.0dip" >
<LinearLayout
android:id="@+id/tab_news"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
</LinearLayout>
<FrameLayout
android:id="@+id/tab_topic"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
</FrameLayout>
<LinearLayout
android:id="@+id/tab_images"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@drawable/pictures_bg"
android:gravity="center"
android:orientation="vertical" >
</LinearLayout>
<LinearLayout
android:id="@+id/tab_notes"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
</LinearLayout>
<RelativeLayout
android:id="@+id/tab_vote"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@drawable/top_weight_bg" />
</RelativeLayout>
<include
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center"
layout="@layout/loadingbar" />
</FrameLayout>
<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="43.0dip"
android:layout_alignParentBottom="true"
android:background="@drawable/tab_bg" />
<ImageView
android:id="@+id/tab_front_bg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="@android:id/tabs"
android:layout_alignLeft="@android:id/tabs"
android:src="@drawable/tab_front_bg" />
<ImageView
android:id="@+id/tab_bg_bg"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_above="@android:id/tabs"
android:background="@drawable/bottom_weight_bg" />
</RelativeLayout>
</TabHost>
</LinearLayout>
大家可以看到在TabWidget标签下面放了2张图片,这2张图片分别是实现动态移动的背景图片和TabWidget的整体背景图片,通过分析这2张图片的布局方式大家应该可以看得出来,这里都不多说。
现在布局弄好了,现在的问题就是怎样让我们选着一个tab项后面的背景也跟这移动到我选择的位置呢?
其实很简单,我是这样实现的,首先在给tab标签添加setIndicator(View view)的时候加入自定义的view,然后分别给自定义view控件添加onTouch()监听,监听的作用就是每次手指点击到这个控件时,就获取这个控件在屏幕上的坐标位置,然后让tab_front_bg图片移动到当前坐标即可。具体实现背景移动的细节可以参考我的另一片文章http://blog.csdn.net/yaoyeyzq/article/details/7579938
下面是实现的部分源码:
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.Window;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TabHost;
import android.widget.TextView;
import com.yzq.text.custom.TabListener;
public class TestActivity extends Activity {
/** Called when the activity is first created. */
// private ScrollLayout scroll;
private ImageView tab_front_bg;
private TabHost host;
private TabListener tabListener;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.main);
initView();
}
private void initView() {
host = (TabHost) findViewById(R.id.tabhost);
tab_front_bg = (ImageView) findViewById(R.id.tab_front_bg);
host.setup();
tabListener = new TabListener(tab_front_bg, this, host);
host.addTab(host.newTabSpec("xw").setIndicator(getIndicatorView(1))
.setContent(R.id.tab_news));
host.addTab(host.newTabSpec("ht").setIndicator(getIndicatorView(2))
.setContent(R.id.tab_topic));
host.addTab(host.newTabSpec("tp").setIndicator(getIndicatorView(3))
.setContent(R.id.tab_images));
host.addTab(host.newTabSpec("gt").setIndicator(getIndicatorView(4))
.setContent(R.id.tab_notes));
host.addTab(host.newTabSpec("tp").setIndicator(getIndicatorView(5))
.setContent(R.id.tab_vote));
host.setCurrentTab(0);
}
private View getIndicatorView(int location) {
LinearLayout layout = new LinearLayout(this);
TextView textView = new TextView(this);
switch (location) {
case 1:
textView.setId(R.id.news);
textView.setBackgroundDrawable(getResources().getDrawable(
R.drawable.current_news_tab));
break;
case 2:
textView.setId(R.id.topic);
textView.setBackgroundDrawable(getResources().getDrawable(
R.drawable.back_topic_tab));
break;
case 3:
textView.setId(R.id.picture);
textView.setBackgroundDrawable(getResources().getDrawable(
R.drawable.back_picture_tab));
break;
case 4:
textView.setId(R.id.comment);
textView.setBackgroundDrawable(getResources().getDrawable(
R.drawable.back_comment_tab));
break;
case 5:
textView.setId(R.id.vote);
textView.setBackgroundDrawable(getResources().getDrawable(
R.drawable.back_vote_tab));
break;
}
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(-1, -1);
textView.setOnTouchListener(tabListener);
layout.addView(textView, params);
return layout;
}
}
下面是移动背景和动态改变tab图片状态的具体实现源码:
import android.app.Activity;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.view.animation.Animation;
import android.view.animation.Animation.AnimationListener;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.RelativeLayout.LayoutParams;
import android.widget.TabHost;
import android.widget.TextView;
import com.yzq.test.R;
/**
* @author Administrator
*
*/
public class TabListener implements OnTouchListener {
private int lastX = 0;
private TextView up_text;
private ImageView column_slide_bar;
private Activity cotext;
private TabHost host;
public TabListener(ImageView column_slide_bar, Activity cotext, TabHost host) {
super();
this.column_slide_bar = column_slide_bar;
this.cotext = cotext;
this.host = host;
}
/*
* (non-Javadoc)
*
* @see android.view.View.OnTouchListener#onTouch(android.view.View,
* android.view.MotionEvent)
*/
@Override
public boolean onTouch(View v, MotionEvent event) {
if (event.getAction() == MotionEvent.ACTION_DOWN) {
if (up_text != null) {
switch (up_text.getId()) {
case R.id.news:
up_text.setBackgroundDrawable(cotext.getResources()
.getDrawable(R.drawable.back_news_tab));
break;
case R.id.topic:
up_text.setBackgroundDrawable(cotext.getResources()
.getDrawable(R.drawable.back_topic_tab));
break;
case R.id.picture:
up_text.setBackgroundDrawable(cotext.getResources()
.getDrawable(R.drawable.back_picture_tab));
break;
case R.id.comment:
up_text.setBackgroundDrawable(cotext.getResources()
.getDrawable(R.drawable.back_comment_tab));
break;
case R.id.vote:
up_text.setBackgroundDrawable(cotext.getResources()
.getDrawable(R.drawable.back_vote_tab));
break;
}
} else {
TextView news = (TextView) cotext.findViewById(R.id.news);
news.setBackgroundDrawable(cotext.getResources().getDrawable(
R.drawable.back_news_tab));
}
translateImage(event);
TextView tv = (TextView) v;
switch (tv.getId()) {
case R.id.news:
tv.setBackgroundDrawable(cotext.getResources().getDrawable(
R.drawable.current_news_tab));
host.setCurrentTab(0);
break;
case R.id.topic:
tv.setBackgroundDrawable(cotext.getResources().getDrawable(
R.drawable.current_topic_tab));
host.setCurrentTab(1);
break;
case R.id.picture:
tv.setBackgroundDrawable(cotext.getResources().getDrawable(
R.drawable.current_picture_tab));
host.setCurrentTab(2);
break;
case R.id.comment:
tv.setBackgroundDrawable(cotext.getResources().getDrawable(
R.drawable.current_comment_tab));
host.setCurrentTab(3);
break;
case R.id.vote:
tv.setBackgroundDrawable(cotext.getResources().getDrawable(
R.drawable.current_vote_tab));
host.setCurrentTab(4);
break;
}
up_text = tv;
}
return true;
}
private void translateImage(MotionEvent event) {
float x = event.getX();
float rx = event.getRawX();
final float nx = rx - x;
TranslateAnimation trans = null;
if (nx > lastX) {
trans = new TranslateAnimation(0, nx - lastX, 0, 0);
} else if (nx < lastX) {
trans = new TranslateAnimation(0, (lastX - nx) * -1, 0, 0);
} else {
return;
}
trans.setDuration(300);
trans.setAnimationListener(new AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {
// TODO Auto-generated method stub
}
@Override
public void onAnimationRepeat(Animation animation) {
// TODO Auto-generated method stub
}
@Override
public void onAnimationEnd(Animation animation) {
RelativeLayout.LayoutParams params = (LayoutParams) column_slide_bar
.getLayoutParams();
params.leftMargin = (int) nx;
column_slide_bar.setLayoutParams(params);
}
});
trans.setFillEnabled(true);
column_slide_bar.startAnimation(trans);
lastX = (int) nx;
}
}
分享到:
相关推荐
TabHost使用以及源码分析。 对应的文章为:http://blog.csdn.net/yanbin1079415046/article/details/7973022
一个自定义的Tabhost标签背景样式,点击时可以更换背景图片
android tabhost 动态添加 删除 排序 重命名
android Tabhost使用Demo
android tabhost 动态添加,删除,排序,重命名(3)
Android TabHost TabActivity TabHost的简单使用
android tabhost 动态添加 删除 排序 重命名
androidTabhost的使用实例代码,仅供参考
本文档用于解决更改安卓组件中的tabhost的选项卡背景图片的问题
android tabhost 动态添加,删除,排序,重命名
android tabhost 动态添加,删除,排序,重命名(2):数据库操作
tabhost模仿网易新闻奥运版效果 tabhost模仿网易新闻奥运版效果
TabHost使用(自定义按钮菜单)
android TabHost使用详解 TabHost从布局到代码的使用步骤
TabHost的使用方法,适合初学者,适合课堂讲授实现模拟显示未接来电、已接来电和拨出电话的选项卡。
android tabhost 动态添加,删除,排序,重命名
此文档对TabHost进行了系统的介绍,并且有使用步骤,后面更有例子。
tabhost中嵌套一个tabhost。
NULL 博文链接:https://technicalsearch.iteye.com/blog/1924614
NULL 博文链接:https://geyubin.iteye.com/blog/1213902