Fragment实现Tab页切换，滑动和点击都可切换。

最新推荐文章于 2019-05-21 17:14:23 发布

u012027644

最新推荐文章于 2019-05-21 17:14:23 发布

阅读量732

点赞数

分类专栏：安卓常用文章标签： android

本文链接：https://blog.csdn.net/u012027644/article/details/44494157

版权

安卓常用专栏收录该内容

21 篇文章 0 订阅

订阅专栏

1.TAB标题栏，top1.xml

<?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="60dp"
    android:background="#eee"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="57dp"
        android:orientation="horizontal" >

        <LinearLayout
            android:id="@+id/id_ll_jdkp"
            android:layout_width="3dp"
            android:orientation="horizontal"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:gravity="center" >

            <TextView
                android:id="@+id/id_tv_chat"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="建档卡片"
                android:textSize="25sp"
                android:textColor="#008000" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/id_ll_jbqk"
            android:layout_width="3dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:gravity="center" >

            <TextView
                android:id="@+id/id_tv_friend"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="#000000"
                android:textSize="25sp"
                android:text="基本情况" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/id_ll_gddl"
            android:layout_width="3dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:gravity="center" >

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="#000000"
                android:textSize="25sp"
                android:id="@+id/id_tv_contact"
                android:text="耕地地力" />
        </LinearLayout>
    </LinearLayout>

    <ImageView
        android:id="@+id/id_iv_tabline"
        android:layout_width="100dp"
        android:layout_height="3dp"
        android:background="@drawable/tabline" />

</LinearLayout>

2.主UI的布局,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/top1" />

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

</LinearLayout>

3.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:gravity="center"
    android:orientation="vertical" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="This is first Tab"
        android:textSize="22sp"
        android:textStyle="bold" />

</LinearLayout>

4.Fragment代码，实现一个简单的Fragment，每个标签对应一个Fragment，每个Fragment对应一个XML

package com.zyrj.bqw;


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

public class JdkpTabFragment extends Fragment
{
	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState)
	{
		return inflater.inflate(R.layout.tab01, container, false);
	}
}

5.重点来了，主页面的代码

package com.zyrj.bqw;

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

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.FragmentPagerAdapter;
import android.support.v4.app.FragmentTransaction;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.DisplayMetrics;
import android.util.Log;
import android.view.Display;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup.LayoutParams;
import android.view.Window;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.Toast;

