it-swarm-ko.com

Android Facebook 스타일 슬라이드

새로운 Facebook 응용 프로그램과 탐색 기능이 너무 멋지다. 난 단지 내 응용 프로그램에서 에뮬레이션 할 수있는 방법을 보려고했습니다.

누구나 달성 할 수있는 단서가 있습니까?

enter image description here

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

enter image description here

YouTube 동영상

281
Harsha M V

나는 이것으로 자신과 놀아났다. 내가 찾을 수있는 가장 좋은 방법은 FrameLayout을 사용하고 메뉴 상단에 사용자 정의 HorizontalScrollView (HSV)를 놓는 것이다. HSV 내부에는 응용 프로그램보기 가 있지만 첫 번째 자식으로 투명보기가 있습니다. 즉, HSV에 스크롤 오프셋이 없으면 메뉴가 표시됩니다 (여전히 클릭 할 수 있음).

응용 프로그램이 시작되면 HSV를 첫 번째로 표시되는 응용 프로그램보기의 오프셋으로 스크롤하고 메뉴를 표시 할 때 다시 스크롤하여 투명보기를 통해 메뉴를 표시합니다.

이 코드는 여기에 있으며 시작 활동의 아래쪽에있는 두 개의 버튼 (HorzScrollWithListMenu 및 HorzScrollWithImageMenu라고 함)이 나올 수있는 최상의 메뉴를 보여줍니다.

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

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

Screenshot from emulator (mid-scroll)

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

Screenshot from device (full-scroll)

176
Paul Grime

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

응용 프로그램, UI 및 탐색 기능을 쉽게 만들 수 있습니다. 하나의 액티비티와 하나의 단편을 구현하고 라이브러리에 알리면 라이브러리는 원하는 모든 애니메이션과 탐색을 제공합니다.

Repo 안에는 lib를 사용하여 페이스 북과 같은 탐색을 구현하는 방법과 함께 데모 프로젝트를 찾을 수 있습니다. 여기에는 데모 프로젝트 기록이있는 짧은 비디오 .

또한이 lib는 Activity 트랜잭션 및 TranslateAnimations (트랜잭션 및 사용자 정의 뷰는 아님)를 기반으로하기 때문에이 ActionBar 패턴과 호환 가능해야합니다.

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

모두 제일 좋다,
알렉스

37
AlexKorovyansky

여기에 another lib가 있으며 제 의견으로는 최고인 것 같습니다. 나는 그것을 쓰지 않았다. ..

최신 정보:

이 코드는 나를 위해 가장 잘 작동하는 것으로 보입니다. 전체 액션 바를 G + 앱과 비슷하게 움직입니다.

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

24
Patrick

내 생각에 페이스 북 앱은 네이티브 코드로 작성된 것이 아니라 (안드로이드에서 레이아웃을 사용하는 네이티브 코드에 의해) 작성된 것이 아니라 웹뷰를 사용했고 sencha 와 같은 몇 가지 자바 스크립트 UI 라이브러리를 사용했다. Sencha 프레임 워크를 사용하면 쉽게 달성 할 수 있습니다.

enter image description here

22
Sanjay Kumar

여기 또 다른 (아주 멋진) 오픈 소스 라이브러리가 있습니다!

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

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

다음은 Google Play 다운로드 링크입니다.

20
dwbrito

방금 내 프로젝트에 대해 비슷한 시각을 구현했습니다. 그것을 확인할 수 있습니다 여기

다음은 내가 작성한 라이브러리를 기반으로 한 샘플 애플리케이션 화면입니다. ActionsContentView Example

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 이상부터 모든 안드로이드 SDK 버전 지원

한 가지 제한 사항이 있습니다.

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

안부 인사, 스티븐

17
rude

Android 지원 패키지 개정판 13 (2013 년 가능)을 사용하면 창의 가장자리에서 가져올 수있는 탐색 드로어를 만드는 DrawerLayout이 있습니다. 그리고 탐색 서랍은 이제 디자인 패턴입니다.

v4 지원 라이브러리

탐색 창 디자인 패턴

16
Wubao Li

기존 구현 을 찾아서 라이브러리 프로젝트와 예제 애플리케이션으로 바꿨습니다. 또한 존재하는 액션 바를 자동으로 검색 할뿐만 아니라 XML 파싱을 추가 했으므로 ActionBarSherlock과 같은 지원 액션 바뿐만 아니라 네이티브에서도 작동합니다.

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

모든 것은 예제 응용 프로그램과 함께 도서관 프로젝트이며 Google과 facebook 응용 프로그램과 같은 Android 용 슬라이딩 메뉴 에서 설명됩니다. 고마워요 scirocco 초기 아이디어와 코드!

SlideMenu on GingerbreadSlideMenu on ICS with ActionBar

15
bk138

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

스냅 사진:

enter image description here

10
Edward

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

jfeinstein1 / SlidingMen

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

  • 액션 바 (action bar)로 잘 작동합니다 ActionBarSherlock역 호환성!
  • 지원 오른쪽 슬라이드 및 버튼을 통한 슬라이드 만이 아닙니다!
10
madlymad

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

여기에 수정 사항을 게시하겠습니다. 누군가 필요할 수도 있습니다. 두 줄의 코드 만 추가하면됩니다. anim.setAnimationListener 호출 아래의 첫 번째 호출은 다음과 같습니다.

anim.setFillAfter(true);

App.layout () 호출 후 두 번째 호출 :

app.clearAnimation();

희망이 도움이 :)

8
Fatal1ty2787

나는 이것을 AbsoluteLayout과 숨겨진 오프셋으로 뷰를 이동시키는 간단한 슬라이드 컨트롤러로 구현했습니다.

