Android,App 에서 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 표시 줄 의 부상 기능 을 실현 하 는 데 단점 이 있다 면 이 앱 이 부상 창 을 표시 할 수 있 는 권한 을 부여 하지 않 으 면 이 기능 은 계 륵 이 된다 는 것 이다.
총결산
이상 은 이 글 의 모든 내용 입 니 다.본 논문 의 내용 이 안 드 로 이 드 개발 자 여러분 의 학습 이나 업무 에 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 면 댓 글 을 남 겨 주 십시오.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Kotlin의 기초 - 2부지난 글에서는 Kotlin이 무엇인지, Kotlin의 특징, Kotlin에서 변수 및 데이터 유형을 선언하는 방법과 같은 Kotlin의 기본 개념에 대해 배웠습니다. 유형 변환은 데이터 변수의 한 유형을 다른 데이터...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.