Android之Actionbar頂部標籤的使用

標籤：android   actionbar   actionbartabs   

    今天寫了個範例程式碼，就是使用Actionbar類實現頂部標籤切換功能。如果所示。

  650) this.width=650;" src="http://s3.51cto.com/wyfs02/M00/43/79/wKioL1PbOnvTIWiZAACPg7me6ZI290.jpg" title="QQ圖片20140801144803.jpg" alt="wKioL1PbOnvTIWiZAACPg7me6ZI290.jpg" />

使用最新的adt工具，建立項目的時候都會帶一個android-support-v7-appcompat的類庫項目，

這個libproject中有我們要用的ActionBar，可以適配2.1的Android系統。

廢話不多說，直接上代碼。

1、修改activity_main.xml，增加ViewPager。

<android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:id="@+id/pager"    android:layout_width="match_parent"    android:layout_height="match_parent"/>

2、修改MainActivity中的代碼，讓其繼承ActionBarActivity

public class MainActivity extends ActionBarActivity implements TabListener {

3、建立TabsPagerAdapter繼承FragmentPagerAdapter

package com.example.tabswithswie.adatper;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentManager;import android.support.v4.app.FragmentPagerAdapter;import com.example.tabswithswie.fragments.AppFragment;import com.example.tabswithswie.fragments.GamesFragment;import com.example.tabswithswie.fragments.MoviesFragment;public class TabsPagerAdapter extends FragmentPagerAdapter {    public TabsPagerAdapter(FragmentManager fm) {        super(fm);        // TODO Auto-generated constructor stub    }    @Override    public Fragment getItem(int index) {        switch (index) {        case 0:            return new AppFragment();        case 1:            return new GamesFragment();        case 2:            return new MoviesFragment();             }        return null;    }    @Override    public int getCount() {        // TODO Auto-generated method stub        return 3;    }}

4、建立AppFragment繼承android.support.v4.app.Fragment

package com.example.tabswithswie.fragments;import com.example.tabswithswie.R;import android.os.Bundle;import android.support.v4.app.Fragment;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;public class AppFragment extends Fragment {        @Override    public View onCreateView(LayoutInflater inflater, ViewGroup container,            Bundle savedInstanceState) {        // TODO Auto-generated method stub        return inflater.inflate(R.layout.fragment_app, container, false);    }}

5、建立布局檔案fragment_app.xml

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:background="#43ff00ff" >    <TextView        android:id="@+id/textView1"        android:layout_width="wrap_content"        android:layout_height="wrap_content"         android:layout_centerInParent="true"        android:text="這個是應用介面"        android:textAppearance="?android:attr/textAppearanceLarge" /></RelativeLayout>

6、建立GamesFragment繼承android.support.v4.app.Fragment

package com.example.tabswithswie.fragments;import com.example.tabswithswie.R;import android.os.Bundle;import android.support.v4.app.Fragment;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;public class GamesFragment extends Fragment {        @Override    public View onCreateView(LayoutInflater inflater, ViewGroup container,            Bundle savedInstanceState) {        // TODO Auto-generated method stub        return inflater.inflate(R.layout.fragment_game, container, false);    }}

7、建立布局檔案fragment_game.xml

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"     android:background="#9445f353">    <TextView        android:id="@+id/textView1"        android:layout_width="wrap_content"        android:layout_height="wrap_content"         android:layout_centerInParent="true"        android:text="遊戲"        android:textAppearance="?android:attr/textAppearanceLarge" /></RelativeLayout>

8、建立MoviesFragment繼承android.support.v4.app.Fragment

package com.example.tabswithswie.fragments;import com.example.tabswithswie.R;import android.os.Bundle;import android.support.v4.app.Fragment;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;public class MoviesFragment extends Fragment {        @Override    public View onCreateView(LayoutInflater inflater, ViewGroup container,            Bundle savedInstanceState) {        // TODO Auto-generated method stub        return inflater.inflate(R.layout.fragment_movie, container, false);    }}

9、建立布局檔案fragment_movie.xml

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:background="#34fef443" >    <TextView        android:id="@+id/textView1"        android:layout_width="wrap_content"        android:layout_height="wrap_content"         android:layout_centerInParent="true"        android:text="視頻"        android:textAppearance="?android:attr/textAppearanceLarge" /></RelativeLayout>

10、回到 MainActivity類，添加Tabs到ActionBar中，並處理點擊滑動事件。完整代碼

package com.example.tabswithswie;import android.os.Bundle;import android.support.v4.app.FragmentTransaction;import android.support.v4.view.ViewPager;import android.support.v4.view.ViewPager.OnPageChangeListener;import android.support.v7.app.ActionBar;import android.support.v7.app.ActionBar.Tab;import android.support.v7.app.ActionBar.TabListener;import android.support.v7.app.ActionBarActivity;import com.example.tabswithswie.adatper.TabsPagerAdapter;public class MainActivity extends ActionBarActivity implements TabListener {    private ViewPager viewPager;    private ActionBar actionBar;     private TabsPagerAdapter mTabsPagerAdapter;        private String[] tabs ={"應用","遊戲","視頻"};    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        //擷取viewpager        viewPager = (ViewPager) findViewById(R.id.pager);        //執行個體化pageradapter        mTabsPagerAdapter = new TabsPagerAdapter(getSupportFragmentManager());        viewPager.setAdapter(mTabsPagerAdapter);        //擷取適配的actionbar        actionBar = getSupportActionBar();        //設定home按鈕不可點擊        actionBar.setHomeButtonEnabled(false);        //設定頂部導航的模式  -tabs        actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);        //添加標籤        for(String tab:tabs)        {            actionBar.addTab(actionBar.newTab().setText(tab).setTabListener(this));         }        //設定ViewPager切換時候的監聽事件        viewPager.setOnPageChangeListener(new OnPageChangeListener() {                        @Override            public void onPageSelected(int position) {                //頁面滑動，頂部標籤跟著改變                 actionBar.setSelectedNavigationItem(position);            }                        @Override            public void onPageScrolled(int arg0, float arg1, int arg2) {                // TODO Auto-generated method stub                            }                        @Override            public void onPageScrollStateChanged(int arg0) {                // TODO Auto-generated method stub                            }        });    }         @Override    public void onTabReselected(Tab arg0, FragmentTransaction arg1) {        // TODO Auto-generated method stub            }    @Override    public void onTabSelected(Tab tab, FragmentTransaction fragmentTransaction) {        //tab選中，切換viewpager        viewPager.setCurrentItem(tab.getPosition());    }    @Override    public void onTabUnselected(Tab arg0, FragmentTransaction arg1) {        // TODO Auto-generated method stub            }     }

代碼就是這樣的，搞定收工了。範例程式碼下載

本文出自 “CocosDev” 部落格，請務必保留此出處http://xuzhiwei.blog.51cto.com/978424/1533803