APP主界面Tab的4种实现

涉及知识点:

1.在LinearLayout中,如果一个控件在中间,要想让该控件占据剩余的空间,使用match_parent会导致它底部的控件被挤出去,所以要使用layout_weight=1 height=0dp.
2.eclipse 快捷键 自动修正 Ctrl+1 (可以用于强转,导入)
3.为LinearLayout设置点击事件,如果该布局含有ImageButton,点击事件会被ImageButton处理,若想让LinearLayout处理,为ImageButton设置clickable=“false”
4.依赖第三方lib时可以会找不到Activity之类的错误,是因为项目本身有个support.v4,然后第三方lib里也有一个support.v4,只需要项目的删除。
5.使用第三方lib,把lib放置项目同一根目录下
6.使用Fragment+ViewPager+FragmentPagerAdapter时,要重写 onSaveInstanceState(Bundle outState) {},往里面任意put一个值如outState.putString(“test”,”test”),不然点击HOME键时会异常奔溃


1、ViewPager(可以点击切换,可以滑动切换)

效果:

这里写图片描述

结构
这里写图片描述


main.xml

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
     xmlns:android="http://schemas.android.com/apk/res/android">

    <include layout="@layout/top_bar"/>

    <android.support.v4.view.ViewPager
        android:id="@+id/id_viewpager"
        android:layout_weight="1"
        android:layout_height="0dp"
        android:layout_width="match_parent">

    </android.support.v4.view.ViewPager>

    <include layout="@layout/bottom_bar"/>

</LinearLayout>

top_bar.xml

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="40dp"
     xmlns:android="http://schemas.android.com/apk/res/android"
     android:background="@drawable/title_bar" >

    <TextView 
        android:layout_centerInParent="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="APP"
        android:textColor="#fff"
        android:textSize="20sp"
        />
</RelativeLayout>

bottom_bar.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="55dp"
    android:background="#333"
    android:gravity="center" >

    <LinearLayout
        android:id="@+id/id_tab01"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical" >

        <ImageButton
            android:id="@+id/id_tab01_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@null"
            android:src="@drawable/tab_weixin_pressed"
            android:clickable="false" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="01"
            android:textColor="#fff" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/id_tab02"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical" >

        <ImageButton
            android:id="@+id/id_tab02_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@null"
            android:src="@drawable/tab_address_normal"
            android:clickable="false" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="02"
            android:textColor="#fff" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/id_tab03"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical" >

        <ImageButton
            android:id="@+id/id_tab03_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@null"
            android:src="@drawable/tab_find_frd_normal"
            android:clickable="false" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="03"
            android:textColor="#fff" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/id_tab04"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical" >

        <ImageButton
            android:id="@+id/id_tab04_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@null"
            android:src="@drawable/tab_settings_normal"
            android:clickable="false" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="04"
            android:textColor="#fff" />
    </LinearLayout>

</LinearLayout>

tab01,tab02,tab03,tab04.xml

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
     xmlns:android="http://schemas.android.com/apk/res/android"
     >
    <TextView 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Tab01"
        android:textSize="40sp"
        android:layout_centerInParent="true"/>


</RelativeLayout>

MainActivity

package com.example.day0304;

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.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.ImageButton;
import android.widget.LinearLayout;

public class MainActivity extends Activity implements OnClickListener{

    private LinearLayout mTab01;
    private LinearLayout mTab02;
    private LinearLayout mTab03;
    private LinearLayout mTab04;
    private ImageButton mTabButton01;
    private ImageButton mTabButton02;
    private ImageButton mTabButton03;
    private ImageButton mTabButton04;

    private ViewPager mViewPager;
    private List<View> mViews = new ArrayList<View>();
    private PagerAdapter mAdapter;


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

