Android 아래쪽 탐색 표시 줄 의 세 가지 스타일 구현

1.효과 도 전시

움 직 이 는 그림 이 움 직 이지 않 았 다 면 아래 의 정적 그림 도 볼 수 있 습 니 다.

다음은 모든 실현 을 분석 하고 여 기 는 간단 한 효과 전시 만 할 수 있 으 며 현재 코드 를 바탕 으로 2 차 개발 을 할 수 있 습 니 다.
2.BottomNavigationView
    이것 은 Google 이 제공 하 는 아래쪽 내 비게 이 션 용 View 입 니 다.새 Activity 를 만 들 때'Bottom Navigation Activity'를 선택 하면 IDE 는 자동 으로 BottomNavigation View 를 사용 하여 해당 코드 를 생 성 할 수 있 습 니 다.
1.xml 에서 사용

 <android.support.design.widget.BottomNavigationView
    android:id="@+id/navigation"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginEnd="0dp"
    android:layout_marginStart="0dp"
    android:background="?android:attr/windowBackground"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:menu="@menu/navigation" />

    이 안에서 유일 하 게 주의해 야 할 것 은 app:menu 속성 입 니 다.네 비게 이 션 표시 줄 에 표 시 된 페이지 메뉴 가 어떤 지 지정 합 니 다.
2.menu 의 레이아웃 파일

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
 
  <item
    android:id="@+id/navigation_home"
    android:icon="@drawable/ic_home_black_24dp"
    android:title="@string/title_home" />
 
  <item
    android:id="@+id/navigation_dashboard"
    android:icon="@drawable/ic_dashboard_black_24dp"
    android:title="@string/title_dashboard" />
 
  <item
    android:id="@+id/navigation_notifications"
    android:icon="@drawable/ic_notifications_black_24dp"
    android:title="@string/title_notifications" />
 
</menu>

3.Activity 에서 호출

 private TextView mTextMessage;
 
  private BottomNavigationView.OnNavigationItemSelectedListener mOnNavigationItemSelectedListener
      = new BottomNavigationView.OnNavigationItemSelectedListener() {
 
    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
      switch (item.getItemId()) {
        case R.id.navigation_home:
          mTextMessage.setText(R.string.title_home);
          return true;
        case R.id.navigation_dashboard:
          mTextMessage.setText(R.string.title_dashboard);
          return true;
        case R.id.navigation_notifications:
          mTextMessage.setText(R.string.title_notifications);
          return true;
      }
      return false;
    }
  };
 
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_style1);
 
    mTextMessage = findViewById(R.id.message);
    BottomNavigationView navigation = findViewById(R.id.navigation);
    navigation.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener);
  }

    여기 서 프 리 젠 테 이 션 코드 는 모두 IDE 가 자동 으로 생 성 된 것 입 니 다.BottomNavigation View 는 아직 프로젝트 에서 실제 사용 한 적 이 없 기 때문에 여 기 는 너무 많은 분석 을 하지 않 고 사용 하기 어렵 지 않 습 니 다.상기 코드 는 우리 의 기본 적 인 사용 요 구 를 만족 시 킬 수 있 습 니 다.
3.RadioGroup+ViewPager
    이것 은 흔히 볼 수 있 는 것 입 니 다.아래 4 개의 tab 내 비게 이 션 단 추 는 서로 다른 페이지 로 전환 할 수 있 습 니 다.여기 페이지 는 ViewPager+Fragment 의 조합 을 사용 하여 미 끄 러 지 는 페이지 효 과 를 실 현 했 고 ViewPager 를 사용 하지 않 아 도 됩 니 다.이것 은 제품 의 정의 에 따라 사용 하면 됩 니 다.
