Android教程網 >> Android技術 >> 關於Android編程 >> 開發者頭條（三）：實現tab與viewpager的聯動

開發者頭條（三）：實現tab與viewpager的聯動

編輯：關於Android編程

知識點：

第一：實現首頁的3個tab，讓tab與viewpager實現聯動
第二：輪播圖的無限次自動循環滾動。

`先看效果圖：`

`項目結構圖：`

`我們在捋順一下邏輯：`

每一個側拉頁的item對應一個fragment，用這個fragment替換內容頁。其中第一個item對應的是首頁，首頁中又有3個tab，分別對應3個fragment（精選 + 訂閱 + 發現：如果效果一樣的話，可以只寫一個fragment）。精選：上面是輪播圖，下面是listview。

`tab與viewpager的聯動是怎麼實現的？`

工具類PageSlidingTab實現的（還有colors.xml等），調用方法 setViewPager(viewPager)實現聯動。下載地址：http://download.csdn.net/detail/ss1168805219/9628964

類中還有一些參數，可以設置下劃線 + 分割線 + 底部線 的顏色 高度等。

`tab只有3個，沒有充滿屏幕寬度，怎麼實現充滿寬度？`

調用PageSlidingTab的方法：setShouldExpand(true),實現充滿屏幕寬度。

`輪播圖的實現`

見圖：<喎?/kf/ware/vc/" target="_blank" class="keylink">vcD4NCjxoMyBpZD0="布局的實現">布局的實現

LinearLayout包裹RelativeLayout,裡面有ViewPager + TextView + TextView + LinearLayout(指示器)

我把最外層的LiearLayout去掉，TextView與LinearLayout就是水平排列了，再設置above或below無效，不知道為什麼？

`代碼的實現`

輪播圖先改變viewpager（即圖片），再在viewpager的頁面切換監聽中實現2個textview內容的而轉變，和指示器指向下一個。

`改變viewpager：`

通過handler發送消息。災handleMessage（）中設置viewpager的當期頁是當前頁+1，並再次發送消息，這樣形成死循環。記得要移除消息，放置內存洩漏.

handler.sendEmptyMessageDelayed(0, 2000);

private Handler handler = new Handler(){

    public void handleMessage(android.os.Message msg) {
        if (msg.what == 0) {
            viewPager.setCurrentItem((viewPager.getCurrentItem() + 1) % imagesList.size());
            handler.sendEmptyMessageDelayed(0, 2000);
        }
    }
};

//移除消息，放置內存洩漏
@Override
public void onDestroyView() {
    super.onDestroyView();
    handler.removeMessages(0);
}

`怎麼改變描述文字 + 指示器的？`

在viewpager的監聽事件中，設置下一頁的數據。遍歷指示器集合，當viewpager的position與集合的i相同的時候，就顯示藍色，否則是灰色。

@Override
public void onPageSelected(int position) {
    tv_desc.setText(titleList.get(position));
    tv_ratio.setText(1 + position + "/" + titleList.size());
    for (int i = 0; i < dotsList.size(); i++) {
        if (i == position) {
            dotsList.get(i).setBackgroundResource(
                    R.drawable.page_indicator_focused);
        } else {
            dotsList.get(i).setBackgroundResource(
                    R.drawable.page_indicator_unfocused);
        }
    }
}

`指示器`

跟導航頁是一樣的，記得設置marginLeft

private void initDots() {
    ll_dots.removeAllViews();
    dotsList.clear();
    LayoutParams params = new LinearLayout.LayoutParams(
            LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
    params.setMargins(10, 0, 0, 0);
    for (int i = 0; i < titleList.size(); i++) {
        ImageView iv = new ImageView(context);
        if (i == 0) {
            iv.setBackgroundResource(R.drawable.page_indicator_focused);
        } else {
            iv.setBackgroundResource(R.drawable.page_indicator_unfocused);
        }

        ll_dots.addView(iv, params);
        dotsList.add(iv);
    }
}

`完成的代碼是`

`首頁：HomeFragment.java`

package com.cqc.developerheadlinecqc.fragment;

import java.util.ArrayList;
import java.util.List;

import com.cqc.developerheadlinecqc.R;
import com.cqc.developerheadlinecqc.adapter.HomeFragmentPagerAdapter;
import com.cqc.developerheadlinecqc.fragment.home.Frag1;
import com.cqc.developerheadlinecqc.fragment.home.Frag2;
import com.cqc.developerheadlinecqc.fragment.home.Frag3;
import com.cqc.developerheadlinecqc.view.PagerSlidingTab;

import android.content.Context;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class HomeFragment extends Fragment {

    private Context context;
    private View view;
    private PagerSlidingTab pagerTab;
    private ViewPager viewPager;
    private List list = new ArrayList();
    private HomeFragmentPagerAdapter adapter;
    private Frag1 frag1;
    private Frag2 frag2;
    private Frag3 frag3;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        context = getActivity();
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        view = inflater.inflate(R.layout.frag_home, container,false);
        pagerTab = (PagerSlidingTab) view.findViewById(R.id.pagerTab_home);
        viewPager = (ViewPager) view.findViewById(R.id.viewPager_home);

        initData();
        adapter = new HomeFragmentPagerAdapter(getActivity().getSupportFragmentManager(), list);
        viewPager.setAdapter(adapter);
        viewPager.setCurrentItem(0);
        pagerTab.setShouldExpand(true);//若tab的寬度沒有充滿屏幕的寬度，則設置true
        pagerTab.setViewPager(viewPager);
        return view;
    }

    private void initData() {
        list.clear();
        frag1 = new Frag1();
        frag2 = new Frag2();
        frag3 = new Frag3();

        list.add(frag1);
        list.add(frag2);
        list.add(frag3);
    }
}

