五月综合缴情婷婷六月,色94色欧美sute亚洲线路二,日韩制服国产精品一区,色噜噜一区二区三区,香港三级午夜理伦三级三

您現(xiàn)在的位置： 365建站網(wǎng) > 365文章 > Android中Tab界面功能使用 Fragment+TabPageIndicator+ViewPager

Android中Tab界面功能使用 Fragment+TabPageIndicator+ViewPager

文章來源：365jz.com     點(diǎn)擊數(shù)：351    更新時(shí)間：2017-11-29 12:10   參與評論

Android現(xiàn)在實(shí)現(xiàn)Tab類型的界面方式越來越多，今天就把常見的實(shí)現(xiàn)方式給大家來個(gè)總結(jié)。目前寫了：

1、傳統(tǒng)的ViewPager實(shí)現(xiàn)

2、FragmentManager+Fragment實(shí)現(xiàn)

3、ViewPager+FragmentPagerAdapter實(shí)現(xiàn)

4、TabPageIndicator+ViewPager+FragmentPagerAdapter

 

1、傳統(tǒng)的ViewPager實(shí)現(xiàn)

主要就是ViewPager+ViewAdapter這個(gè)還是比較常見的，就不多說了

效果圖：



代碼：

package com.example.mainframework02; 
 
import java.util.ArrayList; 
import java.util.List; 
 
import android.app.Activity; 
import android.os.Bundle; 
import android.support.v4.view.PagerAdapter; 
import android.support.v4.view.ViewPager; 
import android.support.v4.view.ViewPager.OnPageChangeListener; 
import android.view.LayoutInflater; 
import android.view.View; 
import android.view.ViewGroup; 
import android.widget.ImageButton; 
import android.widget.ImageView; 
import android.widget.LinearLayout; 
 
public class TraditionalViewPagerAcvitity extends Activity 
{ 
 
    /**
     * ViewPager
     */ 
    private ViewPager mViewPager; 
    /**
     * ViewPager的適配器
     */ 
    private PagerAdapter mAdapter; 
    private List<View> mViews; 
    private LayoutInflater mInflater; 
     
    private int currentIndex; 
 
    /**
     * 底部四個(gè)按鈕
     */ 
    private LinearLayout mTabBtnWeixin; 
    private LinearLayout mTabBtnFrd; 
    private LinearLayout mTabBtnAddress; 
    private LinearLayout mTabBtnSettings; 
 
    @Override 
    protected void onCreate(Bundle savedInstanceState) 
    { 
        super.onCreate(savedInstanceState); 
        setContentView(R.layout.activity_main); 
        mInflater = LayoutInflater.from(this); 
        mViewPager = (ViewPager) findViewById(R.id.id_viewpager); 
         
        /**
         * 初始化View
         */ 
        initView(); 
         
        mViewPager.setAdapter(mAdapter); 
 
        mViewPager.setOnPageChangeListener(new OnPageChangeListener() 
        { 
 
            @Override 
            public void onPageSelected(int position) 
            { 
                resetTabBtn(); 
                switch (position) 
                { 
                case 0: 
                    ((ImageButton) mTabBtnWeixin.findViewById(R.id.btn_tab_bottom_weixin)) 
                            .setImageResource(R.drawable.tab_weixin_pressed); 
                    break; 
                case 1: 
                    ((ImageButton) mTabBtnFrd.findViewById(R.id.btn_tab_bottom_friend)) 
                            .setImageResource(R.drawable.tab_find_frd_pressed); 
                    break; 
                case 2: 
                    ((ImageButton) mTabBtnAddress.findViewById(R.id.btn_tab_bottom_contact)) 
                            .setImageResource(R.drawable.tab_address_pressed); 
                    break; 
                case 3: 
                    ((ImageButton) mTabBtnSettings.findViewById(R.id.btn_tab_bottom_setting)) 
                            .setImageResource(R.drawable.tab_settings_pressed); 
                    break; 
                } 
 
                currentIndex = position; 
            } 
 
            @Override 
            public void onPageScrolled(int arg0, float arg1, int arg2) 
            { 
 
            } 
 
            @Override 
            public void onPageScrollStateChanged(int arg0) 
            { 
            } 
        }); 
 
    } 
 
