Kiểu trượt Android trên Facebook

Ứng dụng Facebook mới và điều hướng của nó rất tuyệt. Tôi chỉ cố gắng để xem làm thế nào nó có thể được mô phỏng trong ứng dụng của tôi.

Bất cứ ai cũng có một đầu mối làm thế nào nó có thể đạt được?

Khi nhấp vào nút trên cùng bên trái, trang trượt và màn hình sau được hiển thị:

Video YouTube

Bản thân tôi đã có một trò chơi với nó và cách tốt nhất tôi có thể tìm thấy là sử dụng FrameLayout và đặt một màn hình ngang ngang tùy chỉnh (HSV) trên đầu menu. Bên trong HSV là các Chế độ xem ứng dụng của bạn, nhưng có Chế độ xem trong suốt như là đứa trẻ đầu tiên. Điều này có nghĩa là, khi HSV có độ lệch cuộn bằng 0, menu sẽ hiển thị thông qua (và vẫn có thể nhấp một cách đáng ngạc nhiên).

Khi ứng dụng khởi động, chúng tôi cuộn HSV sang phần bù của Chế độ xem ứng dụng hiển thị đầu tiên và khi chúng tôi muốn hiển thị menu, chúng tôi sẽ cuộn lại để hiển thị menu thông qua Chế độ xem trong suốt.

Mã ở đây và hai nút dưới cùng (được gọi là HorzScrollWithListMothy và HorzScrollWithImageMothy) trong hoạt động Khởi chạy hiển thị các menu tốt nhất tôi có thể đưa ra:

Bản demo trình đơn trượt Android

Ảnh chụp màn hình từ trình giả lập (cuộn giữa):

Ảnh chụp màn hình từ thiết bị (cuộn toàn bộ). Lưu ý biểu tượng của tôi không rộng bằng biểu tượng menu Facebook, vì vậy chế độ xem menu và chế độ xem 'ứng dụng' không được căn chỉnh.

Tôi đã triển khai điều hướng trượt giống như facebook trong dự án thư viện này .

Bạn có thể dễ dàng xây dựng nó vào ứng dụng, giao diện người dùng và điều hướng của bạn. Bạn sẽ chỉ cần triển khai một Hoạt động và một Đoạn, cho thư viện biết về nó - và thư viện sẽ cung cấp tất cả các hình ảnh động và điều hướng mong muốn.

Bên trong repo bạn có thể tìm thấy dự án demo, với cách sử dụng lib để thực hiện điều hướng giống như facebook. Đây là video ngắn với hồ sơ của dự án demo .

Ngoài ra, lib này phải tương thích với mẫu ActionBar này, vì dựa trên các giao dịch Hoạt động và TranslateAnimations (không phải giao dịch Fragment và Chế độ xem tùy chỉnh).

Ngay bây giờ, vấn đề nhất là làm cho nó hoạt động tốt cho ứng dụng, hỗ trợ cả chế độ dọc và ngang. Nếu bạn có bất kỳ phản hồi nào, vui lòng cung cấp thông qua github.

Tốt nhất,
Alex

Đây là một lib khác và dường như là tốt nhất theo ý kiến ​​của tôi. Tôi đã không viết nó ..

CẬP NHẬT:

Mã này có vẻ hoạt động tốt nhất đối với tôi và nó di chuyển toàn bộ Actionbar tương tự như ứng dụng G +.

Google đã làm thế nào để làm điều này? Trượt ActionBar trong ứng dụng Android

Tôi nghĩ rằng ứng dụng facebook không được viết bằng mã gốc (ý tôi là mã gốc, sử dụng bố cục trong Android) nhưng họ đã sử dụng webview cho nó và đã sử dụng một số thư viện ui javascript như sencha . Nó có thể dễ dàng đạt được bằng cách sử dụng khung sencha.

Đây là một thư viện mã nguồn mở (rất hay) khác!

Tính năng hay của cái này là nó dễ dàng tích hợp với ActionBarSherlock.

Đây là liên kết dự án github

Đây là liên kết tải xuống Google Play

Tôi vừa mới thực hiện quan điểm tương tự cho dự án của riêng tôi. Bạn có thể kiểm tra nó ở đây

Đây là màn hình của ứng dụng mẫu dựa trên thư viện tôi đã viết:

Thật dễ dàng để sử dụng chế độ xem tùy chỉnh này làm thành phần của bố cục XML. Đây là ví dụ:

    <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" />

Tôi sẽ có bất kỳ câu hỏi nào về việc sử dụng thư viện ActionContentView Tôi có thể viết một bài viết nhỏ tại các dự án Wiki.

Một số ưu điểm của thư viện này:

