Android典型界面設計(6)——ActionBar Tab+ViewPager+Fagment實現滑動導航

1、問題描述

　　在Android典型界面設計一文中，實現典型滑動導航界面，其實使用ActionBar 也能夠輕鬆實現這一效果，甚至也可實現相似Android典型界面設計（3）的雙導航效果。可見ActionBar仍是比較強大的，關鍵要深刻進去、靈活的運用，下面咱們就使用ActionBar實現如圖所示的效果：

2、本例特色

一、  兼容低版本

二、 使用ActionBar 分體設計（split）

三、 Tab使用自定義View

四、 結合ViewPager實現滑動導航

3、代碼講解:

　　一、在項目中加入v7兼容包

　　要向下兼容須要在項目中加入v7兼容包的android-support-v7-appcompat，並建立MainActivity時，繼承 ActionBarActivity

public class MainActivity extends ActionBarActivity implements TabListener,
OnPageChangeListener{
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            initActionBar();
            initViewPager();
        }
        。。。
}

在onCreeate方法中調用initActionBar和intViewPager，分別實現初始化ActionBar和初始化ViewPager。

　　二、initActionBar()代碼：初始化ActionBar

private void initActionBar(){
        actionBar=super.getSupportActionBar();
        actionBar.setDisplayShowHomeEnabled(true);
        actionBar.setDisplayHomeAsUpEnabled(true);
        actionBar.setIcon(R.drawable.sun);
        actionBar.setTitle(" 二手機");
        //設置導航模式爲Tabs方式
        actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
        //建立並配置Tab
        createTab(R.layout.nav, R.drawable.icon_home_weixiu_bg, "熱點設備");
        createTab(R.layout.nav, R.drawable.icon_home_zzj_bg, "挖掘機");
        createTab(R.layout.nav, R.drawable.icon_home_sharepro_bg, "裝載機");
    }

createTab方法：

private void createTab(int layout,int imgId,String title){
        View view=LayoutInflater.from(this).inflate(layout, null);
        ((TextView)view.findViewById(R.id.tvTitle)).setText(title);
        ((ImageView)view.findViewById(R.id.ivNav)).setImageResource(imgId);
        Tab tab=actionBar.newTab().setCustomView(view)//自定義View
                .setTabListener(this);
        actionBar.addTab(tab);
    }

nav.xml ：tab的佈局文件，實現ICON在Title上方的效果

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" android:padding="2dp" >
    <ImageView
        android:id="@+id/ivNav"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:scaleType="centerInside"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"/>
    <TextView
        android:id="@+id/tvTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_below="@+id/ivNav"
        android:textColor="#fff"/>
</RelativeLayout>

三、initViewPager方法

private String[] titles={"熱點設備","二手挖掘機","二手裝載機"};
private void initViewPager(){
        mViewPager = (ViewPager)findViewById(R.id.vpList);
        fragList=new ArrayList<Fragment>();
        Bundle bundle=null;
        Fragment frag=null;
        for(int i=0;i<titles.length;i++){
            frag=new MachineFragment();
            bundle=new Bundle();
            bundle.putString("title",titles[i]);
            frag.setArguments(bundle);
            fragList.add(frag);
        }
        adapter=new MachinePagerAdapter(super.getSupportFragmentManager(), fragList);
        mViewPager.setAdapter(adapter);
        mViewPager.setOnPageChangeListener(this);
    }

MachinePagerAdapter適配器：

public class MachinePagerAdapter extends FragmentPagerAdapter {
    private List<Fragment> fragmentList;
    public MachinePagerAdapter(FragmentManager fm,List<Fragment> list) {
        super(fm);
        this.fragmentList=list;
    }
    public Fragment getItem(int arg0) {
        return fragmentList.get(arg0);
    }
    public int getCount() {
        return fragmentList.size();
    }
    @Override  
    public int getItemPosition(Object object) {  
       return POSITION_NONE;  //沒有找到child要求從新加載
    }  
}

MachineFragment：可根據具體狀況進行設計，這裏僅顯示一個文本框

public class MachineFragment extends Fragment {
    private String title;
    public void setArguments(Bundle bundle) {
            title=bundle.getString("title");//接受傳入的參數
    }
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                Bundle savedInstanceState) {
            TextView textView = new TextView(getActivity());
            textView.setText(title);textView.setTextSize(20);
            textView.setTextColor(Color.RED);textView.setGravity(Gravity.CENTER);
            LinearLayout layout = new LinearLayout(getActivity());
            LayoutParams params = new LayoutParams
(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
            layout.setBackgroundColor(Color.WHITE);
            layout.addView(textView, params);
            return layout;
        }
}

四、實現偵聽

implements  OnPageChangeListener當View滑動時切換Tab
    public void onPageScrollStateChanged(int arg0) {  }
    public void onPageScrolled(int arg0, float arg1, int arg2) { }
    public void onPageSelected(int idx) {
        actionBar.selectTab(actionBar.getTabAt(idx));
    }
implements  TabListener當單擊tab時切換ViewPager
    public void onPageScrollStateChanged(int arg0) {}
        public void onPageScrolled(int arg0, float arg1, int arg2) {}
    public void onPageSelected(int idx) {
        actionBar.selectTab(actionBar.getTabAt(idx));
    }

五、ActionBar Menu

　　main.xml菜單配置，使用xmlns:app="http://schemas.android.com/apk/res-auto"兼容低版本，而且使用app:showAsAction不然showAsAction將失效，即使設置爲always菜單項仍是出如今Overflow中

<menu xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item  android:id="@+id/action_share"
        android:orderInCategory="100"
        app:showAsAction="always"
        android:title="分享"
        android:icon="@drawable/share_ico"
        />
    <item  android:id="@+id/action_common"
        android:orderInCategory="100"
        app:showAsAction="always"
        android:title="評論"
        android:icon="@drawable/com_btn"
        />
</menu>

產生選項菜單

public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

響應單擊菜單

public boolean onOptionsItemSelected(MenuItem item) {
        switch(item.getItemId()){
        case R.id.action_share:
            Toast.makeText(this, "點擊了分享", Toast.LENGTH_LONG).show();
            break;
        case R.id.action_common:
            Toast.makeText(this, "點擊了評論", Toast.LENGTH_LONG).show();
            break;    
        }    
        return super.onOptionsItemSelected(item);
    }

6、實現ActionBar 的分體設計

讓菜單選項在底部排列顯示

　　在AndroidManifest.xml中給MainActivity添加android:uiOptions="splitActionBarWhenNarrow"屬性便可

4、ActionBar 樣式

　　若是兼容低版本Activity必須使用Theme.AppCompat主題樣式，可在這個主題基礎上定義ActionBar的樣式

<style name="Theme.MyActionBar" parent="@style/Theme.AppCompat.Light">
…
</style>

Actionbar樣式比較多並且要考慮兼容性，比較麻煩，推薦經過Android Action Bar Style Generator可輕鬆生成

網址：http://jgilfelt.github.io/android-actionbarstylegenerator/

 

　　想要了解更多內容的小夥伴，能夠點擊查看源碼，親自運行測試。

　　疑問諮詢或技術交流，請加入官方QQ羣： （452379712）

 

做者： 傑瑞教育
出處： http://www.cnblogs.com/jerehedu/ 
本文版權歸煙臺傑瑞教育科技有限公司和博客園共有，歡迎轉載，但未經做者贊成必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接，不然保留追究法律責任的權利。