    protected void resetTabBtn() 
    { 
        ((ImageButton) mTabBtnWeixin.findViewById(R.id.btn_tab_bottom_weixin)) 
                .setImageResource(R.drawable.tab_weixin_normal); 
        ((ImageButton) mTabBtnFrd.findViewById(R.id.btn_tab_bottom_friend)) 
                .setImageResource(R.drawable.tab_find_frd_normal); 
        ((ImageButton) mTabBtnAddress.findViewById(R.id.btn_tab_bottom_contact)) 
                .setImageResource(R.drawable.tab_address_normal); 
        ((ImageButton) mTabBtnSettings.findViewById(R.id.btn_tab_bottom_setting)) 
                .setImageResource(R.drawable.tab_settings_normal); 
    } 
 
    private void initView() 
    { 
 
        mTabBtnWeixin = (LinearLayout) findViewById(R.id.id_tab_bottom_weixin); 
        mTabBtnFrd = (LinearLayout) findViewById(R.id.id_tab_bottom_friend); 
        mTabBtnAddress = (LinearLayout) findViewById(R.id.id_tab_bottom_contact); 
        mTabBtnSettings = (LinearLayout) findViewById(R.id.id_tab_bottom_setting); 
 
        mViews = new ArrayList<View>(); 
        View first = mInflater.inflate(R.layout.main_tab_01, null); 
        View second = mInflater.inflate(R.layout.main_tab_02, null); 
        View third = mInflater.inflate(R.layout.main_tab_03, null); 
        View fourth = mInflater.inflate(R.layout.main_tab_04, null); 
        mViews.add(first); 
        mViews.add(second); 
        mViews.add(third); 
        mViews.add(fourth); 
 
        mAdapter = new PagerAdapter() 
        { 
            @Override 
            public void destroyItem(ViewGroup container, int position, Object object) 
            { 
                container.removeView(mViews.get(position)); 
            } 
 
            @Override 
            public Object instantiateItem(ViewGroup container, int position) 
            { 
                View view = mViews.get(position); 
                container.addView(view); 
                return view; 
            } 
 
            @Override 
            public boolean isViewFromObject(View arg0, Object arg1) 
            { 
                return arg0 == arg1; 
            } 
 
            @Override 
            public int getCount() 
            { 
                return mViews.size(); 
            } 
        }; 
    } 
 
} 

評價(jià)：所有的代碼都集中在一個(gè)Activity中，顯得代碼比較亂。
2、FragmentManager+Fragment實(shí)現(xiàn)
主要利用了Fragment在主內(nèi)容界面對Fragment的add,hide等事務(wù)操作。

效果圖：

代碼：

主Activity

package com.example.mainframework02.fragment; 
 
import android.annotation.SuppressLint; 
import android.app.Activity; 
import android.app.FragmentManager; 
import android.app.FragmentTransaction; 
import android.os.Bundle; 
import android.view.View; 
import android.view.View.OnClickListener; 
import android.widget.ImageButton; 
import android.widget.LinearLayout; 
 
import com.example.mainframework02.R; 
 
public class FragmentMainActivity extends Activity implements OnClickListener 
{ 
    private MainTab02 mTab02; 
    private MainTab01 mTab01; 
    private MainTab03 mTab03; 
    private MainTab04 mTab04; 
 
    /**
     * 底部四個(gè)按鈕
     */ 
    private LinearLayout mTabBtnWeixin; 
    private LinearLayout mTabBtnFrd; 
    private LinearLayout mTabBtnAddress; 
    private LinearLayout mTabBtnSettings; 
    /**
     * 用于對Fragment進(jìn)行管理
     */ 
    private FragmentManager fragmentManager; 
 
    @SuppressLint("NewApi") 
    @Override 
    protected void onCreate(Bundle savedInstanceState) 
    { 
        super.onCreate(savedInstanceState); 
        setContentView(R.layout.fragment_main); 
        initViews(); 
        fragmentManager = getFragmentManager(); 
        setTabSelection(0); 
    } 
 
     
 
    private void initViews() 
    { 
 
        mTabBtnWeixin = (LinearLayout) findViewById(R.id.id_tab_bottom_weixin); 
        mTabBtnFrd = (LinearLayout) findViewById(R.id.id_tab_bottom_friend); 
        mTabBtnAddress = (LinearLayout) findViewById(R.id.id_tab_bottom_contact); 
        mTabBtnSettings = (LinearLayout) findViewById(R.id.id_tab_bottom_setting); 
 
        mTabBtnWeixin.setOnClickListener(this); 
        mTabBtnFrd.setOnClickListener(this); 
        mTabBtnAddress.setOnClickListener(this); 
        mTabBtnSettings.setOnClickListener(this); 
    } 
 
