Android应用的tab切换效果

在进行Android开发时经常配到,要使用Tab的情况,遇到不同的项目老大时,没人都还有自己的风格。下面续写一下我总结的自己觉得要注意的几种方式。

第一:使用Tabhost+Fragment实现tab切换,并通过Fragment转载xml并绑定监听事件可以实现响应xml的效果。

首先mian.xml文件

<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/tabhost"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <LinearLayout
        android:id="@+id/layout"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical" >

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1" >

            <FrameLayout
                android:id="@+id/fragment_phone"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content" >
            </FrameLayout>

            <FrameLayout
                android:id="@+id/fragment_mess"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content" >
            </FrameLayout>
        </FrameLayout>

        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="0"
            android:tag="tabs" >
        </TabWidget>
    </LinearLayout>

</TabHost>


下面通过Fragment转载xml来表示要切换的页面  这里xml中仅仅放一个图片
mess.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:orientation="vertical" >
    <ImageView 
        android:id="@+id/show"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:src="@drawable/xianjian01"
        />
</LinearLayout>

phone.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:orientation="vertical" >
    <ImageView 
        android:id="@+id/show"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:src="@drawable/xianjian02"
        />
</LinearLayout>


 
public class MessFragment extends Fragment {

	@Override
	public void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);
	}
	
	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		return inflater.inflate(R.layout.mess, container,false);
	}
	
}
public class PhoneFragment extends Fragment {

	
	@SuppressLint("NewApi")
	@Override
	public void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);
	}
	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		return inflater.inflate(R.layout.phone, container,false);
	}
	
}

public class MainActivity extends android.support.v4.app.FragmentActivity  implements OnTabChangeListener{

	private String [] titles= {"电话","信息"};
	private int [] tabIDs = {R.id.fragment_phone,R.id.fragment_mess};
	private TabHost mhost;
	private Fragment frag=null;
	private int convertID;
	private FragmentManager manager = getFragmentManager();
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		initView();
	}

	private void initView(){
		mhost = (TabHost)findViewById(android.R.id.tabhost);
		mhost.setup();
		for (int i = 0; i < tabIDs.length; i++) {
			Button button = new Button(this);
			
			button.setText(titles[i]);
			mhost.addTab(mhost.newTabSpec(titles[i]).setIndicator(button).setContent(tabIDs[i]));
		}
		mhost.setOnTabChangedListener(this);
		frag = new PhoneFragment(); 
		 convertID = R.id.fragment_phone;
		 FragmentTransaction trans = manager.beginTransaction();
         trans.replace(convertID, frag, titles[0]);
         trans.commit();
	}
	

	@SuppressLint("NewApi")
	@Override
	public void onTabChanged(String tag) {
		// TODO Auto-generated method stub
		if(tag.equals(titles[0])){
			
			 frag = new PhoneFragment(); 
			 convertID = R.id.fragment_phone;
		}else if (tag.equals(titles[1])) {
			frag = new MessFragment();
			convertID = R.id.fragment_mess;
		}
		if(tag==null){
			return;
		}
		
		
		if (manager.findFragmentByTag(tag) == null) {
            FragmentTransaction trans = manager.beginTransaction();
            trans.replace(convertID, frag, tag);
            trans.commit();
        }
	}

}


当然你如果要实现复杂的界面,只需要在onCreateView 中得到xml 中的控件,,并为其制定事件监听即可
 
 
这样就可以实现切换了效果如下:
Android应用的tab切换效果_第1张图片
如果要实现下面Tab的边效果 只要制定一个xml配置文件然后制定那个图片选中或者那种背景颜色即可;第二种机会讲到
第二;实现微博那样的菜单效果:已经有人做了很好的总结,就不写了
 http://blog.csdn.net/yangyu20121224/article/details/9016223
 
 
 

 

你可能感兴趣的:(Android应用的tab切换效果)