        initView();
        initEvent();
    }

    private void initView() {
        mViewPager = (ViewPager) findViewById(R.id.id_viewpager);
        mTab01 = (LinearLayout) findViewById(R.id.id_tab01);
        mTab02 = (LinearLayout) findViewById(R.id.id_tab02);
        mTab03 = (LinearLayout) findViewById(R.id.id_tab03);
        mTab04 = (LinearLayout) findViewById(R.id.id_tab04);
        mTabButton01 = (ImageButton) findViewById(R.id.id_tab01_img);
        mTabButton02 = (ImageButton) findViewById(R.id.id_tab02_img);
        mTabButton03 = (ImageButton) findViewById(R.id.id_tab03_img);
        mTabButton04 = (ImageButton) findViewById(R.id.id_tab04_img);

        View tab01 = LayoutInflater.from(this).inflate(R.layout.tab01, null);
        View tab02 = LayoutInflater.from(this).inflate(R.layout.tab02, null);
        View tab03 = LayoutInflater.from(this).inflate(R.layout.tab03, null);
        View tab04 = LayoutInflater.from(this).inflate(R.layout.tab04, null);
        mViews.add(tab01);
        mViews.add(tab02);
        mViews.add(tab03);
        mViews.add(tab04);

        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();
            }
        };

        mViewPager.setAdapter(mAdapter);
    }


    private void initEvent() {
        mTab01.setOnClickListener(this);
        mTab02.setOnClickListener(this);
        mTab03.setOnClickListener(this);
        mTab04.setOnClickListener(this);

        mViewPager.setOnPageChangeListener(new OnPageChangeListener() {

            @Override
            public void onPageSelected(int position) {
                resetTabImg();
                switch (position) {
                case 0:
                    mTabButton01.setImageResource(R.drawable.tab_weixin_pressed);
                    break;
                case 1:
                    mTabButton02.setImageResource(R.drawable.tab_address_pressed);
                    break;
                case 2:
                    mTabButton03.setImageResource(R.drawable.tab_find_frd_pressed);
                    break;
                case 3:
                    mTabButton04.setImageResource(R.drawable.tab_settings_pressed);
                    break;
                }
            }

            @Override
            public void onPageScrolled(int arg0, float arg1, int arg2) {

            }

            @Override
            public void onPageScrollStateChanged(int arg0) {

            }
        });
    }

    @Override
    public void onClick(View v) {
        resetTabImg();

        switch (v.getId()) {
        case R.id.id_tab01:
            mTabButton01.setImageResource(R.drawable.tab_weixin_pressed);
            mViewPager.setCurrentItem(0);
            break;
        case R.id.id_tab02:
            mTabButton02.setImageResource(R.drawable.tab_address_pressed);
            mViewPager.setCurrentItem(1);
            break;
        case R.id.id_tab03:
            mTabButton03.setImageResource(R.drawable.tab_find_frd_pressed);
            mViewPager.setCurrentItem(2);
            break;
        case R.id.id_tab04:
            mTabButton04.setImageResource(R.drawable.tab_settings_pressed);
            mViewPager.setCurrentItem(3);
            break;

        }

    }

    /**
     * 初始化图标
     */
    private void resetTabImg() {
        mTabButton01.setImageResource(R.drawable.tab_weixin_normal);
        mTabButton02.setImageResource(R.drawable.tab_address_normal);
        mTabButton03.setImageResource(R.drawable.tab_find_frd_normal);
        mTabButton04.setImageResource(R.drawable.tab_settings_normal);
    }

}

2.Fragment(可以点击切换)

优点:让fragment管理自己的控件和逻辑,减少MainActivity代码量


效果:
这里写图片描述


结构:
这里写图片描述


mian.xml

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
     xmlns:android="http://schemas.android.com/apk/res/android">

    <include layout="@layout/top_bar"/>

    <FrameLayout 
        android:id="@+id/id_content"
        android:layout_weight="1"
        android:layout_height="0dp"
        android:layout_width="match_parent"></FrameLayout>

    <include layout="@layout/bottom_bar"/>

</LinearLayout>

Tab01Fragment,Tab02Fragment,Tab03Fragment,Tab04Fragment

package com.example.day0304.fragment;

import com.example.day0304.R;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class Tab01Fragment extends Fragment{
    @Override
    @Nullable
    public View onCreateView(LayoutInflater inflater,
            @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.tab01, container, false);
    }
