码迷,mamicode.com
首页 > 其他好文 > 详细

1.TabActivity、视图树、动画

时间:2015-11-25 11:02:08      阅读:182      评论:0      收藏:0      [点我收藏+]

标签:

整个页面为TabActivity, 其中对TabWidget进行了一些改变,当切换页签时页签后面红色背景会以Translate动画形式移动到相对应的页签后。
技术分享
布局
TabHost、TabWidget、FrameLayout的id必须是系统定义的,
因为可以直接get获取控件,上面的Tab标签一般不写原生的,自己写。
把原生的TabWidget隐藏,用了个垂直的LinearLayout写,
下面是FrameLayout,也是TabHost必须写的
  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. xmlns:tools="http://schemas.android.com/tools"
  3. android:layout_width="match_parent"
  4. android:layout_height="match_parent"
  5. tools:context=".MainActivity" >
  6. <TabHost
  7. android:id="@android:id/tabhost"
  8. android:layout_width="match_parent"
  9. android:layout_height="match_parent" >
  10. <LinearLayout
  11. android:layout_width="match_parent"
  12. android:layout_height="match_parent"
  13. android:orientation="vertical" >
  14. <TabWidget
  15. android:id="@android:id/tabs"
  16. android:layout_width="match_parent"
  17. android:layout_height="wrap_content"
  18. android:visibility="gone" >
  19. </TabWidget>
  20. <!-- 自定义导航 -->
  21. <RelativeLayout
  22. android:layout_width="match_parent"
  23. android:paddingTop="10dp"
  24. android:paddingBottom="10dp"
  25. android:layout_height="wrap_content"
  26. android:background="@android:color/darker_gray"
  27. >
  28. <ImageView
  29. android:id="@+id/iv_slide_backgrounp"//阴影图片
  30. android:layout_width="wrap_content"
  31. android:layout_height="wrap_content"
  32. android:background="@drawable/slide_background" />
  33. <LinearLayout
  34. android:layout_width="match_parent"
  35. android:layout_height="wrap_content"
  36. android:orientation="horizontal" >
  37. <!-- 第一个三分之一 -->
  38. <LinearLayout
  39. android:layout_width="0dp"
  40. android:layout_height="wrap_content"
  41. android:layout_weight="2"
  42. android:gravity="center_horizontal"
  43. android:orientation="horizontal" >
  44. <!-- 会话标签 -->
  45. <LinearLayout
  46. android:id="@+id/ll_conversation"
  47. android:layout_width="wrap_content"
  48. android:layout_height="wrap_content"
  49. android:orientation="vertical"
  50. android:paddingLeft="10dp"
  51. android:paddingRight="10dp" >
  52. <ImageView
  53. android:layout_width="wrap_content"
  54. android:layout_height="wrap_content"
  55. android:background="@drawable/tab_conversation" />
  56. <TextView
  57. android:layout_width="wrap_content"
  58. android:layout_height="wrap_content"
  59. android:text="会话" />
  60. </LinearLayout>
  61. </LinearLayout>
  62. <!-- 第二个三分之一 -->
  63. 。。。。。。。
  64. <!-- 第三个三分之一 -->
  65. 。。。。。。。。跟上面一样
  66. </LinearLayout>
  67. </RelativeLayout>
  68. <FrameLayout
  69. android:id="@android:id/tabcontent"
  70. android:layout_width="match_parent"
  71. android:layout_height="match_parent" >
  72. </FrameLayout>
  73. </LinearLayout>
  74. </TabHost>
  75. </RelativeLayout>
