Android,App 에서 Tab 표시 줄 띄 우기 기능 구현

12589 단어 android부유 하 다tab
우선'배 고 프 세 요?'네 비게 이 션 Tab 표시 줄 에 떠 있 는 효과 그림 입 니 다.

위의 그림 에서'분류','정렬','선별'이 app 의 맨 위 에 떠 있 는 것 을 볼 수 있 습 니 다.상 태 는 ScrollView(ScrollView 가 아 닐 수도 있 습 니 다.여기 서 미 끄 러 지 는 UI 컨트롤 을 ScrollView 로 간주 하 세 요)의 스크롤 에 따라 달라 집 니 다.이러한 내 비게 이 션 탭 표시 줄 이 떠 있 는 역할 은 모두 가 느 낄 수 있 을 것 이 라 고 믿 습 니 다.탭 표시 줄 은 ScrollView 등의 스크롤 에 따라 화면 밖으로 미 끄 러 지지 않 고 사용자 와 의 상호작용 성과 편리 성 을 증가 시 킵 니 다.
위의 효 과 를 보고 모두 가 해 보고 싶 어 할 거 라 고 믿 습 니 다.그럼 시작 합 시다.
우선 Tab 표시 줄 의 상태 변 화 는 ScrollView 의 미끄럼 거 리 를 감청 해 야 한 다 는 것 을 알 아야 합 니 다.ScrollView 의 미끄럼 거 리 를 어떻게 얻 습 니까?다른 편 을 볼 수 있다.<안 드 로 이 드 에서 ScrollView 슬라이딩 거리 모니터 구현 방법>여 기 는 더 많은 서술 에 불과 하 다.
자,위 에 있 는 것 에 따라 스크롤 뷰 가 미 끄 러 지 는 것 에 대한 감청 을 받 았 습 니 다.다음 에 생각해 야 할 문 제 는 어떻게 Tab 표시 줄 이 떠 있 는 효 과 를 실현 할 수 있 습 니까?여기 서 제시 한 방법 은 두 가지 가 있 습 니 다.첫 번 째 는 Window Manager 를 사용 하여 View 가 상단 에 떠 있 는 것 을 동적 으로 추가 하 는 것 입 니 다.두 번 째 는 ScrollView 가 미 끄 러 지면 서 Tab 표시 줄 의 레이아웃 위 치 를 다시 설정 하 는 것 입 니 다.
먼저 첫 번 째 실현 방법 을 살 펴 보 겠 습 니 다.먼저 xml 레이아웃 입 니 다.
Activity 의 레이아웃,activitymain.xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical">

  <RelativeLayout
    android:id="@+id/rl_title"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:background="@color/colorPrimary">

    <ImageView
      android:id="@+id/iv_back"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_centerVertical="true"
      android:layout_marginLeft="10dp"
      android:src="@drawable/new_img_back" />

    <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_centerInParent="true"
      android:text="@string/app_name"
      android:textColor="@android:color/white"
      android:textSize="18sp" />

  </RelativeLayout>

  <com.yuqirong.tabsuspenddemo.view.MyScrollView
    android:id="@+id/mScrollView"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:background="#cccccc"
      android:orientation="vertical">

      <ImageView
        android:id="@+id/iv_pic"
        android:layout_width="match_parent"
        android:layout_height="180dp"
        android:scaleType="centerCrop"
        android:src="@drawable/ic_bg_personal_page" />

      <include layout="@layout/tab_layout" />

      <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="90dp"
        android:layout_marginBottom="5dp"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:layout_marginTop="15dp"
        android:background="@android:color/white"
        android:orientation="horizontal">

      </LinearLayout>

      <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="90dp"
        android:layout_marginBottom="5dp"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:layout_marginTop="15dp"
        android:background="@android:color/white"
        android:orientation="horizontal">

      </LinearLayout>

      <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="90dp"
        android:layout_marginBottom="5dp"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:layout_marginTop="15dp"
        android:background="@android:color/white"
        android:orientation="horizontal">

      </LinearLayout>

      <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="90dp"
        android:layout_marginBottom="5dp"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:layout_marginTop="15dp"
        android:background="@android:color/white"
        android:orientation="horizontal">

      </LinearLayout>

      <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="90dp"
        android:layout_marginBottom="5dp"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:layout_marginTop="15dp"
        android:background="@android:color/white"
        android:orientation="horizontal">

      </LinearLayout>


      <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="90dp"
        android:layout_marginBottom="5dp"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:layout_marginTop="15dp"
        android:background="@android:color/white"
        android:orientation="horizontal">

      </LinearLayout>

      <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="90dp"
        android:layout_marginBottom="5dp"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:layout_marginTop="15dp"
        android:background="@android:color/white"
        android:orientation="horizontal">

      </LinearLayout>
      
    </LinearLayout>
  </com.yuqirong.tabsuspenddemo.view.MyScrollView>
