Android中top_tab和Fragment结合设计滑动界面

最新推荐文章于 2021-12-20 17:01:50 发布

小仙女的珍珠糖

最新推荐文章于 2021-12-20 17:01:50 发布

阅读量931

点赞数

本文链接：https://blog.csdn.net/Java201314zt/article/details/51620740

版权

附上官网帮助文档链接

https://developer.android.com/guide/components/fragments.html

1. top_tab.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="wrap_content"
    android:orientation="vertical" >

    <LinearLayout
        android:id="@+id/id_switch_tab_ll"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" 
        android:baselineAligned="false"
        >

        <LinearLayout
            android:id="@+id/id_tab_firstpage_ll"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@drawable/guide_round_selector"
            android:gravity="center"
            android:orientation="horizontal"
            android:padding="10dip" >

            <TextView
                android:id="@+id/id_firstpage_tv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="主页"
                android:textColor="#0000FF"
                android:textSize="15dip" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/id_tab_encoding_ll"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@drawable/guide_round_selector"
            android:clickable="true"
            android:gravity="center"
            android:orientation="horizontal"
            android:padding="10dip"
            android:saveEnabled="false" >

            <TextView
                android:id="@+id/id_encoding_tv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="生成"
                android:textColor="#000000"
                android:textSize="15dip" />
        </LinearLayout>
        
        

        <LinearLayout
            android:id="@+id/id_tab_decoding_ll"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@drawable/guide_round_selector"
            android:focusable="false"
            android:gravity="center"
            android:orientation="horizontal"
            android:padding="10dip" >

            <TextView
                android:id="@+id/id_decoding_tv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="解码"
                android:textColor="#000000"
                android:textSize="15dip" />
        </LinearLayout>
        
        <LinearLayout
            android:id="@+id/id_tab_customize_ll"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@drawable/guide_round_selector"
            android:focusable="false"
            android:gravity="center"
            android:orientation="horizontal"
            android:padding="10dip" >

            <TextView
                android:id="@+id/id_customize_tv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="定制"
                android:textColor="#000000"
                android:textSize="15dip" />
        </LinearLayout>
    </LinearLayout>

    <ImageView
        android:id="@+id/id_tab_line_iv"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:contentDescription="tab"
        android:background="@drawable/tab_selected_pressed_holo" >
    </ImageView>

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#000000" />

</LinearLayout>

2. 4个Fragment

3.MainActivity.java

package com.qr.viewpager;

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

import com.example.viewpagerdemo.R;

import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.DisplayMetrics;
import android.util.Log;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

public class MainActivity extends FragmentActivity {

	private ViewPager mPageVp;

	private List<Fragment> mFragmentList = new ArrayList<Fragment>();
	private FragmentAdapter mFragmentAdapter;


	private TextView mTabfirstpageTv, mTabencodingTv, mTabdecodingTv,mTabcustomizeTv;
	
	private ImageView mTabLineIv;
	
	private firstpageFragment mfirstpageFg;
	private EncodingFragment mencodingFg;
	private decodingFragment mdecodingFg;
	private customizeFragment mcustomizeFg;
	
	private int currentIndex;
	
	private int screenWidth;

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

	}

	private void findById() {
		mTabfirstpageTv = (TextView) this.findViewById(R.id.id_firstpage_tv);
		mTabencodingTv = (TextView) this.findViewById(R.id.id_encoding_tv);
		mTabdecodingTv = (TextView) this.findViewById(R.id.id_decoding_tv);
        mTabcustomizeTv=(TextView) this.findViewById(R.id.id_customize_tv);
		mTabLineIv = (ImageView) this.findViewById(R.id.id_tab_line_iv);

		mPageVp = (ViewPager) this.findViewById(R.id.id_page_vp);
	}

	private void init() {
		mfirstpageFg = new firstpageFragment();
		mencodingFg = new EncodingFragment();
		mdecodingFg = new decodingFragment();
		mcustomizeFg=new customizeFragment();
		mFragmentList.add(mfirstpageFg);
		mFragmentList.add(mencodingFg);
		mFragmentList.add(mdecodingFg);
		mFragmentList.add(mcustomizeFg);

		mFragmentAdapter = new FragmentAdapter(
				this.getSupportFragmentManager(), mFragmentList);
		mPageVp.setAdapter(mFragmentAdapter);
		mPageVp.setCurrentItem(0);
		mPageVp.setOnPageChangeListener(new OnPageChangeListener() {

		
			@Override
			public void onPageScrollStateChanged(int state) {

			}

			
			@Override
			public void onPageScrolled(int position, float offset,
					int offsetPixels) {
				LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) mTabLineIv
						.getLayoutParams();

				Log.e("offset:", offset + "");
				
				if (currentIndex == 0 && position == 0)// 0->1
				{
					lp.leftMargin = (int) (offset * (screenWidth * 1.0 / 4) + currentIndex
							* (screenWidth / 4));

				} else if (currentIndex == 1 && position == 0) // 1->0
				{
					lp.leftMargin = (int) (-(1 - offset)
							* (screenWidth * 1.0 / 4) + currentIndex
							* (screenWidth / 4));

				} else if (currentIndex == 1 && position == 1) // 1->2
				{
					lp.leftMargin = (int) (offset * (screenWidth * 1.0 / 4) + currentIndex
							* (screenWidth / 4));
				} else if (currentIndex == 2 && position == 1) // 2->1
				{
					lp.leftMargin = (int) (-(1 - offset)
							* (screenWidth * 1.0 / 4) + currentIndex
							* (screenWidth / 4));
				} else if(currentIndex == 2 && position == 2)//2->3
				{
					lp.leftMargin = (int) (offset * (screenWidth * 1.0 / 4) + currentIndex
							* (screenWidth / 4));
				} else if(currentIndex == 3 && position == 2)//3->2
				{
					lp.leftMargin = (int) (-(1 - offset)
							* (screenWidth * 1.0 / 4) + currentIndex
							* (screenWidth / 4));
				}
				mTabLineIv.setLayoutParams(lp);
			}

			@Override
			public void onPageSelected(int position) {
				resetTextView();
				switch (position) {
				case 0:
					mTabfirstpageTv.setTextColor(Color.BLUE);
					break;
				case 1:
					mTabencodingTv.setTextColor(Color.BLUE);
					break;
				case 2:
					mTabdecodingTv.setTextColor(Color.BLUE);
					break;
				case 3:
					mTabcustomizeTv.setTextColor(Color.BLUE);
				}
				currentIndex = position;
			}
		});

	}


	private void initTabLineWidth() {
		DisplayMetrics dpMetrics = new DisplayMetrics();
		getWindow().getWindowManager().getDefaultDisplay()
				.getMetrics(dpMetrics);
		screenWidth = dpMetrics.widthPixels;
		LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) mTabLineIv
				.getLayoutParams();
		lp.width = screenWidth / 4;
		mTabLineIv.setLayoutParams(lp);
	}

	
	private void resetTextView() {
		mTabfirstpageTv.setTextColor(Color.BLACK);
		mTabencodingTv.setTextColor(Color.BLACK);
		mTabdecodingTv.setTextColor(Color.BLACK);
		mTabcustomizeTv.setTextColor(Color.BLACK);
	}

}

4. FragmentAdapter.java

package com.qr.viewpager;

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

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

public class FragmentAdapter extends FragmentPagerAdapter {

	List<Fragment> fragmentList = new ArrayList<Fragment>();
	public FragmentAdapter(FragmentManager fm,List<Fragment> fragmentList) {
		super(fm);
		this.fragmentList = fragmentList;
	}

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

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

}

5. 4个Fragment的.java

例如：FirstpageFragment.java

package com.qr.viewpager;

import com.example.viewpagerdemo.R;

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

public class firstpageFragment extends Fragment {
	
	@Override
	public View onCreateView(LayoutInflater inflater,ViewGroup container,Bundle savedInstanceState){
		super.onCreateView(inflater, container, savedInstanceState);
		View firstpageView = inflater.inflate(R.layout.firstpage_layout, container,false);
		return firstpageView;
		
		
	}
	
	
	@Override
	public void onActivityCreated(Bundle savedInstanceState){
		super.onActivityCreated(savedInstanceState);
	}
}

可以实现滑动页面切换，但点击top_tab上的文字时页面不会切换。

6.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/activity_main_top_tab" />

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

</LinearLayout>