//如果不重写这个方法,Fragment和ViewPagerAdapter搭配时,当点击Home键时会异常崩溃!
    @Override
    public void onSaveInstanceState(Bundle outState) {
        //任意put一个值
        outState.putString("test","test");
    }   

}

MainActivity

package com.example.day0304;


import com.example.day0304.fragment.Tab01Fragment;
import com.example.day0304.fragment.Tab02Fragment;
import com.example.day0304.fragment.Tab03Fragment;
import com.example.day0304.fragment.Tab04Fragment;

import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.ImageButton;
import android.widget.LinearLayout;

public class MainActivity extends FragmentActivity implements OnClickListener{

    private LinearLayout mTab01;
    private LinearLayout mTab02;
    private LinearLayout mTab03;
    private LinearLayout mTab04;
    private ImageButton mTabButton01;
    private ImageButton mTabButton02;
    private ImageButton mTabButton03;
    private ImageButton mTabButton04;

    private Tab01Fragment mTab01Fragment;
    private Tab02Fragment mTab02Fragment;
    private Tab03Fragment mTab03Fragment;
    private Tab04Fragment mTab04Fragment;



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

        initView();
        initEvent();
        //初始化
        select(0);
    }

    private void select(int i) {
        FragmentManager fm = getSupportFragmentManager();
        FragmentTransaction ft = fm.beginTransaction();
        switch (i) {
        case 0:
            ft.replace(R.id.id_content, mTab01Fragment);
            break;
        case 1:
            ft.replace(R.id.id_content, mTab02Fragment);
            break;
        case 2:
            ft.replace(R.id.id_content, mTab03Fragment);
            break;
        case 3:
            ft.replace(R.id.id_content, mTab04Fragment);
            break;

        }

        ft.commit();
    }

    private void initView() {
        mTab01 = (LinearLayout) findViewById(R.id.id_tab01);
        mTab02 = (LinearLayout) findViewById(R.id.id_tab02);
        mTab03 = (LinearLayout) findViewById(R.id.id_tab03);
        mTab04 = (LinearLayout) findViewById(R.id.id_tab04);
        mTabButton01 = (ImageButton) findViewById(R.id.id_tab01_img);
        mTabButton02 = (ImageButton) findViewById(R.id.id_tab02_img);
        mTabButton03 = (ImageButton) findViewById(R.id.id_tab03_img);
        mTabButton04 = (ImageButton) findViewById(R.id.id_tab04_img);

        mTab01Fragment = new Tab01Fragment();
        mTab02Fragment = new Tab02Fragment();
        mTab03Fragment = new Tab03Fragment();
        mTab04Fragment = new Tab04Fragment();



    }


    private void initEvent() {
        mTab01.setOnClickListener(this);
        mTab02.setOnClickListener(this);
        mTab03.setOnClickListener(this);
        mTab04.setOnClickListener(this);

    }

    @Override
    public void onClick(View v) {
        resetTabImg();

        switch (v.getId()) {
        case R.id.id_tab01:
            select(0);
            mTabButton01.setImageResource(R.drawable.tab_weixin_pressed);
            break;
        case R.id.id_tab02:
            select(1);
            mTabButton02.setImageResource(R.drawable.tab_address_pressed);
            break;
        case R.id.id_tab03:
            select(2);
            mTabButton03.setImageResource(R.drawable.tab_find_frd_pressed);
            break;
        case R.id.id_tab04:
            select(3);
            mTabButton04.setImageResource(R.drawable.tab_settings_pressed);
            break;

        }

    }

    /**
     * 初始化图标
     */
    private void resetTabImg() {
        mTabButton01.setImageResource(R.drawable.tab_weixin_normal);
        mTabButton02.setImageResource(R.drawable.tab_address_normal);
        mTabButton03.setImageResource(R.drawable.tab_find_frd_normal);
        mTabButton04.setImageResource(R.drawable.tab_settings_normal);
    }

}

3.ViewPager+Fragment(可点击切换,可滑动切换)【推荐】

效果
这里写图片描述


结构:
这里写图片描述


