仿御泥坊 完美實現電商類專案底部選項卡切換Fragment頁面
阿新 • • 發佈:2019-02-13
此為Activity頁面XML佈局
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".HomeActivity" >
//為fragment建立一個容器
<FrameLayout
android:id="@+ id/main_content"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#d7cbcb" />
//底部radiobutton切換
<RadioGroup
android:id="@+ id/tab_menu"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<RadioButton
android:id="@+id/tab_home"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_weight="1"
android:button="@null"
android:checked="true"
android:drawableTop="@drawable/tabhome_selector"
android:gravity="center_horizontal|bottom"
android:paddingTop="2dp"
android:text="@string/tabhome"
android:textColor="@color/tab_selector_tv_color" />
<RadioButton
android:id="@+id/tab_classify"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_weight="1"
android:button="@null"
android:drawableTop="@drawable/classify_selector"
android:gravity="center_horizontal|bottom"
android:paddingTop="2dp"
android:text="@string/tabclassfiy"
android:textColor="@color/tab_selector_tv_color" />
<RadioButton
android:id="@+id/tab_shop"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_weight="1"
android:button="@null"
android:drawableTop="@drawable/shopping_selector"
android:gravity="center_horizontal|bottom"
android:paddingTop="2dp"
android:text="@string/tabshopping"
android:textColor="@color/tab_selector_tv_color" />
<RadioButton
android:id="@+id/tab_user"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_weight="1"
android:button="@null"
android:drawableTop="@drawable/user_selector"
android:gravity="center_horizontal|bottom"
android:paddingTop="2dp"
android:text="@string/tabuser"
android:textColor="@color/tab_selector_tv_color" />
</RadioGroup>
</LinearLayout>
此為主Activity程式碼 附帶一個雙擊返回鍵退出應用
public class HomeActivity extends FragmentActivity {
// 退出時的時間
private long mExitTime;
private home_frag home;
private classify_frag classify;
private shopping_frag shop;
private user_frag user;
private RadioGroup tab_menu;
@SuppressWarnings("unused")
private RadioButton tab_home;
private FragmentManager manager;
private FragmentTransaction transaction;
private NetworkInfo networkInfo;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_home);
info();
// 設定fragment
home = new home_frag();
classify = new classify_frag();
manager = getSupportFragmentManager();
shop = new shopping_frag();
user = new user_frag();
transaction = manager.beginTransaction();
FragmentTransaction trnTransaction = getSupportFragmentManager().beginTransaction();
trnTransaction.add(R.id.main_content, home, "home");
trnTransaction.add(R.id.main_content, classify, "classify");
trnTransaction.add(R.id.main_content, shop, "shop");
trnTransaction.add(R.id.main_content, user, "user");
switchTag("home");
trnTransaction.commit();
// 監聽切換fragment
infoView();
}
// 獲取控制元件
private void info() {
tab_home = (RadioButton) findViewById(R.id.tab_home);
}
public void infoView() {
tab_menu = (RadioGroup) findViewById(R.id.tab_menu);
tab_menu.setOnCheckedChangeListener(new OnCheckedChangeListener() {
@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
switch (checkedId) {
case R.id.tab_home:
switchTag("home");
break;
case R.id.tab_classify:
switchTag("classify");
break;
case R.id.tab_shop:
switchTag("shop");
break;
case R.id.tab_user:
switchTag("user");
break;
default:
break;
}
}
});
}
private void switchTag(String str) {
FragmentTransaction transaction = manager.beginTransaction();
if (str.equals("home")) {
transaction.show(home);
transaction.hide(classify);
transaction.hide(shop);
transaction.hide(user);
} else if (str.equals("classify")) {
transaction.show(classify);
transaction.hide(home);
transaction.hide(shop);
transaction.hide(user);
} else if (str.equals("shop")) {
transaction.show(shop);
transaction.hide(classify);
transaction.hide(home);
transaction.hide(user);
} else if (str.equals("user")) {
transaction.show(user);
transaction.hide(classify);
transaction.hide(shop);
transaction.hide(home);
}
transaction.commit();
}
// 對返回鍵進行監聽
@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
if (keyCode == KeyEvent.KEYCODE_BACK && event.getRepeatCount() == 0) {
exit();
return true;
}
return super.onKeyDown(keyCode, event);
}
@SuppressLint("ShowToast")
public void exit() {
if ((System.currentTimeMillis() - mExitTime) > 2000) {
Toast.makeText(HomeActivity.this, "再按一次退出應用", 0).show();
mExitTime = System.currentTimeMillis();
} else {
finish();
System.exit(0);
}
}
}
之後就是建立四個fragment 在這裡就不往上上傳了
以下再將RadioButton的狀態選擇器為大家上傳
這是其中一個只需要更改圖片即可
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/bottom_tab_user_selected" android:state_checked="true"></item>
<item android:drawable="@drawable/bottom_tab_user_normal" android:state_checked="false"></item>
</selector>
字型顏色的改變顏色
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:color="#fc6b87"/>
<item android:state_checked="false" android:color="#9c9c9c"/>
<item android:color="#9c9c9c"/>
</selector>