文档章节

仿安智市场UI框架布局之fragment+tabhost底部菜单

c
 chengche
发布于 2013/12/06 09:58
字数 1314
阅读 3453
收藏 15
第一部分就是你们现在看的这个贴,主要功能:实现fragment_+tabhost来搭建整个app的大体UI框架,底部是一个可切换的选项卡(安智市场中的底部选项卡的切换动画效果略过,没写,太困了,码完字去睡觉)。

第二部分:也就是这个即将写的下一个帖子,因为今天实在太晚了,明天还要上班(Zzzzz...),主要功能:使用viewpagerindicator控件,实现左右滑动加载分页数据,还有android 4.2更新的新特性:Fragment in fragment(嵌套)。    这部分很快会更新。真的。 

<br>现在来看看安智市场的app效果   
<br>然后来看看现在这个帖子要实现的功能的demo效果    不会很难看吧,见笑了!呵呵!!!动画效果没做。木有时间。

<br>现在来说说代码,其实我之前在eoe写过一个类似的,不过现在理解更深刻,有改进一部分。
首先必须是布局文件啦,主要的布局文件是:activity_main.xml
  1. <TabHost
  2.     xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:id="@android :id/tabhost"
  4.     android:layout_width="match_parent"
  5.     android:layout_height="match_parent">

  6.     <LinearLayout
  7.         android:orientation="vertical"
  8.         android:layout_width="match_parent"
  9.         android:layout_height="match_parent">

  10.         <FrameLayout
  11.             android:id="@+id/realtabcontent"
  12.             android:layout_width="match_parent"
  13.             android:layout_height="0dp"
  14.             android:layout_weight="1"/>  
  15.         
  16.         <TabWidget
  17.             android:id="@android :id/tabs"
  18.             android:layout_width="match_parent"
  19.             android:layout_height="wrap_content"
  20.             android:tabStripEnabled="false"
  21.             android:background="@drawable/bg_nav"
  22.             android:layout_weight="0"/>
  23.         
  24.         <FrameLayout
  25.             android:id="@android :id/tabcontent"
  26.             android:layout_width="0dp"
  27.             android:layout_height="0dp"
  28.             android:layout_weight="0"/>

  29.     </LinearLayout>
  30. </TabHost>
复制代码
也木有啥,就是一个tabwidget控件,是底部的选项卡按钮的,然后,第一个frameLayout是上图中实际内容的部分。
接下来,最重要的,当然是fragment咯,首先如果有和我一样无知的孩子,还是得先了解一下什么是fragment吧。
传送门:http://developer.android.com/reference/android/support/v4/app/Fragment.html
然后,我小小的说明一下咯,fragment是在android sdk 3.0之后出现的,为了给用户带来更好的UE,解决不同屏幕分辩率的动态和灵活UI设计。大屏幕如平板小屏幕如手机,平板电脑的设计使得其有更多的空间来放更多的UI组件,而多出来的空间存放UI使其会产生更多的交互,从而诞生了fragments。fragment有它自己的一套生命周期机制,和activity一样。不过它必须拥有一个activity宿主,以此管理这些fragments。要使用fragment,必须引入v4类库包(android-support-v4.jar),这样虽然fragment是在3.0以后出现的,也同样可以在低版本中使用。