    @Override 
    public void onClick(View v) 
    { 
        switch (v.getId()) 
        { 
        case R.id.id_tab_bottom_weixin: 
            setTabSelection(0); 
            break; 
        case R.id.id_tab_bottom_friend: 
            setTabSelection(1); 
            break; 
        case R.id.id_tab_bottom_contact: 
            setTabSelection(2); 
            break; 
        case R.id.id_tab_bottom_setting: 
            setTabSelection(3); 
            break; 
 
        default: 
            break; 
        } 
    } 
 
    /**
     * 根據(jù)傳入的index參數(shù)來設(shè)置選中的tab頁。
     * 
     */ 
    @SuppressLint("NewApi") 
    private void setTabSelection(int index) 
    { 
        // 重置按鈕 
        resetBtn(); 
        // 開啟一個(gè)Fragment事務(wù) 
        FragmentTransaction transaction = fragmentManager.beginTransaction(); 
        // 先隱藏掉所有的Fragment，以防止有多個(gè)Fragment顯示在界面上的情況 
        hideFragments(transaction); 
        switch (index) 
        { 
        case 0: 
            // 當(dāng)點(diǎn)擊了消息tab時(shí)，改變控件的圖片和文字顏色 
            ((ImageButton) mTabBtnWeixin.findViewById(R.id.btn_tab_bottom_weixin)) 
                    .setImageResource(R.drawable.tab_weixin_pressed); 
            if (mTab01 == null) 
            { 
                // 如果MessageFragment為空，則創(chuàng)建一個(gè)并添加到界面上 
                mTab01 = new MainTab01(); 
                transaction.add(R.id.id_content, mTab01); 
            } else 
            { 
                // 如果MessageFragment不為空，則直接將它顯示出來 
                transaction.show(mTab01); 
            } 
            break; 
        case 1: 
            // 當(dāng)點(diǎn)擊了消息tab時(shí)，改變控件的圖片和文字顏色 
            ((ImageButton) mTabBtnFrd.findViewById(R.id.btn_tab_bottom_friend)) 
                    .setImageResource(R.drawable.tab_find_frd_pressed); 
            if (mTab02 == null) 
            { 
                // 如果MessageFragment為空，則創(chuàng)建一個(gè)并添加到界面上 
                mTab02 = new MainTab02(); 
                transaction.add(R.id.id_content, mTab02); 
            } else 
            { 
                // 如果MessageFragment不為空，則直接將它顯示出來 
                transaction.show(mTab02); 
            } 
            break; 
        case 2: 
            // 當(dāng)點(diǎn)擊了動(dòng)態(tài)tab時(shí)，改變控件的圖片和文字顏色 
            ((ImageButton) mTabBtnAddress.findViewById(R.id.btn_tab_bottom_contact)) 
                    .setImageResource(R.drawable.tab_address_pressed); 
            if (mTab03 == null) 
            { 
                // 如果NewsFragment為空，則創(chuàng)建一個(gè)并添加到界面上 
                mTab03 = new MainTab03(); 
                transaction.add(R.id.id_content, mTab03); 
            } else 
            { 
                // 如果NewsFragment不為空，則直接將它顯示出來 
                transaction.show(mTab03); 
            } 
            break; 
        case 3: 
            // 當(dāng)點(diǎn)擊了設(shè)置tab時(shí)，改變控件的圖片和文字顏色 
            ((ImageButton) mTabBtnSettings.findViewById(R.id.btn_tab_bottom_setting)) 
                    .setImageResource(R.drawable.tab_settings_pressed); 
            if (mTab04 == null) 
            { 
                // 如果SettingFragment為空，則創(chuàng)建一個(gè)并添加到界面上 
                mTab04 = new MainTab04(); 
                transaction.add(R.id.id_content, mTab04); 
            } else 
            { 
                // 如果SettingFragment不為空，則直接將它顯示出來 
                transaction.show(mTab04); 
            } 
            break; 
        } 
        transaction.commit(); 
    } 
 
    /**
     * 清除掉所有的選中狀態(tài)。
     */ 
    private void resetBtn() 
    { 
        ((ImageButton) mTabBtnWeixin.findViewById(R.id.btn_tab_bottom_weixin)) 
                .setImageResource(R.drawable.tab_weixin_normal); 
        ((ImageButton) mTabBtnFrd.findViewById(R.id.btn_tab_bottom_friend)) 
                .setImageResource(R.drawable.tab_find_frd_normal); 
        ((ImageButton) mTabBtnAddress.findViewById(R.id.btn_tab_bottom_contact)) 
                .setImageResource(R.drawable.tab_address_normal); 
        ((ImageButton) mTabBtnSettings.findViewById(R.id.btn_tab_bottom_setting)) 
                .setImageResource(R.drawable.tab_settings_normal); 
    } 
 