관심있는 사람이 있으면 코드/레이아웃을 정리하고 게시 할 수 있습니다. AbsoluteLayout은 더 이상 사용되지 않지만 매우 직접적인 구현이었습니다. 왼쪽보기/오른쪽보기 및 "미끄럼 열림"일 때, 왼쪽보기를 -X 오프셋에서 장치의 너비로 이동하십시오 - 오른쪽보기를 표시하려는 항목

6
Rich

안녕하세요 이것은 슬라이드 메뉴와 같은 페이스 북을 제공하는 최고의 샘플 데모 응용 프로그램입니다. 코드를 확인하십시오 여기

enter image description here

enter image description here

4
Mukesh Y

최근에 저는 슬라이딩 메뉴 구현 버전을 작업했습니다. 그것은 인기있는 J.Feinstein 안드로이드 라이브러리 SlidingMenu를 사용합니다.

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

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

앱에 직접 다운로드하여 시도 할 기기 :

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

코드는 주석으로 인해 설명이 필요합니다. 도움이되기를 바랍니다. ;)

3
Andrius Baruckis

나는 그것과 그것의 작업을위한 가장 간단한 방법을 발견했다. 간단한 탐색 드로어를 사용하고 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) {

        }
    });
 }
}

enter image description here

고맙습니다

3
Dalvinder Singh

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

  1. 사이드 바는 왼쪽, 위, 아래, 오른쪽 어느 위치로든 설정할 수 있습니다.
  2. 기본보기와 슬라이딩보기 모두를 클릭 할 수 있습니다.
  3. 사이드 바를 부분적으로 볼 수 있음
  4. SideBar에 대한 스타일있는 속성은 스타일을 변경하기가 더 쉽습니다.
  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

3
se.solovyev

공식 Android 설명서에서 발견 된 디자인 및 개발 가이드는 비공식 외부 라이브러리를 추가 할 필요가 없습니다. Android 지원 라이브러리 만 수행합니다. 여기 링크를 찾으십시오.

디자인개발 .

2
jai_b

나는 여기에 대담한 추측을 할 것입니다 ...

난 그들이 보이지 않는 메뉴를 나타내는 레이아웃을 가지고 있다고 가정합니다. 메뉴 버튼을 두드리면 위에있는 레이아웃/뷰를 움직여 방해가되지 않고 간단하게 메뉴 레이아웃을 볼 수 있습니다. 나는 이것이 뷰에 어떤 종류의 Z- 인덱스 문제를 일으키거나 어떻게 제어하는지에 대해서는 생각하지 않았습니다.

2
jlindenbaum

Facebook Android 앱은 아마도 Fragments 를 사용하여 빌드 할 수 있습니다. 메뉴는 하나의 Fragment이고 심층 활동 (Newsfeed/Events/Friends 등)은 다른 Fragment입니다. 기본적으로 태블릿 '마스터 & 세부'레이아웃입니다.

1
Gunnar Karlsson

정보를 얻으려면 호환성 라이브러리가 1.6으로 시작하고이 페이스 북 앱도 Android 1.5가 설치된 장치에서 실행 중이므로 Fragments를 사용하여 수행 할 수 없습니다.

여러분이 할 수있는 방법은 다음과 같습니다 :베이스 목록에 대한 onLoaderListener에 대한 모든 로직을 넣고 2 개의 애니메이션 ( "open"및 "close")을 정의하는 "base"액티비티 BaseMenuActivity를 만듭니다. 애니메이션의 끝/처음에는 BaseMenuActivity의 레이아웃을 표시하거나 숨 깁니다 (menu_layout을 호출 할 수 있습니다). 이 액티비티의 레이아웃은 간단하며 목록의 항목 만있는 목록과 목록 오른쪽의 투명한 부분입니다. 이 부분은 클릭 할 수 있고 너비는 "이동 버튼"과 같은 너비입니다. 이 레이아웃을 사용하면이 레이아웃을 클릭하여 애니메이션을 시작하여 content_layout을 왼쪽으로 슬라이드시키고 전체 화면을 캡처 할 수 있습니다. 각 옵션 (즉, 메뉴 목록의 항목)에 대해 BaseMenuActivity를 확장하는 "ContentActivity"를 만듭니다. 그런 다음 목록의 항목을 클릭하면 항목이 표시된 상태에서 ItemSelectedContentActivity가 시작됩니다 (활동 시작과 동시에 종료됩니다). 각 ContentActivity의 레이아웃은 FrameLayout이며와를 포함합니다. 원하는 경우 content_layout을 이동하고 menu_layout을 표시해야합니다.

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

1
p4u144

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

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

사용하기 쉽고 왼쪽, 오른쪽, 위 또는 아래에 넣을 수 있습니다. 샘플 코드와 Apache 2.0 라이센스에 대해 잘 설명되어 있습니다.

1
lwegener

안드로이드는 탐색 서랍을 추가했습니다. 이것을 참조하십시오.

링크

1
Deepak Goel

저는 지난 며칠 동안이 문제를 해결해 왔으며 결국에는 매우 간단하고 사전 벌집 작업을하는 솔루션을 제시했습니다. 내 솔루션은 내가 바라는 뷰 (나에게 FrameLayout)를 애니메이트하고 애니메이션의 끝 (뷰의 왼쪽/오른쪽 위치를 오프셋하는 지점)을 수신하는 것이 었습니다. 내 솔루션을 여기 붙여 넣었습니다 : View의 번역 애니메이션 방법

1
Adil Hussain

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

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

1
Chao

2012 년 6 월, Google은 Eclipse ADT 플러그인에 "templates"를 추가했습니다 , "master/detail flow"라는 템플릿이 있습니다.

0
rds