Android进阶菜菜AndroidAndroid开发

使用ViewPager和Fragment同时实现点击底部Tab切

2016-12-27  本文已影响596人  破荒之恋

使用ViewPager和Fragment实现页面切换，点击Tab切换Fragment，手势滑动切换Fragment，那现在就一步步的来实现。

先进行XML布局

<RelativeLayout 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"
    tools:context=".MainActivity" >

<!-- 底部四个导航按钮 -->
<LinearLayout
    android:id="@+id/ll_tabs"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:layout_alignParentBottom="true"
    android:orientation="horizontal"
    >


    <LinearLayout
        android:id="@+id/lin_one"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:orientation="vertical"
        android:layout_gravity="center_horizontal"
        android:background="#ffffff"
       >
        <ImageView
            android:layout_width="30dp"
            android:src="@mipmap/main_switch"
            android:layout_gravity="center_horizontal"
            android:layout_height="30dp" />
        <TextView
            android:id="@+id/tv_main"
            android:layout_width="match_parent"
            android:text="首页"
            android:gravity="center_horizontal"
            android:layout_height="wrap_content" />
    </LinearLayout>
    <LinearLayout
        android:id="@+id/lin_two"
        android:layout_width="0dp"
        android:orientation="vertical"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="#ffffff"
        >
        <ImageView
            android:layout_width="30dp"
            android:src="@mipmap/my_switch"
            android:layout_gravity="center_horizontal"
            android:layout_height="30dp" />
        <TextView
            android:id="@+id/tv_contact"
            android:layout_width="match_parent"
            android:text="联系人"
            android:gravity="center_horizontal"
            android:layout_height="wrap_content" />
    </LinearLayout>
    <LinearLayout
        android:id="@+id/lin_three"
        android:layout_width="0dp"
        android:orientation="vertical"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="#ffffff"
        >

        <ImageView
            android:layout_width="30dp"
            android:src="@mipmap/my_switch"
            android:layout_gravity="center_horizontal"
            android:layout_height="30dp" />
        <TextView
            android:id="@+id/tv_my"
            android:layout_width="match_parent"
            android:text="我的"
            android:gravity="center_horizontal"
            android:layout_height="wrap_content" />

    </LinearLayout>
    <LinearLayout
        android:id="@+id/lin_four"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:orientation="vertical"
        android:background="#ffffff"
        >
        <ImageView
            android:layout_width="30dp"
            android:src="@mipmap/main_switch"
            android:layout_gravity="center_horizontal"
            android:layout_height="30dp" />
        <TextView
            android:id="@+id/tv_set"
            android:layout_width="match_parent"
            android:text="设置"
            android:gravity="center_horizontal"
            android:layout_height="wrap_content" />
    </LinearLayout>

</LinearLayout>

<!-- 导航和视图的分割线 -->
<View
    android:layout_width="match_parent"
    android:layout_height="2dp"
    android:background="#0eefff"
    android:layout_above="@id/ll_tabs"
    />

<!--
<RelativeLayout
    android:id="@+id/fragment_content_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_above="@id/ll_tabs"
    android:layout_marginBottom="2dp"
    android:background="#fff"
    />
 -->
<!-- VIewPager 主要是加载内容的 -->
<android.support.v4.view.ViewPager
    android:id="@+id/viewpager"
    android:layout_above="@id/ll_tabs"
    android:layout_marginBottom="2dp"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>
</RelativeLayout>

主活动中代码的编写（详情看注释）

package com.cca.an.myfragment;
import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.LinearLayout;
import android.widget.TextView;

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

