安卓开发_慕课网_ViewPager与FragmentPagerAdapter实现Tab实现Tab(App主界面)

学习内容来自“慕课网”

ViewPager与FragmentPagerAdapter实现Tab 将这两种实现Tab的方法结合起来。效果就是可以拖动内容区域来改变相应的功能图标亮暗

思路：

Fragment作为内容区域

点击功能按钮，想将所有的图标变为暗色图标，再调用相应的Fragment，并使对应的图标变亮

效果图：

布局文件部分

activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
     >    
    <include layout="@layout/top"/>
    
    <android.support.v4.view.ViewPager   //这里是关键部分
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:id="@+id/id_viewpager">
        
    </android.support.v4.view.ViewPager>
    
    <include layout="@layout/bottom"/>
</LinearLayout>
    

以下布局文件部分是固定的，和前两种方法用到的是一样的，做过前两种方法的可以直接复制代码

头部部分：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:background="@drawable/title_bar"
    android:layout_height="45dp"
    android:gravity="center"
    android:orientation="vertical" >
    <TextView 
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:layout_gravity="center"
        android:text="微信"
        android:textColor="#ffffff"
        android:textSize="20sp"
        android:textStyle="bold"
        
        />

</LinearLayout>

底部部分

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="55dp"
    android:background="@drawable/bottom_bar"
    android:orientation="horizontal" >
    
    <LinearLayout 
       android:id="@+id/id_tab_weixin"
       android:layout_width="0dp"
       android:gravity="center"
       android:layout_height="fill_parent"
       android:layout_weight="1"
       android:orientation="vertical"
       >
        <ImageButton 
           android:id="@+id/id_tab_weixin_image"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:src="@drawable/tab_weixin_pressed"
           android:clickable="false"
           android:background="#00000000"
           />
        <TextView 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="微信"
            android:textColor="#ffffff"
            />
    </LinearLayout>
    
    <LinearLayout 
       android:id="@+id/id_tab_add"
       android:layout_width="0dp"
       android:gravity="center"
       android:layout_height="fill_parent"
       android:layout_weight="1"
       android:orientation="vertical"
       >
        <ImageButton 
           android:id="@+id/id_tab_add_image"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:clickable="false"
           android:src="@drawable/tab_address_normal"
           android:background="#00000000"
           />
        <TextView 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="通信录"
            android:textColor="#ffffff"
            />
    </LinearLayout>
    
   <LinearLayout 
       android:id="@+id/id_tab_frd"
       android:layout_width="0dp"
       android:gravity="center"
       android:layout_height="fill_parent"
       android:layout_weight="1"
       android:orientation="vertical"
       >
        <ImageButton 
           android:id="@+id/id_tab_frd_image"
           android:layout_width="wrap_content"
           android:clickable="false"
           android:layout_height="wrap_content"
           android:src="@drawable/tab_find_frd_normal"
           android:background="#00000000"
           />
        <TextView 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="朋友"
            android:textColor="#ffffff"
            />
    </LinearLayout>
    
    <LinearLayout 
       android:id="@+id/id_tab_set"
       android:layout_width="0dp"
       android:gravity="center"
       android:layout_height="fill_parent"
       android:layout_weight="1"
       android:orientation="vertical"
       >
        <ImageButton 
           android:id="@+id/id_tab_set_image"
           android:layout_width="wrap_content"
           android:clickable="false"
           android:layout_height="wrap_content"
           android:src="@drawable/tab_settings_normal"
           android:background="#00000000"
           />
        <TextView 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="设置"
            android:textColor="#ffffff"
            />
    </LinearLayout>
</LinearLayout>

四个对应fragment部分的布局文件（相似的，只是用来标识效果的文字不同而已）

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:text="微信"       //四个 tab_01,tab_01,tab_03,tab_04只是这里显示的文字不同而已
        android:textAppearance="?android:attr/textAppearanceMedium" />

</LinearLayout>

.java文件部分：

主activity

MainActivity.java

package com.example.tab_three;



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

import android.os.Bundle;
import android.app.Activity;
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.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.Window;
import android.widget.ImageButton;
import android.widget.LinearLayout;

public class MainActivity extends FragmentActivity implements OnClickListener{
    private ViewPager mViewPager;
    private FragmentPagerAdapter mAdapter; //ViewPager适配器
    private List<Fragment> mFragments;
    
    private LinearLayout mTabWeixin;
    private LinearLayout mTabFrd;
    private LinearLayout mTabAdd;
    private LinearLayout mTabSet;
    
    private ImageButton mImageWeixin;
    private ImageButton mImageFrd;
    private ImageButton mImageAdd;
    private ImageButton mImageSet;
    

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);
        
        initView();
        initEvent();
        setSelect(0);
        
    }


    private void initEvent() {
        // TODO Auto-generated method stub
        mTabWeixin.setOnClickListener(this);
        mTabAdd.setOnClickListener(this);
        mTabFrd.setOnClickListener(this);
        mTabSet.setOnClickListener(this);
    }


    private void initView() {
        // TODO Auto-generated method stub
        //初始化
        mViewPager = (ViewPager) findViewById(R.id.id_viewpager);
        
        mTabWeixin = (LinearLayout) findViewById(R.id.id_tab_weixin);
        mTabAdd = (LinearLayout) findViewById(R.id.id_tab_add);
        mTabFrd = (LinearLayout) findViewById(R.id.id_tab_frd);
        mTabSet = (LinearLayout) findViewById(R.id.id_tab_set);
        
        mImageWeixin = (ImageButton) findViewById(R.id.id_tab_weixin_image);
        mImageAdd = (ImageButton) findViewById(R.id.id_tab_add_image);
        mImageFrd = (ImageButton) findViewById(R.id.id_tab_frd_image);
        mImageSet = (ImageButton) findViewById(R.id.id_tab_set_image);
        
        //数据的初始化
        mFragments = new ArrayList<Fragment>();
        Fragment mTab_01 = new WeixinFragment();
        Fragment mTab_02 = new AddFragment();
        Fragment mTab_03 = new FrdFragment();
        Fragment mTab_04 = new SetFragment();
        
        mFragments.add(mTab_01);
        mFragments.add(mTab_02);
        mFragments.add(mTab_03);
        mFragments.add(mTab_04);
        
        mAdapter = new FragmentPagerAdapter(getSupportFragmentManager())
        {
            
            @Override
            public int getCount() {
                // TODO Auto-generated method stub
                //返回数据源的个数
                return mFragments.size();
                
            }
            
            @Override
            public Fragment getItem(int arg0) {
                // TODO Auto-generated method stub
                return mFragments.get(arg0);
            }
        };
        
        mViewPager.setAdapter(mAdapter);
        //监听内容区域的滑动效果
        mViewPager.setOnPageChangeListener(new OnPageChangeListener() {
            
            @Override
            public void onPageSelected(int arg0) {
                // TODO Auto-generated method stub
                int currentItem  = mViewPager.getCurrentItem();
                resetImage();
        switch (currentItem) {
        case 0:
            mImageWeixin.setImageResource(R.drawable.tab_weixin_pressed);
            break;
        case 1:
            mImageAdd.setImageResource(R.drawable.tab_address_pressed);
            break;
        case 2:
            mImageFrd.setImageResource(R.drawable.tab_find_frd_pressed);
            break;
    
        case 3:
            mImageSet.setImageResource(R.drawable.tab_settings_pressed);
            break;
        default:
            break;
        }
                
            }
            
            @Override
            public void onPageScrolled(int arg0, float arg1, int arg2) {
                // TODO Auto-generated method stub
                
            }
            
            @Override
            public void onPageScrollStateChanged(int arg0) {
                // TODO Auto-generated method stub
                
            }
        });
        }


    @Override
    public void onClick(View v) {
        // TODO Auto-generated method stub
        //先切换图片至暗色
                resetImage();
                switch (v.getId()) {
                case R.id.id_tab_weixin:
                    setSelect(0);
                    break;
                case R.id.id_tab_add:
                    setSelect(1);
                    break;
                case R.id.id_tab_frd:
                    setSelect(2);
                    break;
                case R.id.id_tab_set:
                    setSelect(3);
                    break;

                default:
                    break;
                }
    }
    private void setSelect(int i) {
        // TODO Auto-generated method stub
        //设置将点击的那个功能图标为亮色
        //切换内容区域
        resetImage();
        switch (i) {
        case 0:
            mImageWeixin.setImageResource(R.drawable.tab_weixin_pressed);
            break;
        case 1:
            mImageAdd.setImageResource(R.drawable.tab_address_pressed);
            break;
        case 2:
            mImageFrd.setImageResource(R.drawable.tab_find_frd_pressed);
            break;
    
        case 3:
            mImageSet.setImageResource(R.drawable.tab_settings_pressed);
            break;
        default:
            break;
        }
        mViewPager.setCurrentItem(i);
        
    }


        //将所有功能图标的界面设为暗色
        private void resetImage() {
            // TODO Auto-generated method stub
            mImageWeixin.setImageResource(R.drawable.tab_weixin_normal);
            mImageAdd.setImageResource(R.drawable.tab_address_normal);
            mImageFrd.setImageResource(R.drawable.tab_find_frd_normal);
            mImageSet.setImageResource(R.drawable.tab_settings_normal);
            
        }

    
}

四个相似的.java文件

WeixinFragment.java

package com.example.tab_three;

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

public class WeixinFragment extends Fragment{
    
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        // TODO Auto-generated method stub
    
        
        return inflater.inflate(R.layout.tab_1, container,false);
    }
}

SetFragment.java

package com.example.tab_three;

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

public class SetFragment extends Fragment{
    
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        // TODO Auto-generated method stub
    
        
        return inflater.inflate(R.layout.tab_4, container,false);
    }
}

FrdFragment.java

package com.example.tab_three;

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

public class FrdFragment extends Fragment{
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        return inflater.inflate(R.layout.tab_3, container,false);
    }

}

AddFragment.java

package com.example.tab_three;

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

public class AddFragment extends Fragment{
    
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        // TODO Auto-generated method stub
    
        
        return inflater.inflate(R.layout.tab_2, container,false);
    }
}