使用Fragment实现tab的选择跳转界面

来源：互联网发布：呼死你软件横行编辑：程序博客网时间：2024/06/05 13:32

Fragment现在越来越火，因为它的灵活性，可以使得在大屏幕手机上展现出更多的界面变幻。所以学好它很重要。首先，我是看了郭大神的博客（地址：http://blog.csdn.net/guolin_blog/article/details/13171191，没有抄袭的意思，只是拿来学习下），然后自己根据自己的理解再自己写了一遍，对Fragment的理解越来越深了。

先上效果图吧（可能有些人觉得应该再加上ViewPager才应该是现在主流的，个人觉得没有滑动界面，点击转换界面也是种风格）

先设计主界面activity_main.xml

效果就是上面图的效果，应该都看得懂

然后就是各个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_vertical"
android:orientation="vertical" >

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="这是消息界面"
android:textSize="30sp" />

</LinearLayout>

之后就是新建各自的Fragment类，然后实现布局，还是举一个例子

public class MessageFragment extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// TODO Auto-generated method stub
View messageLayout = inflater.inflate(R.layout.fragment_message, null);
return messageLayout;
}
}

最后就是MainActivity的代码了

public class MainActivity extends Activity implements OnClickListener {
//将ImageView和TextView一起添加成一个布局，点击一起产生效果
private View messageLayout;
private View contactsLayout;
private View newsLayout;
private View settingLayout;
//MessageFragment的实例
private MessageFragment messageFragment;
private ContactsFragment contactsFragment;
private NewsFragment newsFragment;
private SettingFragment settingFragment;
private ImageView messageImage;
private ImageView contactsImage;
private ImageView newsImage;
private ImageView settingImage;
private TextView messageText;
private TextView contactsText;
private TextView newsText;
private TextView settingText;
private FragmentManager fragmentManager;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// 初始化控件
initViews();
fragmentManager = getFragmentManager();
// 初始进入第一个
setTabSelection(0);
}

/**
* 初始化控件，并且给下面四个layout添加点击事件
*/
private void initViews() {
messageLayout = findViewById(R.id.messagelayout);
contactsLayout = findViewById(R.id.contactslayout);
newsLayout = findViewById(R.id.newslayout);
settingLayout = findViewById(R.id.settinglayout);
messageImage = (ImageView) findViewById(R.id.message_image);
contactsImage = (ImageView) findViewById(R.id.contacts_image);
newsImage = (ImageView) findViewById(R.id.news_image);
settingImage = (ImageView) findViewById(R.id.setting_image);
messageText = (TextView) findViewById(R.id.message_text);
contactsText = (TextView) findViewById(R.id.contacts_text);
newsText = (TextView) findViewById(R.id.news_text);
settingText = (TextView) findViewById(R.id.setting_text);
messageLayout.setOnClickListener(this);
contactsLayout.setOnClickListener(this);
newsLayout.setOnClickListener(this);
settingLayout.setOnClickListener(this);
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}

@Override
public void onClick(View v) {
// TODO Auto-generated method stub
switch (v.getId()) {
case R.id.messagelayout:
//点击到消息界面
setTabSelection(0);
break;
case R.id.contactslayout:
setTabSelection(1);
break;
case R.id.newslayout:
setTabSelection(2);
break;
case R.id.settinglayout:
setTabSelection(3);
break;

}
}

private void setTabSelection(int index) {
//先清除下面四个tab的状态
clearTabSelection();
FragmentTransaction transaction = fragmentManager.beginTransaction();
// 先隐藏掉所有的Fragment，以防止有多个Fragment显示在界面上的情况
hideFragment(transaction);
switch (index) {
case 0:
//点击后显示图片以及文字的效果
messageImage.setImageResource(R.drawable.message_selected);
messageText.setTextColor(Color.WHITE);
if (messageFragment == null) {
messageFragment = new MessageFragment();
transaction.add(R.id.content, messageFragment);

} else {
transaction.show(messageFragment);
}

break;
case 1:
contactsImage.setImageResource(R.drawable.contacts_selected);
contactsText.setTextColor(Color.WHITE);
if (contactsFragment == null) {
contactsFragment = new ContactsFragment();
transaction.add(R.id.content, contactsFragment);

} else {
transaction.show(contactsFragment);
}
break;
case 2:
newsImage.setImageResource(R.drawable.news_selected);
newsText.setTextColor(Color.WHITE);
if (newsFragment == null) {
newsFragment = new NewsFragment();
transaction.add(R.id.content, newsFragment);

} else {
transaction.show(newsFragment);
}
break;
case 3:
settingImage.setImageResource(R.drawable.setting_selected);
settingText.setTextColor(Color.WHITE);
if (settingFragment == null) {
settingFragment = new SettingFragment();
transaction.add(R.id.content, settingFragment);

} else {
transaction.show(settingFragment);
}
break;

}
transaction.commit();
}

/**
* 选择前清除所有选中状态
*/
private void clearTabSelection() {
messageImage.setImageResource(R.drawable.message_unselected);
messageText.setTextColor(Color.parseColor("#82858b"));
contactsImage.setImageResource(R.drawable.contacts_unselected);
contactsText.setTextColor(Color.parseColor("#82858b"));
newsImage.setImageResource(R.drawable.news_unselected);
newsText.setTextColor(Color.parseColor("#82858b"));
settingImage.setImageResource(R.drawable.setting_unselected);
settingText.setTextColor(Color.parseColor("#82858b"));
}

/**
* 在改变状态之前先讲所有的Fragment清除，以防出现多个Fragment
*/
public void hideFragment(FragmentTransaction transaction) {

if (messageFragment != null) {
transaction.hide(messageFragment);
}
if (contactsFragment != null) {
transaction.hide(contactsFragment);
}
if (newsFragment != null) {
transaction.hide(newsFragment);
}
if (settingFragment != null) {
transaction.hide(settingFragment);
}
}
}