閱讀940 返回首頁    go 京東網上商城

自定義TabHost實現背景圖片隨選項卡切換滑動效果

https://download.csdn.net/detail/hfsu0419/4137990



本例子是對TabHost組件的自定義，實現標簽居底顯示；每個標簽包含圖片和文字。

布局文件

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <TabHost xmlns:android="https://schemas.android.com/apk/res/android"
  3. android:id="@android:id/tabhost"
  4. android:layout_width="fill_parent"
  5. android:layout_height="fill_parent" >
  6. <RelativeLayout
  7. android:layout_width="fill_parent"
  8. android:layout_height="wrap_content"
  9. android:background="#F8FFEE" >
  10. <!-- 內容顯示 -->
  11. <FrameLayout
  12. android:id="@android:id/tabcontent"
  13. android:layout_width="fill_parent"
  14. android:layout_height="wrap_content" >
  15. <TextView
  16. android:id="@+id/text1"
  17. android:layout_width="fill_parent"
  18. android:layout_height="fill_parent"
  19. android:text="@string/text1"
  20. android:textSize="32dp" />
  21. <TextView
  22. android:id="@+id/text2"
  23. android:layout_width="fill_parent"
  24. android:layout_height="fill_parent"
  25. android:text="@string/text2"
  26. android:textSize="32dp" />
  27. <TextView
  28. android:id="@+id/text3"
  29. android:layout_width="fill_parent"
  30. android:layout_height="fill_parent"
  31. android:text="@string/text3"
  32. android:textSize="32dp" />
  33. </FrameLayout>
  34. <TabWidget
  35. android:id="@android:id/tabs"
  36. android:layout_width="fill_parent"
  37. android:layout_height="wrap_content"
  38. android:layout_alignParentBottom="true"
  39. android:background="@drawable/bottom_tab_bg" >
  40. </TabWidget>
  41. <!-- 選項卡背景圖片 -->
  42. <ImageView
  43. android:id="@+id/tab_top_select"
  44. android:layout_width="45dp"
  45. android:layout_height="45dp"
  46. android:layout_alignParentBottom="true"
  47. android:src="@drawable/topbar_select" />
  48. </RelativeLayout>
  49. </TabHost>
