Android,타 오 바 오 하단 아이콘 탐색 표시 줄 구현

지난 편 에서 투명 주 제 를 간단하게 사용 한Activity 는 위 챗 오른쪽 상단 의 대화 상 자 를 모방 합 니 다.오전 에 두 시간 동안 타 오 바 오 밑 에 있 는 네 비게 이 션 표시 줄 의 실현 을 연 구 했 습 니 다.인터넷 에서 하 는 방법 도 많 습 니 다.오늘 저 는 기본 적 인 컨트롤 에 구 조 를 더 하 는 방식 을 사 용 했 습 니 다.사용자 정의 스타일,컨트롤 등 으로 이 루어 지지 않 았 습 니 다.그대로 입 니까?먼저 효과 도 를 보 겠 습 니 다.

어떻게 실현 되 는 지 구체 적 으로 살 펴 보 겠 습 니 다.절차 에 따라 하 세 요.
주 인터페이스 그리 기
activity_layout.xml 코드 는 다음 과 같 습 니 다.

<?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"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:fitsSystemWindows="true"
  android:orientation="vertical"
  tools:context=".MainActivity">
 
  <FrameLayout
    android:id="@+id/fragment_container"
    android:layout_marginBottom="50dp"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
 
  </FrameLayout>
 
  <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:layout_alignParentBottom="true"
    android:background="@color/noCheckedColor">
 
    <RelativeLayout
      android:gravity="center"
      android:layout_width="wrap_content"
      android:layout_height="match_parent">
    <ImageView
      android:layout_marginTop="5dp"
      android:id="@+id/title_image"
      android:layout_marginLeft="18dp"
      android:layout_width="40dp"
      android:layout_height="40dp"
      android:background="@drawable/taobao" />
 
      <LinearLayout
        android:gravity="center"
        android:orientation="vertical"
        android:id="@+id/first_page_layout"
        android:layout_width="60dp"
        android:layout_height="wrap_content">
      <ImageView
        android:id="@+id/first_page_icon"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:background="@drawable/firstpage" />
 
      <TextView
        android:textColor="#000000"
        android:id="@+id/first_page_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="  " />
      </LinearLayout>
 
    </RelativeLayout>
 
      <LinearLayout
        android:layout_marginLeft="26dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:weightSum="4">
 
        <LinearLayout
          android:id="@+id/micro_tao_layout"
          android:layout_width="0dp"
          android:layout_height="match_parent"
          android:layout_weight="1"
          android:gravity="center"
          android:orientation="vertical">
 
          <ImageView
            android:id="@+id/microtao_icon"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:background="@drawable/microtao" />
 
          <TextView
            android:textColor="#000000"
            android:id="@+id/microtao_text"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="  " />
        </LinearLayout>
 
        <LinearLayout
          android:id="@+id/message_layout"
          android:layout_width="0dp"
          android:layout_height="match_parent"
          android:layout_weight="1"
          android:gravity="center"
          android:orientation="vertical">
 
          <ImageView
            android:id="@+id/message_icon"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:background="@drawable/message" />
 
          <TextView
            android:textColor="#000000"
            android:id="@+id/message_text"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="  " />
        </LinearLayout>
 
 
        <LinearLayout
          android:id="@+id/buycar_layout"
          android:layout_width="0dp"
          android:layout_height="match_parent"
          android:layout_weight="1"
          android:gravity="center"
          android:orientation="vertical">
 
          <ImageView
            android:id="@+id/buycar_icon"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:background="@drawable/buycar" />
 
          <TextView
            android:textColor="#000000"
            android:id="@+id/buycar_text"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="   " />
        </LinearLayout>
 
        <LinearLayout
          android:id="@+id/myfile_layout"
          android:layout_width="0dp"
          android:layout_height="match_parent"
          android:layout_weight="1"
          android:gravity="center"
          android:orientation="vertical">
 
          <ImageView
            android:id="@+id/myfile_icon"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:background="@drawable/myfile" />
 
          <TextView
            android:textColor="#000000"
            android:id="@+id/myfile_text"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="    " />
        </LinearLayout>
      </LinearLayout>
    </LinearLayout>
</RelativeLayout>

인터페이스의 논리 제어 Activity:
MainActivity.java 코드:

package com.hfut.enmulatetaobaonavbar;
 
import android.graphics.Color;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
 
import com.hfut.enmulatetaobaonavbar.fragment.BuycarFragment;
import com.hfut.enmulatetaobaonavbar.fragment.FirstPageFragment;
import com.hfut.enmulatetaobaonavbar.fragment.MessageFragment;
import com.hfut.enmulatetaobaonavbar.fragment.MicroTaoFragment;
import com.hfut.enmulatetaobaonavbar.fragment.MyfileFragment;
 
/**
 * @author why
 * @date 2018-10-3 11:12:39
 */
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
 
  LinearLayout microTaoLay;
  LinearLayout messageLay;
  LinearLayout buycarLay;
  LinearLayout myfileLay;
  LinearLayout firstPageLay;
 
  ImageView microTaoIcon;
  ImageView messageIcon;
  ImageView buycarIcon;
  ImageView myfileIcon;
  ImageView firstPageIcon;
  ImageView titleImage;
 
  TextView microTaoText;
  TextView messageText;
  TextView buycarText;
  TextView myfileText;
 
 
  FragmentManager manager;
  FragmentTransaction transaction;
  Fragment firFragment, microFragment, messageFragment, buycarFragment, myfileFragment;
 
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
 
    manager = getSupportFragmentManager();
    transaction = manager.beginTransaction();
    firFragment = new FirstPageFragment();
    transaction.add(R.id.fragment_container, firFragment);
    transaction.commit();
    initUI();
  }
 
  private void initUI() {
    microTaoLay = findViewById(R.id.micro_tao_layout);
    messageLay = findViewById(R.id.message_layout);
    buycarLay = findViewById(R.id.buycar_layout);
    myfileLay = findViewById(R.id.myfile_layout);
    firstPageLay = findViewById(R.id.first_page_layout);
    firstPageLay.setVisibility(View.INVISIBLE);
 
    microTaoIcon = findViewById(R.id.microtao_icon);
    messageIcon = findViewById(R.id.message_icon);
    buycarIcon = findViewById(R.id.buycar_icon);
    myfileIcon = findViewById(R.id.myfile_icon);
    firstPageIcon = findViewById(R.id.first_page_icon);
    titleImage = findViewById(R.id.title_image);
 
    microTaoText = findViewById(R.id.microtao_text);
    messageText = findViewById(R.id.message_text);
    buycarText = findViewById(R.id.buycar_text);
    myfileText = findViewById(R.id.myfile_text);
 
    microTaoLay.setOnClickListener(this);
    messageLay.setOnClickListener(this);
    buycarLay.setOnClickListener(this);
    myfileLay.setOnClickListener(this);
    firstPageLay.setOnClickListener(this);
 
  }
 
  @Override
  public void onClick(View v) {
    transaction = manager.beginTransaction();
    hideFragment(transaction);//     Fragment
    switch (v.getId()) {
      case R.id.micro_tao_layout:
        microFragment = new MicroTaoFragment();
        transaction.add(R.id.fragment_container, microFragment);
        transaction.commit();
        microTaoIcon.setImageDrawable(getResources().getDrawable(R.drawable.microtao_choosen));
        microTaoText.setTextColor(Color.RED);
 
        //      ，        
        if (firstPageLay.getVisibility() != View.VISIBLE) {
          firstPageLay.setVisibility(View.VISIBLE);
          titleImage.setVisibility(View.INVISIBLE);
        }
 
        break;
      case R.id.message_layout:
        messageFragment = new MessageFragment();
        transaction.add(R.id.fragment_container, messageFragment);
        transaction.commit();
        messageIcon.setImageDrawable(getResources().getDrawable(R.drawable.message_choosen));
        messageText.setTextColor(Color.RED);
 
        //      ，        
        if (firstPageLay.getVisibility() != View.VISIBLE) {
          firstPageLay.setVisibility(View.VISIBLE);
          titleImage.setVisibility(View.INVISIBLE);
        }
        break;
      case R.id.buycar_layout:
        buycarFragment = new BuycarFragment();
        transaction.add(R.id.fragment_container, buycarFragment);
        transaction.commit();
        buycarIcon.setImageDrawable(getResources().getDrawable(R.drawable.buycar_choosen));
        buycarText.setTextColor(Color.RED);
 
        //      ，        
        if (firstPageLay.getVisibility() != View.VISIBLE) {
          firstPageLay.setVisibility(View.VISIBLE);
          titleImage.setVisibility(View.INVISIBLE);
        }
        break;
      case R.id.myfile_layout:
        myfileFragment = new MyfileFragment();
        transaction.add(R.id.fragment_container, myfileFragment);
        transaction.commit();
        myfileIcon.setImageDrawable(getResources().getDrawable(R.drawable.myfile_choosen));
        myfileText.setTextColor(Color.RED);
 
        //      ，        
        if (firstPageLay.getVisibility() != View.VISIBLE) {
          firstPageLay.setVisibility(View.VISIBLE);
          titleImage.setVisibility(View.INVISIBLE);
        }
        break;
 
      case R.id.first_page_layout:
        firFragment = new FirstPageFragment();
        transaction.add(R.id.fragment_container, firFragment);
        transaction.commit();
        firstPageLay.setVisibility(View.INVISIBLE);
        titleImage.setVisibility(View.VISIBLE);
 
      default:
        break;
    }
  }
 
  private void hideFragment(FragmentTransaction transaction) {
    if (firFragment != null) {
      transaction.remove(firFragment);
 
    }
    if (microFragment != null) {
      transaction.remove(microFragment);
      microTaoIcon.setImageDrawable(getResources().getDrawable(R.drawable.microtao));
      microTaoText.setTextColor(Color.BLACK);
 
    }
    if (messageFragment != null) {
      transaction.remove(messageFragment);
      messageIcon.setImageDrawable(getResources().getDrawable(R.drawable.message));
      messageText.setTextColor(Color.BLACK);
    }
    if (buycarFragment != null) {
      transaction.remove(buycarFragment);
      buycarIcon.setImageDrawable(getResources().getDrawable(R.drawable.buycar));
      buycarText.setTextColor(Color.BLACK);
    }
    if (myfileFragment != null) {
      transaction.remove(myfileFragment);
      myfileIcon.setImageDrawable(getResources().getDrawable(R.drawable.myfile));
      myfileText.setTextColor(Color.BLACK);
    }
  }
}

Fragment 에 대응 하 는 레이아웃 코드(여기 서 간소화 하기 위해 모든 Fragment 는 같은 간단 한 레이아웃 을 사용 합 니 다):
fragment_layout.xml 코드:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:gravity="center"
  android:layout_width="match_parent"
  android:layout_height="match_parent">
 
  <TextView
    android:gravity="center"
    android:id="@+id/tip_message"
    android:textSize="30sp"
    android:text="  "
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />
 
</LinearLayout>

사용자 정의 Fragment 코드(여기 서 하나만 드 리 겠 습 니 다.다른 것 은 똑 같 습 니 다.Fragment 레이아웃 의 텍스트 내용 만 수정 하 였 습 니 다):
First PageFragment.java 코드:

package com.hfut.enmulatetaobaonavbar.fragment;
 
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
 
import com.hfut.enmulatetaobaonavbar.R;
 
/**
 * author:why
 * created on: 2018/10/3 12:11
 * description:
 */
public class FirstPageFragment extends Fragment {
 
  TextView message;
  @Nullable
  @Override
  public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {
    View view = inflater.inflate(R.layout.fragment_layout, container, false);
    message=view.findViewById(R.id.tip_message);
    message.setText("    ");
    return view;
  }
}

위 에 몇 가지 주요 구성 부분 이 있 는데 다른 소 재 는 소개 하지 않 겠 습 니 다.그리고 많은 코드 가 최적화 할 수 있 는 부분 도 많이 고려 하지 않 았 습 니 다.다음은 몇 가지 주의해 야 할 점 을 말씀 드 리 겠 습 니 다.

Fragment,Fragment Manager,Fragment Transaction 의 결합 사용

타 오 바 오 아이콘 과 첫 페이지 메뉴 항목 의 전환

Fragment 의 가방 을 잘못 사용 하지 마 세 요.android.app.Fragment 가 아 닙 니 다

FramLayout 를 채 울 때 Fragment Transaction 의 내용 추가 및 삭제 에 주의 하 십시오

4.567917.실현 의 본질은 바로 클릭 이벤트 와 FramLayout 가 Fragment 와 결합 하여 이 루어 진 것 이다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.