前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >1.TabActivity、视图树、动画

1.TabActivity、视图树、动画

作者头像
六月的雨
发布2018-05-14 11:56:44
7440
发布2018-05-14 11:56:44
举报
文章被收录于专栏:Android开发指南Android开发指南

整个页面为TabActivity, 其中对TabWidget进行了一些改变,当切换页签时页签后面红色背景会以Translate动画形式移动到相对应的页签后。

布局

TabHost、TabWidget、FrameLayout的id必须是系统定义的,

因为可以直接get获取控件,上面的Tab标签一般不写原生的,自己写。

把原生的TabWidget隐藏,用了个垂直的LinearLayout写,

下面是FrameLayout,也是TabHost必须写的

代码语言:javascript
复制
<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>
 <!-- 自定义导航 -->
 <RelativeLayout 
			    android:layout_width="match_parent"
			    android:paddingTop="10dp"
			    android:paddingBottom="10dp"
			    android:layout_height="wrap_content"
			     android:background="@android:color/darker_gray"
 >
 <ImageView
			        android:id="@+id/iv_slide_backgrounp"//阴影图片
			        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="2"
                    android:gravity="center_horizontal"
                    android:orientation="horizontal" >
 <!-- 会话标签 -->
 <LinearLayout
                        android:id="@+id/ll_conversation"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        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>
 </RelativeLayout>
 <FrameLayout
                android:id="@android:id/tabcontent"
                android:layout_width="match_parent"
                android:layout_height="match_parent" >
 </FrameLayout>
 </LinearLayout>
 </TabHost>
</RelativeLayout>

代码:

阴影图片默认是这样的,用动画去动态的变化位置,其实图片还是在那了,只是个动画

代码语言:javascript
复制
public class MainActivity extends TabActivity implements OnClickListener {
	private TabHost tabHost;
	
	private LinearLayout llConversation;//会话
	private LinearLayout llFolder;//文件夹
	private LinearLayout llGroup;//群组
	
	private ImageView slideBackGround;//导航图片
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
		tabHost = getTabHost();//直接get获取
		
		addTab("conversation","会话",R.drawable.tab_conversation,ConversationUI.class);
		addTab("folder","文件夹",R.drawable.tab_folder,FolderUI.class);
		addTab("group","群组",R.drawable.tab_group,GroupUI.class);//都是activity
		
		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);
		
		slideBackGround = (ImageView) findViewById(R.id.iv_slide_backgrounp);
		
		// 此时 llConversation 仅仅创建了对象,还没有执行onMeasure 和 onLayout 方法 ,所以,此时  getWidth 返回值是0 
		//System.out.println("llConversation.getWidth()::"+llConversation.getWidth());
		
		// 获得全局viewTree的观察者,并添加 全局的layout监听
		llConversation.getViewTreeObserver().addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
			
			@Override
			public void onGlobalLayout() {
				//由于此方法会执行多次,而我们只需要执行一次就可以了,
				//所以,在执行一次的时候,将全局的layout监听取消,,此处  this 指的是,内部的匿名对象
				llConversation.getViewTreeObserver().removeGlobalOnLayoutListener(this);
				
				System.out.println("llConversation.getWidth()::"+llConversation.getWidth());
				
				//设置图片的宽高,与会话标签相同
				int width = llConversation.getWidth();
				int height = llConversation.getHeight();
//slideBackGround的layoutParams 是没有leftMargin这个属性的,所以强转 
				RelativeLayout.LayoutParams layoutParams = (android.widget.RelativeLayout.LayoutParams) slideBackGround.getLayoutParams();
				layoutParams.width = width;
				layoutParams.height = height;
				
				//设置图片的左边距与会话的左边距相同
				int left = llConversation.getLeft();// 获得llConversation 在他的父view中左边距
				layoutParams.leftMargin =left; 
				
				// 将 llConversation的父view的宽度,设置给 itemLength,需要动态的变化
				itemLength = ((ViewGroup)llConversation.getParent()).getWidth();
			}
		});
	}
	
	/**
	 * 背景图片移动的单位宽度,即,屏幕的1/3
	 */
	private int itemLength;
	
	
	/**
	 * 给tabHost添加标签
	 * @param tag 	标签的命名
	 * @param label	标签显示的文字 
	 * @param iconId	标签显示的图标
	 * @param clazz		该标签对应的显示内容
	 */
	private void addTab(String tag, CharSequence label, int iconId, Class<?> clazz){
		
		//创建新的 标签    tag 是该标签的命名,此命名是tabHost用来管理标签的标示。
		TabSpec tabSpec =tabHost.newTabSpec(tag);
		//给标签添加 文字,和图标
		tabSpec.setIndicator(label, getResources().getDrawable(iconId));
		// 给标签添加对应的显示内容
		Intent intent = new Intent(this,clazz);
		tabSpec.setContent(intent);
		
		tabHost.addTab(tabSpec);
	}
	/**
	 * 滑动背景的上一个位置
	 */
	private int lastPosition;
	
	@Override
	/**
	 * 响应标签的点击事件
	 */
	public void onClick(View v) {
		switch (v.getId()) {
		case R.id.ll_conversation:// 会话标签 
			// 判断当前页面是否是 会话页面,如果不是,切换至会话页面,
			if(!"conversation".equals(tabHost.getCurrentTabTag())){
			
				tabHost.setCurrentTabByTag("conversation");
				
				slideBackGround.startAnimation(getAnim(0));
				
				lastPosition = 0;
				
			}
			
			break;
		case R.id.ll_folder:// 文件夹标签 
			
			// 判断当前页面是否是文件夹页面,如果不是,切换至
			if(!"folder".equals(tabHost.getCurrentTabTag())){
			
				tabHost.setCurrentTabByTag("folder");
				
				slideBackGround.startAnimation(getAnim(itemLength));
				
				lastPosition = itemLength;
			}
			break;
		case R.id.ll_group:// 群组标签 
			
			// 判断当前页面是否是文件夹页面,如果不是,切换至
			if(!"group".equals(tabHost.getCurrentTabTag())){
			
				tabHost.setCurrentTabByTag("group");
				
				slideBackGround.startAnimation(getAnim(itemLength*2));
				
				lastPosition = itemLength*2;
			}
			
			break;
		}
	}
	private TranslateAnimation getAnim(int destPosition) {
		
		TranslateAnimation anim = new TranslateAnimation(lastPosition, destPosition, 0, 0);
		anim.setDuration(500);
		anim.setFillAfter(true);
		return anim;
	}
}
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2015-11-25 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档