public class MainActivity extends FragmentActivity implements OnClickListener{

/**
 * 四个导航
 */
LinearLayout lintonOne;
LinearLayout lintonTwo;
LinearLayout lintonThree;
LinearLayout lintonFour;

/**
 * 作为页面容器的ViewPager
 */
ViewPager mViewPager;
/**
 * 页面集合
 */
List<Fragment> fragmentList;

/**
 * 四个Fragment（页面）
 */
ChatFragment oneFragment;
ContactFragment twoFragment;
MyFragment threeFragment;
SetFragment fourFragment;

//屏幕宽度
int screenWidth;
//当前选中的项
int currenttab=-1;
private TextView tvmain;
private TextView tvcontact;
private TextView tvmy;
private TextView tvset;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);


    setContentView(R.layout.activity_main);
    lintonOne= (LinearLayout) findViewById(R.id.lin_one);
    lintonTwo=(LinearLayout) findViewById(R.id.lin_two);
    lintonThree=(LinearLayout) findViewById(R.id.lin_three);
    lintonFour=(LinearLayout) findViewById(R.id.lin_four);


    tvmain = (TextView) findViewById(R.id.tv_main);
    tvcontact = (TextView) findViewById(R.id.tv_contact);
    tvmy = (TextView) findViewById(R.id.tv_my);
    tvset = (TextView) findViewById(R.id.tv_set);


    lintonOne.setOnClickListener(this);
    lintonTwo.setOnClickListener(this);
    lintonThree.setOnClickListener(this);
    lintonFour.setOnClickListener(this);

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

    fragmentList=new ArrayList<Fragment>();
    oneFragment=new ChatFragment();
    twoFragment=new ContactFragment();
    threeFragment=new MyFragment();
    fourFragment=new SetFragment();

    fragmentList.add(oneFragment);
    fragmentList.add(twoFragment);
    fragmentList.add(threeFragment);
    fragmentList.add(fourFragment);

    mViewPager.setAdapter(new MyFrageStatePagerAdapter(getSupportFragmentManager()));

    tvmain.setTextColor(Color.RED);
}


/**
 * 定义自己的ViewPager适配器。
 * 也可以使用FragmentPagerAdapter。关于这两者之间的区别，可以自己去搜一下。
 */
class MyFrageStatePagerAdapter extends FragmentStatePagerAdapter
{

    public MyFrageStatePagerAdapter(FragmentManager fm)
    {
        super(fm);
    }

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

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

    /**
     * 每次更新完成ViewPager的内容后，调用该接口，此处复写主要是为了让导航按钮上层的覆盖层能够动态的移动
     */
    @Override
    public void finishUpdate(ViewGroup container)
    {
        super.finishUpdate(container);//这句话要放在最前面，否则会报错
        //获取当前的视图是位于ViewGroup的第几个位置，用来更新对应的覆盖层所在的位置
        int currentItem=mViewPager.getCurrentItem();
        if (currentItem==currenttab)
        {
            return ;
        }
    //    imageMove(mViewPager.getCurrentItem());
        currenttab=mViewPager.getCurrentItem();
        if (currenttab==0){
            tvmain.setTextColor(Color.RED);
        }else{
            tvmain.setTextColor(Color.BLACK);
        }
        if (currenttab==1){
            tvcontact.setTextColor(Color.RED);
        }else{
            tvcontact.setTextColor(Color.BLACK);
        }
        if (currenttab==2){
            tvmy.setTextColor(Color.RED);
        }else{
            tvmy.setTextColor(Color.BLACK);
        }
        if (currenttab==3){
            tvset.setTextColor(Color.RED);
        }else{
            tvset.setTextColor(Color.BLACK);
        }
    }

}



@Override
public void onClick(View v)
{
    switch (v.getId())
    {
        case R.id.lin_one:
            changeView(0);
            break;
        case R.id.lin_two:
            changeView(1);
            break;
        case R.id.lin_three:
            changeView(2);
            break;
        case R.id.lin_four:
            changeView(3);
            break;
        default:
            break;
    }
}
//手动设置ViewPager要显示的视图
private void changeView(int desTab)
{
    mViewPager.setCurrentItem(desTab, true);
}

}

四个页卡的简单实例，四个一样的写法

package com.cca.an.myfragment;

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

/**
 * Created by an on 2016/10/14.
 */
public class ChatFragment extends Fragment {

    private static final String TAG = "ChatFragment";
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

        Log.i(TAG, "------:Chat ");

        return  inflater.inflate(R.layout.fragment_chat,container,false);

    }
}

页卡xml文件的书写（示例）

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

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="这是聊天页卡"
        android:textColor="@color/colorAccent"
        android:textSize="20sp"
        android:gravity="center"/>
</LinearLayout>

至此，已经实现了页卡点击、滑动切换Fragment的功能。

上一篇下一篇

猜你喜欢

热点阅读