仿安智市場UI框架佈局之fragment+tabhost底部菜單

時間 2019-11-07

標籤市場框架佈局 fragment+tabhost fragment tabhost 底部菜單欄目 Android 简体版

原文原文鏈接

第一部分就是大家如今看的這個貼，主要功能：實現fragment_+tabhost來搭建整個app的大致UI框架，底部是一個可切換的選項卡（安智市場中的底部選項卡的切換動畫效果略過，沒寫，太困了，碼完字去睡覺）。

第二部分：也就是這個即將寫的下一個帖子，由於今天實在太晚了，明天還要上班（Zzzzz...），主要功能：使用viewpagerindicator控件，實現左右滑動加載分頁數據，還有android 4.2更新的新特性：Fragment in fragment（嵌套）。

這部分很快會更新。真的。

<br>如今來看看安智市場的app效果

<br>而後來看看如今這個帖子要實現的功能的demo效果

不會很難看吧，見笑了！呵呵！！！動畫效果沒作。木有時間。

<br>如今來講說代碼，其實我以前在eoe寫過一個相似的，不過如今理解更深入，有改進一部分。
首先必須是佈局文件啦，主要的佈局文件是：activity_main.xml

<TabHost
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@android :id/tabhost"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="@+id/realtabcontent"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
<TabWidget
android:id="@android :id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:tabStripEnabled="false"
android:background="@drawable/bg_nav"
android:layout_weight="0"/>
<FrameLayout
android:id="@android :id/tabcontent"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="0"/>
</LinearLayout>
</TabHost>

複製代碼

也木有啥，就是一個tabwidget控件，是底部的選項卡按鈕的，而後，第一個frameLayout是上圖中實際內容的部分。
接下來，最重要的，固然是fragment咯，首先若是有和我同樣無知的孩子，仍是得先了解一下什麼是fragment吧。
傳送門：http://developer.android.com/reference/android/support/v4/app/Fragment.html
而後，我小小的說明一下咯，fragment是在android sdk 3.0以後出現的，爲了給用戶帶來更好的UE，解決不一樣屏幕分辯率的動態和靈活UI設計。大屏幕如平板小屏幕如手機，平板電腦的設計使得其有更多的空間來放更多的UI組件，而多出來的空間存放UI使其會產生更多的交互，從而誕生了fragments。fragment有它本身的一套生命週期機制，和activity同樣。不過它必須擁有一個activity宿主，以此管理這些fragments。要使用fragment，必須引入v4類庫包（android-support-v4.jar），這樣雖然fragment是在3.0之後出現的，也一樣能夠在低版本中使用。
上代碼吧，我詞窮。

