乐学成语实现之二显示主界面
来源:互联网 发布:淘宝内容推广 编辑:程序博客网 时间:2024/04/30 14:53
在第二阶段中,我们准备完成主界面的设计,这一阶段需要编写的代码量比较大,你一定要跟上脚步。
主界面的设计采用选项卡组件,在res的drawable_hdpi目录下拷入需要的图片素材,在res/layout目录中新建activity_main.xml布局,代码如下所示:
<?xml version="1.0" encoding="utf-8"?><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" android:layout_alignParentLeft="true" android:layout_alignParentTop="true"> <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"> </TabWidget> <FrameLayout android:id="@android:id/tabcontent" android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:id="@+id/tab1" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> </LinearLayout> <LinearLayout android:id="@+id/tab2" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> </LinearLayout> <LinearLayout android:id="@+id/tab3" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> </LinearLayout> </FrameLayout> </LinearLayout> </TabHost></RelativeLayout>布局文件中的内容比较简单,主要是拖了一个TabHost控件到界面上,然后在res的values目录的string.xml文件中定义所需的字符串。代码如下所示:
<?xml version="1.0" encoding="utf-8"?><resources> <string name="app_name">HappyIdiom</string> <string name="action_settings">Settings</string> <string name="hello_world">Hello world!</string><string name="title_activity_main">MainActivity</string><string name="title_study">学习</string><string name="title_search">搜搜</string><string name="title_game">游戏</string><string name="title_save">收藏</string><string name="title_help">帮助</string></resources>接下来也是最关键的一步,我们需要编写活动了。在activity包下新建MainActivity继承自Activity,代码如下所示:
public class MainActivity extends TabActivity {private TabHost tabHost;@Overrideprotected void onCreate(Bundle savedInstanceState) {// TODO Auto-generated method stubsuper.onCreate(savedInstanceState);requestWindowFeature(Window.FEATURE_NO_TITLE);// 取消标题栏setContentView(R.layout.activity_main);tabHost = getTabHost();addTab("study", R.string.title_study, R.drawable.search, R.id.tab1);addTab("search", R.string.title_search, R.drawable.search, R.id.tab2);addTab("game", R.string.title_game, R.drawable.game, R.id.tab3);addTab("save", R.string.title_save, R.drawable.save, R.id.tab1);addTab("help", R.string.title_help, R.drawable.search, R.id.tab2);}private void addTab(String tag, int title_introduction, int title_icon,int content) {tabHost.addTab(tabHost.newTabSpec(tag).setIndicator(getString(title_introduction),getResources().getDrawable(title_icon)).setContent(content));}public boolean onCreateOptionsMenu(Menu menu){getMenuInflater().inflate(R.menu.main, menu);return true;}}在这个类的onCreate()方法里,通过调用getTabHost()方法来获取整个TabHost组件,然后调用了抽取出来的自定义的方法addTab()添加了五个选项卡。方法的四个参数分别为每个选项卡的tag,指示器上显示的标题,指示器上显示的图片,选项卡对应的内容。
注意取消标题栏的方法,一定要位于setContentView()方法之前。
是不是很简单呢?现在第二阶段的开发工作也完成得差不多了,我们可以运行一下看看效果。不过在运行之前还有一件事没有做,当然就是配置AndroidManifest.xml文件了。修改AndroidManifest.xml中的代码,如下所示:
<activity android:name="cn.edu.bztc.happyidiom.activity.MainActivity" android:label="@string/title_activity_main"> <intent-filter> <action android:name="android.intent.action.MAIN"/> <category android:name="android.intent.category.LAUNCHER"/> </intent-filter> </activity>主要是注册了MainActivity,通过加入<intent-filter>将其设置为首先启动的类。
现在可以运行一下程序了,结果如图所示:
可以看出,上图的运行结果指示器上只显示出了文字,但是图片未显示出来,究竟原因是什么呢?其实就是我们项目是运行在Android4.2上的,只有文字标题显示,图标是不显示的。如果将文字标题设置为空字符串,则此时图标可显示。如果都想显示怎么办呢?可以通过修改主题来实现。如设置activity的theme为:android:theme="@android:style/Theme.NoTitleBar"如果想让指示器显示在底部,只需要对activity_main.xml文件稍加修改,代码如下:
<?xml version="1.0" encoding="utf-8"?><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" android:theme="@android:style/Theme.NoTitleBar" tools:context=".MainActivity"> <TabHost android:id="@android:id/tabhost" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_alignParentLeft="true" android:layout_alignParentTop="true"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <FrameLayout android:id="@android:id/tabcontent" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_weight="1"> <LinearLayout android:id="@+id/tab1" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> </LinearLayout> <LinearLayout android:id="@+id/tab2" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> </LinearLayout> <LinearLayout android:id="@+id/tab3" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> </LinearLayout> </FrameLayout> <TabWidget android:id="@android:id/tabs" android:layout_width="match_parent" android:layout_height="wrap_content"> </TabWidget> </LinearLayout> </TabHost></RelativeLayout>结果如图所示:
0 0
- 乐学成语实现之二显示主界面
- Android乐学成语之界面实现
- 3.乐学成语----------显示主界面
- 乐学成语——显示主界面
- 个人完成案列之乐学成语(显示主界面)
- 个人完成案例之乐学成语(显示学习列表和连接主界面)
- 乐学成语实现之四:显示所有动物类成语的列表
- 乐学成语实现之五:显示每条成语的详细信息
- 乐学成语二
- 乐学成语(成语分类列表显示)
- 乐学成语实现之三:显示学习列表(注意ListView的细节优化)
- 综合项目之乐学成语(显示所有动物类成语的列表)
- 乐学成语之splash
- 乐学成语之小游戏
- andriod之乐学成语
- 乐学成语之数据库
- Android之乐学成语
- 乐学成语3-界面美化
- 新博客 lizhaowei.me
- 获取<img src />正则表达式
- php 打印小票模板
- Phinecos(洞庭散人) 专注于开源技术的研究与应用 TinyXML:一个优秀的C++ XML解析器
- 常见的PKMS问题分析
- 乐学成语实现之二显示主界面
- poj 1149 PIGS(最大流)
- Dom4j中String 、Document 、文件类型的xml之间的相互转换
- java-对象的理解-对象在内存的存储
- 关于mybatis的@Param注解和参数
- android:scaleType值的意义
- 关于编码盒直播的经验总结
- 35. Search Insert Position #Medium
- 机房收费—组合查询