it-swarm-vi.com

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?

enter image description here

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ị:

enter image description here

Video trên YouTube

281
Harsha M V

Bản thân tôi đã chơi một trò chơi này 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ư đứ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 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 trên Android

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

Screenshot from emulator (mid-scroll)

Ả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.

Screenshot from device (full-scroll)

176
Paul Grime

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 bản ghi 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

37
AlexKorovyansky

Đây là khác lib 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 đã quản lý để làm điều này như thế nào? Trượt ActionBar trong ứng dụng Android

24
Patrick

Tôi nghĩ ứ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 javascript như sencha . Nó có thể dễ dàng đạt được bằng cách sử dụng khung sencha.

enter image description here

22
Sanjay Kumar

Đây là một thư viện mã nguồn mở (rất đẹp) 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à github liên kết dự án

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

20
dwbrito

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ó tại đâ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: ActionsContentView Example

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

17
rude

Với bản sửa đổi gói hỗ trợ Android 13 (có thể 2013), có Ngăn kéo để tạo Ngăn kéo Điều hướng có thể được ké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

16
Wubao Li

Đã làm tròn mộ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 Một 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!

SlideMenu on GingerbreadSlideMenu on ICS with ActionBar

15
bk138

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

Ảnh chụp nhanh:

enter image description here

10
Edward

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

jfeinstein1 / 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ợ slide phải và không chỉ trượt qua nút!
10
madlymad

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 dự án github của anh ấy để khắc phục sự cố 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 :)

8
Fatal1ty2787

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 chấp nhận, 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

6
Rich

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ã tại đây

enter image description here

enter image description here

4
Mukesh Y

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 về 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! ;)

3
Andrius Baruckis

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 đ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 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) {

        }
    });
 }
}

enter image description here

Cảm ơn bạn

3
Dalvinder Singh

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

3
se.solovyev

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ỉ thư viện hỗ trợ Android sẽ làm. Tìm các liên kết ở đây.

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

2
jai_b

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 bật chế độ 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 đó.

2
jlindenbaum

Ứ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.

1
Gunnar Karlsson

Để 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"). Ở cuối/bắt đầu của hình ả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 trái và lấy toàn bộ màn hình. Đối với mỗi tùy chọn (nghĩa là 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.

1
p4u144

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.

1
lwegener

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

liên kết

1
Deepak Goel

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 cho tôi) và lắng nghe phần cuối của hình ảnh động (tạ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

1
Adil Hussain

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 trình đơn bên bằng cách sử dụng mã Java không có XML

1
Chao

Vào tháng 6 năm 2012, Google đã thêm "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ã)

0
rds