使用ViewPager和Fragment同时实现点击底部Tab切换和手势滑动切换Fragment

来源：互联网发布：手机淘宝图片保存位置编辑：程序博客网时间：2024/04/26 12:31

使用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;@Overrideprotected 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);        }    }}@Overridepublic 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的功能。

0 0