Android Listview는 탭 슬라이딩 전환 기능을 새로 고치기 위해 위아래로 끌어옵니다.
곧 두 개의 탭 전환이 가능한 페이지를 만들 예정입니다. 두 페이지에는 공통 설명 정보 영역이 있습니다. 두 탭 모두 목록 보기로 끌어서 새로 고칠 수 있습니다. 페이지 중앙에 있는 탭 부분을 위로 밀어서 이동을 멈춥니다. 아래로 당겨서 원래 위치로 돌아가세요.
전체 요구 사항은 대략 위 그림과 같습니다. 풀업 새로 고침 및 풀다운 새로 고침에 대한 스크린샷은 없습니다. 이 효과를 얻으십시오.
1. 일반적인 생각은 단순함을 위해 많은 제스처 문제를 모니터링하고 싶지 않기 때문에 이를 기회적으로 구현하기 위해 다음 방법을 채택합니다.
a. 목록보기의 헤더로 공개 영역이 추가됩니다. 두 개의 전환 탭도 헤더로 추가됩니다.
b. 페이지 레이아웃시 목록보기 위에 레이어를 추가하고 탭 레이아웃을 넣습니다. 내부. 이 탭의 레이아웃은 목록 보기의 헤더에 있는 레이아웃과 동일합니다.
c. 나중에 목록 보기 슬라이드 시 페이지의 탭 레이아웃 표시 및 숨기기는 onScroll 함수에서 처리됩니다. 목록보기의 탭 레이아웃이 화면 상단에 도달하면 페이지의 탭 레이아웃이 표시됩니다. 목록보기가 아래로 슬라이드되면 인터페이스
탭 전환에서 탭 전체가 그림자로 나타납니다. tab1과 tab2의 데이터가 다르기 때문에 3개의 데이터 소스가 사용됩니다. 탭이 전환되면 데이터가 앞뒤로 전환됩니다. 탭을 클릭하면 현재 표시된 탭이 기억됩니다. pos가 재배치되면 편차가 발생합니다)
데모의 일반적인 프로세스는 새로 고침 처리를 추가하지 않고 이렇습니다. 실제 프로젝트에서는 더 많은 로직이 처리되지만 데모는 너무 복잡하게 작성하고 싶지 않습니다. 아무도 안 읽어서 그냥 제가 직접 읽고 조금 적어봅니다.)
2. 아직 이해하지 못하는 사람들이 있을 수 있습니다.
a. 첫 번째는 두 개의 보호 계층이 있는 인터페이스 레이아웃입니다. 상단의 탭 레이아웃. 레이아웃 up_float_first_activity.xml
<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="@color/white_color" > <com.example.toolbox.upFloat.PullToRefreshListView xmlns:ptr="http://schemas.android.com/apk/res-auto" android:id="@+id/up_float_listview" android:layout_width="fill_parent" android:layout_height="fill_parent" android:cacheColorHint="@color/white_color" android:divider="@color/transpant" android:dividerHeight="0dip" android:fadingEdge="none" android:fastScrollEnabled="false" android:listSelector="@color/transpant" android:smoothScrollbar="true" android:visibility="visible" ptr:ptrHeaderTextColor="@color/color_333333" ptr:ptrMode="both" /> <include layout="@layout/up_float_tab_layout" android:visibility="gone" /> </FrameLayout>
b. 탭 레이아웃, up_float_tab_layout.xml, 텍스트는 모두 선택기를 사용하므로 선택 시 강조 표시됩니다
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/up_float_tab_root" android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="@color/white_color" android:minHeight="44dip" android:orientation="vertical" > <LinearLayout android:layout_width="fill_parent" android:layout_height="44dip" android:minHeight="44dip" android:orientation="horizontal" > <TextView android:id="@+id/up_fload_tab1" android:layout_width="0dip" android:layout_height="match_parent" android:layout_weight="1" android:background="@drawable/show_event_detail_tab_selector" android:gravity="center" android:text="@string/up_float_tab1" android:textColor="@color/show_event_detail_tab_text_selector" android:textSize="17sp" /> <TextView android:id="@+id/up_float_tab2" android:layout_width="0dip" android:layout_height="match_parent" android:layout_weight="1" android:background="@drawable/show_event_detail_tab_selector" android:gravity="center" android:text="@string/up_float_tab2" android:textColor="@color/show_event_detail_tab_text_selector" android:textSize="17sp" /> </LinearLayout> <View android:layout_width="match_parent" android:layout_height="@dimen/split_one_pixels" android:background="@color/color_purple_bd6aff" /> </LinearLayout>
c. 부품 레이아웃 up_float_common_layout.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="@color/white_color" android:orientation="vertical" > <ImageView android:id="@+id/show_event_detail_bg" android:layout_width="fill_parent" android:layout_height="125dip" android:contentDescription="@string/empty" android:scaleType="fitXY" android:src="@drawable/pic1" /> <TextView android:id="@+id/show_event_detail_desc" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="24dip" android:layout_marginLeft="15dip" android:layout_marginRight="15dip" android:layout_marginTop="24dip" android:text="@string/up_float_desc" android:textColor="@color/color_black_333333" android:textSize="14sp" /> <View style="@style/horizontal_gray_divider" /> <View style="@style/horizontal_gray_divider" /> </LinearLayout>
d. 다음은 메인 페이지의 코드입니다
package com.example.toolbox.upFloat.activity; import java.util.ArrayList; import android.os.Bundle; import android.support.v7.app.ActionBarActivity; import android.view.LayoutInflater; import android.view.View; import android.view.View.OnClickListener; import android.widget.AbsListView; import android.widget.AbsListView.OnScrollListener; import android.widget.ArrayAdapter; import android.widget.LinearLayout; import android.widget.ListView; import android.widget.TextView; import com.example.toolbox.R; import com.example.toolbox.upFloat.PullToRefreshBase; import com.example.toolbox.upFloat.PullToRefreshBase.OnRefreshListener2; import com.example.toolbox.upFloat.PullToRefreshListView; /** * * * @author sunyoujun * */ public class UpFloatFirstActivity extends ActionBarActivity implements OnClickListener { public static final int TYPE_TAB_1 = 1; public static final int TYPE_TBA_2 = 2; private int tab2Pos = 0; private int tab2OffsetY = 0; private int tab1Pos = 0; private int tab1OffsetY = 0; private ArrayList<String> item = new ArrayList<String>(); private ArrayList<String> item1 = new ArrayList<String>(); private ArrayList<String> item2 = new ArrayList<String>(); protected PullToRefreshListView listView; private LinearLayout titleView; private LayoutInflater infater; private LinearLayout titleTab; private LinearLayout titleFloatTab; private TextView latestTv; private TextView latestFloatTv; private TextView hotTv; private TextView hotFloatTv; private int currentType = TYPE_TAB_1; private ArrayAdapter<String> adapter; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.up_float_first_activity); findViews(); setViewsListener(); updateTabSelectState(); initData(); initListView(); } private void findViews() { listView = (PullToRefreshListView) findViewById(R.id.up_float_listview); titleFloatTab = (LinearLayout) findViewById(R.id.up_float_tab_root); latestFloatTv = (TextView) titleFloatTab.findViewById(R.id.up_float_tab2); hotFloatTv = (TextView) titleFloatTab.findViewById(R.id.up_fload_tab1); infater = LayoutInflater.from(this); titleView = (LinearLayout) infater.inflate(R.layout.up_float_common_layout, null); titleTab = (LinearLayout) infater.inflate(R.layout.up_float_tab_layout, null); latestTv = (TextView) titleTab.findViewById(R.id.up_float_tab2); hotTv = (TextView) titleTab.findViewById(R.id.up_fload_tab1); } private void setViewsListener() { latestTv.setOnClickListener(this); hotTv.setOnClickListener(this); latestFloatTv.setOnClickListener(this); hotFloatTv.setOnClickListener(this); updateTabSelectState(); } /** * 更新tab栏选中状态 */ private void updateTabSelectState() { boolean isTab1 = (currentType == TYPE_TAB_1); hotTv.setSelected(isTab1); hotFloatTv.setSelected(isTab1); latestTv.setSelected(!isTab1); latestFloatTv.setSelected(!isTab1); } private void initData() { for (int i = 1; i <= 50; i++) { item1.add("tab1-- item ---" + i); item2.add("tab2-- item ---" + i); } } private void initListView() { setListViewListener(); listViewAddHeader(); listViewLoadData(); } private void setListViewListener() { listView.setOnRefreshListener(new OnRefreshListener2<ListView>() { @Override public void onPullDownToRefresh(PullToRefreshBase<ListView> refreshView) { // loadNews(); } @Override public void onPullUpToRefresh(PullToRefreshBase<ListView> refreshView) { // loadOlds(); } }); listView.setOnScrollListener(new OnScrollListener() { @Override public void onScrollStateChanged(AbsListView view, int scrollState) { } @Override public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) { if (firstVisibleItem < 2) {// 悬浮tab出现时机,listview含有三个header titleFloatTab.setVisibility(View.GONE); } else titleFloatTab.setVisibility(View.VISIBLE); ; } }); } private void listViewAddHeader() { listView.getRefreshableView().addHeaderView(titleView); listView.getRefreshableView().addHeaderView(titleTab); } protected void listViewLoadData() { item.clear(); item.addAll(item1); adapter = new ArrayAdapter<String>(this, R.layout.list_item, android.R.id.text1, item); listView.setAdapter(adapter); } @Override public void onClick(View v) { switch (v.getId()) { case R.id.up_fload_tab1: switchTabtList(true); break; case R.id.up_float_tab2: switchTabtList(false); break; default: break; } } private void switchTabtList(boolean isTab1) { if (isTab1) { if (currentType == TYPE_TAB_1) { return;// 说明点击的是相同的活动列表,不用改变 } else {// tab2 switch tab1 tab2Pos = listView.getRefreshableView().getFirstVisiblePosition(); tab2OffsetY = getOffsetY(); currentType = TYPE_TAB_1; item2.clear(); item2.addAll(item); item.clear(); item.addAll(item1); } } else { if (currentType == TYPE_TBA_2) { return; } else {// tab1 switch tab2 tab1Pos = listView.getRefreshableView().getFirstVisiblePosition(); tab1OffsetY = getOffsetY(); currentType = TYPE_TBA_2; item1.clear(); item1.addAll(item); item.clear(); item.addAll(item2); } } updateTabSelectState(); relocationLastPos(); } private int getOffsetY(){ View view = listView.getRefreshableView().getChildAt(0); return view != null ? view.getTop() : 0; } /** * 重新定位到上次的位置 */ private void relocationLastPos() { if (adapter != null) { adapter.notifyDataSetChanged(); } if (currentType == TYPE_TAB_1) { listView.post(new Runnable() { @Override public void run() { listView.getRefreshableView().setSelectionFromTop(tab1Pos, tab1OffsetY); } }); } else { listView.post(new Runnable() { @Override public void run() { listView.getRefreshableView().setSelectionFromTop(tab2Pos, tab2OffsetY); } }); } } }
요약
a 위의 데모는 실제로 슬라이드 업 효과만 구현합니다. 두 가지 큰 제한이 있습니다. 탭의 항목 레이아웃은 자유롭게 전환할 수 있도록 일관되어야 합니다. 둘째, 두 탭은 왼쪽이나 오른쪽으로 슬라이드할 수 없습니다.
b 위의 내용은 두 개 또는 하나의 탭에만 적합합니다. 제어해야 하는 상태가 많을수록 실수하기 쉽고, 위의 데이터가 반환될 때 항목에 추가할 수는 없지만, 새로 고침 탭과 현재 표시된 탭 간의 관계를 판단해야 합니다.
c 다른 오픈소스 프로젝트를 읽은 후 시간이 있으면 실제 여러 탭을 만들고 왼쪽과 오른쪽으로 전환할 수 있는 데모를 작성하겠습니다.
위 내용은 이 글의 전체 내용입니다. 모든 분들이 안드로이드 소프트웨어 프로그래밍을 배우는데 도움이 되길 바랍니다.
안드로이드 리스트뷰 풀업, 다운 새로고침 탭 슬라이딩 전환 기능에 대한 더 많은 글은 PHP 중국어 홈페이지를 참고해주세요!

핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제











일부 애플리케이션이 제대로 작동하지 않는 회사의 보안 소프트웨어에 대한 문제 해결 및 솔루션. 많은 회사들이 내부 네트워크 보안을 보장하기 위해 보안 소프트웨어를 배포 할 것입니다. ...

시스템 도킹의 필드 매핑 처리 시스템 도킹을 수행 할 때 어려운 문제가 발생합니다. 시스템의 인터페이스 필드를 효과적으로 매핑하는 방법 ...

데이터베이스 작업에 MyBatis-Plus 또는 기타 ORM 프레임 워크를 사용하는 경우 엔티티 클래스의 속성 이름을 기반으로 쿼리 조건을 구성해야합니다. 매번 수동으로 ...

많은 응용 프로그램 시나리오에서 정렬을 구현하기 위해 이름으로 이름을 변환하는 솔루션, 사용자는 그룹으로, 특히 하나로 분류해야 할 수도 있습니다.

IntellijideAultimate 버전을 사용하여 봄을 시작하십시오 ...

전자 상거래 플랫폼에서 SKU 및 SPU 테이블의 디자인에 대한 자세한 설명이 기사는 전자 상거래 플랫폼에서 SKU 및 SPU의 데이터베이스 설계 문제, 특히 사용자 정의 판매를 처리하는 방법에 대해 논의 할 것입니다 ...

Java 객체 및 배열의 변환 : 캐스트 유형 변환의 위험과 올바른 방법에 대한 심층적 인 논의 많은 Java 초보자가 객체를 배열로 변환 할 것입니다 ...

데이터베이스 쿼리에 tkmyBatis를 사용하는 경우 쿼리 조건을 구축하기 위해 엔티티 클래스 변수 이름을 우아하게 가져 오는 방법이 일반적인 문제입니다. 이 기사는 고정 될 것입니다 ...
