簡單的方法實現仿微信的Tab界面

IrmaDemarco 8年前發布 | 24K 次閱讀 安卓開發 Android開發 移動開發

來自: http://www.cnblogs.com/wzben/p/5171313.html

在網上看了比較多的關于Tab的教程,發現都很雜亂。比較多的用法是用TitlePagerTabStrip和ViewPaper。不過TitlePagerTabStrip有個很大的缺陷,Tab里面的內容剛進去是沒有的,要滑一次才能加載出來。而且滑動的時候,Tab里面的內容位置不是固定的,滑倒最后會出現一片空白,非常不美觀。雖然有其他的補救方法,但是非常的麻煩,所以我就按照自己的方法實現了一個。功能不錯而且非常簡單。

直接點擊或者是滑動界面,都可以轉到相應的頁面。

效果圖:

原理是用了三個按鈕和ViewPaper,拋棄了TitlePagerTabStrip。

ViewPaper通俗的說,它是一個裝頁面的容器。如上圖我有三個不同的界面,是因為我把三個view加了進去。然后再把這個viewPaper加到主界面的布局中。

這樣,主界面上就有三個按鈕,按鈕下方是一個viewPaper,這個viewPaper里面有三個view,我每滑一下或點擊按鈕就會跳到相應的view。

就是說我們看到的,其實都是主界面,按鈕是一直在那的。我們只是不斷的轉換viewPaper這個容器里面的視圖而已。

主界面的布局代碼:

<RelativeLayout xmlns:android="

  //這里加三個按鈕   

 //這里是viewPaper 一個容器 <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="wrap_content" android:layout_height="wrap_content" >

</RelativeLayout></pre>

怎么實現,按相應的按鈕跳轉到viewPaper中相應的視圖呢?很簡單,只要為按鈕設置監聽,然后調用viewPaper的setCurrentItem()這個函數就行。

對于相應的頁面,我們的按鈕也應該有相應的變化,如上圖我們的按鈕中的英文變成了√。這個只要在viewPaper的監聽器中重載onPageSelected()這個函數就行,

每個頁面被選中,都會調用這個函數。在這個函數里判斷當前的頁面是哪一個,然后再對按鈕做出相應的改變即可。

onCreate的代碼

 //設置viewPaper
    ViewPager pager = null;
    ArrayList<View> viewContainter = new ArrayList<View>();

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_add);

    //實例化ViewPaper
    pager = (ViewPager) this.findViewById(R.id.viewpager3);



    //設置按鈕跳轉到相應的viewPaper頁面

    按鈕1.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {

            //跳到第一個頁面
            pager.setCurrentItem(0);

        }
    });

    按鈕2.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {

            //第二個頁面
            pager.setCurrentItem(1);

        }
    });

    按鈕3.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {

            //第三個頁面
            pager.setCurrentItem(2);

        }
    });




    //為viewPaper設置內容
    //view是我們放進viewPaper里面的東西,要為它設置好布局,再放進去
    View view1 = LayoutInflater.from(this).inflate(R.layout.自己的布局文件1, null);
    View view2 = LayoutInflater.from(this).inflate(R.layout.自己的布局文件2, null);
    View view3 = LayoutInflater.from(this).inflate(R.layout.自己的布局文件3, null);

    //這是個ArrayList,加進去了3個view
    viewContainter.add(view1);
    viewContainter.add(view2);
    viewContainter.add(view3);


    //設置適配器 這里的代碼復制即可
    pager.setAdapter(new PagerAdapter() {


        //viewpager中的組件數量
        @Override
        public int getCount() {
            return viewContainter.size();
        }

        //滑動切換的時候銷毀當前的組件

        @Override
        public void destroyItem(ViewGroup container, int position,
                                Object object) {
            ((ViewPager) container).removeView(viewContainter.get(position));
        }

        //每次滑動的時候生成的組件
        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            ((ViewPager) container).addView(viewContainter.get(position));
            return viewContainter.get(position);
        }

        @Override
        public boolean isViewFromObject(View arg0, Object arg1) {
            return arg0 == arg1;
        }

        @Override
        public int getItemPosition(Object object) {
            return super.getItemPosition(object);
        }


    });

    //頁面變化時的監聽 改變按鈕
    pager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageScrolled(int i, float v, int i1) {

        }

        @Override
        public void onPageSelected(int i) {

            switch (i) {

                //如果是第一個頁面
                case 0:
                    按鈕1.setText("√");
                    按鈕2.setText("TAB2");
                    按鈕3.setText("TAB3");

                    break;

                //如果是第二個頁面
                case 1:
                    按鈕1.setText("TAB1");
                    按鈕2.setText("√");
                    按鈕3.setText("TAB3");
                    break;

                //如果是第三個頁面
                case 1:
                    按鈕1.setText("TAB1");
                    按鈕2.setText("TAB2");
                    按鈕3.setText("√");
                    break;



            }

        }

        @Override
        public void onPageScrollStateChanged(int i) {

        }
    });




}</pre> 

代碼不是直接復制可用的,因為有些地方怕雜亂,改成了中文,布局文件中的注釋也是不正確的。不過大家只要把代碼過一遍,應該沒什么問題。

</div>

 本文由用戶 IrmaDemarco 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!