樂學成語（2）

1. 顯示主界面
   res/layout目錄下新建activity_main.xml佈局，代碼如下：

<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"  
    android:background="@drawable/bg_animal" >  

    <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/tab2"  
                    android:layout_width="match_parent"  
                    android:layout_height="match_parent"  
                    android:orientation="vertical" >  
                </LinearLayout>  

                <LinearLayout  
                    android:id="@+id/tab3"  
                    android:layout_width="match_parent"  
                    android:layout_height="match_parent"  
                    android:orientation="vertical" >  
                </LinearLayout>  
            </FrameLayout>  

            <TabWidget  
                android:id="@android:id/tabs"  
                android:layout_width="match_parent"  
                android:layout_height="wrap_content" >  
            </TabWidget>  
        </LinearLayout>  
    </TabHost>  

</RelativeLayout>   

效果圖：

在activity包下建立MainActivity繼承Activity,代碼如下：

public class MainActivity extends TabActivity {
private TabHost tabHost;
@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);//取消標題欄
        setContentView(R.layout.activity_main);
        tabHost=getTabHost();
        addTab("study",R.string.title_study,R.drawable.search,StudyActivity.class);
        addTab("search",R.string.title_search,R.drawable.search,StudyActivity.class);
        addTab("game",R.string.title_game,R.drawable.game,StudyActivity.class);
        addTab("save",R.string.title_save,R.drawable.save,StudyActivity.class);
        addTab("help",R.string.title_help,R.drawable.search,StudyActivity.class);
    }
private void addTab(String tag,int title_introduction, int title_icon,Class ActivityClass){
    tabHost.addTab(tabHost.newTabSpec(tag)
            .setIndicator(getString(title_introduction), 
            getResources().getDrawable(title_icon)).setContent(new Intent(this,ActivityClass)));
}

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

}

TabHost介紹
TabHost組件可以在界面中存放多個選項卡, 很多軟件都使用了改組件進行設計;
1. TabHost常用組件
TabWidget : 該組件就是TabHost標籤頁中上部 或者 下部的按鈕, 可以點擊按鈕切換選項卡;
TabSpec : 代表了選項卡界面, 添加一個TabSpec即可添加到TabHost中;
– 創建選項卡 : newTabSpec(String tag), 創建一個選項卡;
– 添加選項卡 : addTab(tabSpec);

出現的錯誤：
我一開始是在AndroidManifest.xml中使用
android:theme=”@android:style/Theme.NoTitleBar”
之後仔細查了查意思是：背景主題的沒有標題欄的樣式，默認如果沒有設置的話，顯示黑背景
解決這樣的問題：
那就換成android:theme=”@android:style/Theme.Translucent.NoTitleBar
詳細介紹請看http://blog.csdn.net/zhupengqq/article/details/51472682
效果圖：

1. 顯示學習列表
   定義一個實體類，作爲ListView適配器的適配類型，entity包下新建類Category,代碼如下：

public class Category {
  private String name;//類別名稱
  private int imageid;//類別對應的圖片
  public Category(String name, int imageid) {
    super();
    this.name = name;
    this.imageid = imageid;
     }
   public String getName() {
    return name;
   }
    public void setName(String name) {
        this.name = name;
    }
    public int getImageid() {
        return imageid;
    }
    public void setImageid(int imageid) {
        this.imageid = imageid;
    } 
    }

在layout下新建activity_study.xml文件 ，代碼如下：

<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:background="@drawable/bg_ling"
    tools:context=".StudyActivity" >

    <ListView
        android:id="@+id/lvCategories"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layoutAnimation="@anim/anim_layout_listview"
        android:listSelector="#00000000"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true" >
    </ListView>

</RelativeLayout>

接着需要爲ListView的子項指定一個自定義的佈局，category_item.xml,代碼如下：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="10dp"
    android:orientation="horizontal" >

    <ImageView
        android:id="@+id/category_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/category_animal" />
    <TextView 
        android:id="@+id/category_name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="vb"
        android:textAppearance="?android:attr/textAppearanceLarge"
        />
</LinearLayout>

接下來需要在應用的包下創建一個自定義適配器，新建CategoryAdapterLei 類，代碼如下：

public class CategoryAdapter extends ArrayAdapter<Category>{
    private int resourceid;
    public CategoryAdapter(Context context, int resource,
            List<Category> objects) {
        super(context, resource, objects);
        // TODO Auto-generated constructor stub
        resourceid=resource;
    }
    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        View view;
        ViewHolder viewHolder;
        Category category=getItem(position);//獲取當前項的Category的當前示例
        if(convertView==null){
        view=LayoutInflater.from(getContext()).inflate(resourceid, null);
        viewHolder=new ViewHolder();
        viewHolder.categoryImage=(ImageView) view.findViewById(R.id.category_image);
        viewHolder.categoryName=(TextView) view.findViewById(R.id.category_name);
        view.setTag(viewHolder);
        }
        else{
            view=convertView;
            viewHolder=(ViewHolder)view.getTag();//重新獲得viewHolder
        }
        viewHolder.categoryImage.setImageResource(category.getImageid());
        viewHolder.categoryName.setText(category.getName());
        return view;
    }
    class ViewHolder{
        ImageView categoryImage;
        TextView categoryName;
    }

}

下面在activity包下新建StudyActivity，代碼如下：

public class StudyActivity extends Activity {
    private List<Category> categoryList;
    private String [] category_names;
    private int [] category_images;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_study);
        initCategories();//初始化類別
        CategoryAdapter adapter=new CategoryAdapter(this,R.layout.category_item,categoryList );
        ListView listView=(ListView) findViewById(R.id.lvCategories);
        listView.setAdapter(adapter);
        listView.setOnItemClickListener(new OnItemClickListener() {

            @Override
            public void onItemClick(AdapterView<?> adapterView, View view, int position,
                    long id) {
                switch (position) { 
                case 0:
                    Intent intent=new Intent(StudyActivity.this,StudyAnimalActivity.class);
                    startActivity(intent);
                    break;

                default:
                    break;
                }
            }
        });
    }

    private void initCategories() {
        categoryList=new ArrayList<Category>();
        Resources resources=getResources();
        category_names=resources.getStringArray(R.array.category);
        category_images=new int[]{R.drawable.category_animal,
                R.drawable.category_nature,R.drawable.category_human,
                R.drawable.category_season,R.drawable.category_number,
                R.drawable.category_fable,R.drawable.category_other};
        for(int i=0;i<category_names.length;i++){
            categoryList.add(new Category(category_names[i],category_images[i]));
        }
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.study, menu);
        return true;
    }

}

頁面的載入還有些僵硬，下面添加動態效果：
anim_listview.xml:

<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:fromAlpha="0.0"
    android:toAlpha="1.0"
    >
</alpha>

anim_layout_listview.xml:

<?xml version="1.0" encoding="utf-8"?>
<layoutAnimation xmlns:android="http://schemas.android.com/apk/res/android"
    android:animation="@anim/anim_listview"
    android:animationOrder="reverse"
    android:delay="30%"
    >
</layoutAnimation>

整體效果圖：