<?xml version="1.0" encoding="utf-8"?> <TabHost xmlns:andro android: android:layout_width="fill_parent" android:layout_height="fill_parent" > <RelativeLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="#F8FFEE" > <!-- 內容顯示 --> <FrameLayout android: android:layout_width="fill_parent" android:layout_height="wrap_content" > <TextView android: android:layout_width="fill_parent" android:layout_height="fill_parent" android:text="@string/text1" android:textSize="32dp" /> <TextView android: android:layout_width="fill_parent" android:layout_height="fill_parent" android:text="@string/text2" android:textSize="32dp" /> <TextView android: android:layout_width="fill_parent" android:layout_height="fill_parent" android:text="@string/text3" android:textSize="32dp" /> </FrameLayout> <TabWidget android: android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:background="@drawable/bottom_tab_bg" > </TabWidget> <!-- 選項卡背景圖片 --> <ImageView android: android:layout_width="45dp" android:layout_height="45dp" android:layout_alignParentBottom="true" android:src="@drawable/topbar_select" /> </RelativeLayout> </TabHost>
MainActivity.java

  1. package com.suxh;
  3. import java.util.ArrayList;
  4. import java.util.List;
  6. import android.app.TabActivity;
  7. import android.graphics.Color;
  8. import android.os.Bundle;
  9. import android.os.Handler;
  10. import android.os.Message;
  11. import android.util.Log;
  12. import android.view.Gravity;
  13. import android.view.View;
  14. import android.view.animation.TranslateAnimation;
  15. import android.widget.ImageView;
  16. import android.widget.LinearLayout;
  17. import android.widget.TabHost;
  18. import android.widget.TabHost.OnTabChangeListener;
  19. import android.widget.TextView;
  21. public class MainActivity extends TabActivity implements OnTabChangeListener {
  22. // 當前選中的Tab標號
  23. private int mCurSelectTabIndex = 0;
  24. // 默認選中第一個tab頁 移動標誌操作
  25. private final int INIT_SELECT = 0;
  26. // 滑動動畫執行時間
  27. private final int DELAY_TIME = 500;
  28. private TabHost mTabHost;
  29. // 存放Tab頁中ImageView信息
  30. public List<ImageView> imageList = new ArrayList<ImageView>();
  32. @Override
  33. public void onCreate(Bundle savedInstanceState) {
  34. super.onCreate(savedInstanceState);
  35. setContentView(R.layout.main);
  36. // 取得TabHost對象
  37. mTabHost = getTabHost();
  38. /* 為TabHost添加標簽 */
  39. mTabHost.addTab(mTabHost.newTabSpec("tab_1").setIndicator(composeLayout("優惠信息", R.drawable.pic1_s)).setContent(R.id.text1));
  40. mTabHost.addTab(mTabHost.newTabSpec("tab_2").setIndicator(composeLayout("銀行公告", R.drawable.pic2_n)).setContent(R.id.text2));
  41. mTabHost.addTab(mTabHost.newTabSpec("tab_3").setIndicator(composeLayout("金融產品", R.drawable.pic3_n)).setContent(R.id.text3));
  42. // 設置TabHost的背景顏色
  43. mTabHost.setBackgroundColor(Color.argb(150, 22, 70, 150));
  44. // 設置當前選中的Tab頁
  45. mTabHost.setCurrentTab(0);
  46. // TabHost添加事件
  47. mTabHost.setOnTabChangedListener(this);
  48. // 初始化移動標識這裏移到第一個tab頁
  49. initCurSelectTab();
  50. }
  51. /**
  52. * 初始化選中Tab覆蓋圖片的Handler
  53. */
  54. private Handler initSelectTabHandle = new Handler () {
  55. public void handleMessage (Message msg) {
  56. switch (msg.what) {
  57. case INIT_SELECT:
  58. moveTopSelect(INIT_SELECT);
  59. break;
  60. default:
  61. break;
  62. }
  63. super.handleMessage(msg);
  64. }
  65. };
  67. /**
  68. * 初始化選中Tab覆蓋圖片
  69. */
  70. public void initCurSelectTab(){
  71. // 默認選中移動圖片位置
  72. Message msg = new Message();
  73. msg.what = INIT_SELECT;
  74. initSelectTabHandle.sendMessageDelayed(msg, DELAY_TIME);
  75. }
  78. /**
  79. * Tab頁改變
  80. */
  81. public void onTabChanged(String tabId) {
  82. // 設置所有選項卡的圖片為未選中圖片
  83. imageList.get(0).setImageDrawable(getResources().getDrawable(R.drawable.pic1_n));
  84. imageList.get(1).setImageDrawable(getResources().getDrawable(R.drawable.pic2_n));
  85. imageList.get(2).setImageDrawable(getResources().getDrawable(R.drawable.pic3_n));
  87. if (tabId.equalsIgnoreCase("tab_1")) {
  88. imageList.get(0).setImageDrawable(getResources().getDrawable(R.drawable.pic1_s));
  89. // 移動底部背景圖片
  90. moveTopSelect(0);
  91. } else if (tabId.equalsIgnoreCase("tab_2")) {
  92. imageList.get(1).setImageDrawable(getResources().getDrawable(R.drawable.pic2_s));
  93. // 移動底部背景圖片
  94. moveTopSelect(1);
  95. } else if (tabId.equalsIgnoreCase("tab_3")) {
  96. imageList.get(2).setImageDrawable(getResources().getDrawable(R.drawable.pic3_s));
  97. // 移動底部背景圖片
  98. moveTopSelect(2);
  99. }
  100. }
  102. /**
  103. * 移動tab選中標識圖片
  104. * @param selectIndex
  105. * @param curIndex
  106. */
  107. public void moveTopSelect(int selectIndex) {
  108. View topSelect = (View) findViewById(R.id.tab_top_select);
  110. // 起始位置中心點
  111. int startMid = ((View) getTabWidget().getChildAt(mCurSelectTabIndex)).getLeft() + ((View) getTabWidget().getChildAt(mCurSelectTabIndex)).getWidth() / 2;
  112. // 起始位置左邊位置坐標
  113. int startLeft = startMid - topSelect.getWidth() / 2;
  115. // 目標位置中心點
  116. int endMid = ((View) getTabWidget().getChildAt(selectIndex)).getLeft() + ((View) getTabWidget().getChildAt(selectIndex)).getWidth() / 2;
  117. // 目標位置左邊位置坐標
  118. int endLeft = endMid - topSelect.getWidth() / 2;
  120. TranslateAnimation animation = new TranslateAnimation(startLeft, endLeft - topSelect.getLeft(), 0, 0);
  121. animation.setDuration(200);
  122. animation.setFillAfter(true);
  123. topSelect.bringToFront();
  124. topSelect.startAnimation(animation);
  126. // 改變當前選中按鈕索引
  127. mCurSelectTabIndex = selectIndex;
  129. Log.i("fs", "endMid " + endMid + " startLeft " + startLeft + " endLeft" + (endLeft - topSelect.getLeft()));
  130. }
  132. /**
  133. * 這個設置Tab標簽本身的布局，需要TextView和ImageView不能重合 s:是文本顯示的內容 i:是ImageView的圖片位置
  134. */
  135. public View composeLayout(String s, int i) {
  136. // 定義一個LinearLayout布局
  137. LinearLayout layout = new LinearLayout(this);
  138. // 設置布局垂直顯示
  139. layout.setOrientation(LinearLayout.VERTICAL);
  140. ImageView iv = new ImageView(this);
  141. imageList.add(iv);
  142. iv.setImageResource(i);
  143. LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.FILL_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT);
  144. lp.setMargins(0, 5, 0, 0);
  145. layout.addView(iv, lp);
  146. // 定義TextView
  147. TextView tv = new TextView(this);
  148. tv.setGravity(Gravity.CENTER);
  149. tv.setSingleLine(true);
  150. tv.setText(s);
  151. tv.setTextColor(Color.WHITE);
  152. tv.setTextSize(10);
  153. layout.addView(tv, new LinearLayout.LayoutParams(LinearLayout.LayoutParams.FILL_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT));
  154. return layout;
  155. }
  156. }


最後更新：2017-04-02 17:51:26

  上一篇：go GridView + ViewFlipper布局界麵，模仿“機鋒市場”
  下一篇：go jQuery的ajax傳遞時亂碼解決