代码:
阴影图片默认是这样的,用动画去动态的变化位置,其实图片还是在那了,只是个动画
技术分享
  1. public class MainActivity extends TabActivity implements OnClickListener {
  2. private TabHost tabHost;
  3. private LinearLayout llConversation;//会话
  4. private LinearLayout llFolder;//文件夹
  5. private LinearLayout llGroup;//群组
  6. private ImageView slideBackGround;//导航图片
  7. @Override
  8. protected void onCreate(Bundle savedInstanceState) {
  9. super.onCreate(savedInstanceState);
  10. setContentView(R.layout.activity_main);
  11. tabHost = getTabHost();//直接get获取
  12. addTab("conversation","会话",R.drawable.tab_conversation,ConversationUI.class);
  13. addTab("folder","文件夹",R.drawable.tab_folder,FolderUI.class);
  14. addTab("group","群组",R.drawable.tab_group,GroupUI.class);//都是activity
  15. llConversation = (LinearLayout) findViewById(R.id.ll_conversation);
  16. llFolder = (LinearLayout) findViewById(R.id.ll_folder);
  17. llGroup = (LinearLayout) findViewById(R.id.ll_group);
  18. llConversation.setOnClickListener(this);
  19. llFolder.setOnClickListener(this);
  20. llGroup.setOnClickListener(this);
  21. slideBackGround = (ImageView) findViewById(R.id.iv_slide_backgrounp);
  22. // 此时 llConversation 仅仅创建了对象,还没有执行onMeasure 和 onLayout 方法 ,所以,此时 getWidth 返回值是0
  23. //System.out.println("llConversation.getWidth()::"+llConversation.getWidth());
  24. // 获得全局viewTree的观察者,并添加 全局的layout监听
  25. llConversation.getViewTreeObserver().addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
  26. @Override
  27. public void onGlobalLayout() {
  28. //由于此方法会执行多次,而我们只需要执行一次就可以了,
  29. //所以,在执行一次的时候,将全局的layout监听取消,,此处 this 指的是,内部的匿名对象
  30. llConversation.getViewTreeObserver().removeGlobalOnLayoutListener(this);
  31. System.out.println("llConversation.getWidth()::"+llConversation.getWidth());
  32. //设置图片的宽高,与会话标签相同
  33. int width = llConversation.getWidth();
  34. int height = llConversation.getHeight();
  35. //slideBackGround的layoutParams 是没有leftMargin这个属性的,所以强转
  36. RelativeLayout.LayoutParams layoutParams = (android.widget.RelativeLayout.LayoutParams) slideBackGround.getLayoutParams();
  37. layoutParams.width = width;
  38. layoutParams.height = height;
  39. //设置图片的左边距与会话的左边距相同
  40. int left = llConversation.getLeft();// 获得llConversation 在他的父view中左边距
  41. layoutParams.leftMargin =left;
  42. // 将 llConversation的父view的宽度,设置给 itemLength,需要动态的变化
  43. itemLength = ((ViewGroup)llConversation.getParent()).getWidth();
  44. }
  45. });
  46. }
  47. /**
  48. * 背景图片移动的单位宽度,即,屏幕的1/3
  49. */
  50. private int itemLength;
  51. /**
  52. * 给tabHost添加标签
  53. * @param tag 标签的命名
  54. * @param label 标签显示的文字
  55. * @param iconId 标签显示的图标
  56. * @param clazz 该标签对应的显示内容
  57. */
  58. private void addTab(String tag, CharSequence label, int iconId, Class<?> clazz){
  59. //创建新的 标签 tag 是该标签的命名,此命名是tabHost用来管理标签的标示。
  60. TabSpec tabSpec =tabHost.newTabSpec(tag);
  61. //给标签添加 文字,和图标
  62. tabSpec.setIndicator(label, getResources().getDrawable(iconId));
  63. // 给标签添加对应的显示内容
  64. Intent intent = new Intent(this,clazz);
  65. tabSpec.setContent(intent);
  66. tabHost.addTab(tabSpec);
  67. }
  68. /**
  69. * 滑动背景的上一个位置
  70. */
  71. private int lastPosition;
  72. @Override
  73. /**
  74. * 响应标签的点击事件
  75. */
  76. public void onClick(View v) {
  77. switch (v.getId()) {
  78. case R.id.ll_conversation:// 会话标签
  79. // 判断当前页面是否是 会话页面,如果不是,切换至会话页面,
  80. if(!"conversation".equals(tabHost.getCurrentTabTag())){
  81. tabHost.setCurrentTabByTag("conversation");
  82. slideBackGround.startAnimation(getAnim(0));
  83. lastPosition = 0;
  84. }
  85. break;
  86. case R.id.ll_folder:// 文件夹标签
  87. // 判断当前页面是否是文件夹页面,如果不是,切换至
  88. if(!"folder".equals(tabHost.getCurrentTabTag())){
  89. tabHost.setCurrentTabByTag("folder");
  90. slideBackGround.startAnimation(getAnim(itemLength));
  91. lastPosition = itemLength;
  92. }
  93. break;
  94. case R.id.ll_group:// 群组标签
  95. // 判断当前页面是否是文件夹页面,如果不是,切换至
  96. if(!"group".equals(tabHost.getCurrentTabTag())){
  97. tabHost.setCurrentTabByTag("group");
  98. slideBackGround.startAnimation(getAnim(itemLength*2));
  99. lastPosition = itemLength*2;
  100. }
  101. break;
  102. }
  103. }
  104. private TranslateAnimation getAnim(int destPosition) {
  105. TranslateAnimation anim = new TranslateAnimation(lastPosition, destPosition, 0, 0);
  106. anim.setDuration(500);
  107. anim.setFillAfter(true);
  108. return anim;
  109. }
  110. }





1.TabActivity、视图树、动画

标签:

原文地址:http://www.cnblogs.com/liuyu0529/p/4993814.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!