`精選：Frag1.java`

package com.cqc.developerheadlinecqc.fragment.home;

import java.util.ArrayList;
import java.util.List;

import com.cqc.developerheadlinecqc.R;
import com.cqc.developerheadlinecqc.adapter.Frag1Adapter;
import com.cqc.developerheadlinecqc.adapter.GuildPagerAdapter;
import com.cqc.developerheadlinecqc.bean.Frag1Bean;

import android.content.Context;
import android.os.Bundle;
import android.os.Handler;
import android.support.v4.app.Fragment;
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.ImageView;
import android.widget.LinearLayout;
import android.widget.LinearLayout.LayoutParams;
import android.widget.ListView;
import android.widget.TextView;

/**
 * @author cqc 精選
 */
public class Frag1 extends Fragment {

    private ListView listView;
    public List list = new ArrayList();
    public List titleList = new ArrayList();
    public List dotsList = new ArrayList();
    public List imagesList = new ArrayList();
    private Context context;
    private View headView;
    private ViewPager viewPager;
    private TextView tv_desc;
    private TextView tv_ratio;
    private LinearLayout ll_dots;
    private Frag1Adapter adapter;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        context = getActivity();
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.frag1, container, false);
        listView = (ListView) view.findViewById(R.id.listView_frag1);
        initData();
        adapter = new Frag1Adapter(getActivity(), list);
        listView.setAdapter(adapter);

        initHeadView();
        handler.sendEmptyMessageDelayed(0, 2000);
        return view;
    }

    private Handler handler = new Handler(){

        public void handleMessage(android.os.Message msg) {
            if (msg.what == 0) {
                viewPager.setCurrentItem((viewPager.getCurrentItem() + 1) % imagesList.size());
                handler.sendEmptyMessageDelayed(0, 2000);
            }
        }
    };
    private void initHeadView() {
        initTitleList();
        initImagesList();

        headView = View.inflate(context, R.layout.layout_banner, null);
        viewPager = (ViewPager) headView.findViewById(R.id.viewpager_banner);
        tv_desc = (TextView) headView.findViewById(R.id.tv_desc);
        tv_ratio = (TextView) headView.findViewById(R.id.tv_ratio);
        ll_dots = (LinearLayout) headView.findViewById(R.id.ll_dots);
        initDots();

        viewPager.setCurrentItem(0);
        GuildPagerAdapter pagerAdapter = new GuildPagerAdapter(context,
                imagesList);
        viewPager.setAdapter(pagerAdapter);
        viewPager.setOnPageChangeListener(new OnPageChangeListener() {

            @Override
            public void onPageSelected(int position) {
                tv_desc.setText(titleList.get(position));
                tv_ratio.setText(1 + position + "/" + titleList.size());
                for (int i = 0; i < dotsList.size(); i++) {
                    if (i == position) {
                        dotsList.get(i).setBackgroundResource(
                                R.drawable.page_indicator_focused);
                    } else {
                        dotsList.get(i).setBackgroundResource(
                                R.drawable.page_indicator_unfocused);
                    }
                }
            }

            @Override
            public void onPageScrolled(int position, float positionOffset,
                    int positionOffsetPixels) {
            }

            @Override
            public void onPageScrollStateChanged(int state) {
            }
        });

        listView.addHeaderView(headView);
    }

    private void initDots() {
        ll_dots.removeAllViews();
        dotsList.clear();
        LayoutParams params = new LinearLayout.LayoutParams(
                LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
        params.setMargins(10, 0, 0, 0);
        for (int i = 0; i < titleList.size(); i++) {
            ImageView iv = new ImageView(context);
            if (i == 0) {
                iv.setBackgroundResource(R.drawable.page_indicator_focused);
            } else {
                iv.setBackgroundResource(R.drawable.page_indicator_unfocused);
            }

            ll_dots.addView(iv, params);
            dotsList.add(iv);
        }
    }

    private void initImagesList() {
        imagesList.clear();

        ImageView iv1 = new ImageView(context);
        ImageView iv2 = new ImageView(context);
        ImageView iv3 = new ImageView(context);

        iv1.setBackgroundResource(R.drawable.icon_selected_carousel_one);
        iv2.setBackgroundResource(R.drawable.icon_selected_carousel_two);
        iv3.setBackgroundResource(R.drawable.icon_selected_carousel_three);

        imagesList.add(iv1);
        imagesList.add(iv2);
        imagesList.add(iv3);
    }

    private void initTitleList() {
        titleList.clear();
        titleList.add("這是第一張圖的標題");
        titleList.add("這是第二張圖的標題");
        titleList.add("這是第三張圖的標題");
    }

    private void initData() {
        list.clear();
        for (int i = 0; i < 10; i++) {
            Frag1Bean bean = new Frag1Bean();
            bean.id = i;
            bean.title = "Android開發666";
            bean.likeNumbers = i;
            bean.commentsNumbers = i;
            list.add(bean);
        }
    }

    //移除消息，放置內存洩漏
    @Override
    public void onDestroyView() {
        super.onDestroyView();
        handler.removeMessages(0);
    }

}

上一頁:Android中使用ImageLoader加載圖片
下一頁:[讀書筆記]Android LayoutInflater.inflate方法參數詳解（源碼分析）

關於Android編程

Android編程入門 Android技術基礎 Android資訊關於Android編程 Android開發 Android開發環境 Android開發實例

相關文章