Android Studio精彩案例(三)《模仿微信ViewPage+Fragment實現方式二》

轉載本專欄文章，請註明出處，尊重原創 。文章博客地址：道龍的博客

寫在前面的話：此專欄是博主在工做之餘所寫，每一篇文章儘量寫的思路清晰一些，屬於博主的「精華」部分，不一樣於以往專欄的文章，是直接結合實際開發的。喜歡的朋友能夠關注我，給與更好的思路或者意見，哪怕有一點點幫助到您，這纔是最重要的。

上一篇模仿微信底部tab的方式實現滑動效果，那裏的手段是經過動態添加View的方式，上一篇就提到，實現tab切頁面的手段有不少種，本篇就使用另外一種方式——ViewPage+Fragment；並對對其中的核心功能作一下封裝。

使用過ViewPager小夥伴們都知道，Viewpager加載數據，須要數據源，這裏咱們定義4個Fragment。爲了方便其餘同事使用，能夠給這4個Fragment添加了一個基類，核心代碼以下：

1、底部tab的佈局：

看一下繼承結構：

核心代碼：

<LinearLayout
    android:id="@+id/id_tab_bottom_weixin"
    android:layout_width="0dp"
    android:layout_height="fill_parent"
    android:layout_weight="1"
    android:descendantFocusability="beforeDescendants"
    android:gravity="center"
    android:orientation="vertical" >

    <ImageButton
        android:id="@+id/btn_tab_bottom_weixin"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#0000"
        android:src="@drawable/tab_weixin" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="微信"
        android:textColor="#ffffff" />
</LinearLayout>

連續添加四個按鈕就行了。

注意：

對於佈局中設置控件是否獲取焦點，有如下知識點：

 咱們知道：項目中的listview不單單是簡單的文字，經常須要本身定義listview，本身的Adapter去繼承BaseAdapter，在adapter中按照需求進行編寫。諸如ImageButton，Button，CheckBox等子控件(也能夠說是Button或者Checkable的子類控件)此時這些子控件會將焦點獲取到，因此經常當點擊item時變化的是子控件，item自己的點擊沒有響應。  

     android:descendantFocusability

Defines the relationship between the ViewGroup and its descendants when looking for a View to take focus.

Must be one of the following constant values.

該屬性是當一個爲view獲取焦點時，定義viewGroup和其子控件二者之間的關係。

屬性的值有三種：

        beforeDescendants：viewgroup會優先其子類控件而獲取到焦點

        afterDescendants：viewgroup只有當其子類控件不須要獲取焦點時才獲取焦點

        blocksDescendants：viewgroup會覆蓋子類控件而直接得到焦點

至於用法麼，就是在item 裏的RelativeLayout 加入android:descendantFocusability="beforeDescendants"

2、建立Fragment的基類，實現子類

public abstract class BaseFragment extends Fragment {

    public Context mContext;

    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        //獲取上下文操做

        mContext = getActivity();
        super.onCreate(savedInstanceState);
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View curentView = initView();
        return curentView;
    }

    @Override
    public void onActivityCreated(@Nullable Bundle savedInstanceState) {
        initData();//初始化數據
        super.onActivityCreated(savedInstanceState);
    }

    /**抽象方法，子類調用*/
    public abstract View initView();

    public abstract View initData();
}

代碼太簡單了，增長了一個抽象的initView和一個初始化數據的initData。那麼我們看看一個子類的代碼：

public class AddressFragment extends BaseFragment {

    @Override
    public View initView() {
        return View.inflate(mContext, R.layout.fragment_address,null);
    }

    @Override
    public View initData() {
        return null;
    }
}

其中每一個fragment的佈局都僅僅是顯示一段文本便可。

3、完成核心代碼，完成主活動。

咱們建立viewPager的adapter類：

public class FragmentAdapter extends FragmentPagerAdapter {

    List<BaseFragment> mFragments = new ArrayList<BaseFragment>();

    public FragmentAdapter(FragmentManager fm, List<BaseFragment> fragments) {
        super(fm);
        this.mFragments = fragments;
    }

    @Override
    public Fragment getItem(int position) {
        return mFragments.get(position);
    }

    @Override
    public int getCount() {
        return mFragments.size();
    }
}

而後在活動裏面，添加四個fragment，並給viewpage設置好適配器：

//添加fragment
List<BaseFragment> mFragments = new ArrayList<BaseFragment>();
mFragments.add(new WeChatFragment());
mFragments.add(new FriendFragment());
mFragments.add(new AddressFragment());
mFragments.add(new SettingFragment());

//設置不進行預加載
mViewpages.setOffscreenPageLimit(0);

FragmentAdapter mAdapter = new FragmentAdapter(getSupportFragmentManager(), mFragments);
mViewpages.setAdapter(mAdapter);

剩下的就是根據點擊tab，切換對應的頁面就行了。設置以下：

//給ViewPage添加監聽事件
    mViewpages.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

        }

        @Override
        public void onPageSelected(int position) {
            //選中當前的page頁面的時候，調用
            changeTab(position);
        }

        @Override
        public void onPageScrollStateChanged(int state) {

        }
    });

    /**
     * 給獨步tab的btn加入點擊事件
     */
    mBtnTabBottomWeixin.setOnClickListener(this);
    mBtnTabBottomFriend.setOnClickListener(this);
    mBtnTabBottomContact.setOnClickListener(this);
    mBtnTabBottomSetting.setOnClickListener(this);
}

/**
 * 根據當前位置切換對應的fragment
 */
public void changeTab(int position) {
    //先清空原來的狀態
    mBtnTabBottomContact.setSelected(false);
    mBtnTabBottomFriend.setSelected(false);
    mBtnTabBottomSetting.setSelected(false);
    mBtnTabBottomWeixin.setSelected(false);

    //針對當前position
    switch (position) {
        case 0://第零頁的page
            mBtnTabBottomWeixin.setSelected(true);
            break;
        case 1://第一頁
            mBtnTabBottomFriend.setSelected(true);
            break;
        case 2:
            mBtnTabBottomContact.setSelected(true);
            break;
        case 3:
            mBtnTabBottomSetting.setSelected(true);
            break;
    }

    //根據當前的btn位置，切換fragment頁面
    mViewpages.setCurrentItem(position);
}

@Override
public void onClick(View v) {
    switch (v.getId()) {
        case R.id.btn_tab_bottom_weixin:
            changeTab(0);
            break;
        case R.id.btn_tab_bottom_friend:
            changeTab(1);
            break;
        case R.id.btn_tab_bottom_contact:
            changeTab(2);
            break;
        case R.id.btn_tab_bottom_setting:
            changeTab(3);
            break;
    }
}

最後運行程序看看結果：

看着效果仍是蠻好的~

喜歡個人朋友能夠關注我哈，也能夠直接去下載源碼

點擊可下載地址：源碼地址

也能夠打開微信搜索公衆號  Android程序員開發指南  或者手機掃描下方二維碼 在公衆號閱讀更多Android文章。

微信公衆號圖片：