Android Facebook 스타일 슬라이드
새로운 페이스북 앱과 내비게이션은 정말 멋집니다.저는 단지 그것이 제 애플리케이션에서 어떻게 에뮬레이트 될 수 있는지 보려고 했습니다.
그것이 어떻게 달성될 수 있는지 아는 사람?
왼쪽 위 버튼을 클릭하면 페이지가 슬라이드되고 다음 화면이 표시됩니다.
저는 이것을 가지고 놀았는데, 제가 찾을 수 있는 가장 좋은 방법은 프레임 레이아웃을 사용하고 메뉴 위에 맞춤형 HSV(Horizontal Scroll View)를 놓는 것이었습니다.HSV 내부에는 응용프로그램 보기가 있지만 첫 번째 자식으로 투명 보기가 있습니다.즉, HSV에 스크롤 오프셋이 0인 경우 메뉴가 표시됩니다(놀랍게도 여전히 클릭 가능).
앱이 시작되면 HSV를 첫 번째로 볼 수 있는 애플리케이션 보기의 오프셋까지 스크롤하고 메뉴를 표시하려면 뒤로 스크롤하여 투명 보기를 통해 메뉴를 표시합니다.
코드는 여기에 있으며, 실행 활동의 아래 두 버튼(HorzScrollWithListMenu 및 HorzScrollWithImageMenu라고 함)은 다음과 같은 최상의 메뉴를 제공합니다.
에뮬레이터의 스크린샷(중간 스크롤):
장치의 스크린샷(전체 스크롤).내 아이콘은 Facebook 메뉴 아이콘만큼 넓지 않기 때문에 메뉴 보기와 '앱' 보기가 정렬되지 않습니다.
저는 이 도서관 프로젝트에서 페이스북과 같은 슬라이드 아웃 내비게이션을 구현했습니다.
애플리케이션, UI 및 탐색에 쉽게 내장할 수 있습니다.하나의 활동과 하나의 조각만 구현하면 됩니다. 라이브러리에 이를 알려주시면 라이브러리에서 원하는 모든 애니메이션과 탐색을 제공합니다.
레포 안에서 lib를 사용하여 페이스북과 같은 내비게이션을 구현하는 방법과 함께 데모 프로젝트를 찾을 수 있습니다.여기 데모 프로젝트의 기록이 있는 짧은 비디오가 있습니다.
또한 이 lib는 ActionBar 패턴과 호환되어야 합니다. 왜냐하면 Activities 트랜잭션과 Translate Animations(Fragments 트랜잭션 및 사용자 지정 보기가 아님)를 기반으로 하기 때문입니다.
현재 가장 큰 문제는 세로 모드와 가로 모드를 모두 지원하는 응용 프로그램에 잘 작동하도록 만드는 것입니다.피드백이 있으면 깃허브를 통해 제공해주시기 바랍니다.
빌어요, 운을빌어요행▁all행운을요어.
알렉스야.
여기에 또 다른 lib가 있고 제 생각에 최고인 것 같습니다.나는 그것을 쓰지 않았습니다.
업데이트:
이 코드는 저에게 가장 잘 맞는 것 같고 G+ 앱과 비슷하게 전체 액션 바를 이동시킵니다.
구글은 어떻게 이것을 할 수 있었을까요?Android 응용 프로그램의 슬라이드 액션 모음
페이스북 앱은 네이티브 코드(안드로이드에서 레이아웃을 사용하는 네이티브 코드)로 작성된 것이 아니라 웹뷰를 사용했고 센차와 같은 자바스크립트 UI 라이브러리를 사용했습니다.센차 프레임워크를 사용하여 쉽게 달성할 수 있습니다.
여기 또 다른 (매우 멋진) 오픈 소스 라이브러리가 있습니다!
이 기능의 좋은 점은 ActionBarSherlock과 쉽게 통합된다는 것입니다.
Github 프로젝트 링크입니다.
저는 제 프로젝트에 대해 비슷한 관점을 구현했습니다.여기서 확인할 수 있습니다.
다음은 제가 작성한 라이브러리에 기반한 샘플 애플리케이션 화면입니다.
이 사용자 정의 보기를 XML 레이아웃의 요소로 쉽게 사용할 수 있습니다.다음은 예입니다.
<shared.ui.actionscontentview.ActionsContentView
android:id="@+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:actions_layout="@layout/actions"
app:content_layout="@layout/content" />
ActionsContentView 라이브러리의 사용에 대해 질문이 있을 것입니다. 프로젝트 Wiki에서 작은 기사를 작성할 수 있습니다.
이 라이브러리의 몇 가지 장점:
- 터치로 보기를 슬라이드하는 기능
- XML에서 작업 표시줄의 크기를 쉽게 조정할 수 있습니다.
- 2.0 이상 버전의 모든 Android SDK 버전 지원
한 가지 제한이 있습니다.
- 모든 수평 스크롤 보기는 이 보기의 경계에서 작동하지 않습니다.
잘 부탁드립니다, 스티븐
Android 지원 패키지 버전 13(2013년 5월)에서는 창 가장자리에서 끌어 들일 수 있는 탐색 드로어를 만들기 위한 드로어 레이아웃이 있습니다.그리고, 내비게이션 서랍은 이제 디자인 패턴입니다.
기존 구현을 정리하여 라이브러리 프로젝트와 예제 앱으로 전환했습니다.XML 구문 분석 기능과 함께 존재할 수 있는 작업 표시줄의 자동 감지 기능도 추가되어 기본 작업 표시줄은 물론 ActionBarSherlock과 같은 지원 작업 표시줄과도 함께 작동합니다.
이것은 또한 액션 바를 밀어냅니다!
전체는 예제 앱과 함께 라이브러리 프로젝트이며 구글 및 페이스북 앱과 같은 Android용 슬라이딩 메뉴에 설명되어 있습니다.초기 아이디어와 코드에 대해 가위바위보에게 감사드립니다!
이것은 간단하고 우아합니다: https://github.com/akotoe/android-slide-out-menu.git
스냅샷:
그 도서관은 언급하지 않은 것 같습니다.
jfeinstein10 / 슬라이딩 메뉴
github url:https://github.com/jfeinstein10/SlidingMenu
- 이전 버전과의 호환성에 도움이 되는 액션 바 ActionBarSherlock과 잘 작동합니다.
- 버튼을 통해 슬라이드할 뿐만 아니라 오른쪽 슬라이드도 지원합니다!
@Paul Grime이 제공한 답변에 대해 아직 언급할 수 없습니다. 어쨌든 저는 그의 깃허브 프로젝트에 플리커 문제에 대한 수정 사항을 제출했습니다.
여기에 수정 사항을 게시하겠습니다. 누군가가 필요할 수도 있습니다.코드 두 줄만 추가하면 됩니다.애니 아래 첫 번째.set AnimationListener 호출:
anim.setFillAfter(true);
그리고 app.layout() 호출 후 두 번째 호출:
app.clearAnimation();
이것이 도움이 되길 바랍니다 :)
Absolute Layout과 보기를 음의 오프셋으로 이동하여 숨기기 위한 간단한 슬라이드 컨트롤러를 사용하여 구현했습니다.
관심 있는 사람이 있으면 코드/레이아웃을 정리하고 게시할 수 있습니다.Absolute Layout이 더 이상 사용되지 않는다는 것은 알고 있지만, 매우 간단한 구현이었습니다.왼쪽 보기/오른쪽 보기 및 "슬라이딩 열기" 시 왼쪽 보기를 -X 간격띄우기에서 장치 너비로 이동하면 됩니다. 오른쪽 보기를 표시할 수 있습니다.
안녕하세요 슬라이드 메뉴와 같은 페이스북을 제공하는 베스트 샘플 데모 앱입니다.여기서 코드 확인
Android Common Library(ACL)의 일부로 자체 SideBar를 구현했습니다.주요 이점:
- 사이드 바는 왼쪽, 위쪽, 아래쪽, 오른쪽의 모든 위치로 설정할 수 있습니다.
- 메인 뷰와 슬라이딩 뷰를 모두 클릭할 수 있습니다.
- 사이드 바가 부분적으로 표시될 수 있습니다.
- 스타일을 쉽게 변경할 수 있는 사이드바 속성
- 메이븐 레포의 아티팩트
- 큰 도서관의 일부
소스 코드: https://github.com/serso/android-common/tree/master/views/src/main/java/org/solovyev/android/view/sidebar
사용량: https://github.com/serso/android-common/blob/master/samples/res/layout/acl_view_layout.xml
최근에 저는 슬라이딩 메뉴 구현 버전을 작업했습니다.인기 있는 J를 사용합니다.파인스타인 안드로이드 라이브러리 슬라이딩 메뉴.
GitHub에서 소스 코드를 확인하십시오.
https://github.com/baruckis/Android-SlidingMenuImplementation
앱을 장치에 직접 다운로드하여 다음을 시도:
https://play.google.com/store/apps/details?id=com.baruckis.SlidingMenuImplementation
코드는 주석 때문에 스스로 설명할 수 있어야 합니다.도움이 되기를 바랍니다!;)
저는 그것과 그것이 작동하는 가장 간단한 방법을 찾았습니다.간단한 Navigation 드로어와 call drawer.setdrawerListner()를 사용하고 아래의 drawerSlide 메서드의 mainView.setX() 메서드를 사용하거나 내 코드를 복사합니다.
xml 파일
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000000" >
<RelativeLayout
android:id="@+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff">
<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:id="@+id/menu"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_marginTop="10dp"
android:layout_marginLeft="10dp"
android:src="@drawable/black_line"
/>
</RelativeLayout>
<RelativeLayout
android:id="@+id/left_drawer"
android:layout_width="200dp"
android:background="#181D21"
android:layout_height="match_parent"
android:layout_gravity="start"
>
</RelativeLayout>
</android.support.v4.widget.DrawerLayout>
java 파일
public class MainActivity extends AppCompatActivity {
DrawerLayout drawerLayout;
RelativeLayout mainView;
ImageView menu;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
menu=(ImageView)findViewById(R.id.menu);
drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
mainView=(RelativeLayout)findViewById(R.id.content_frame);
menu.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
drawerLayout.openDrawer(Gravity.LEFT);
}
});
drawerLayout.setDrawerListener(new DrawerLayout.DrawerListener() {
@Override
public void onDrawerSlide(View drawerView, float slideOffset) {
mainView.setX(slideOffset * 300);
}
@Override
public void onDrawerOpened(View drawerView) {
}
@Override
public void onDrawerClosed(View drawerView) {
}
@Override
public void onDrawerStateChanged(int newState) {
}
});
}
}
감사해요.
여기서 몇 가지 대담한 추측을 해보겠습니다.
저는 그들이 보이지 않는 메뉴를 나타내는 레이아웃을 가지고 있다고 생각합니다.메뉴 버튼을 누르면 상단의 레이아웃/보기를 애니메이션으로 만들어 이동하고 메뉴 레이아웃을 표시할 수 있습니다.나는 이것이 뷰에 z-index 문제를 일으키거나 그들이 그것을 어떻게 제어하는지에 대해 생각해 본 적이 없습니다.
Android가 내비게이션 드로어를 추가했습니다.참조
비공식 외부 라이브러리를 추가할 필요가 없는 공식 안드로이드 설명서에 있는 설계 및 개발 가이드입니다.안드로이드 지원 라이브러리만 가능합니다.여기에서 링크를 찾으십시오.
Facebook Android 앱은 Fragments로 빌드될 수 있습니다.메뉴는 한 조각이고, 심층 활동(뉴스피드/이벤트/친구 등)은 다른 조각입니다.기본적으로 전화기의 태블릿 '마스터 & 디테일' 레이아웃입니다.
참고로 호환성 라이브러리가 1.6으로 시작하고 이 페이스북 앱도 Android 1.5가 설치된 기기에서 실행되고 있기 때문에 Fragments로 실행할 수 없습니다.
이렇게 할 수 있는 방법은 다음과 같습니다. 메뉴 목록에 대한 onItemClickListener의 모든 논리를 넣고 2개의 애니메이션("열기" 및 "닫기")을 정의하는 "기본" 활동 BaseMenuActivity를 만드는 것입니다.애니메이션이 끝날 때/시작될 때 기본 메뉴 활동의 레이아웃을 표시/숨깁니다(메뉴_레이아웃이라고 부릅니다).이 활동의 레이아웃은 단순하며, 항목이 있는 목록 + 목록 오른쪽에 투명한 부분만 있습니다.이 부분은 클릭할 수 있으며 너비는 "이동 단추"와 동일한 너비가 됩니다.그러면 이 레이아웃을 클릭하여 애니메이션을 시작하여 content_layout을 왼쪽으로 슬라이드하여 전체 화면을 표시할 수 있습니다.각 선택사항(예: 메뉴 목록의 항목)에 대해 기본 메뉴 활동을 확장하는 "내용 활동"을 작성합니다.그런 다음 목록의 항목을 클릭하면 메뉴가 표시된 상태에서 ItemSelectedContentActivity를 시작합니다(활동이 시작되자마자 닫음).각 Content Activity의 레이아웃은 FrameLayout이며 및 를 포함합니다. content_layout을 이동하고 원하는 때에 menu_layout을 표시하기만 하면 됩니다.
그게 방법이고, 제가 충분히 분명히 말했길 바랍니다.
저는 지난 며칠 동안 이것을 가지고 놀았고 결국 꽤나 간단한 해결책을 생각해냈습니다. 허니콤 이전에는 효과가 있었습니다.제 솔루션은 슬라이드하고 싶은 보기를 애니메이션화하는 것이었습니다.FrameLayout애니메이션의 끝(보기의 왼쪽/오른쪽 위치를 상쇄하는 지점)을 청취합니다.솔루션을 여기에 붙여 넣었습니다.View 번역 애니메이션화 방법
몇 시간 동안 검색한 결과, Paul Grime의 해결책이 아마도 가장 좋은 해결책일 것이라는 것을 발견했습니다.하지만 너무 많은 기능성을 가지고 있습니다.그래서 초보자들에게는 공부하는 것이 어려울 수도 있습니다.그래서 저는 폴의 아이디어에서 나온 저의 구현을 제공하고 싶지만, 그것은 더 간단하고 읽기 쉬워야 합니다.
XML 없이 Java 코드를 사용하여 사이드 메뉴 모음 구현
위의 답변 어디에서도 언급된 놀라운 사이먼 VT/안드로이드 메뉴 드로어를 보지 못했습니다.그래서 여기 링크가 있습니다.
https://github.com/SimonVT/android-menudrawer
이것은 매우 사용하기 쉽고 왼쪽, 오른쪽, 위, 아래에 놓을 수 있습니다.샘플 코드 및 Apache 2.0 라이센스로 매우 잘 문서화되어 있습니다.
2012년 6월, Google은 Eclipse ADT 플러그인에 "템플릿"을 추가했으며, 정확히 이를 수행하는 "마스터/디테일 흐름"이라는 템플릿이 있습니다(플래그멧 기반).
언급URL : https://stackoverflow.com/questions/8657894/android-facebook-style-slide
'programing' 카테고리의 다른 글
| imdb.load_data() 함수에 대한 'allow_pickle=False일 때 객체 배열을 로드할 수 없음'을 수정하는 방법은 무엇입니까? (0) | 2023.07.24 |
|---|---|
| 모수 크기의 인수로 고정 장치를 사용한 파이 검정 (0) | 2023.07.24 |
| 윈도우즈에서 node.js 모듈의 기본 글로벌 설치 디렉토리를 변경하시겠습니까? (0) | 2023.07.24 |
| Java Spring 앱에서 rediscalls를 기록/삭제하는 방법 (0) | 2023.07.24 |
| PHP에 json_encode()와 같은 xml_encode()가 있습니까? (0) | 2023.07.24 |