Android 養成記-1--1.2 導航欄實現
阿新 • • 發佈：2018-12-04
先來幾張效果圖，看圖說話：
側邊欄
底部導航欄：
- 1 側邊導航欄實現
側邊導航欄主要是採用android 的佈局layout 來實現：
1) 在專案目錄下新建 wiget 目錄，新增NoSlideDrawerLayout.java
/** * Created by yangzi on 2018/10/12 0012. */ public class NoSlideDrawerLayout extends DrawerLayout { private View vMenu; private boolean mCanMove; public NoSlideDrawerLayout(Context context) { super(context); } public NoSlideDrawerLayout(Context context, AttributeSet attrs) { super(context, attrs); } public NoSlideDrawerLayout(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); } @Override protected void onFinishInflate() { super.onFinishInflate(); vMenu = findViewWithTag("menu"); } @Override public boolean onInterceptTouchEvent(MotionEvent ev) { if (ev.getAction() == MotionEvent.ACTION_DOWN) { int width = vMenu.getWidth(); mCanMove = ev.getX() >= width || ev.getX() < 15; } try { return mCanMove && super.onInterceptTouchEvent(ev); } catch (Exception e) { return false; } } }
2),在activity_main.xml 的佈局檔案裡用自定義的layout:
<?xml version="1.0" encoding="utf-8"?> <com.example.yangzi.yangzi_bottombar.widget.NoSlideDrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/dlMain" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true"> <include layout="@layout/main_container"/> <include layout="@layout/main_menu"/> </com.example.yangzi.yangzi_bottombar.widget.NoSlideDrawerLayout>
- 2, 底部導航欄的實現：
1）在activity中需要建立幾個不同fragment 物件，這樣在底部按不同按鈕時才會跳轉到不同的fragment：
public class MainActivity extends AppCompatActivity implements View.OnClickListener,View.OnTouchListener{ private DrawerLayout dlMain; private LinearLayout llTitleDate; private long[] mNotes = new long[2]; private TextView tvTitleMonth, tvTitleDay, tvTitle; //for nav bottom menu private Button tabCheck; private Button tabEdit; private Button tabMore; private Button tabUser; private Button tabAdd; private CheckFragment checkFragment; private EditFragment editFragment; private AddFragment addFragment; private UserFragment userFragment; private MoreFragment moreFragment; private Fragment[] fragments; private int index; private int currentTabIndex; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); dlMain = (DrawerLayout) findViewById(R.id.dlMain); llTitleDate = (LinearLayout) findViewById(R.id.llTitleDate); tvTitle = (TextView) findViewById(R.id.tvTitle); //for nav bottom menu tabCheck = (Button)this.findViewById(R.id.txt_check); tabEdit = (Button)this.findViewById(R.id.txt_edit); tabAdd = (Button)this.findViewById(R.id.txt_add); tabUser = (Button)this.findViewById(R.id.txt_user); tabMore = (Button)this.findViewById(R.id.txt_more); tabCheck.setOnClickListener(this); tabEdit.setOnClickListener(this); tabAdd.setOnClickListener(this); tabUser.setOnClickListener(this); tabMore.setOnClickListener(this); checkFragment = new CheckFragment(); editFragment = new EditFragment(); addFragment = new AddFragment(); userFragment = new UserFragment(); moreFragment = new MoreFragment(); fragments = new Fragment[] {checkFragment, editFragment,addFragment, userFragment, moreFragment}; getFragmentManager().beginTransaction().replace(R.id.flMainContainer, checkFragment).commit(); tabCheck.setSelected(true); } @Override public void onBackPressed() { if (dlMain.isDrawerOpen(Gravity.START)) { dlMain.closeDrawer(Gravity.START); } else { System.arraycopy(mNotes, 1, mNotes, 0, mNotes.length - 1); mNotes[mNotes.length - 1] = SystemClock.uptimeMillis(); if (SystemClock.uptimeMillis() - mNotes[0] < 1000) { finish(); } else { Toast.makeText(this, getString(R.string.exit_app_hint), Toast.LENGTH_SHORT).show(); } } } @Override protected void onDestroy() { super.onDestroy(); } //重置所有文字的選中狀態 public void selected(){ tabCheck.setSelected(false); tabEdit.setSelected(false); tabAdd.setSelected(false); tabUser.setSelected(false); tabMore.setSelected(false); } //隱藏所有Fragment public void hideAllFragment(FragmentTransaction transaction){ for (int i=0;i<=4;i++) { if (fragments[i]!=null) { transaction.hide(fragments[i]); } } } @Override public void onClick(View v) { FragmentTransaction transaction1 = getFragmentManager().beginTransaction(); hideAllFragment(transaction1); //index = 0; switch(v.getId()){ case R.id.llMenuAllPlayer: case R.id.txt_check: dlMain.closeDrawer(Gravity.START); selected(); tabCheck.setSelected(true); index = 0; break; case R.id.llMenuNoCategory: case R.id.txt_edit: selected(); tabEdit.setSelected(true); index = 1; break; case R.id.llMenuSchedule: case R.id.txt_add: selected(); tabAdd.setSelected(true); index = 2; break; case R.id.txt_user: selected(); tabUser.setSelected(true); index = 3; break; case R.id.txt_more: selected(); tabMore.setSelected(true); index = 4; break; case R.id.ivMainMenu: dlMain.openDrawer(Gravity.START); // mEventSetAdapter.changeAllData(mEventSets); break; case R.id.tvMenuAddEventSet: break; } if (currentTabIndex != index && index<5) { FragmentTransaction trx = getFragmentManager().beginTransaction(); trx.replace(R.id.flMainContainer, fragments[index]).commit(); } currentTabIndex = index; } @Override public boolean onTouch(View v, MotionEvent event) { return true; } /* 下面幾項用於checkFragment監聽觸控側滑刪除item的監聽事件 */ public interface MyTouchListener { /** * onTOuchEvent的實現 */ public void onTouchEvent(MotionEvent event); } /** * 儲存MyTouchListener介面的列表 */ private ArrayList<MyTouchListener> myTouchListeners = new ArrayList<MyTouchListener>(10); /** * 提供給Fragment通過getActivity()方法來註冊自己的觸控事件的方法 */ public void registerMyTouchListener(MyTouchListener listener) { myTouchListeners.add(listener); } /** * 提供給Fragment通過getActivity()方法來取消註冊自己的觸控事件的方法 */ public void unRegisterMyTouchListener(MyTouchListener listener) { myTouchListeners.remove(listener); } }
2） fragment 的個數可以自己定義，看你想實現的底部導航欄是多少個按鈕了，例如上面的checkFragment：
public class CheckFragment extends Fragment {
public static CheckFragment getInstance() {
return new CheckFragment();
}
private EditText fragmentName;
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.main_fragment, container, false);
fragmentName = view.findViewById(R.id.txt_edit);
fragmentName.setText("這是球員介面");
((MainActivity) getActivity()).registerMyTouchListener(mTouchListener);
return view;
}
/**
* 接收Activity的Touch回撥的物件
* 重寫其中的onTouchEvent函式，並進行該Fragment的邏輯處理
*/
private MainActivity.MyTouchListener mTouchListener = new MainActivity.MyTouchListener() {
@Override
public void onTouchEvent(MotionEvent event) {
Log.v("CheckFragment", "onTouch");
MainActivity activity = (MainActivity) getActivity();
activity.onTouch(null, event);
}
};
@Override
public void onDestroyView() {
super.onDestroyView();
/** 觸控事件的登出 */
((MainActivity) this.getActivity()).unRegisterMyTouchListener(mTouchListener);
}
3）這個底部導航欄對應的佈局如下：
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:id="@+id/content"
android:layout_above="@+id/tab_menu"
>
<FrameLayout
android:id="@+id/flMainContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</LinearLayout>
<LinearLayout
android:id="@+id/tab_menu"
android:layout_width="match_parent"
android:layout_height="58dp"
android:background="@drawable/bg"
android:layout_gravity="bottom"
android:layout_alignParentBottom="true"
android:orientation="horizontal">
<LinearLayout
android:id="@+id/tab_menu_button"
android:layout_width="match_parent"
android:layout_height="56dp"
android:orientation="horizontal"
android:layout_gravity="bottom">
<Button
android:id="@+id/txt_check"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@drawable/tab_menu_bg"
android:drawablePadding="3dp"
android:drawableTop="@drawable/tab_menu_user"
android:gravity="center"
android:textColor="@drawable/tab_menu_msg_text"
android:text="球員"
android:textSize = "12dp"/>
<Button
android:id="@+id/txt_edit"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@drawable/tab_menu_bg"
android:drawablePadding="3dp"
android:drawableTop="@drawable/tab_menu_msg"
android:gravity="center"
android:textColor="@drawable/tab_menu_edit_text"
android:text="賽程"
android:textSize = "12dp"/>
<Button
android:id="@+id/txt_add"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@drawable/tab_menu_bg"
android:drawablePadding="3dp"
android:drawableTop="@drawable/tab_menu_add"
android:gravity="center"
android:textColor="@drawable/tab_menu_add_text"
android:text="新增"
android:textSize = "12dp"/>
<Button
android:id="@+id/txt_user"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@drawable/tab_menu_bg"
android:drawablePadding="3dp"
android:drawableTop="@drawable/tab_menu_basketball"
android:gravity="center"
android:textColor="@drawable/tab_menu_user_text"
android:text="約球"
android:textSize = "12dp"/>
<Button
android:id="@+id/txt_more"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@drawable/tab_menu_bg"
android:drawablePadding="3dp"
android:drawableTop="@drawable/tab_menu_more"
android:gravity="center"
android:textColor="@drawable/tab_menu_more_text"
android:text="更多"
android:textSize = "12dp"/>
</LinearLayout>
<View
android:id="@+id/div_tab_bar"
android:layout_width="match_parent"
android:layout_height="4px"
android:background="@color/grey"
android:layout_above="@id/tab_menu_button"/>
</LinearLayout>
</RelativeLayout>這樣這個功能就算實現了，上gif圖：
其他的資原始檔，如點選導航欄按鈕，字型顏色改變，圖示改變等效果，就詳細不貼出了，可以下載下面的demo例項，都在裡面，能正常跑起來。demo下載連結
https://download.csdn.net/download/linzihahaha/10766558
以上參考了網路資源並修改。侵刪！！！