上代码吧,我词穷。
  1. package org.mcdull.activity;

  2. import org.mcdull.mainfragment.FifthFragment;
  3. import org.mcdull.mainfragment.FourthFragment;
  4. import org.mcdull.mainfragment.FristFragment;
  5. import org.mcdull.mainfragment.SecondFragment;
  6. import org.mcdull.mainfragment.ThirdFragment;
  7. import org.mcdull.util.DummyTabContent;

  8. import android.os.Bundle;
  9. import android.support.v4.app.FragmentActivity;
  10. import android.support.v4.app.FragmentManager;
  11. import android.support.v4.app.FragmentTransaction;
  12. import android.view.LayoutInflater;
  13. import android.widget.ImageView;
  14. import android.widget.LinearLayout;
  15. import android.widget.RelativeLayout;
  16. import android.widget.TabHost;
  17. import android.widget.TabWidget;
  18. import android.widget.TextView;

  19. /**
  20. * @description: 

  21. *
  22. * @author: hades
  23. *
  24. * @update: 2013-3-7
  25. *
  26. * @version: 1.0
  27. * 
  28. * @email:mcdull525@foxmail.com
  29. */
  30. public class MainActivity extends FragmentActivity {

  31.         private TabHost mTabHost;
  32.         TabWidget tabWidget;
  33.         private FragmentTransaction mFt;
  34.         private RelativeLayout mTabIndicator_home, mTabIndicator_app,
  35.                         mTabIndicator_game, mTabIndicator_top, mTabIndicator_setting;
  36.         private FristFragment mFristFragment;
  37.         private SecondFragment mSecondFragment;
  38.         private ThirdFragment mThirdFragment;
  39.         private FourthFragment mFourthFragment;
  40.         private FifthFragment mFifthFragment;
  41.         private FragmentManager mFm = getSupportFragmentManager();

  42.         @Override
  43.         protected void onCreate(Bundle savedInstanceState) {
  44.                 super.onCreate(savedInstanceState);
  45.                 setContentView(R.layout.activity_main);
  46.                 findTabView();
  47.                 mTabHost.setup();

  48.                 TabHost.OnTabChangeListener tabChangeListener = new TabHost.OnTabChangeListener() {

  49.                         @Override
  50.                         public void onTabChanged(String tabId) {

  51.                                 mFt = mFm.beginTransaction();

  52.                                 // TODO Auto-generated method stub
  53.                                 if (mFristFragment != null) {
  54.                                         mFt.hide(mFristFragment);
  55.                                 }
  56.                                 if (mSecondFragment != null) {
  57.                                         mFt.hide(mSecondFragment);
  58.                                 }
  59.                                 if (mThirdFragment != null) {
  60.                                         mFt.hide(mThirdFragment);
  61.                                 }
  62.                                 if (mFourthFragment != null) {
  63.                                         mFt.hide(mFourthFragment);
  64.                                 }
  65.                                 if (mFifthFragment != null) {
  66.                                         mFt.hide(mFifthFragment);
  67.                                 }

  68.                                 if (tabId.equalsIgnoreCase("home")) {
  69.                                         attachTabHome();
  70.                                 } else if (tabId.equalsIgnoreCase("app")) {
  71.                                         attachTabApp();
  72.                                 } else if (tabId.equalsIgnoreCase("game")) {
  73.                                         attachTabGame();
  74.                                 } else if (tabId.equalsIgnoreCase("top")) {
  75.                                         attachTabTop();
  76.                                 } else if (tabId.equalsIgnoreCase("setting")) {
  77.                                         attachTabSetting();
  78.                                 }
  79.                                 // 执行Fragment事务(添加。移除,替换fragment)
  80.                                 mFt.commit();
  81.                         }
  82.                 };
  83.                 mTabHost.setOnTabChangedListener(tabChangeListener);
  84.                 initTab();
  85.                 //默认跳到第几个选项卡
  86.                 mTabHost.setCurrentTab(0);
  87.         }

  88.         /**
  89.          * 找到TabHost的相关布局,并绘制每一个选项卡

  90.          */
  91.         private void findTabView() {

  92.                 mTabHost = (TabHost) findViewById(android.R.id.tabhost);
  93.                 tabWidget = (TabWidget) findViewById(android.R.id.tabs);
  94.                 LinearLayout layout = (LinearLayout) mTabHost.getChildAt(0);
  95.                 TabWidget tabWidget = (TabWidget) layout.getChildAt(1);

  96.                 mTabIndicator_home = (RelativeLayout) LayoutInflater.from(this)
  97.                                 .inflate(R.layout.tab_indicator, tabWidget, false);
  98.                 ImageView ivTab1 = (ImageView) mTabIndicator_home.getChildAt(0);
  99.                 ivTab1.setImageResource(R.drawable.selector_menu_home_btu);
  100.                 TextView tvTab1 = (TextView) mTabIndicator_home.getChildAt(1);
  101.                 tvTab1.setText(R.string.home);

  102.                 mTabIndicator_app = (RelativeLayout) LayoutInflater.from(this).inflate(
  103.                                 R.layout.tab_indicator, tabWidget, false);
  104.                 ImageView ivTab2 = (ImageView) mTabIndicator_app.getChildAt(0);
  105.                 ivTab2.setImageResource(R.drawable.selector_menu_app_btu);
  106.                 TextView tvTab2 = (TextView) mTabIndicator_app.getChildAt(1);
  107.                 tvTab2.setText(R.string.app);

  108.                 mTabIndicator_game = (RelativeLayout) LayoutInflater.from(this)
  109.                                 .inflate(R.layout.tab_indicator, tabWidget, false);
  110.                 ImageView ivTab3 = (ImageView) mTabIndicator_game.getChildAt(0);
  111.                 ivTab3.setImageResource(R.drawable.selector_menu_game_btu);
  112.                 TextView tvTab3 = (TextView) mTabIndicator_game.getChildAt(1);
  113.                 tvTab3.setText(R.string.game);

  114.                 mTabIndicator_top = (RelativeLayout) LayoutInflater.from(this).inflate(
  115.                                 R.layout.tab_indicator, tabWidget, false);
  116.                 ImageView ivTab4 = (ImageView) mTabIndicator_top.getChildAt(0);
  117.                 ivTab4.setImageResource(R.drawable.selector_menu_top_btu);
  118.                 TextView tvTab4 = (TextView) mTabIndicator_top.getChildAt(1);
  119.                 tvTab4.setText(R.string.top);

  120.                 mTabIndicator_setting = (RelativeLayout) LayoutInflater.from(this)
  121.                                 .inflate(R.layout.tab_indicator, tabWidget, false);
  122.                 ImageView ivTab5 = (ImageView) mTabIndicator_setting.getChildAt(0);
  123.                 ivTab5.setImageResource(R.drawable.selector_menu_setting_btu);
  124.                 TextView tvTab5 = (TextView) mTabIndicator_setting.getChildAt(1);
  125.                 tvTab5.setText(R.string.setting);

  126.         }

  127.         /**
  128.          * 以下一系列方法都是判断fragment是否已经创建,防止重复add进FragmentTransaction 

  129.          * FragmentTransaction中提供了show,add,replace,hide等一系列方法,可以根据不同的需求 

  130.          * 使用,这里demo使用了show方法,是因为避免使用replace之后会重新创建fragment,重新加载数据 

  131.          */
  132.         private void attachTabHome() {

  133.                 if (mFristFragment == null) {
  134.                         mFristFragment = new FristFragment();
  135.                         mFt.add(R.id.realtabcontent, mFristFragment, "home");
  136.                 } else {
  137.                         mFt.show(mFristFragment);
  138.                         
  139.                 }
  140.         }

  141.         private void attachTabApp() {

  142.                 if (mSecondFragment == null) {
  143.                         mSecondFragment = new SecondFragment();
  144.                         mFt.add(R.id.realtabcontent, mSecondFragment, "app");
  145.                 } else {
  146.                         mFt.show(mSecondFragment);
  147.                 }
  148.         }

  149.         private void attachTabGame() {

  150.                 if (mThirdFragment == null) {
  151.                         mThirdFragment = new ThirdFragment();
  152.                         mFt.add(R.id.realtabcontent, mThirdFragment, "game");
  153.                 } else {
  154.                         mFt.show(mThirdFragment);
  155.                 }
  156.         }

  157.         private void attachTabTop() {

  158.                 if (mFourthFragment == null) {
  159.                         mFourthFragment = new FourthFragment();
  160.                         mFt.add(R.id.realtabcontent, mFourthFragment, "top");
  161.                 } else {
  162.                         mFt.show(mFourthFragment);
  163.                 }
  164.         }

  165.         private void attachTabSetting() {

  166.                 if (mFifthFragment == null) {
  167.                         mFifthFragment = new FifthFragment();
  168.                         mFt.add(R.id.realtabcontent, mFifthFragment, "setting");
  169.                 } else {
  170.                         mFt.show(mFifthFragment);
  171.                 }
  172.         }

  173.         /**
  174.          * 初始化选项卡 

  175.          */
  176.         private void initTab() {

  177.                 TabHost.TabSpec tSpecHome = mTabHost.newTabSpec("home");
  178.                 tSpecHome.setIndicator(mTabIndicator_home);
  179.                 tSpecHome.setContent(new DummyTabContent(getBaseContext()));
  180.                 mTabHost.addTab(tSpecHome);

  181.                 TabHost.TabSpec tSpecApp = mTabHost.newTabSpec("app");
  182.                 tSpecApp.setIndicator(mTabIndicator_app);
  183.                 tSpecApp.setContent(new DummyTabContent(getBaseContext()));
  184.                 mTabHost.addTab(tSpecApp);

  185.                 TabHost.TabSpec tSpecGame = mTabHost.newTabSpec("game");
  186.                 tSpecGame.setIndicator(mTabIndicator_game);
  187.                 tSpecGame.setContent(new DummyTabContent(getBaseContext()));
  188.                 mTabHost.addTab(tSpecGame);

  189.                 TabHost.TabSpec tSpecTop = mTabHost.newTabSpec("top");
  190.                 tSpecTop.setIndicator(mTabIndicator_top);
  191.                 tSpecTop.setContent(new DummyTabContent(getBaseContext()));
  192.                 mTabHost.addTab(tSpecTop);

  193.                 TabHost.TabSpec tSpecSetting = mTabHost.newTabSpec("setting");
  194.                 tSpecSetting.setIndicator(mTabIndicator_setting);
  195.                 tSpecSetting.setContent(new DummyTabContent(getBaseContext()));
  196.                 mTabHost.addTab(tSpecSetting);

  197.         }

  198. }
复制代码
这里需要提醒几点:第一,这个mainActivity继承与fragmentActivity;
第二:        private FragmentManager mFm = getSupportFragmentManager(); 第一点继承了fragmentActivity后,可通过 getSupportFragmentManager方法拿到FragmentManager, 这个类提供了与Activity内部的Fragment对象进行交互的接口,其他的看代码撒。

本文转载自:http://blog.csdn.net/cjjky/article/details/7096987

c
粉丝 7
博文 31
码字总数 3641
作品 0
深圳
程序员
私信 提问
加载中

评论(5)

蹲角落画圈圈
蹲角落画圈圈
这代码不是完整的吧,来个完整的
蹲角落画圈圈
蹲角落画圈圈
楼主,你这个R.layout.tab_indicator指的是哪个布局啊,真看不懂
c
chengche 博主

引用来自“greenboy1”的评论

楼主 针对每一个下面的标签,上面还有几个标签 有没有想过这里如何实现呢?还是使用tabhost吗?

上边的标签可以用引导切换来实现!
g
greenboy1
楼主 针对每一个下面的标签,上面还有几个标签 有没有想过这里如何实现呢?还是使用tabhost吗?
g
greenboy1
楼主 赞一个 不错
Android UI 特效大全

Android UI特效大全 总体传送门:http://git.oschina.net/bob4j/Android-UI 基本上项目中都有效果图可自行查看 , 并且有些项目中都有README.md 文件,使用前请先阅读以下。 1.弧形(圆形)菜单...

不正经啊不正经
2015/07/31
1K
0
Android开发资源推荐第2季

Android CPU监控想法,思路,核心技术和代码 http://www.csdn123.com/html/blogs/20131026/89017.htm Android App /Task/Stack 总体分析 http://www.eoeandroid.com/thread-161703-1-1.html......

eclipse_xu
2014/08/18
0
0
【更新】Infragistics Ultimate UI for WPF v18.2(四):Xam电子表格特性

下载Infragistics Ultimate UI for WPF最新版本 Infragistics Ultimate UI for WPF是一款提供高速的网格和图表,轻松创建仿Office应用程序的WPF界面框架,从广度和深度两方面使得开发者在缩短...

电池盒
2018/12/21
12
0
GitHub 上受欢迎的 Android UI Library 整理一

抽屉菜单 https://github.com/mikepenz/MaterialDrawer ★7337 - 安卓抽屉效果实现方案 https://github.com/Yalantis/Side-Menu.Android ★3865 - 创意边侧菜单 https://github.com/mxn21/F......

MobService
06/04
42
0
一步一步跟我学开发 - 仿微信应用(一,二,三)

这是一个系列的文档,长期目标是利用DeviceOne开发一些目前使用广泛的优质手机应用,我们会最大化的实现这些应用的每一个功能和细节,不只停留在简单的UI模仿和Demo阶段,而是一个基本可以使...

jonh_felix
2015/11/24
1K
2

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周四乱弹 —— 干啥啥不行,吃饭第一名。

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @巴拉迪维 : 李白到杜甫家吃饭。杜甫洗菜,发现只有青瓜和萝卜,心中愧疚。这时,他看见了邻居家的鸡,杜甫一时心酸,忍不住喃喃自语:我希望...

小小编辑
27分钟前
164
7
Java描述设计模式(08):桥接模式

本文源码:GitHub·点这里 || GitEE·点这里 一、桥接模式简介 1、基础描述 桥梁模式是对象的结构模式。又称为柄体(Handle and Body)模式或接口(Interface)模式。桥梁模式的用意是“将抽象化...

知了一笑
27分钟前
5
0
C++ 函数指针的用法

天王盖地虎626
42分钟前
2
0
白话比原链跨链技术

随着Bystack的主侧链架构的推出,主侧链之间的跨链问题也成为比原链团队的主要攻克工程难题,当前比原链已经推出了两种跨链的机制,各有不同的侧重点,可能因为本身的跨链技术比较晦涩,本篇...

比原链Bytom
50分钟前
2
0
PostgreSQL参数search_path影响及作用

search_path稍微熟悉PG就会用到,用法这里就不必讲,本篇主要讲它在程序里怎样处理。 1、GUC参数定义 这是个 config_string 参数 {{"search_path", PGC_USERSET, CLIENT_CONN_STATEMENT,...

有理想的猪
今天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部