Android之Fragment界面布局实例

显示效果图：

 

TabActivity.java:

package com.demo.tab;

import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.SimpleOnPageChangeListener;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.ImageView;
import android.widget.TextView;

import com.demo.broadcast.R;

public class TabActivity extends FragmentActivity implements OnClickListener{
	
	private TextView tab1, tab2, tab3;
	private ImageView tab1_bottom, tab2_bottom, tab3_bottom;
	private ViewPager viewPager;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		this.setContentView(R.layout.tab);
		initView();
		show(1);
	}

	private void initView() {
		tab1 = (TextView) findViewById(R.id.tab1);
		tab2 = (TextView) findViewById(R.id.tab2);
		tab3 = (TextView) findViewById(R.id.tab3);
		tab1.setOnClickListener(this);
		tab2.setOnClickListener(this);
		tab3.setOnClickListener(this);
		
		tab1_bottom = (ImageView) findViewById(R.id.tab1_bottom);
		tab2_bottom = (ImageView) findViewById(R.id.tab2_bottom);
		tab3_bottom = (ImageView) findViewById(R.id.tab3_bottom);
		
		viewPager = (ViewPager) findViewById(R.id.viewPager);
		TabPagerAdapter adapter = new TabPagerAdapter(getSupportFragmentManager());
		viewPager.setAdapter(adapter);
		viewPager.setOnPageChangeListener(new SimpleOnPageChangeListener(){
			  
	        @Override  
	        public void onPageSelected(int arg0) {
	        	show(arg0);
	        }  
		});  
		viewPager.setCurrentItem(1);
	}
	
	private void show(int position){
		tab1_bottom.setVisibility(position == 0 ? View.VISIBLE : View.INVISIBLE);
		tab2_bottom.setVisibility(position == 1 ? View.VISIBLE : View.INVISIBLE);
		tab3_bottom.setVisibility(position == 2 ? View.VISIBLE : View.INVISIBLE);
	}

	
	@Override
	public void onClick(View v) {
		switch(v.getId()){
		case R.id.tab1:
			viewPager.setCurrentItem(0);  
			break;
		case R.id.tab2:
			viewPager.setCurrentItem(1);  
			break;
		case R.id.tab3:
			viewPager.setCurrentItem(2);  
			break;
		}
	}
}

 

 

 

TabPagerAdapter.java:

package com.demo.tab;

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

public class TabPagerAdapter extends FragmentPagerAdapter{
	private static int TCOUNT = 3;

	private TabFragment[] fragments = new TabFragment[TCOUNT];
	
	public TabPagerAdapter(FragmentManager fm) {
		super(fm);
	}
	
	@Override
	public Fragment getItem(int position) {
		TabFragment fragment = new TabFragment();
		Bundle args = new Bundle();
		args.putInt("section_number", position);
		fragment.setArguments(args);
		fragments[position] = fragment;
		return fragment;
	}

	@Override
	public int getCount() {
		return TCOUNT;
	}
	
}

 

 

 

TabFragment.java:

package com.demo.tab;

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

import com.demo.broadcast.R;

public class TabFragment extends Fragment{
	
	private int section;
	
	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		section = getArguments().getInt("section_number");
		if(section == 0){
			View view = inflater.inflate(R.layout.tab1, container, false);
			return view;
		}else if(section == 1){
			View view = inflater.inflate(R.layout.tab2, container, false);
			return view;
		}else if(section == 2){
			View view = inflater.inflate(R.layout.tab3, container, false);
			return view;
		}
		return null;
	}
}

 

 

 

tab.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="match_parent"
    android:background="#ffffff"
    android:orientation="vertical" >
    
    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1" />
    
    <!-- tab标签栏 -->

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="60dp"
        android:background="#000000" >

        <TextView
            android:id="@+id/tab1"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="tab1"
            android:textColor="#ffffff"
            android:textSize="18sp" />

        <View
            android:layout_width="1dp"
            android:layout_height="30dp"
            android:layout_gravity="center_vertical"
            android:background="#F3F2F6" />

        <TextView
            android:id="@+id/tab2"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="tab2"
            android:textColor="#ffffff"
            android:textSize="18sp" />
        
        <View
            android:layout_width="1dp"
            android:layout_height="30dp"
            android:layout_gravity="center_vertical"
            android:background="#F3F2F6" />

        <TextView
            android:id="@+id/tab3"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="tab3"
            android:textColor="#ffffff"
            android:textSize="18sp" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <ImageView
            android:id="@+id/tab1_bottom"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@drawable/tab_red_bottom" />

        <ImageView
            android:id="@+id/tab2_bottom"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@drawable/tab_red_bottom" />
        
        <ImageView
            android:id="@+id/tab3_bottom"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@drawable/tab_red_bottom" />
    </LinearLayout>

</LinearLayout>

 

tab1.xml,tab2.xml,tab3.xml布局非常简单，在此就不在展示了。