摘要:底部導航欄布局思路本項目的主界面設計了底部導航欄,為了方便后續布局的搭建,創建一個底部導航欄的框架,修改主界面布局為,利用包裹標題欄與界面內容,將各界面內容設置為,再用一個包裹底部導航欄,在內部用三個來顯示三個按鈕具體代碼如下限定大小
底部導航欄布局 思路
本項目的主界面設計了底部導航欄,為了方便后續布局的搭建,創建一個底部導航欄UI的框架,修改主界面布局為 RelativeLayout ,利用 LinearLayout 包裹標題欄與界面內容,將各界面內容設置為 FrameLayout ,再用一個 LinearLayout 包裹底部導航欄,在內部用三個 RelativeLayout 來顯示三個按鈕
具體代碼如下:
activity_main.xml底部導航欄邏輯 思路
首先需要為三個按鈕添加監聽事件,然后根據所在界面的不同,導航欄中的按鈕和文字切換不同狀態,在界面內容也根據按鈕的選中狀態切換不同的界面
具體代碼如下:
MainActivitypackage cn.edu.lt.android.boxueguapp; import android.content.Context; import android.content.SharedPreferences; import android.graphics.Color; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.KeyEvent; import android.view.View; import android.widget.FrameLayout; import android.widget.ImageView; import android.widget.LinearLayout; import android.widget.RelativeLayout; import android.widget.TextView; import android.widget.Toast; public class MainActivity extends AppCompatActivity implements View.OnClickListener { //界面內容 private FrameLayout mBodyLayout; //底部按鈕欄 public LinearLayout mBottomLayout; //底部按鈕 private View mCourseBtn; private View mExercisesBtn; private View mMyInfoBtn; private TextView tv_course; private TextView tv_exercises; private TextView tv_myInfo; private ImageView iv_course; private ImageView iv_exercises; private ImageView iv_myInfo; //標題欄 private TextView tv_back; private TextView tv_main_title; private RelativeLayout rl_title_bar; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); init(); initBottomBar(); setListener(); setInitStatus(); } /** * 設置初始選擇 */ private void setInitStatus() { clearBottomImageState(); setSelectedStatus(0); createView(0); } /** * 為每個按鈕設置監聽方法 */ private void setListener() { for (int i = 0; i < mBottomLayout.getChildCount(); i++) { mBottomLayout.getChildAt(i).setOnClickListener(this); } } /** * 獲取底部導航欄上的控件 */ private void initBottomBar() { mBottomLayout = (LinearLayout) findViewById(R.id.main_bottom_bar); mCourseBtn = (RelativeLayout) findViewById(R.id.bottom_bar_course_btn); mExercisesBtn = (RelativeLayout) findViewById(R.id.bottom_bar_exercises_btn); mMyInfoBtn = (RelativeLayout) findViewById(R.id.bottom_bar_myinfo_btn); tv_course = (TextView) findViewById(R.id.bottom_bar_text_course); tv_exercises = (TextView) findViewById(R.id.bottom_bar_text_exercises); tv_myInfo = (TextView) findViewById(R.id.bottom_bar_text_myinfo); iv_course = (ImageView) findViewById(R.id.bottom_bar_image_course); iv_exercises = (ImageView) findViewById(R.id.bottom_bar_image_exercises); iv_myInfo = (ImageView) findViewById(R.id.bottom_bar_image_myinfo); } /** * 獲取界面上的UI控件 */ private void init() { tv_back = (TextView) findViewById(R.id.tv_back); tv_main_title = (TextView) findViewById(R.id.tv_main_title); tv_main_title.setText("博學谷課程"); rl_title_bar = (RelativeLayout) findViewById(R.id.title_bar); rl_title_bar.setBackgroundColor(Color.parseColor("#30B4FF")); tv_back.setVisibility(View.GONE);//不顯示返回按鈕 initBodyLayout(); } /** * 界面內容 */ private void initBodyLayout() { mBodyLayout = (FrameLayout) findViewById(R.id.main_body); } /** * 控件的點擊事件 * @param v */ @Override public void onClick(View v) { switch (v.getId()) { //課程的點擊事件 case R.id.bottom_bar_course_btn: clearBottomImageState(); selectDisplayView(0); break; //習題的點擊事件 case R.id.bottom_bar_exercises_btn: clearBottomImageState(); selectDisplayView(1); break; //我的點擊事件 case R.id.bottom_bar_myinfo_btn: clearBottomImageState(); selectDisplayView(2); break; default: break; } } /** * 顯示對應的頁面 * @param i */ private void selectDisplayView(int i) { removeAllView(); createView(i); setSelectedStatus(i); } /** * 設置底部按鈕選中狀態 * @param i */ private void setSelectedStatus(int i) { switch (i){ case 0: mCourseBtn.setSelected(true); iv_course.setImageResource(R.drawable.main_course_icon_selected); tv_course.setTextColor(Color.parseColor("#0097F7")); rl_title_bar.setVisibility(View.VISIBLE); tv_main_title.setText("博學谷課程"); break; case 1: mExercisesBtn.setSelected(true); iv_exercises.setImageResource(R.drawable.main_exercises_icon_selected); tv_exercises.setTextColor(Color.parseColor("#0097F7")); rl_title_bar.setVisibility(View.VISIBLE); tv_main_title.setText("博學谷習題"); break; case 2: mMyInfoBtn.setSelected(true); iv_myInfo.setImageResource(R.drawable.main_my_icon_selected); tv_myInfo.setTextColor(Color.parseColor("#0097F7")); rl_title_bar.setVisibility(View.VISIBLE); tv_main_title.setText("我"); break; } } /** * 選擇視圖 * @param viewIndex */ private void createView(int viewIndex) { switch (viewIndex){ case 0: //TODO:課程界面 break; case 1: //習題界面 break; case 2: //我的界面 break; } } /** * 移除不需要的視圖 */ private void removeAllView() { for (int i = 0;i運行效果2000){//導入java.lang的包 Toast.makeText(this,"再按一次退出博學谷",Toast.LENGTH_LONG).show(); exitTime = System.currentTimeMillis(); }else { MainActivity.this.finish(); if (readLoginStatus()){ //如果退出此應用時是登錄狀態,則需要清除登錄狀態,同時需清除登錄時的用戶名 clearLoginStatus(); } System.exit(0); } return true; } return super.onKeyDown(keyCode, event); } /** * 清除SharedPreferences中的登錄狀態 */ private void clearLoginStatus() { SharedPreferences sp = getSharedPreferences("loginInfo", Context.MODE_PRIVATE); SharedPreferences.Editor editor = sp.edit();//獲取編輯器 editor.putBoolean("isLogin", false);//清除登錄狀態 editor.putString("loginUserName", "");//清除登錄時的用戶名 editor.commit();//提交修改 } /** * 獲取SharedPreferences中的登錄狀態 * @return */ private boolean readLoginStatus() { SharedPreferences sp = getSharedPreferences("loginInfo", Context.MODE_PRIVATE); boolean isLogin = sp.getBoolean("isLogin", false); return isLogin; } }
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/68116.html
摘要:我的模塊界面思路由于此界面只是主界面中的一部分,所以無需創建一個新的,只需要在目錄下新建一個布局即可,同理導入圖片至目錄下具體代碼如下點擊登錄分割線效果播放記錄設置工具類思路由于本項目在保存和獲取數據時會多次用到用戶名,因此創建一 我的模塊界面 思路 由于此界面只是主界面中的一部分,所以無需創建一個新的 Activity ,只需要在 layout 目錄下新建一個布局即可,同理導入圖片至...
摘要:設置界面思路設置界面有三個功能,分別為修改密碼設置密保和退出登錄。 設置界面 思路 設置界面有三個功能,分別為修改密碼、設置密保和退出登錄。創建 SettingActivity ,修改布局為 LinearLayout 具體代碼如下: activity_setting.xml ...
閱讀 1834·2021-09-14 18:03
閱讀 2271·2019-08-30 15:48
閱讀 1127·2019-08-30 14:09
閱讀 511·2019-08-30 12:55
閱讀 2732·2019-08-29 11:29
閱讀 1490·2019-08-26 13:43
閱讀 2317·2019-08-26 13:30
閱讀 2373·2019-08-26 12:17