package org.mcdull.activity;
import org.mcdull.mainfragment.FifthFragment;
import org.mcdull.mainfragment.FourthFragment;
import org.mcdull.mainfragment.FristFragment;
import org.mcdull.mainfragment.SecondFragment;
import org.mcdull.mainfragment.ThirdFragment;
import org.mcdull.util.DummyTabContent;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.view.LayoutInflater;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.TabHost;
import android.widget.TabWidget;
import android.widget.TextView;
/**
* @description：
*
* @author： hades
*
* @update： 2013-3-7
*
* @version： 1.0
*
* @email：mcdull525@foxmail.com
*/
public class MainActivity extends FragmentActivity {
private TabHost mTabHost;
TabWidget tabWidget;
private FragmentTransaction mFt;
private RelativeLayout mTabIndicator_home, mTabIndicator_app,
mTabIndicator_game, mTabIndicator_top, mTabIndicator_setting;
private FristFragment mFristFragment;
private SecondFragment mSecondFragment;
private ThirdFragment mThirdFragment;
private FourthFragment mFourthFragment;
private FifthFragment mFifthFragment;
private FragmentManager mFm = getSupportFragmentManager();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
findTabView();
mTabHost.setup();
TabHost.OnTabChangeListener tabChangeListener = new TabHost.OnTabChangeListener() {
@Override
public void onTabChanged(String tabId) {
mFt = mFm.beginTransaction();
// TODO Auto-generated method stub
if (mFristFragment != null) {
mFt.hide(mFristFragment);
}
if (mSecondFragment != null) {
mFt.hide(mSecondFragment);
}
if (mThirdFragment != null) {
mFt.hide(mThirdFragment);
}
if (mFourthFragment != null) {
mFt.hide(mFourthFragment);
}
if (mFifthFragment != null) {
mFt.hide(mFifthFragment);
}
if (tabId.equalsIgnoreCase("home")) {
attachTabHome();
} else if (tabId.equalsIgnoreCase("app")) {
attachTabApp();
} else if (tabId.equalsIgnoreCase("game")) {
attachTabGame();
} else if (tabId.equalsIgnoreCase("top")) {
attachTabTop();
} else if (tabId.equalsIgnoreCase("setting")) {
attachTabSetting();
}
// 執行Fragment事務（添加。移除，替換fragment）
mFt.commit();
}
};
mTabHost.setOnTabChangedListener(tabChangeListener);
initTab();
//默認跳到第幾個選項卡
mTabHost.setCurrentTab(0);
}
/**
* 找到TabHost的相關佈局，並繪製每個選項卡
*/
private void findTabView() {
mTabHost = (TabHost) findViewById(android.R.id.tabhost);
tabWidget = (TabWidget) findViewById(android.R.id.tabs);
LinearLayout layout = (LinearLayout) mTabHost.getChildAt(0);
TabWidget tabWidget = (TabWidget) layout.getChildAt(1);
mTabIndicator_home = (RelativeLayout) LayoutInflater.from(this)
.inflate(R.layout.tab_indicator, tabWidget, false);
ImageView ivTab1 = (ImageView) mTabIndicator_home.getChildAt(0);
ivTab1.setImageResource(R.drawable.selector_menu_home_btu);
TextView tvTab1 = (TextView) mTabIndicator_home.getChildAt(1);
tvTab1.setText(R.string.home);
mTabIndicator_app = (RelativeLayout) LayoutInflater.from(this).inflate(
R.layout.tab_indicator, tabWidget, false);
ImageView ivTab2 = (ImageView) mTabIndicator_app.getChildAt(0);
ivTab2.setImageResource(R.drawable.selector_menu_app_btu);
TextView tvTab2 = (TextView) mTabIndicator_app.getChildAt(1);
tvTab2.setText(R.string.app);
mTabIndicator_game = (RelativeLayout) LayoutInflater.from(this)
.inflate(R.layout.tab_indicator, tabWidget, false);
ImageView ivTab3 = (ImageView) mTabIndicator_game.getChildAt(0);
ivTab3.setImageResource(R.drawable.selector_menu_game_btu);
TextView tvTab3 = (TextView) mTabIndicator_game.getChildAt(1);
tvTab3.setText(R.string.game);
mTabIndicator_top = (RelativeLayout) LayoutInflater.from(this).inflate(
R.layout.tab_indicator, tabWidget, false);
ImageView ivTab4 = (ImageView) mTabIndicator_top.getChildAt(0);
ivTab4.setImageResource(R.drawable.selector_menu_top_btu);
TextView tvTab4 = (TextView) mTabIndicator_top.getChildAt(1);
tvTab4.setText(R.string.top);
mTabIndicator_setting = (RelativeLayout) LayoutInflater.from(this)
.inflate(R.layout.tab_indicator, tabWidget, false);
ImageView ivTab5 = (ImageView) mTabIndicator_setting.getChildAt(0);
ivTab5.setImageResource(R.drawable.selector_menu_setting_btu);
TextView tvTab5 = (TextView) mTabIndicator_setting.getChildAt(1);
tvTab5.setText(R.string.setting);
}
/**
* 如下一系列方法都是判斷fragment是否已經建立，防止重複add進FragmentTransaction
* FragmentTransaction中提供了show,add,replace,hide等一系列方法，能夠根據不一樣的需求
* 使用,這裏demo使用了show方法，是由於避免使用replace以後會從新建立fragment,從新加載數據
*/
private void attachTabHome() {
if (mFristFragment == null) {
mFristFragment = new FristFragment();
mFt.add(R.id.realtabcontent, mFristFragment, "home");
} else {
mFt.show(mFristFragment);
}
}
private void attachTabApp() {
if (mSecondFragment == null) {
mSecondFragment = new SecondFragment();
mFt.add(R.id.realtabcontent, mSecondFragment, "app");
} else {
mFt.show(mSecondFragment);
}
}
private void attachTabGame() {
if (mThirdFragment == null) {
mThirdFragment = new ThirdFragment();
mFt.add(R.id.realtabcontent, mThirdFragment, "game");
} else {
mFt.show(mThirdFragment);
}
}
private void attachTabTop() {
if (mFourthFragment == null) {
mFourthFragment = new FourthFragment();
mFt.add(R.id.realtabcontent, mFourthFragment, "top");
} else {
mFt.show(mFourthFragment);
}
}
private void attachTabSetting() {
if (mFifthFragment == null) {
mFifthFragment = new FifthFragment();
mFt.add(R.id.realtabcontent, mFifthFragment, "setting");
} else {
mFt.show(mFifthFragment);
}
}
/**
* 初始化選項卡
*/
private void initTab() {
TabHost.TabSpec tSpecHome = mTabHost.newTabSpec("home");
tSpecHome.setIndicator(mTabIndicator_home);
tSpecHome.setContent(new DummyTabContent(getBaseContext()));
mTabHost.addTab(tSpecHome);
TabHost.TabSpec tSpecApp = mTabHost.newTabSpec("app");
tSpecApp.setIndicator(mTabIndicator_app);
tSpecApp.setContent(new DummyTabContent(getBaseContext()));
mTabHost.addTab(tSpecApp);
TabHost.TabSpec tSpecGame = mTabHost.newTabSpec("game");
tSpecGame.setIndicator(mTabIndicator_game);
tSpecGame.setContent(new DummyTabContent(getBaseContext()));
mTabHost.addTab(tSpecGame);
TabHost.TabSpec tSpecTop = mTabHost.newTabSpec("top");
tSpecTop.setIndicator(mTabIndicator_top);
tSpecTop.setContent(new DummyTabContent(getBaseContext()));
mTabHost.addTab(tSpecTop);
TabHost.TabSpec tSpecSetting = mTabHost.newTabSpec("setting");
tSpecSetting.setIndicator(mTabIndicator_setting);
tSpecSetting.setContent(new DummyTabContent(getBaseContext()));
mTabHost.addTab(tSpecSetting);
}
}

複製代碼

這裏須要提醒幾點：第一，這個mainActivity繼承與fragmentActivity；
第二： private FragmentManager mFm = getSupportFragmentManager(); 第一點繼承了fragmentActivity後，可經過 getSupportFragmentManager方法拿到FragmentManager，這個類提供了與Activity內部的Fragment對象進行交互的接口，其餘的看代碼撒。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。