public class OurFilesActivity extends FragmentActivity implements
		android.view.View.OnClickListener {
	private ViewPager mViewPager;
	private FragmentPagerAdapter mAdapter;
	private List<Fragment> mDatas;

	private TextView mChatTextView;
	private TextView mFriendTextView;
	private TextView mContactTextView;
	private LinearLayout mJdkpLinearLayout, mJbqkLinearLayout,
			mGddlLinearLayout;

	private ImageView mTabline;
	private int mScreen1_3;

	private int mCurrentPageIndex;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		requestWindowFeature(Window.FEATURE_NO_TITLE);
		setContentView(R.layout.activity_ourfiles);

		initTabLine();
		initView();
	}

	private void initTabLine() {

<span style="white-space:pre">		</span>//设置下划线
		mTabline = (ImageView) findViewById(R.id.id_iv_tabline);
		Display display = getWindow().getWindowManager().getDefaultDisplay();
		DisplayMetrics outMetrics = new DisplayMetrics();
		display.getMetrics(outMetrics);
		mScreen1_3 = outMetrics.widthPixels / 3;
		LayoutParams lp = mTabline.getLayoutParams();
		lp.width = mScreen1_3;
		mTabline.setLayoutParams(lp);
	}

	private void initView() {
		
		//设置切换页和动作
		mViewPager = (ViewPager) findViewById(R.id.id_viewpager);
		mChatTextView = (TextView) findViewById(R.id.id_tv_chat);
		mFriendTextView = (TextView) findViewById(R.id.id_tv_friend);
		mContactTextView = (TextView) findViewById(R.id.id_tv_contact);
		
		//设置TAB标题点击事件
		mJdkpLinearLayout = (LinearLayout) findViewById(R.id.id_ll_jdkp);
		mJbqkLinearLayout = (LinearLayout) findViewById(R.id.id_ll_jbqk);
		mGddlLinearLayout = (LinearLayout) findViewById(R.id.id_ll_gddl);
		mJdkpLinearLayout.setOnClickListener(this);
		mJbqkLinearLayout.setOnClickListener(this);
		mGddlLinearLayout.setOnClickListener(this);

		mDatas = new ArrayList<Fragment>();

		JdkpTabFragment tab01 = new JdkpTabFragment();
		JbqkTabFragment tab02 = new JbqkTabFragment();
		GddlTabFragment tab03 = new GddlTabFragment();

		mDatas.add(tab01);
		mDatas.add(tab02);
		mDatas.add(tab03);

		mAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
			@Override
			public int getCount() {
				return mDatas.size();
			}

			@Override
			public Fragment getItem(int arg0) {
				return mDatas.get(arg0);
			}
		};
		mViewPager.setAdapter(mAdapter);

		mViewPager.setOnPageChangeListener(new OnPageChangeListener() {
			@Override
			public void onPageSelected(int position) {
				resetTextView();
				switch (position) {
				case 0:
					mChatTextView.setTextColor(Color.parseColor("#008000"));
					break;
				case 1:
					mFriendTextView.setTextColor(Color.parseColor("#008000"));
					break;
				case 2:
					mContactTextView.setTextColor(Color.parseColor("#008000"));
					break;

				}

				mCurrentPageIndex = position;

			}

			@Override
			public void onPageScrolled(int position, float positionOffset,
					int positionOffsetPx) {
				Log.e("TAG", position + " , " + positionOffset + " , "
						+ positionOffsetPx);

				LinearLayout.LayoutParams lp = (android.widget.LinearLayout.LayoutParams) mTabline
						.getLayoutParams();

				if (mCurrentPageIndex == 0 && position == 0)// 0->1
				{
					lp.leftMargin = (int) (positionOffset * mScreen1_3 + mCurrentPageIndex
							* mScreen1_3);
				} else if (mCurrentPageIndex == 1 && position == 0)// 1->0
				{
					lp.leftMargin = (int) (mCurrentPageIndex * mScreen1_3 + (positionOffset - 1)
							* mScreen1_3);
				} else if (mCurrentPageIndex == 1 && position == 1) // 1->2
				{
					lp.leftMargin = (int) (mCurrentPageIndex * mScreen1_3 + positionOffset
							* mScreen1_3);
				} else if (mCurrentPageIndex == 2 && position == 1) // 2->1
				{
					lp.leftMargin = (int) (mCurrentPageIndex * mScreen1_3 + (positionOffset - 1)
							* mScreen1_3);
				}
				mTabline.setLayoutParams(lp);

			}

			@Override
			public void onPageScrollStateChanged(int arg0) {
				// TODO Auto-generated method stub

			}
		});

	}

	//所有TAB标题变回黑色
	protected void resetTextView() {
		mChatTextView.setTextColor(Color.BLACK);
		mFriendTextView.setTextColor(Color.BLACK);
		mContactTextView.setTextColor(Color.BLACK);
	}

	@Override
	public void onClick(View v) {
		switch (v.getId()) {
		case R.id.id_ll_jdkp:
			mViewPager.setCurrentItem(0);
			break;
		case R.id.id_ll_jbqk:
			mViewPager.setCurrentItem(1);
			break;
		case R.id.id_ll_gddl:
			mViewPager.setCurrentItem(2);
			break;
		default:
			break;
		}
	}

}

简单易用的Fragment标签页就实现了~~~~

u012027644

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Fragment实现Tab页切换，滑动和点击都可切换。

1.TAB标题栏，top1.xml<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="60dp" android:background="#eee"
复制链接

扫一扫