1.레이아웃 파일

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
  tools:context=".style2.Style2Activity">
 
  <android.support.v4.view.ViewPager
    android:id="@+id/fragment_vp"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_above="@+id/tabs_rg" />
 
  <RadioGroup
    android:id="@+id/tabs_rg"
    android:layout_width="match_parent"
    android:layout_height="56dp"
    android:layout_alignParentBottom="true"
    android:background="#dcdcdc"
    android:orientation="horizontal">
 
    <RadioButton
      android:id="@+id/today_tab"
      style="@style/Custom.TabRadioButton"
      android:checked="true"
      android:drawableTop="@drawable/tab_sign_selector"
      android:text="  " />
 
    <RadioButton
      android:id="@+id/record_tab"
      style="@style/Custom.TabRadioButton"
      android:drawableTop="@drawable/tab_record_selector"
      android:text="  " />
 
    <RadioButton
      android:id="@+id/contact_tab"
      style="@style/Custom.TabRadioButton"
      android:drawableTop="@drawable/tab_contact_selector"
      android:text="   " />
 
    <RadioButton
      android:id="@+id/settings_tab"
      style="@style/Custom.TabRadioButton"
      android:drawableTop="@drawable/tab_setting_selector"
      android:text="  " />
  </RadioGroup>
</RelativeLayout>

2.Activity 클래스

public class Style2Activity extends AppCompatActivity {
 
  private ViewPager mViewPager;
  private RadioGroup mTabRadioGroup;
 
  private List<Fragment> mFragments;
  private FragmentPagerAdapter mAdapter;
 
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_style2);
    initView();
  }
 
  private void initView() {
    // find view
    mViewPager = findViewById(R.id.fragment_vp);
    mTabRadioGroup = findViewById(R.id.tabs_rg);
    // init fragment
    mFragments = new ArrayList<>(4);
    mFragments.add(BlankFragment.newInstance("  "));
    mFragments.add(BlankFragment.newInstance("  "));
    mFragments.add(BlankFragment.newInstance("   "));
    mFragments.add(BlankFragment.newInstance("  "));
    // init view pager
    mAdapter = new MyFragmentPagerAdapter(getSupportFragmentManager(), mFragments);
    mViewPager.setAdapter(mAdapter);
    // register listener
    mViewPager.addOnPageChangeListener(mPageChangeListener);
    mTabRadioGroup.setOnCheckedChangeListener(mOnCheckedChangeListener);
  }
 
  @Override
  protected void onDestroy() {
    super.onDestroy();
    mViewPager.removeOnPageChangeListener(mPageChangeListener);
  }
 
  private ViewPager.OnPageChangeListener mPageChangeListener = new ViewPager.OnPageChangeListener() {
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
 
    }
 
    @Override
    public void onPageSelected(int position) {
      RadioButton radioButton = (RadioButton) mTabRadioGroup.getChildAt(position);
      radioButton.setChecked(true);
    }
 
    @Override
    public void onPageScrollStateChanged(int state) {
 
    }
  };
 
  private RadioGroup.OnCheckedChangeListener mOnCheckedChangeListener = new RadioGroup.OnCheckedChangeListener() {
    @Override
    public void onCheckedChanged(RadioGroup group, int checkedId) {
      for (int i = 0; i < group.getChildCount(); i++) {
        if (group.getChildAt(i).getId() == checkedId) {
          mViewPager.setCurrentItem(i);
          return;
        }
      }
    }
  };
 
  private class MyFragmentPagerAdapter extends FragmentPagerAdapter {
 
    private List<Fragment> mList;
 
    public MyFragmentPagerAdapter(FragmentManager fm, List<Fragment> list) {
      super(fm);
      this.mList = list;
    }
 
    @Override
    public Fragment getItem(int position) {
      return this.mList == null ? null : this.mList.get(position);
    }
 
    @Override
    public int getCount() {
      return this.mList == null ? 0 : this.mList.size();
    }
  }
 
}

    여기 서 유일 하 게 주의해 야 할 것 은 두 개의 감청 사건 으로 아래쪽 네 비게 이 션 버튼 과 페이지 의 연결 을 실현 하 는 것 이다.
4.페이지 전환 기능 이 있 는 아래쪽 탐색
    많은 앱 의 하단 내 비게 이 션 표시 줄 중간 에 큰 버튼 이 있 는데 클릭 한 후에 보통 새로운 페이지 를 엽 니 다.여기 서 우리 가 실현 하고 자 하 는 것 은 바로 이런 하단 내 비게 이 션 입 니 다.