    /**
     * 將所有的Fragment都置為隱藏狀態(tài)。
     * 
     * @param transaction
     *            用于對Fragment執(zhí)行操作的事務(wù)
     */ 
    @SuppressLint("NewApi") 
    private void hideFragments(FragmentTransaction transaction) 
    { 
        if (mTab01 != null) 
        { 
            transaction.hide(mTab01); 
        } 
        if (mTab02 != null) 
        { 
            transaction.hide(mTab02); 
        } 
        if (mTab03 != null) 
        { 
            transaction.hide(mTab03); 
        } 
        if (mTab04 != null) 
        { 
            transaction.hide(mTab04); 
        } 
         
    } 
 
} 


各個(gè)TabFragment，一共四個(gè)TabFragment，下面貼出兩個(gè)，基本都一樣。

package com.example.mainframework02.fragment; 
 
import android.annotation.SuppressLint; 
import android.app.Fragment; 
import android.os.Bundle; 
import android.view.LayoutInflater; 
import android.view.View; 
import android.view.ViewGroup; 
 
@SuppressLint("NewApi") 
public class MainTab01 extends Fragment 
{ 
 
    @Override 
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) 
    { 
        return inflater.inflate(com.example.mainframework02.R.layout.main_tab_01, container, false); 
 
    } 
 
} 

 

package com.example.mainframework02.fragment; 
 
import android.annotation.SuppressLint; 
import android.app.Fragment; 
import android.os.Bundle; 
import android.view.LayoutInflater; 
import android.view.View; 
import android.view.ViewGroup; 
 
import com.example.mainframework02.R; 
 
@SuppressLint("NewApi") 
public class MainTab02 extends Fragment 
{ 
 
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) 
    { 
        return inflater.inflate(R.layout.main_tab_02, container, false); 
 
    } 
 
} 

評價(jià)：每個(gè)Fragment中的控件的處理，都是獨(dú)立到各自的類中，相對來說主Activity簡化了不少，可惜沒有左右滑動(dòng)的效果了。
 

3、ViewPager+Fragment實(shí)現(xiàn)

主要通過ViewPager和FragmentPagerAdapter一起來實(shí)現(xiàn)。

效果圖：

代碼：

主Activity

package com.example.mainframework03; 
 
import java.util.ArrayList; 
import java.util.List; 
 
import android.os.Bundle; 
import android.support.v4.app.Fragment; 
import android.support.v4.app.FragmentActivity; 
import android.support.v4.app.FragmentPagerAdapter; 
import android.support.v4.view.ViewPager; 
import android.support.v4.view.ViewPager.OnPageChangeListener; 
import android.widget.ImageButton; 
import android.widget.LinearLayout; 
 
public class MainActivity extends FragmentActivity 
{ 
 
    private ViewPager mViewPager; 
    private FragmentPagerAdapter mAdapter; 
    private List<Fragment> mFragments = new ArrayList<Fragment>(); 
     
     
    /**
     * 底部四個(gè)按鈕
     */ 
    private LinearLayout mTabBtnWeixin; 
    private LinearLayout mTabBtnFrd; 
    private LinearLayout mTabBtnAddress; 
    private LinearLayout mTabBtnSettings; 
 
 
    @Override 
    protected void onCreate(Bundle savedInstanceState) 
    { 
        super.onCreate(savedInstanceState); 
        setContentView(R.layout.activity_main); 
        mViewPager = (ViewPager) findViewById(R.id.id_viewpager); 
 
         
        initView(); 
         
         
 
        mAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) 
        { 
 
            @Override 
            public int getCount() 
            { 
                return mFragments.size(); 
            } 
 
            @Override 
            public Fragment getItem(int arg0) 
            { 
                return mFragments.get(arg0); 
            } 
        }; 
         
