<span style="color:#ff0000;">MainActivity </span>
import android.app.Activity;
import android.app.TabActivity;
import android.content.Intent;
import android.os.Bundle;
import android.support.annotation.NonNull;
import android.view.View;
import android.view.ViewTreeObserver;
import android.view.animation.Animation;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.TabHost;
import itcast.zz.myapp.R;
public class MainActivity extends TabActivity implements View.OnClickListener {
/**
* TabHost 的使用步骤：
* 1- 在布局文件中，声明指定ID的tabHost \ tabWidget \ FrameLayout
* 2- 让MainActivity 继承自 TabActivity
* 3- tabHost = getTabHost(); 获得tabHost
* 4- 参照：addTab 方法 添加标签
*/
//获得TabHost
private TabHost tabHost;
private ImageView ivSlide;
private LinearLayout llConversation;
private LinearLayout llFolder;
private LinearLayout llGroup;
private final String conversation = "conversation";
private final String folder = "folder";
private final String group = "group";
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//setContentView的执行,Activity就会调用onContentChanged()
setContentView(R.layout.activity_main);
//直接通过getTabHost()即可获得, 因为在TabActivity的onContentChanged()中已经写过findbyid了
tabHost = getTabHost();
// //创建标签 参数可以认为是标签的命名
// TabHost.TabSpec tabSpec = tabHost.newTabSpec("conversation");
//
// //设置标签的文字和图标
// tabSpec.setIndicator("会话",getResources().getDrawable(R.drawable.tab_conversation));
//
// //设置内容
// Intent intent = new Intent(this,ConversationUi.class);
// tabSpec.setContent(intent);
//
// //添加标签
// tabHost.addTab(tabSpec);
addTab("conversation","会话",R.drawable.tab_conversation,ConversationUi.class);
addTab("folder","文件夹",R.drawable.tab_folder,FolderUi.class);
addTab("group","群组",R.drawable.tab_group,GroupUi.class);
ivSlide = (ImageView) findViewById(R.id.iv_slide_bg);
llConversation = (LinearLayout) findViewById(R.id.ll_conversation);
llFolder = (LinearLayout) findViewById(R.id.ll_folder);
llGroup = (LinearLayout) findViewById(R.id.ll_group);
llConversation.setOnClickListener(this);
llFolder.setOnClickListener(this);
llGroup.setOnClickListener(this);
// 初始化滑动图片的大小和位置
// 在onCreate 不能直接获得控件的大小，位置，因为此时，还没有测量控件，也没有指定位置
// int width = llConversation.getWidth();
// System.out.println("width:"+width);
// 获得view树的观察者
ViewTreeObserver viewTreeObserver = llConversation.getViewTreeObserver();
//添加一个全局改变位置的监听
viewTreeObserver.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
@Override
//当位置大小改变后调用此方法
public void onGlobalLayout() {
int width = llConversation.getWidth();
int height = llConversation.getHeight();
// System.out.println("width:"+width);
//获得布局参数,设置宽,高,注意,布局参数一定要和父View的类型保持一致
RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams)ivSlide.getLayoutParams();
layoutParams.width = width;
layoutParams.height = height;
// llConversation 在其父view中的左边距
int left = llConversation.getLeft();
//为滑动框设置左边距
layoutParams.leftMargin = left;
//有些android版本的兼容性问题
// ivSlide.setLayoutParams(layoutParams);
//设置图片框移动的距离 即屏幕的1/3
itemLength = ((View)llConversation.getParent()).getWidth();
}
});
}
/**
* 添加标签
* @param tabName 标签的命名 在屏幕上显示不出来 是TabHost用来管理标签用的
* @param tabLabel 标签的显示标题文字
* @param iconId 图标
* @param clazz Activity的字节码
*/
private void addTab(String tabName, CharSequence tabLabel, int iconId, Class<?extends Activity> clazz) {
//创建标签 参数可以认为是标签的命名
TabHost.TabSpec tabSpec = tabHost.newTabSpec(tabName);
//设置标签的文字和图标
tabSpec.setIndicator(tabLabel,getResources().getDrawable(iconId));
//设置内容
Intent intent = new Intent(this,clazz);
tabSpec.setContent(intent);
//添加标签
tabHost.addTab(tabSpec);
//添加标签
tabHost.addTab(tabSpec);
}
/**
* 滑动图片所移动的单位长度 = 屏幕的1/3
*/
private int itemLength;
/**
* 滑动图片做动画时的开始位置
*/
private int lastPosition;
@Override
/**
* @param v 点击的view
*/
public void onClick(View v) {
switch(v.getId()){
case R.id.ll_conversation : //点击会话标签
ivSlide.startAnimation(getAnimation(0));// 为当前view设置动画 目标位置为起点 0
//为当前位置赋值 起始位置 0
lastPosition = 0;
break;
case R.id.ll_folder : //点击文件夹标签
TranslateAnimation ta = getAnimation(itemLength);
ivSlide.startAnimation(ta);// 为当前view设置动画 即ta
//每一次动画执行完之后,都应该更新最新的当前位置,将上一次的目标位置赋值为新的当前位置
lastPosition = itemLength;
break;
case R.id.ll_group : //点击群组标签
ivSlide.startAnimation(getAnimation(itemLength*2));// 为当前view设置动画以及动画的目标位置
//为当前位置赋值
lastPosition = itemLength*2;
break;
}
}
@NonNull
/**
* 创建一个从当前位置到 目标位置的平移动画
* @param destPosition 目标位置
*/
private TranslateAnimation getAnimation(float destPosition) {
TranslateAnimation ta = new TranslateAnimation(
Animation.ABSOLUTE,lastPosition, //ABSOLUTE绝对值 动画的原点坐标为它所在的view的左上角
Animation.ABSOLUTE,destPosition,
Animation.ABSOLUTE,0,
Animation.ABSOLUTE,0);
ta.setDuration(300);//动画的持续时间 毫秒值
ta.setFillAfter(true); //是否保持动画完成时的状态
return ta;
}
}
activity_main.xml<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity" >
<TabHost
android:id="@android:id/tabhost"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TabWidget
android:id="@android:id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="gone" >
</TabWidget>
<!-- 写一个布局来替换 TabWidget 的导航功能 -->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="8dp"
android:paddingBottom="8dp"
android:background="#aaa" >
<ImageView
android:id="@+id/iv_slide_bg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/slide_background" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<!-- 第一个三分之一 -->
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_horizontal"
android:orientation="horizontal" >
<!-- 会话标签 -->
<LinearLayout
android:id="@+id/ll_conversation"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical"
android:paddingLeft="10dp"
android:paddingRight="10dp" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/tab_conversation" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="会话" />
</LinearLayout>
</LinearLayout>
<!-- 第二个三分之一 -->
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_horizontal"
android:orientation="horizontal" >
<LinearLayout
android:id="@+id/ll_folder"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/tab_folder" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="文件夹" />
</LinearLayout>
</LinearLayout>
<!-- 第三个三分之一 -->
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_horizontal"
android:orientation="horizontal" >
<LinearLayout
android:id="@+id/ll_group"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical"
android:paddingLeft="10dp"
android:paddingRight="10dp" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="3dp"
android:background="@drawable/tab_group" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="群组" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</RelativeLayout>
<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="match_parent"
android:layout_height="match_parent" >
</FrameLayout>
</LinearLayout>
</TabHost>
</RelativeLayout>
还需要新建三个Activity:
public class ConversationUi extends Activity{
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
TextView text= new TextView(this);
text.setText("我是会话页面");
setContentView(text);
}
}
public class FolderUi extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
TextView text= new TextView(this);
text.setText("我是文件夹页面");
setContentView(text);
}
}
public class GroupUi extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
TextView text= new TextView(this);
text.setText("我是群组页面");
setContentView(text);
}
}
