一步一步写News App(一)

一、 新建一个安卓工程，安卓版本全部选2.3.3

二、第一步，添加一个tabhost控件

      在MainActivity中声明TabHost tabHost; 然后新建一个private void initViews()函数，在函数中新建tabHost = getTabHost();提示出错，没有getTabHost()方法，将MainActivity extends Activity 修改成MainActivity extends TabActivity 就可以了。

      然后在initViews()中添加每个标签页的内容。代码如下：

private void initViews(){
        tabHost = getTabHost();
        tabHost.addTab(tabHost.newTabSpec("news").setIndicator("News").setContent(new Intent(this, TabNewsActivity.class)));
        tabHost.addTab(tabHost.newTabSpec("mood").setIndicator("Mood").setContent(new Intent(this, TabMoodActivity.class)));
        tabHost.addTab(tabHost.newTabSpec("user").setIndicator("User").setContent(new Intent(this, TabUserActivity.class)));
        tabHost.addTab(tabHost.newTabSpec("find").setIndicator("Find").setContent(new Intent(this, TabFindActivity.class)));
        tabHost.addTab(tabHost.newTabSpec("setting").setIndicator("Setting").setContent(new Intent(this, TabSettingActivity.class)));
    }

    Intent用来实现Activity之间的跳转，new Intent(this, XXActivity.class)表示从当前（this）Activity跳转到XXActivity.class。

    这样写完会提示后面5个参数页面不存在，然后就开始先把这5个Activity的框架写好，分别新建5个类，名称跟上面设计的一样。如图:

 

每个Activity文件先弄个最简单的，继承自Activity类，像这样:

package com.yhy.news;

import android.app.Activity;
import android.os.Bundle;

public class TabFindActivity extends Activity{

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);
        setContentView(R.layout.find);
    }
}

注意就是一要extends Activity， 二要重写onCreate函数，三要在onCreate函数里加上setContentView(R.layout.find)。其他的分别setContentView如下：

R.layout.mood, R.layout.setting, R.layout.user, R.layout.news。当然这些layout文件都需要我们自己新建，内容可以就放一下LinearLayout，以后再扩展，

新建好后的layout如下图:

MainActivity的布局文件activity_main.xml文件中填入以下内容:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical">

    <TabHost
        android:id="@android:id/tabhost"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" >
        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:orientation="vertical" >
            
            <FrameLayout
                android:id="@android:id/tabcontent"
                android:layout_width="fill_parent"
                android:layout_height="0.0dip"
                android:layout_weight="1.0" >
            </FrameLayout>
        
            <TabWidget
                android:id="@android:id/tabs"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:visibility="gone" />
            
                <RelativeLayout
                    android:id="@+id/layout_bottom"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content" >
    
                    <RadioGroup
                        android:id="@+id/radiogroup"
                        android:layout_width="fill_parent"
                        android:layout_height="wrap_content"
                        android:layout_gravity="bottom"
                        android:background="@drawable/bottombg"
                        android:gravity="center_vertical"
                        android:orientation="horizontal" >
    
                        <RadioButton
                            android:id="@+id/radio_news"
                            android:layout_height="wrap_content"
                            android:layout_width="wrap_content"
                            android:background="@drawable/tab_selector_news"
                            android:button="@null"
                            android:layout_weight="1"
                            android:checked="true" />
    
                        <RadioButton
                            android:id="@+id/radio_mood"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:background="@drawable/tab_selector_mood"
                            android:layout_weight="1"
                            android:button="@null" />
    
                        <RadioButton
                            android:id="@+id/radio_user"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:background="@drawable/tab_selector_user"
                            android:layout_weight="1"
                            android:button="@null" />
    
                        <RadioButton
                            android:id="@+id/radio_find"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:background="@drawable/tab_selector_find"
                            android:layout_weight="1"
                            android:button="@null" />
    
                        <RadioButton
                            android:id="@+id/radio_setting"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:background="@drawable/tab_selector_setting"
                            android:layout_weight="1"
                            android:button="@null" />
                </RadioGroup>
            </RelativeLayout>
        </LinearLayout>
    </TabHost>

</RelativeLayout>

该布局文件是一个标准的tabhost的布局文件，tabwidget标签中定义下方的几个选项卡，用5个radiobutton定义，每个按钮的背景设置为不同的xml文件，每个xml文件里定义着选中和未选中时的图片文件, 如 tab_selector_setting.xml：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/current_setting_tab" android:state_checked="true"/>
    <item android:drawable="@drawable/back_setting_tab" android:state_checked="false"/>

</selector>

其中， current_setting_tab图片如下:

back_setting_tab图片如下:

其他图片资源:

都是png格式的。这样就可以在选中和未选中时显示不同的样子。

资源文件结构如下:

(drawable文件夹是自己新建的)。

    准备好以上内容后，运行程序，会报错，看logcat中会有错误提示，说manifest中没有注册Activity。

    于是在AndroidManifest.xml文件中将上面添加的5个Activity注册一下，在与MainActivity平行的地方添加如下内容:

<activity
            android:name="com.yhy.news.TabNewsActivity"
            android:screenOrientation="portrait"
            android:theme="@android:style/Theme.NoTitleBar" >
        </activity>
        
        <activity
            android:name="com.yhy.news.TabFindActivity"
            android:screenOrientation="portrait"
            android:theme="@android:style/Theme.NoTitleBar" >
        </activity>
        
        <activity
            android:name="com.yhy.news.TabMoodActivity"
            android:screenOrientation="portrait"
            android:theme="@android:style/Theme.NoTitleBar" >
        </activity>
        
        <activity
            android:name="com.yhy.news.TabSettingActivity"
            android:screenOrientation="portrait"
            android:theme="@android:style/Theme.NoTitleBar" >
        </activity>
        
        <activity
            android:name="com.yhy.news.TabUserActivity"
            android:screenOrientation="portrait"
            android:theme="@android:style/Theme.NoTitleBar" >
        </activity>

    其中，name里面的是Activity完整包路径名。

    经过上面的准备后终于可以运行起来了！效果如图: