欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Android fragment實(shí)現(xiàn)多個(gè)頁(yè)面切換效果

 更新時(shí)間：2018年04月26日 11:12:42   作者：Lena  
這篇文章主要為大家詳細(xì)介紹了fragment實(shí)現(xiàn)多個(gè)頁(yè)面切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

現(xiàn)在的APP首頁(yè)大部分屏幕的下方顯示一行Tab標(biāo)簽選項(xiàng)，點(diǎn)擊不同的標(biāo)簽就可以切換到不同的界面。如下圖：

我們之前都是用TabHost來(lái)實(shí)現(xiàn)，但是殊不知，TabHost并非是那么的簡(jiǎn)單，它的可擴(kuò)展性非常的差，不能隨意地定制Tab項(xiàng)顯示的內(nèi)容，而且運(yùn)行還要依賴于ActivityGroup。ActivityGroup原本主要是用于為每一個(gè)TabHost的子項(xiàng)管理一個(gè)單獨(dú)的Activity，但目前已經(jīng)被廢棄了。下面就借助Fragment來(lái)完成類似于TabHost一般的效果。

先實(shí)現(xiàn)主界面布局main_layout.xml：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
 
<FrameLayout
android:id="@+id/content"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" >
</FrameLayout>
 
<View
android:layout_width="match_parent"
android:layout_height="0.5dp"
android:background="#000000" />
 
<LinearLayout
android:layout_width="match_parent"
android:layout_height="60dp"
android:background="#ffffff"
android:orientation="horizontal" >
 
<RelativeLayout
android:id="@+id/message_layout"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" >
 
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:orientation="vertical" >
 
<ImageView
android:id="@+id/message_image"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_gravity="center_horizontal"
android:src="@drawable/ic_launcher" />
 
<TextView
android:id="@+id/message_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="消息"
android:textColor="#82858b" />
</LinearLayout>
</RelativeLayout>
 
<View
android:layout_width="0.5dp"
android:layout_height="match_parent"
android:background="#000000" />
 
<RelativeLayout
android:id="@+id/contacts_layout"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" >
 
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:orientation="vertical" >
 
<ImageView
android:id="@+id/contacts_image"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_gravity="center_horizontal"
android:src="@drawable/ic_launcher" />
 
<TextView
android:id="@+id/contacts_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="聯(lián)系人"
android:textColor="#82858b" />
</LinearLayout>
</RelativeLayout>
 
<View
android:layout_width="0.5dp"
android:layout_height="match_parent"
android:background="#000000" />
 
<RelativeLayout
android:id="@+id/news_layout"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" >
 
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:orientation="vertical" >
 
<ImageView
android:id="@+id/news_image"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_gravity="center_horizontal"
android:src="@drawable/ic_launcher" />
 
<TextView
android:id="@+id/news_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="動(dòng)態(tài)"
android:textColor="#82858b" />
</LinearLayout>
</RelativeLayout>
 
<View
android:layout_width="0.5dp"
android:layout_height="match_parent"
android:background="#000000" />
 
<RelativeLayout
android:id="@+id/setting_layout"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" >
 
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:orientation="vertical" >
 
<ImageView
android:id="@+id/setting_image"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_gravity="center_horizontal"
android:src="@drawable/ic_launcher" />
 
<TextView
android:id="@+id/setting_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="設(shè)置"
android:textColor="#82858b" />
</LinearLayout>
</RelativeLayout>
</LinearLayout>
 
</LinearLayout>

這段布局代碼雖然有點(diǎn)長(zhǎng)，但其實(shí)主要就分為兩部分。第一個(gè)部分就是FrameLayout，這里只是給FrameLayout的id設(shè)置成content，并沒(méi)有在里面添加任何具體的內(nèi)容，因?yàn)榫唧w的內(nèi)容是要在后面動(dòng)態(tài)進(jìn)行添加的。第二個(gè)部分就是FrameLayout下面的LinearLayout，這個(gè)LinearLayout中包含的就是整個(gè)類似于TabHost的布局?？梢钥吹剑覀儗⑦@個(gè)LinearLayout又等分成了四份，每一份中都會(huì)顯示一個(gè)ImageView和一個(gè)TextView。ImageView用于顯示當(dāng)前Tab的圖標(biāo)，TextView用于顯示當(dāng)前Tab的標(biāo)題。

既然是等分成了四分，那接下來(lái)我們自然要去分別實(shí)現(xiàn)四個(gè)Fragment和它們的布局了。新建一個(gè)message_layout.xml作為消息界面的布局，代碼如下所示：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
 
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:orientation="vertical" >
 
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:src="@drawable/ic_launcher" />
 
<TextView
android:id="@+id/message"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:padding="10dp"
android:text="這是消息界面"
android:textSize="20sp" />
</LinearLayout>
 
</RelativeLayout>

其他三個(gè)界面類似就不一 一列出。然后要去創(chuàng)建對(duì)應(yīng)這個(gè)布局的Fragment。新建MessageFragment繼承自Fragment，代碼如下所示：

public class MessageFragment extends Fragment{
 private TextView tv;
 public View onCreateView(LayoutInflater inflater, ViewGroup container,
  Bundle savedInstanceState) {
 View messageLayout = inflater.inflate(R.layout.message, container, false);
 tv=(TextView) messageLayout.findViewById(R.id.message);
 tv.setText("哈哈哈哈哈哈");
 return messageLayout;
 }
 
}

我們也依次創(chuàng)建其他三個(gè)布局的Fragment。最后是MainActivity,代碼如下：

public class MainActivity extends Activity implements OnClickListener {
/**
* 用于展示消息的Fragment
*/
private MessageFragment messageFragment;
 
/**
* 用于展示聯(lián)系人的Fragment
*/
private ContactsFragment contactsFragment;
 
/**
* 用于展示動(dòng)態(tài)的Fragment
*/
private NewsFragment newsFragment;
 
/**
* 用于展示設(shè)置的Fragment
*/
private SettingFragment settingFragment;
 
/**
* 消息界面布局
*/
private View messageLayout;
 
/**
* 聯(lián)系人界面布局
*/
private View contactsLayout;
 
/**
* 動(dòng)態(tài)界面布局
*/
private View newsLayout;
 
/**
* 設(shè)置界面布局
*/
private View settingLayout;
/**
* 用于對(duì)Fragment進(jìn)行管理
*/
private FragmentManager fragmentManager;
 
@Override
protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);
 initViews();
 fragmentManager = getFragmentManager();
 // 第一次啟動(dòng)時(shí)選中第0個(gè)tab
 setTabSelection(0);
}
 
/**
* 在這里獲取到每個(gè)需要用到的控件的實(shí)例，并給它們?cè)O(shè)置好必要的點(diǎn)擊事件。
*/
 
private void initViews() {
 messageLayout = findViewById(R.id.message_layout);
 contactsLayout = findViewById(R.id.contacts_layout);
 newsLayout = findViewById(R.id.news_layout);
 settingLayout = findViewById(R.id.setting_layout);
 messageLayout.setOnClickListener(this);
 contactsLayout.setOnClickListener(this);
 newsLayout.setOnClickListener(this);
 settingLayout.setOnClickListener(this);
}
 
@Override
public void onClick(View v) {
 switch (v.getId()) {
 case R.id.message_layout:
  // 當(dāng)點(diǎn)擊了消息tab時(shí)，選中第1個(gè)tab
  setTabSelection(0);
  break;
 case R.id.contacts_layout:
  // 當(dāng)點(diǎn)擊了聯(lián)系人tab時(shí)，選中第2個(gè)tab
  setTabSelection(1);
  break;
 case R.id.news_layout:
  // 當(dāng)點(diǎn)擊了動(dòng)態(tài)tab時(shí)，選中第3個(gè)tab
  setTabSelection(2);
  break;
 case R.id.setting_layout:
  // 當(dāng)點(diǎn)擊了設(shè)置tab時(shí)，選中第4個(gè)tab
  setTabSelection(3);
  break;
 default:
 break;
}
 
}
 
/**
* 根據(jù)傳入的index參數(shù)來(lái)設(shè)置選中的tab頁(yè)。
*
* @param index
* 每個(gè)tab頁(yè)對(duì)應(yīng)的下標(biāo)。0表示消息，1表示聯(lián)系人，2表示動(dòng)態(tài)，3表示設(shè)置。
*/
private void setTabSelection(int index) {
 // 每次選中之前先清楚掉上次的選中狀態(tài)
 clearSelection();
 // 開(kāi)啟一個(gè)Fragment事務(wù)
 FragmentTransaction transaction = fragmentManager.beginTransaction();
 // 先隱藏掉所有的Fragment，以防止有多個(gè)Fragment顯示在界面上的情況
 hideFragments(transaction);
 switch (index) {
 case 0:
  messageLayout.setBackgroundColor(0xff0000ff);
 
  if (messageFragment == null) {
  // 如果MessageFragment為空，則創(chuàng)建一個(gè)并添加到界面上
  messageFragment = new MessageFragment();
  transaction.add(R.id.content, messageFragment);
  } else {
  // 如果MessageFragment不為空，則直接將它顯示出來(lái)
  transaction.show(messageFragment);
  }
  break;
 case 1:
 // 當(dāng)點(diǎn)擊了聯(lián)系人tab時(shí)，改變控件的圖片和文字顏色
 contactsLayout.setBackgroundColor(0xff0000ff);
 if (contactsFragment == null) {
  // 如果ContactsFragment為空，則創(chuàng)建一個(gè)并添加到界面上
  contactsFragment = new ContactsFragment();
  transaction.add(R.id.content, contactsFragment);
 } else {
  // 如果ContactsFragment不為空，則直接將它顯示出來(lái)
  transaction.show(contactsFragment);
 }
 break;
 case 2:
 // 當(dāng)點(diǎn)擊了動(dòng)態(tài)tab時(shí)，改變控件的圖片和文字顏色
  newsLayout.setBackgroundColor(0xff0000ff);
  if (newsFragment == null) {
  // 如果NewsFragment為空，則創(chuàng)建一個(gè)并添加到界面上
  newsFragment = new NewsFragment();
  transaction.add(R.id.content, newsFragment);
  } else {
  // 如果NewsFragment不為空，則直接將它顯示出來(lái)
  transaction.show(newsFragment);
  }
  break;
 case 3:
  default:
  // 當(dāng)點(diǎn)擊了設(shè)置tab時(shí)，改變控件的圖片和文字顏色
  settingLayout.setBackgroundColor(0xff0000ff);
  if (settingFragment == null) {
  // 如果SettingFragment為空，則創(chuàng)建一個(gè)并添加到界面上
  settingFragment = new SettingFragment();
  transaction.add(R.id.content, settingFragment);
  } else {
  // 如果SettingFragment不為空，則直接將它顯示出來(lái)
  transaction.show(settingFragment);
  }
 break;
 }
 transaction.commit();
}
 
/**
* 將所有的Fragment都置為隱藏狀態(tài)。
*
* @param transaction
* 用于對(duì)Fragment執(zhí)行操作的事務(wù)
*/
private void hideFragments(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);
 }
}
 
/**
* 清除掉所有的選中狀態(tài)。
*/
private void clearSelection() {
 messageLayout.setBackgroundColor(0xffffffff);
 contactsLayout.setBackgroundColor(0xffffffff);
 newsLayout.setBackgroundColor(0xffffffff);
 settingLayout.setBackgroundColor(0xffffffff);
 }
}

這樣就實(shí)現(xiàn)了上面圖中的效果了。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論