• khả năng trượt xem bằng cảm ứng
• thật dễ dàng để điều chỉnh kích thước của thanh hành động trong XML
• hỗ trợ tất cả các phiên bản SDK Android bắt đầu từ 2.0 trở lên

Có một hạn chế:

• tất cả các chế độ xem cuộn ngang sẽ không hoạt động ở giới hạn của chế độ xem này

Trân trọng, Steven

Với phiên bản gói hỗ trợ Android 13 (có thể 2013), có DrawerLayout để tạo một Ngăn kéo Điều hướng có thể được kéo vào từ cạnh của cửa sổ. Và, ngăn kéo điều hướng là một mẫu thiết kế bây giờ.

thư viện hỗ trợ v4

mẫu thiết kế ngăn kéo điều hướng

Đã thực hiện một đợt triển khai hiện có và biến nó thành một dự án thư viện cộng với ứng dụng ví dụ. Đồng thời thêm phân tích cú pháp XML cũng như tự động phát hiện một thanh hành động có thể có, do đó, nó hoạt động với thanh hành động gốc cũng như thanh hành động hỗ trợ như ActionBarSherlock.

Cái này cũng trượt thanh hành động đi!

Toàn bộ điều này là một dự án thư viện cùng với một ứng dụng ví dụ và được mô tả tại Menu trượt cho Android như các ứng dụng google và facebook . Cảm ơn scirocco cho ý tưởng và mã ban đầu!

Điều này là đơn giản và thanh lịch: https://github.com/akotoe/android-slide-out-menu.git

Ảnh chụp nhanh:

Tôi nghĩ rằng thư viện không đề cập:

jfeinstein10 / SlidingMothy

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

• hoạt động tốt với thanh hành động ActionBarSherlock giúp tương thích ngược !
• Hỗ trợ trượt phải và không chỉ trượt qua nút!

Không thể nhận xét về câu trả lời được đưa ra bởi @Paul Grime, dù sao tôi cũng đã gửi cho dự án github của anh ấy bản sửa lỗi cho vấn đề nhấp nháy ....

Tôi sẽ đăng bản sửa lỗi ở đây, có lẽ ai đó cần nó. Bạn chỉ cần thêm hai dòng mã. Cái đầu tiên bên dưới lệnh gọi anim.setAnimationListener:

anim.setFillAfter(true);

Và cái thứ hai sau cuộc gọi app.layout ():

app.clearAnimation();

Hi vọng điêu nay co ich :)

Tôi đã thực hiện điều này với AbsoluteLayout và một bộ điều khiển trượt đơn giản để chuyển chế độ xem sang phần bù âm để ẩn.

Nếu bất cứ ai quan tâm, tôi có thể dọn sạch mã / bố cục và bài viết. Tôi biết AbsoluteLayout không được dùng nữa, nhưng đó là một triển khai rất thẳng về phía trước. Chế độ xem bên trái / Chế độ xem bên phải và khi "trượt mở", chỉ cần di chuyển chế độ xem bên trái từ phần bù -X sang chiều rộng của thiết bị - bất cứ điều gì bạn muốn hiển thị về Chế độ xem bên phải

Xin chào, đây là ứng dụng demo mẫu tốt nhất cung cấp menu như facebook. Kiểm tra mã ở đây

Là một phần của Thư viện chung Android (ACL), tôi đã triển khai SideBar của riêng mình. Ưu điểm chính:

1. Thanh bên có thể được đặt thành bất kỳ vị trí nào: trái, trên, dưới, phải
2. Cả chế độ xem chính và chế độ xem đều có thể nhấp
3. Thanh bên có thể được hiển thị một phần
4. Thuộc tính có thể tạo kiểu cho SideBar giúp dễ dàng thay đổi kiểu
5. Tạo tác trong repo maven
6. Một phần của một thư viện lớn

Mã nguồn: https://github.com/serso/android-common/tree/master/view/src/main/java/org/solovyev/android/view/sidebar

Cách sử dụng: https://github.com/serso/android-common/blob/master/samples/res/layout/acl_view_layout.xml

Gần đây tôi đã làm việc trên phiên bản thực hiện menu trượt của tôi. Nó sử dụng thư viện SlidingMothy phổ biến của J.Feinstein.

Vui lòng kiểm tra mã nguồn tại GitHub:

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

Tải ứng dụng trực tiếp xuống thiết bị để thử:

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

Mã nên được tự giải thích vì ý kiến. Tôi hy vọng nó sẽ hữu ích! ;)

Tôi tìm thấy một cách đơn giản nhất cho nó và làm việc của nó. Sử dụng ngăn kéo Điều hướng đơn giản và gọi ngăn kéo.setdrawerListner () và sử dụng phương thức mainView.setX () trong phương thức ngăn kéo bên dưới hoặc sao chép mã của tôi.