여전히 RadioGroup 을 사용 하여 만 듭 니 다.중간 에 있 는 tab 에서 우 리 는 먼저 빈 View 로 자 리 를 차지 한 다음 에 이 View 의 위치 에 큰 단 추 를 놓 아 덮어 씁 니 다.
1.레이아웃 파일

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
  tools:context=".style3.Style3Activity">
 
  <FrameLayout
    android:id="@+id/fragment_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_above="@+id/tabs_rg" />
 
  <RadioGroup
    android:id="@+id/tabs_rg"
    android:layout_width="match_parent"
    android:layout_height="56dp"
    android:layout_alignParentBottom="true"
    android:background="#dcdcdc"
    android:orientation="horizontal">
 
    <RadioButton
      android:id="@+id/today_tab"
      style="@style/Custom.TabRadioButton"
      android:checked="true"
      android:drawableTop="@drawable/tab_sign_selector"
      android:text="  " />
 
    <RadioButton
      android:id="@+id/record_tab"
      style="@style/Custom.TabRadioButton"
      android:drawableTop="@drawable/tab_record_selector"
      android:text="  " />
 
    <View style="@style/Custom.TabRadioButton" />
 
    <RadioButton
      android:id="@+id/contact_tab"
      style="@style/Custom.TabRadioButton"
      android:drawableTop="@drawable/tab_contact_selector"
      android:text="   " />
 
    <RadioButton
      android:id="@+id/settings_tab"
      style="@style/Custom.TabRadioButton"
      android:drawableTop="@drawable/tab_setting_selector"
      android:text="  " />
  </RadioGroup>
 
  <ImageView
    android:id="@+id/sign_iv"
    android:layout_width="80dp"
    android:layout_height="80dp"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"
    android:background="@android:color/transparent"
    android:src="@mipmap/sign" />
</RelativeLayout>

2.Activity 클래스

public class Style3Activity extends AppCompatActivity {
 
  private RadioGroup mTabRadioGroup;
  private SparseArray<Fragment> mFragmentSparseArray;
 
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_style3);
    initView();
  }
 
  private void initView() {
    mTabRadioGroup = findViewById(R.id.tabs_rg);
    mFragmentSparseArray = new SparseArray<>();
    mFragmentSparseArray.append(R.id.today_tab, BlankFragment.newInstance("  "));
    mFragmentSparseArray.append(R.id.record_tab, BlankFragment.newInstance("  "));
    mFragmentSparseArray.append(R.id.contact_tab, BlankFragment.newInstance("   "));
    mFragmentSparseArray.append(R.id.settings_tab, BlankFragment.newInstance("  "));
    mTabRadioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
      @Override
      public void onCheckedChanged(RadioGroup group, int checkedId) {
        //    fragment            ，    show()/hide()
        getSupportFragmentManager().beginTransaction().replace(R.id.fragment_container,
            mFragmentSparseArray.get(checkedId)).commit();
      }
    });
    //        
    getSupportFragmentManager().beginTransaction().add(R.id.fragment_container,
        mFragmentSparseArray.get(R.id.today_tab)).commit();
    findViewById(R.id.sign_iv).setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View v) {
        startActivity(new Intent(Style3Activity.this, SignActivity.class));
      }
    });
  }
 
}

주의:
    만약 에 여기 서 ViewPager 를 사용 하여 Fragment 를 보 여주 고 싶다 면 여기 RadioGroup 중간 에 자리 잡 은 View 가 있어 야 합 니 다.즉,이들 의 감청 사건 에서 연동 을 실현 할 때 이 View 의 존 재 를 여러 개 고려 해 야 합 니 다.
코드 주소:https://gitee.com/afei_/BottomTabbar
안 드 로 이 드 밑 에 있 는 네 비게 이 션 표시 줄 의 세 가지 스타일 구현 에 관 한 글 은 여기까지 입 니 다.더 많은 안 드 로 이 드 밑 에 있 는 네 비게 이 션 표시 줄 내용 은 예전 의 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 응원 부탁드립니다!