        mViewPager.setAdapter(mAdapter); 
         
         
        mViewPager.setOnPageChangeListener(new OnPageChangeListener() 
        { 
 
            private int currentIndex; 
 
            @Override 
            public void onPageSelected(int position) 
            { 
                resetTabBtn(); 
                switch (position) 
                { 
                case 0: 
                    ((ImageButton) mTabBtnWeixin.findViewById(R.id.btn_tab_bottom_weixin)) 
                            .setImageResource(R.drawable.tab_weixin_pressed); 
                    break; 
                case 1: 
                    ((ImageButton) mTabBtnFrd.findViewById(R.id.btn_tab_bottom_friend)) 
                            .setImageResource(R.drawable.tab_find_frd_pressed); 
                    break; 
                case 2: 
                    ((ImageButton) mTabBtnAddress.findViewById(R.id.btn_tab_bottom_contact)) 
                            .setImageResource(R.drawable.tab_address_pressed); 
                    break; 
                case 3: 
                    ((ImageButton) mTabBtnSettings.findViewById(R.id.btn_tab_bottom_setting)) 
                            .setImageResource(R.drawable.tab_settings_pressed); 
                    break; 
                } 
 
                currentIndex = position; 
            } 
 
            @Override 
            public void onPageScrolled(int arg0, float arg1, int arg2) 
            { 
 
            } 
 
            @Override 
            public void onPageScrollStateChanged(int arg0) 
            { 
            } 
        }); 
 
    } 
     
    protected void resetTabBtn() 
    { 
        ((ImageButton) mTabBtnWeixin.findViewById(R.id.btn_tab_bottom_weixin)) 
                .setImageResource(R.drawable.tab_weixin_normal); 
        ((ImageButton) mTabBtnFrd.findViewById(R.id.btn_tab_bottom_friend)) 
                .setImageResource(R.drawable.tab_find_frd_normal); 
        ((ImageButton) mTabBtnAddress.findViewById(R.id.btn_tab_bottom_contact)) 
                .setImageResource(R.drawable.tab_address_normal); 
        ((ImageButton) mTabBtnSettings.findViewById(R.id.btn_tab_bottom_setting)) 
                .setImageResource(R.drawable.tab_settings_normal); 
    } 
 
    private void initView() 
    { 
 
        mTabBtnWeixin = (LinearLayout) findViewById(R.id.id_tab_bottom_weixin); 
        mTabBtnFrd = (LinearLayout) findViewById(R.id.id_tab_bottom_friend); 
        mTabBtnAddress = (LinearLayout) findViewById(R.id.id_tab_bottom_contact); 
        mTabBtnSettings = (LinearLayout) findViewById(R.id.id_tab_bottom_setting); 
 
        MainTab01 tab01 = new MainTab01(); 
        MainTab02 tab02 = new MainTab02(); 
        MainTab03 tab03 = new MainTab03(); 
        MainTab04 tab04 = new MainTab04(); 
        mFragments.add(tab01); 
        mFragments.add(tab02); 
        mFragments.add(tab03); 
        mFragments.add(tab04); 
    } 
} 


還有4個(gè)TabFragment，下面貼一個(gè)，四個(gè)基本一樣

package com.example.mainframework03; 
 
import android.os.Bundle; 
import android.support.v4.app.Fragment; 
import android.view.LayoutInflater; 
import android.view.View; 
import android.view.ViewGroup; 
 
public class MainTab01 extends Fragment 
{ 
 
    @Override 
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) 
    { 
        return  inflater.inflate(R.layout.main_tab_01, container, false); 
     
    } 
 
} 

評價(jià)：實(shí)現(xiàn)效果和第一種效果一模一樣，每個(gè)Fragment獨(dú)自處理自己內(nèi)部的邏輯，代碼整潔很多，并且支持左右滑動(dòng)。感覺是第一種和第二種的結(jié)合版本。

4、TabPageIndicator+ViewPager+FragmentPagerAdapter
實(shí)現(xiàn)方式和3是一致的，但是使用了TabPageIndicator作為tab的指示器，效果還是不錯(cuò)的，這個(gè)之前寫過，就不再貼代碼了。
 

效果圖：

參考：Android 使用Fragment，ViewPagerIndicator 制作app主要框架

 

好了，就總結(jié)了這么多，肯定還有很多別的實(shí)現(xiàn)方式，大家可以留言，有時(shí)間會繼續(xù)完善這篇總結(jié)的。

 

 

 

第一種和第二種的源碼

第三種方式的源碼

 

如對本文有疑問，請?zhí)峤坏浇涣髡搲?，廣大熱心網(wǎng)友會為你解答??！ 點(diǎn)擊進(jìn)入論壇

發(fā)表評論 (351人查看，0條評論)
請自覺遵守互聯(lián)網(wǎng)相關(guān)的政策法規(guī)，嚴(yán)禁發(fā)布色情、暴力、反動(dòng)的言論。
昵稱：
最新評論
------分隔線----------------------------

其它欄目

· 建站教程
· 365學(xué)習(xí)

業(yè)務(wù)咨詢

· 技術(shù)支持
· 服務(wù)時(shí)間：9:00-18:00
365建站網(wǎng)二維碼

Powered by 365建站網(wǎng) RSS地圖 HTML地圖

copyright © 2013-2024 版權(quán)所有 鄂ICP備17013400號