main.xml

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
     xmlns:android="http://schemas.android.com/apk/res/android">

    <include layout="@layout/top_bar"/>

    <android.support.v4.view.ViewPager
        android:id="@+id/id_viewpager"
        android:layout_weight="1"
        android:layout_height="0dp"
        android:layout_width="match_parent">

    </android.support.v4.view.ViewPager>

    <include layout="@layout/bottom_bar"/>

</LinearLayout>

Main

package com.example.day0304;


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

import com.example.day0304.fragment.Tab01Fragment;
import com.example.day0304.fragment.Tab02Fragment;
import com.example.day0304.fragment.Tab03Fragment;
import com.example.day0304.fragment.Tab04Fragment;

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.view.View;
import android.view.View.OnClickListener;
import android.widget.ImageButton;
import android.widget.LinearLayout;

public class MainActivity extends FragmentActivity implements OnClickListener{

    private LinearLayout mTab01;
    private LinearLayout mTab02;
    private LinearLayout mTab03;
    private LinearLayout mTab04;
    private ImageButton mTabButton01;
    private ImageButton mTabButton02;
    private ImageButton mTabButton03;
    private ImageButton mTabButton04;

    private Tab01Fragment mTab01Fragment;
    private Tab02Fragment mTab02Fragment;
    private Tab03Fragment mTab03Fragment;
    private Tab04Fragment mTab04Fragment;

    private ViewPager mViewPager;
    private FragmentPagerAdapter adapter;
    private List<Fragment> mList;


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

        initView();
        initEvent();
    }

    private void initView() {
        mTab01 = (LinearLayout) findViewById(R.id.id_tab01);
        mTab02 = (LinearLayout) findViewById(R.id.id_tab02);
        mTab03 = (LinearLayout) findViewById(R.id.id_tab03);
        mTab04 = (LinearLayout) findViewById(R.id.id_tab04);
        mTabButton01 = (ImageButton) findViewById(R.id.id_tab01_img);
        mTabButton02 = (ImageButton) findViewById(R.id.id_tab02_img);
        mTabButton03 = (ImageButton) findViewById(R.id.id_tab03_img);
        mTabButton04 = (ImageButton) findViewById(R.id.id_tab04_img);

        mViewPager = (ViewPager) findViewById(R.id.id_viewpager);

        mList = new ArrayList<Fragment>();
        mTab01Fragment = new Tab01Fragment();
        mTab02Fragment = new Tab02Fragment();
        mTab03Fragment = new Tab03Fragment();
        mTab04Fragment = new Tab04Fragment();
        mList.add(mTab01Fragment);
        mList.add(mTab02Fragment);
        mList.add(mTab03Fragment);
        mList.add(mTab04Fragment);

        adapter = new FragmentPagerAdapter(getSupportFragmentManager()) {

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

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

        mViewPager.setAdapter(adapter);



    }


    private void initEvent() {
        mTab01.setOnClickListener(this);
        mTab02.setOnClickListener(this);
        mTab03.setOnClickListener(this);
        mTab04.setOnClickListener(this);

        mViewPager.setOnPageChangeListener(new OnPageChangeListener() {

            @Override
            public void onPageSelected(int position) {
                setTab(position);
            }

            @Override
            public void onPageScrolled(int arg0, float arg1, int arg2) {

            }

            @Override
            public void onPageScrollStateChanged(int arg0) {

            }
        });
    }

    @Override
    public void onClick(View v) {

        switch (v.getId()) {
        case R.id.id_tab01:
            mViewPager.setCurrentItem(0);
            setTab(0);
            break;
        case R.id.id_tab02:
            mViewPager.setCurrentItem(1);
            setTab(1);
            break;
        case R.id.id_tab03:
            mViewPager.setCurrentItem(2);
            setTab(2);
            break;
        case R.id.id_tab04:
            mViewPager.setCurrentItem(3);
            setTab(3);
            break;

        }

    }

    /**
     * 设置Tab变量
     * @param position
     */
    private void setTab(int position) {
        resetTabImg();

        switch (position) {
        case 0:
            mTabButton01.setImageResource(R.drawable.tab_weixin_pressed);
            break;
        case 1:
            mTabButton02.setImageResource(R.drawable.tab_address_pressed);
            break;
        case 2:
            mTabButton03.setImageResource(R.drawable.tab_find_frd_pressed);
            break;
        case 3:
            mTabButton04.setImageResource(R.drawable.tab_settings_pressed);
            break;
        }
    }

    /**
     * 初始化图标
     */
    private void resetTabImg() {
        mTabButton01.setImageResource(R.drawable.tab_weixin_normal);
        mTabButton02.setImageResource(R.drawable.tab_address_normal);
        mTabButton03.setImageResource(R.drawable.tab_find_frd_normal);
        mTabButton04.setImageResource(R.drawable.tab_settings_normal);
    }

}