</LinearLayout>
Tab 표시 줄 의 레이아웃,tablayout.xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:id="@+id/ll_tab"
  android:layout_width="match_parent"
  android:layout_height="40dp"
  android:background="@color/colorPrimary"
  android:orientation="horizontal">

  <TextView
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:gravity="center"
    android:text="  "
    android:textColor="@android:color/white"
    android:textSize="18sp" />

  <TextView
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:gravity="center"
    android:text="  "
    android:textColor="@android:color/white"
    android:textSize="18sp" />

  <TextView
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:gravity="center"
    android:text="  "
    android:textColor="@android:color/white"
    android:textSize="18sp" />

</LinearLayout>
위의 레이아웃 에 있 는 많은 공백 LinearLayout 는 주로 스크롤 뷰 를 늘 리 고 효과 도 는 다음 과 같 습 니 다.

그리고 onCreate(Bundle saved InstanceState)를 살 펴 보 겠 습 니 다.

@Override
protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  getSupportActionBar().hide();
  setContentView(R.layout.activity_main);
  mScrollView = (MyScrollView) findViewById(R.id.mScrollView);
  mScrollView.setOnScrollListener(this);
  ll_tab = (LinearLayout) findViewById(R.id.ll_tab);
  windowManager = (WindowManager) getSystemService(Context.WINDOW_SERVICE);
}
우 리 는 먼저onCreate(Bundle savedInstanceState)에 ScrollView 에 미끄럼 거리 모니터 를 추가 하고 window Manager 의 대상 을 얻 었 다.또 주의해 야 할 것 은 우리 가 호출 한getSupportActionBar().hide();제목 표시 줄(MainActivity 가 AppCompat Activity 를 계승 했다)이다.제목 표시 줄 이 존재 하기 때문에 부상 창 y 축의 값 을 계산 할 때 제목 표시 줄 의 높이 를 추가 해 야 합 니 다(물론 제목 표시 줄 을 유지 하고 계산 할 때 제목 표시 줄 의 높이 를 추가 할 수도 있 습 니 다^ ^!).
그리고onWindowFocusChanged(boolean hasFocus)에서 Tab 표시 줄 의 높이,getTop()값 등 을 얻어 아래 에 준비 할 수 있 도록 합 니 다.

@Override
public void onWindowFocusChanged(boolean hasFocus) {
  super.onWindowFocusChanged(hasFocus);
  if (hasFocus) {
    tabHeight = ll_tab.getHeight();
    tabTop = ll_tab.getTop();
    scrollTop = mScrollView.getTop();
  }
}
이후 미끄럼 모니터 의 리 셋 방법onScroll(int scrollY)에서 디 스 플레이 를 제어 할 지,아니면 부상 창 을 숨 길 지 제어 한다.

@Override
public void onScroll(int scrollY) {
  Log.i(TAG, "scrollY = " + scrollY + ", tabTop = " + tabTop);
  if (scrollY > tabTop) {
 //      
    if (!isShowWindow) {
      showWindow();
    }
  } else {
 //      
    if (isShowWindow) {
      removeWindow();
    }
  }
}
위의 코드 는 비교적 간단 해서 내 가 너무 많이 서술 할 필요 가 없다.다음은removeWindow() ,showWindow()두 가지 방법 이다.

//   window
private void removeWindow() {
  if (ll_tab_temp != null)
    windowManager.removeView(ll_tab_temp);
  isShowWindow = false;
}

//   window
private void showWindow() {
  if (ll_tab_temp == null) {
    ll_tab_temp = LayoutInflater.from(this).inflate(R.layout.tab_layout, null);
  }
  if (layoutParams == null) {
    layoutParams = new WindowManager.LayoutParams();
    layoutParams.type = WindowManager.LayoutParams.TYPE_PHONE; //      ，    2002，           ，       
    layoutParams.format = PixelFormat.RGBA_8888;
    layoutParams.flags = WindowManager.LayoutParams.FLAG_NOT_TOUCH_MODAL
        | WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE; //      ，       ，        
    layoutParams.gravity = Gravity.TOP; //        
    layoutParams.width = WindowManager.LayoutParams.MATCH_PARENT;
    layoutParams.height = tabHeight;
    layoutParams.x = 0; //   X   
    layoutParams.y = scrollTop; //   Y   
  }
  windowManager.addView(ll_tab_temp, layoutParams);
  isShowWindow = true;
}
이 두 가지 방법 도 매우 간단 하고 주석 이 있어 서 모두 가 이해 할 수 있 을 것 이 라 고 믿는다.
마지막 으로 AndroidManifest.xml 에서 부상 창 을 표시 할 수 있 는 권한 을 신청 하 는 것 을 잊 지 마 세 요.

<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" />
여기까지 입 니 다.전체 코드 는 여기까지 입 니 다.함께 효 과 를 봅 시다.

주의해 야 할 것 은 이러한 방법 으로 Tab 표시 줄 의 부상 기능 을 실현 하 는 데 단점 이 있다 면 이 앱 이 부상 창 을 표시 할 수 있 는 권한 을 부여 하지 않 으 면 이 기능 은 계 륵 이 된다 는 것 이다.
총결산
이상 은 이 글 의 모든 내용 입 니 다.본 논문 의 내용 이 안 드 로 이 드 개발 자 여러분 의 학습 이나 업무 에 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 면 댓 글 을 남 겨 주 십시오.
Android APP 사용자 정의 글꼴 구현 방법 사용
Android,시 크 한 CheckBox 효과 구현

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage