Android Facebook 스타일 슬라이드

새로운 Facebook 응용 프로그램과 탐색 기능이 정말 멋집니다. 내 응용 프로그램에서 어떻게 에뮬레이트 할 수 있는지 보려고했습니다.

누구나 어떻게 달성 할 수 있는지 실마리가 있습니까?

왼쪽 상단 버튼을 클릭하면 페이지가 슬라이드되고 다음 화면이 표시됩니다.

YouTube 비디오

나는 이것을 가지고 놀았으며, 내가 찾을 수있는 가장 좋은 방법은 FrameLayout을 사용하고 메뉴 위에 사용자 정의 HorizontalScrollView (HSV)를 배치하는 것이 었습니다. HSV 내부에는 애플리케이션 뷰가 있지만 첫 번째 하위 항목으로 투명한 뷰가 있습니다. 즉, HSV에 스크롤 오프셋이 없을 경우 메뉴가 표시됩니다 (그리고 여전히 클릭 할 수 있음).

앱이 시작되면 HSV를 첫 번째로 보이는 애플리케이션보기의 오프셋으로 스크롤하고 메뉴를 표시하려면 투명보기를 통해 메뉴를 표시하기 위해 뒤로 스크롤합니다.

코드는 여기에 있으며 Launch 활동의 아래쪽 두 버튼 (HorzScrollWithListMenu 및 HorzScrollWithImageMenu라고 함)은 내가 만들 수있는 최고의 메뉴를 보여줍니다.

안드로이드 슬라이딩 메뉴 데모

에뮬레이터 스크린 샷 (중간 스크롤) :

장치의 스크린 샷 (전체 스크롤). 내 아이콘은 Facebook 메뉴 아이콘만큼 넓지 않으므로 메뉴보기와 '앱'보기가 정렬되지 않습니다.

이 라이브러리 프로젝트 에서 페이스 북과 같은 슬라이드 아웃 탐색을 구현 했습니다 .

애플리케이션, UI 및 탐색에 쉽게 구축 할 수 있습니다. 하나의 액티비티와 하나의 프래그먼트 만 구현하고 라이브러리에 알려야합니다. 라이브러리는 원하는 모든 애니메이션과 탐색 기능을 제공합니다.

저장소 내에서 lib를 사용하여 페이스 북과 같은 탐색을 구현하는 방법과 함께 데모 프로젝트를 찾을 수 있습니다. 다음은 데모 프로젝트 기록이 담긴 짧은 비디오입니다 .

또한 활동 트랜잭션 및 TranslateAnimations (조각 트랜잭션 및 사용자 정의보기가 아님)를 기반으로하기 때문에이 lib는이 ActionBar 패턴과 호환되어야합니다.

현재 가장 큰 문제는 가로 및 세로 모드를 모두 지원하는 응용 프로그램에서 제대로 작동하는 것입니다. 의견이 있으시면 github을 통해 알려주십시오.

최고야,
알렉스

여기 또 다른 라이브러리가 있으며 제 생각에는 최고 인 것 같습니다. 나는 그것을 쓰지 않았다 ..

최신 정보:

이 코드는 나에게 가장 잘 작동하는 것으로 보이며 전체 작업 표시 줄을 G + 앱과 유사하게 이동합니다.

Google은이를 어떻게 관리 했습니까? Android 애플리케이션의 슬라이드 ActionBar

페이스 북 앱은 네이티브 코드로 작성되지 않았지만 (Android에서 레이아웃을 사용하는 네이티브 코드로) 웹 뷰를 사용했으며 sencha 와 같은 일부 자바 스크립트 ui 라이브러리를 사용했습니다 . 센차 프레임 워크를 사용하면 쉽게 달성 할 수 있습니다.

또 다른 (매우 훌륭한) 오픈 소스 라이브러리가 있습니다!

이것에 대한 좋은 기능은 ActionBarSherlock과 쉽게 통합된다는 것입니다.

다음은 github 프로젝트 링크입니다

Google Play 다운로드 링크 는 다음과 같습니다.

방금 내 프로젝트와 비슷한 견해를 구현했습니다. 여기서 확인할 수 있습니다

내가 작성한 라이브러리를 기반으로 한 샘플 응용 프로그램의 화면은 다음과 같습니다.

이 사용자 정의보기를 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" />

프로젝트 Wiki에서 작은 기사를 작성할 수있는 ActionsContentView 라이브러리 사용법에 대한 질문이 있습니다.

이 라이브러리의 장점 :

• 터치하여보기를 슬라이드하는 기능
• XML로 작업 표시 줄의 크기를 쉽게 조정할 수 있습니다.
• 2.0 이상부터 모든 Android SDK 버전 지원

한 가지 제한이 있습니다.

• 모든 가로 스크롤보기는이보기의 경계에서 작동하지 않습니다.

안부 인사, 스티븐

Android 지원 패키지 개정판 13 (2013 년 5 월)에는 창의 가장자리에서 가져올 수있는 탐색 서랍을 만드는 DrawerLayout이 있습니다. 그리고 내비게이션 서랍은 이제 디자인 패턴입니다.

v4 지원 라이브러리

탐색 서랍 디자인 패턴

의 검거를했다 기존 구현을 하고 라이브러리 프로젝트와 예제 앱으로 전환했습니다. 또한 XML 구문 분석과 현재있을 수있는 작업 표시 줄의 자동 감지 기능이 추가되었으므로 기본 및 ActionBarSherlock과 같은 지원 작업 표시 줄과 함께 작동합니다.

이것도 액션 바를 밀어냅니다!

모든 것은 예제 앱과 함께 라이브러리 프로젝트이며 Google 및 Facebook 앱과 같은 Android 용 슬라이딩 메뉴에 설명되어 있습니다. 초기 아이디어와 코드에 대한 scirocco 에 감사합니다 !

이것은 간단하고 우아합니다 : https://github.com/akotoe/android-slide-out-menu.git

스냅 사진:

나는 도서관이 언급하지 않았다고 생각한다.

jfeinstein10 / SlidingMenu

github url:https://github.com/jfeinstein10/SlidingMenu

• 이전 버전과의 호환성 을 돕는 ActionBar ActionBarSherlock 과 함께 잘 작동합니다 !
• 오른쪽 슬라이드를 지원 하고 버튼을 통해서만 슬라이드 할 수 있습니다!

@Paul Grime의 답변에 대해서는 아직 언급 할 수 없습니다. 어쨌든 나는 그의 github 프로젝트에 깜박임 문제에 대한 해결책을 제출했습니다 ....

여기에 수정 프로그램을 게시하고 누군가 필요할 수 있습니다. 두 줄의 코드 만 추가하면됩니다. anim.setAnimationListener 호출 아래의 첫 번째 것 :

anim.setFillAfter(true);

그리고 app.layout () 호출 후 두 번째 것 :

app.clearAnimation();

도움이 되었기를 바랍니다 :)

AbsoluteLayout과 간단한 슬라이드 컨트롤러를 사용하여 뷰를 음수 오프셋으로 이동하여 숨길 수 있습니다.

관심있는 사람은 코드 / 레이아웃을 정리하고 게시 할 수 있습니다. AbsoluteLayout이 더 이상 사용되지 않는다는 것을 알고 있지만 매우 간단한 구현이었습니다. 왼쪽보기 / 오른쪽보기, "슬라이딩 열기"일 때 왼쪽보기를 -X 오프셋에서 장치 너비로 옮기십시오.

안녕하세요, 슬라이드 메뉴와 같은 페이스 북을 제공하는 최고의 샘플 데모 앱입니다. 여기 에서 코드를 확인 하십시오

내 Android 공통 라이브러리 (ACL)의 일부로 자체 사이드 바를 구현했습니다. 주요 장점 :

1. 사이드 바는 왼쪽, 위쪽, 아래쪽, 오른쪽으로 설정할 수 있습니다
2. 메인 뷰와 슬라이딩 뷰 모두 클릭 가능
3. 사이드 바를 부분적으로 보여줄 수 있음
4. 사이드 바의 스타일 속성을 통해 스타일을 쉽게 변경할 수 있습니다.
5. 메이븐 레포의 유물
6. 큰 도서관의 일부

소스 코드 : 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.Feinstein Android 라이브러리 SlidingMenu를 사용합니다.

GitHub에서 소스 코드를 확인하십시오 :

https://github.com/baruckis/Android-SlidingMenuImplementation

기기에 직접 앱을 다운로드하여 사용해보십시오.

https://play.google.com/store/apps/details?id=com.baruckis.SlidingMenuImplementation

의견 때문에 코드는 설명이 필요합니다. 도움이 되길 바랍니다. ;)

나는 그것과 그 작업에 가장 간단한 방법을 찾았습니다. 간단한 탐색 서랍을 사용하고 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>

자바 파일

   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- 인덱스 문제를 유발하는지 또는 그들이 그것을 제어하는 ​​방법에 대해 생각하지 않았습니다.

안드로이드는 네비게이션 서랍을 추가했습니다. 이것을 참조하십시오

링크

공식 안드로이드 문서에있는 디자인 및 개발 가이드는 비공식 외부 라이브러리를 추가 할 필요가 없습니다. 안드로이드 지원 라이브러리만이 가능합니다. 여기에서 링크를 찾으십시오.

디자인 하고 개발하십시오 .

Facebook Android 앱은 Fragments로 빌드 될 수 있습니다 . 메뉴는 하나의 조각이고, 심층 활동 (뉴스 피드 / 이벤트 / 친구 등)은 다른 조각입니다. 기본적으로 휴대 전화의 태블릿 '마스터 및 세부 정보'레이아웃입니다.

정보를 위해 호환성 라이브러리는 1.6으로 시작하고이 페이스 북 앱은 Android 1.5가 설치된 장치에서도 실행되므로 Fragments로는 수행 할 수 없습니다.

이를 수행하는 방법은 다음과 같습니다. "기본"활동 BaseMenuActivity를 작성하여 메뉴 목록의 onItemClickListener에 대한 모든 논리를 배치하고 2 개의 애니메이션 ( "열기"및 "닫기")을 정의하십시오. 애니메이션의 끝 / 시작시 BaseMenuActivity의 레이아웃을 표시하거나 숨 깁니다 (menu_layout이라고 함). 이 액티비티의 레이아웃은 간단합니다. 목록 오른쪽에 항목과 투명한 부분이있는 목록 만 있습니다. 이 부분은 클릭 할 수 있으며 너비는 "이동 버튼"과 같은 너비입니다. 이를 통해이 레이아웃을 클릭하여 content_layout을 왼쪽으로 밀고 전체 화면을 볼 수 있도록 애니메이션을 시작할 수 있습니다. 각 옵션 (예 : 메뉴 목록의 항목)에 대해 BaseMenuActivity를 확장하는 "ContentActivity"를 만듭니다. 그런 다음 목록의 항목을 클릭하면 메뉴가 표시된 상태에서 ItemSelectedContentActivity가 시작됩니다 (활동이 시작 되 자마자 닫힙니다). 각 ContentActivity의 레이아웃은 FrameLayout이며 및를 포함합니다. content_layout을 이동하고 원할 때 menu_layout을 표시하기 만하면됩니다.

그것이 그것을 할 수있는 방법이며, 나는 충분히 명확하기를 바랍니다.

나는 지난 며칠 동안 이것을 가지고 놀았으며 결국에는 매우 간단하고 호 니컴 이전에 작동하는 솔루션을 생각해 냈습니다. 내 솔루션은 슬라이드하려는 뷰에 애니메이션을 적용하고 애니메이션의 FrameLayout끝을 듣는 것입니다 (이 시점에서 뷰의 왼쪽 / 오른쪽 위치를 오프셋). 내 솔루션을 여기에 붙여 넣었습니다. 보기 번역에 애니메이션을 적용하는 방법

몇 시간 동안 검색을 한 결과 Paul Grime의 솔루션이 가장 좋은 것으로 나타났습니다. 그러나 기능이 너무 많습니다. 따라서 초보자를 위해 공부하기가 어려울 수 있습니다. 그래서 Paul의 아이디어에서 나온 구현을 제공하고 싶지만 더 간단하고 읽기 쉽습니다.

XML없이 자바 코드를 사용하여 사이드 메뉴 바 구현

위의 답변에서 언급 한 놀라운 SimonVT / android-menudrawer를 보지 못했습니다. 여기 링크가 있습니다

https://github.com/SimonVT/android-menudrawer

사용이 매우 쉽고 왼쪽, 오른쪽, 위 또는 아래에 놓을 수 있습니다. 샘플 코드와 Apache 2.0 라이센스로 잘 문서화되었습니다.

2012 년 6 월 Google은 Eclipse ADT 플러그인에 "templates"를 추가했으며 "마스터 / 세부 정보 흐름"이라는 템플릿이 있습니다 (프레이머 기반).