4.ViewPagerIndicator+ViewPagerAdapter

ViewPagerIndicator是第三方开源控件
github地址:https://github.com/JakeWharton/ViewPagerIndicator


效果:
这里写图片描述

结构:
这里写图片描述
依赖包
这里写图片描述

使用ViewPagerIndicator要在styles.xml里配置一下,在AndroidManifest.xml里使用MyTheme
styles.xml

<resources>

    <!--
        Base application theme, dependent on API level. This theme is replaced
        by AppBaseTheme from res/values-vXX/styles.xml on newer devices.

    -->
    <style name="AppBaseTheme" parent="android:Theme.Light">
        <!--
            Theme customizations available in newer API levels can go in
            res/values-vXX/styles.xml, while customizations related to
            backward-compatibility can go here.

        -->
    </style>

    <!-- Application theme. -->
    <style name="AppTheme" parent="AppBaseTheme">
        <!-- All customizations that are NOT specific to a particular API-level can go here. -->
    </style>

    <style name="MyTheme" parent="AppBaseTheme">
        <item name="vpiTabPageIndicatorStyle">@style/MyWidget.TabPageIndicator</item>
        <item name="android:windowNoTitle">true</item>
        <item name="android:animationDuration">5000</item>
        <item name="android:windowContentOverlay">@null</item>
    </style>

    <style name="MyWidget.TabPageIndicator" parent="Widget">
        <item name="android:gravity">center</item>
        <item name="android:background">@drawable/vpi__tab_indicator</item>
        <item name="android:paddingLeft">22dip</item>
        <item name="android:paddingRight">22dip</item>
        <item name="android:paddingTop">8dp</item>
        <item name="android:paddingBottom">8dp</item>
        <item name="android:textAppearance">@style/MyTextAppearance.TabPageIndicator</item>
        <item name="android:textSize">16sp</item>
        <item name="android:maxLines">1</item>
    </style>

    <style name="MyTextAppearance.TabPageIndicator" parent="Widget">
        <item name="android:textStyle">bold</item>
        <item name="android:textColor">@android:color/black</item>
    </style>

</resources>

main.xml

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
     xmlns:android="http://schemas.android.com/apk/res/android">

    <include layout="@layout/top_bar"/>


    <android.support.v4.view.ViewPager
        android:id="@+id/id_viewpager"
        android:layout_weight="1"
        android:layout_height="0dp"
        android:layout_width="match_parent">
    </android.support.v4.view.ViewPager>


     <com.viewpagerindicator.TabPageIndicator
        android:id="@+id/id_pagerindicator"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/transparent"
       >
    </com.viewpagerindicator.TabPageIndicator>



    <include layout="@layout/bottom_bar"/>

</LinearLayout>

Main

package com.example.day0304;


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

import com.example.day0304.fragment.Tab01Fragment;
import com.example.day0304.fragment.Tab02Fragment;
import com.example.day0304.fragment.Tab03Fragment;
import com.example.day0304.fragment.Tab04Fragment;
import com.viewpagerindicator.TabPageIndicator;

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.view.View;
import android.view.View.OnClickListener;
import android.widget.ImageButton;
import android.widget.LinearLayout;

public class MainActivity extends FragmentActivity implements OnClickListener{

    private LinearLayout mTab01;
    private LinearLayout mTab02;
    private LinearLayout mTab03;
    private LinearLayout mTab04;
    private ImageButton mTabButton01;
    private ImageButton mTabButton02;
    private ImageButton mTabButton03;
    private ImageButton mTabButton04;