tập tin 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>

tập tin 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) {

        }
    });
 }
}

Cảm ơn bạn

Tôi sẽ đưa ra một số dự đoán táo bạo ở đây ...

Tôi giả sử họ có một bố cục đại diện cho menu không nhìn thấy được. Khi nhấn nút menu, chúng làm động bố cục / khung nhìn trên đầu để di chuyển ra khỏi đường và chỉ cần kích hoạt khả năng hiển thị của bố cục menu. Tôi đã không nghĩ về điều này gây ra bất kỳ vấn đề nào về chỉ số z trong các khung nhìn hoặc cách chúng kiểm soát điều đó.

Android đã thêm ngăn kéo điều hướng. Tham khảo cái này

liên kết

Dưới đây là hướng dẫn thiết kế và phát triển được tìm thấy trong tài liệu chính thức của Android không cần thêm thư viện bên ngoài không chính thức. Chỉ có thư viện hỗ trợ Android sẽ làm. Tìm các liên kết ở đây.

thiết kế và phát triển .

Ứng dụng Facebook Android có thể được xây dựng với Fragment . Menu là một Fragment, Activity chuyên sâu (Newsfeed / Events / Friends, v.v.) là Fragment khác. Về cơ bản bố cục 'chính & chi tiết' trên máy tính bảng.

Để biết thông tin, vì thư viện tương thích bắt đầu bằng 1.6 và ứng dụng facebook này cũng đang chạy trên các thiết bị có Android 1.5, không thể thực hiện được với Fragment.

Cách bạn có thể làm là: Tạo một hoạt động "cơ sở" BaseMothyActivity nơi bạn đặt tất cả logic cho onItemClickListener cho danh sách menu của bạn và xác định 2 hình động ("mở" và "đóng"). Ở phần cuối / bắt đầu của hình động, bạn hiển thị / ẩn bố cục của BaseMothyActivity (hãy gọi nó là menu_layout). Bố cục cho hoạt động này rất đơn giản, nó chỉ là một danh sách với các mục + một phần trong suốt ở bên phải danh sách của bạn. Phần này sẽ có thể nhấp và chiều rộng của nó sẽ có cùng chiều rộng với "nút di chuyển" của bạn. Cùng với đó, bạn sẽ có thể nhấp vào bố cục này để bắt đầu hoạt hình để cho content_layout trượt sang bên trái và chụp toàn bộ màn hình. Đối với mỗi tùy chọn (ví dụ: mục của danh sách menu), bạn tạo một "ContentActivity" để mở rộng BaseMothyActivity. Sau đó, khi bạn nhấp vào một mục trong danh sách, bạn bắt đầu ItemSelectedContentActivity với menu hiển thị (bạn sẽ đóng ngay khi hoạt động của bạn bắt đầu). Các bố cục cho mỗi ContentActivity là FrameLayout và bao gồm và. Bạn chỉ cần di chuyển content_layout và hiển thị menu_layout khi bạn muốn.

Đó là một cách để làm điều đó và tôi hy vọng tôi đã đủ rõ ràng.

Tôi đã chơi với điều này trong vài ngày qua và cuối cùng tôi đã đưa ra một giải pháp khá đơn giản và hoạt động trước Honeycomb. Giải pháp của tôi là tạo hiệu ứng cho Chế độ xem tôi muốn trượt ( FrameLayoutđối với tôi) và lắng nghe phần cuối của hình ảnh động (tại thời điểm đó để bù vị trí bên trái / bên phải của Chế độ xem). Tôi đã dán giải pháp của mình ở đây: Cách tạo hiệu ứng cho bản dịch của Chế độ xem

Sau khi tìm kiếm trong vài giờ, tôi thấy giải pháp của Paul Grime có lẽ là giải pháp tốt nhất. Nhưng nó có quá nhiều chức năng trong đó. Vì vậy, nó có thể khó học cho người mới bắt đầu. Vì vậy, tôi muốn cung cấp triển khai của tôi xuất phát từ ý tưởng của Paul nhưng nó đơn giản hơn và dễ đọc.

triển khai thanh menu bên bằng cách sử dụng mã java không có XML

Tôi đã không thấy SimonVT / android-menudrawer tuyệt vời được đề cập ở bất cứ đâu trong các câu trả lời ở trên. Vì vậy, đây là một liên kết

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

Nó rất dễ sử dụng và bạn có thể đặt nó ở bên trái, phải, trên hoặc dưới. Tài liệu rất tốt với mã mẫu và giấy phép Apache 2.0.

Vào tháng 6 năm 2012, Google đã thêm "các mẫu" trong plugin ADT của Eclipse và có một mẫu có tên là "luồng chính / chi tiết" thực hiện chính xác điều đó (dựa trên các đoạn mã)