    private Tab01Fragment mTab01Fragment;
    private Tab02Fragment mTab02Fragment;
    private Tab03Fragment mTab03Fragment;
    private Tab04Fragment mTab04Fragment;

    private ViewPager mViewPager;
    private FragmentPagerAdapter adapter;
    private List<Fragment> mList;

    private TabPageIndicator mPageIndicator;


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

        initView();
        initEvent();
    }

    private void initView() {
        mTab01 = (LinearLayout) findViewById(R.id.id_tab01);
        mTab02 = (LinearLayout) findViewById(R.id.id_tab02);
        mTab03 = (LinearLayout) findViewById(R.id.id_tab03);
        mTab04 = (LinearLayout) findViewById(R.id.id_tab04);
        mTabButton01 = (ImageButton) findViewById(R.id.id_tab01_img);
        mTabButton02 = (ImageButton) findViewById(R.id.id_tab02_img);
        mTabButton03 = (ImageButton) findViewById(R.id.id_tab03_img);
        mTabButton04 = (ImageButton) findViewById(R.id.id_tab04_img);

        mViewPager = (ViewPager) findViewById(R.id.id_viewpager);

        mList = new ArrayList<Fragment>();
        mTab01Fragment = new Tab01Fragment();
        mTab02Fragment = new Tab02Fragment();
        mTab03Fragment = new Tab03Fragment();
        mTab04Fragment = new Tab04Fragment();
        mList.add(mTab01Fragment);
        mList.add(mTab02Fragment);
        mList.add(mTab03Fragment);
        mList.add(mTab04Fragment);

        adapter = new FragmentPagerAdapter(getSupportFragmentManager()) {

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

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

        };

        mViewPager.setAdapter(adapter);

        mPageIndicator = (TabPageIndicator) findViewById(R.id.id_pagerindicator);
        mPageIndicator.setViewPager(mViewPager, 0);


    }


    private void initEvent() {
        mTab01.setOnClickListener(this);
        mTab02.setOnClickListener(this);
        mTab03.setOnClickListener(this);
        mTab04.setOnClickListener(this);

        mViewPager.setOnPageChangeListener(new OnPageChangeListener() {

            @Override
            public void onPageSelected(int position) {
                setTab(position);
                mPageIndicator.setCurrentItem(position);
            }

            @Override
            public void onPageScrolled(int arg0, float arg1, int arg2) {

            }

            @Override
            public void onPageScrollStateChanged(int arg0) {

            }
        });
    }

    @Override
    public void onClick(View v) {

        switch (v.getId()) {
        case R.id.id_tab01:
            mViewPager.setCurrentItem(0);
            setTab(0);
            break;
        case R.id.id_tab02:
            mViewPager.setCurrentItem(1);
            setTab(1);
            break;
        case R.id.id_tab03:
            mViewPager.setCurrentItem(2);
            setTab(2);
            break;
        case R.id.id_tab04:
            mViewPager.setCurrentItem(3);
            setTab(3);
            break;

        }

    }

    /**
     * 设置Tab变量
     * @param position
     */
    private void setTab(int position) {
        resetTabImg();

        switch (position) {
        case 0:
            mTabButton01.setImageResource(R.drawable.tab_weixin_pressed);
            break;
        case 1:
            mTabButton02.setImageResource(R.drawable.tab_address_pressed);
            break;
        case 2:
            mTabButton03.setImageResource(R.drawable.tab_find_frd_pressed);
            break;
        case 3:
            mTabButton04.setImageResource(R.drawable.tab_settings_pressed);
            break;
        }
    }

    /**
     * 初始化图标
     */
    private void resetTabImg() {
        mTabButton01.setImageResource(R.drawable.tab_weixin_normal);
        mTabButton02.setImageResource(R.drawable.tab_address_normal);
        mTabButton03.setImageResource(R.drawable.tab_find_frd_normal);
        mTabButton04.setImageResource(R.drawable.tab_settings_normal);
    }

}

转载于:http://www.imooc.com/learn/264

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值